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