還記得那個(gè)每年都會(huì)總結(jié) UI 和視覺(jué)設(shè)計(jì)趨勢(shì)的資深設(shè)計(jì)師 Michal Malewicz 么，他最近開(kāi)始在推特上分享他日常工作中注意到的 UI 設(shè)計(jì)技巧，這些小技巧雖然零散，但是很好地總結(jié)了 UI 設(shè)計(jì)的一些常見(jiàn)問(wèn)題。

結(jié)合這些小貼士，對(duì)著自己的設(shè)計(jì)來(lái)進(jìn)行快速檢查，能夠定位并解決很多常見(jiàn)的小問(wèn)題。

1、盡量避免使用輪播圖指示器

絕大多數(shù)用戶都只會(huì)往下翻看頁(yè)面， 橫向翻頁(yè)的輪播圖多數(shù)時(shí)候用戶不會(huì)翻動(dòng)查看的。

• 輪播圖通常很難快速引起用戶的興趣。
• 如果可以盡量移除這個(gè)功能，或者使用其他的選項(xiàng)控件來(lái)替代它。

2、使用指向性明確的按鈕標(biāo)簽文本

按鈕標(biāo)簽文本內(nèi)容應(yīng)該始終指向明確的動(dòng)作，告訴用戶單擊此按鈕后會(huì)發(fā)生什么。避免「下一步」、「好的」 和其他模糊的操作名稱。

• 避免使用「確定」或「下一步」等模糊的操作。
• 按鈕的標(biāo)簽文本需要清楚地說(shuō)明將要發(fā)生的事情。

3、按鈕文本同樣需要層次結(jié)構(gòu)

當(dāng) UI 界面中有多個(gè)按鈕的時(shí)候，應(yīng)當(dāng)始終顯示哪些操作是主要的，哪些是次要的。避免讓兩個(gè)操作對(duì)應(yīng)的按鈕在外觀上是相同的，因?yàn)檫@需要用戶更長(zhǎng)的時(shí)間分辨，可能會(huì)讓人感到困惑。

• 清楚地顯示哪些動(dòng)作是 主要的1，哪些是次要的2 。
• 避免讓兩個(gè)操作按鈕在視覺(jué)上看起來(lái)是相同的

4、避免使用筆觸太纖細(xì)的字體

筆觸太纖細(xì)的字體在閱讀上畢竟困難，尤其是在正常字號(hào)的情況下，還會(huì)讓文本看起來(lái)并不重要。

• 常規(guī)、半粗體和粗體的字體更易于閱讀，并且有著更好的可訪問(wèn)性。
• 避免在您的項(xiàng)目中使用筆觸過(guò)于纖細(xì)的字體。

5、圖標(biāo)風(fēng)格樣式應(yīng)當(dāng)保持一致

混合不同類型的圖標(biāo)(比如 描邊樣式 vs 填充樣式)，會(huì)使設(shè)計(jì)給人感覺(jué)比較混亂，尤其是很多圖標(biāo)在被觸發(fā)狀態(tài)下，會(huì)從描邊樣式切換為填充樣式，不同樣式在同一狀態(tài)下混用，可能會(huì)和用戶的認(rèn)知預(yù)期相悖，導(dǎo)致迷惑。

• 所有的圖標(biāo)都應(yīng)該具有完全相同的樣式、風(fēng)格和形式。
• 不要將填充的圖標(biāo)與輪廓的圖標(biāo)混合在一起。

6、在按鈕中保持足夠多的空白

缺少足夠留白控件的的按鈕在視覺(jué)上是非常不美觀的，一方面會(huì)導(dǎo)致使消息難以閱讀，另一方面，會(huì)讓設(shè)計(jì)顯得完成度不足。

• 比較安全的選擇是文本距離邊緣至少有一個(gè)「x高度」的距離，如果是2倍則更好。
• 避免使用文本標(biāo)簽周圍留白太少的按鈕。

7、避免使用紅色星號(hào)來(lái)標(biāo)識(shí)必填字段

如今的移動(dòng)端表單設(shè)計(jì)傾向于不使用紅色星號(hào)來(lái)強(qiáng)調(diào)必填字段，而是盡量只為用戶提供必填的字段，并且錯(cuò)誤的字段順序會(huì)使得填寫表格非常耗時(shí)。

• 如果可以，請(qǐng)改為文字標(biāo)明是「選填」或干脆去掉這些字段。
• 避免使用紅色星號(hào)來(lái)表示必填，并盡量只讓用戶填寫必要的字段。

8、避免使用多欄表格

雖然多欄表格的空間利用率更高，但是體驗(yàn)和可用性并不好，采用排列在一列的表格會(huì)更加更加清晰易讀，也易于填寫。

• 將表單保留為一列，以便于快速閱讀和填寫。
• 盡可能避免使用多列表單!

9、盡量避免在表單中使用下劃線標(biāo)識(shí)字段

將需要填寫的表單使用下劃線來(lái)表示，對(duì)于用戶來(lái)說(shuō)不是很明顯，通常用戶需要花費(fèi)更長(zhǎng)的時(shí)間才能理解下劃線意味著待填寫的表單。

• 用戶需要更長(zhǎng)的時(shí)間才能理解下劃線字段為需要填寫的表單。
• 輸入框具有清晰可見(jiàn)的邊界，也可以很輕松地被理解。

10、消息通知的屬性和色彩、符號(hào)保持一致

對(duì)于信息不明確或者矛盾的通知，很容易讓用戶感到迷惑，主要是它的含義(表示肯定還是否定)和所對(duì)應(yīng)的視覺(jué)標(biāo)識(shí)(比如顏色、圖標(biāo)、符號(hào))應(yīng)當(dāng)相互匹配，否則用戶會(huì)很難確定這個(gè)信息的準(zhǔn)確性。

1. 避免使用矛盾的信息，傳達(dá)不明確的信息。
2. 清楚告訴用戶發(fā)生了什么以及接下來(lái)要做什么。

11 、避免使用太小的點(diǎn)擊區(qū)域

太小的點(diǎn)擊區(qū)域，無(wú)論是在移動(dòng)端UI 還是桌面端 UI 上都會(huì)降低用戶的舒適度，并且常常令人感到困惑。

• 較大的控件尺寸在桌面上更易于使用。
• 即使在桌面上，也要盡量避免較小的點(diǎn)擊區(qū)域。

12、表單輸入框盡量避免使用圓形邊緣

圓形表單輸入框在視覺(jué)上總不是太好處理，即使文本和輸入框?qū)R了，在視覺(jué)上也會(huì)很奇怪。