# UI設計 版面審視
###### tags: `切切切`

## 》輪播圖不要有出框的設計

>輪播的圖以後客戶會自己上圖，他們可能不會有像這樣「出框」的設計。
如果切版時滿足了這張圖的情況，客戶自己上的圖就會有問題


>大區塊有垂直互相重疊的設計。這個切版沒問題，但在實務上，客戶會調換區塊的上下順序，呈現出來就不如設計稿這麼理想。如果是單一站要用的版，還可以依據需求調整。但如果是多站要用的公版，建議每個區塊有明確的界線較好。

## 》注音字型

注音字型目前除了[王漢宗注音](https://zh.wikipedia.org/zh-tw/%E7%8E%8B%E6%BC%A2%E5%AE%97%E8%87%AA%E7%94%B1%E5%AD%97%E5%9E%8B)的中明注音體可免費使用外，其餘的要注意是否侵權

ButTaiwan提供的多種免費注音字體下載
> 開源自由字型
以常見開放原始碼條款釋出的字型。原則上都可商用、再散佈，並且可以自行改造，不過改造後的字型通常需以相同授權條款釋出。

* https://www.pkstep.com/archives/68398
* https://github.com/ButTaiwan/bpmfvs/releases


## 》文字背景對比值
>成功準則1.4.3：對比值(最小) (檢測等級AA)[color=#009ee7]

除非是下列各款中的例外情形，否則文字及影像文字的視覺呈現，至少要有<font color="#EE428B">4.5:1</font>的對比值：
* 大尺寸的文字及大尺寸的影像文字至少要有<font color="#EE428B">3:1</font> 的對比值。

[網站無障礙規範](https://hackmd.io/1lZrZLcYTf6Cu4Zho4bazA)

>成功準則1.4.6：對比值(增強) (檢測等級AAA)[color=#009ee7]

除非是下列各款中的例外情況，否則文字及影像文字的視覺呈現至少要有<font color="#EE428B">7:1</font>的對比值：

* 大尺寸的文字及大尺寸的影像文字至少要有<font color="#EE428B">4.5:1</font> 的對比值。



## 》底圖延伸

當點進階查詢後，要考慮進階查詢的內容如何呈現
* 若是在原地展開，就要考慮到背景圖延伸的問題，背景圖要做高一點
* 若背景不好延伸，可以考慮進階查詢的內容是連結至內頁呈現或開燈箱處理