16條前端 UI 設(shè)計(jì)規(guī)則,上萬(wàn)點(diǎn)贊
以一個(gè)卡片為例子，逐一按照規(guī)則進(jìn)行優(yōu)化，左邊是原圖，右邊是經(jīng)過(guò)優(yōu)化后的設(shè)計(jì)。
- 使用間距對(duì)相關(guān)元素進(jìn)行分組
- 一致性
- 確保功能相似外觀也相似
- 清晰的視覺(jué)層次
- 移除不必要的樣式
- 有目的的使用顏色
- 確保界面元素的對(duì)比度為3:1
- 確保文本的對(duì)比度為4.5:1
- 不要僅僅使用顏色作為指標(biāo)
- 使用單一的無(wú)襯線字體
- 使用較高小寫字母的字體
- 限制使用大寫字母
- 僅使用常規(guī)和加粗字體
- 避免純黑色文本
- 左對(duì)齊文字
- 正文至少使用1.5倍行高
使用間距對(duì)相關(guān)元素進(jìn)行分組
- 相關(guān)元素放在同一容器
- 相關(guān)元素看起來(lái)相似
- 對(duì)齊
一致性
UI設(shè)計(jì)中一致性意味著有相似的外觀和行為方式，可預(yù)測(cè)的功能提高了可用性并減少了錯(cuò)誤。
確保功能相似外觀也相似
如果元素看起來(lái)相似，會(huì)期望它們以相似的行為反應(yīng)，盡量確保相同功能的元素使用一致的視覺(jué)處理，讓不同功能的元素視覺(jué)做差異化處理。
清晰的視覺(jué)層次
創(chuàng)造秩序感來(lái)改善美學(xué)，可以使用大小、顏色、對(duì)比度、間距、位置和深度的變化創(chuàng)建清晰的視覺(jué)層次。
移除不必要的樣式
不必要的信息和視覺(jué)風(fēng)格會(huì)分散注意力，增加認(rèn)知負(fù)擔(dān)，避免不必要的線條、顏色、背景和動(dòng)畫，以創(chuàng)建更簡(jiǎn)單、更集中的UI.
有目的的使用顏色
有節(jié)制有目的的使用顏色，盡量避免使用純粹的顏色來(lái)裝飾，它可能會(huì)混淆和分心，從黑色和白色開始，在表達(dá)含義的地方再引入顏色。一個(gè)簡(jiǎn)單有效的方法是將品牌顏色應(yīng)用于鏈接和按鈕等交互元素上，盡量避免在非互動(dòng)元素上使用品牌顏色。
確保界面元素的對(duì)比度為3:1
為了確保視覺(jué)障礙人士能夠清楚看到界面細(xì)節(jié)，至少要滿足web內(nèi)容可訪問(wèn)性指南的顏色對(duì)比要求。
確保文本的對(duì)比度為4.5:1
小文本18px以下要4.5:1的最小對(duì)比度，大文本需要3:1的對(duì)比度，示例中可增加灰色不透明度增加文本的陰影，將對(duì)比度達(dá)到4.5:1以上。
不要僅僅使用顏色作為指標(biāo)
通常，色盲人士很難區(qū)分紅色和綠色，或者根本看不到，所以不能僅僅依靠顏色傳達(dá)意義或者區(qū)分視覺(jué)元素，需要使用額外的提示來(lái)區(qū)分。示例中去掉顏色，鏈接和其他文本一致，無(wú)法判斷是鏈接，可使用下劃線方式區(qū)分。
使用單一的無(wú)襯線字體
無(wú)襯線字體通常是最清晰、中性、簡(jiǎn)單的，標(biāo)題使用了一種詳細(xì)的襯線字體，這有點(diǎn)難以閱讀，可能會(huì)分散一些人的注意力。
使用較高小寫字母的字體
小寫字母較高、間距較大的字體在小尺寸時(shí)更容易辨認(rèn)。
限制使用大寫字母
大寫單詞有相同的矩形形狀，會(huì)迫使你逐一閱讀每個(gè)單詞，很難閱讀。
僅使用常規(guī)和加粗字體
使用不同粗細(xì)的字體可能會(huì)給界面增加混亂，使用規(guī)則的加粗字體，使界面簡(jiǎn)單明了。
小技巧：
- 標(biāo)題使用加粗來(lái)強(qiáng)調(diào)
- 較小的字體使用常規(guī)字體
- 如果你確定使用很粗的字體，請(qǐng)使用在標(biāo)題或者很大的文本
避免純黑色文本
純黑與白色有很高的對(duì)比度，會(huì)導(dǎo)致閱讀文本時(shí)眼睛疲勞，安全的做法是避免純黑黑白色搭配。示例中描述文本過(guò)于突出，使用了較淺的灰色。
左對(duì)齊文字
對(duì)于長(zhǎng)文本，安全的做法避免使用居中對(duì)齊，居中對(duì)齊對(duì)于有認(rèn)知障礙的認(rèn)識(shí)更難閱讀。居中對(duì)齊可用于標(biāo)題或者短文本，因?yàn)樗煽焖匍喿x。
正文至少使用1.5倍行高
行高是兩行文字之間的垂直距離。行與行之間的間隔有助于防止人們重讀同一行文本，閱讀起來(lái)也更舒適。
