一直以為保持界面的一致性是很簡(jiǎn)單的，但最近在復(fù)盤自己之前做的項(xiàng)目時(shí)，發(fā)現(xiàn)界面不夠統(tǒng)一，缺乏一致性，有些細(xì)節(jié)容易被忽略掉，根據(jù)自己的學(xué)習(xí)與見解，與大家分享一下如何提升界面設(shè)計(jì)的統(tǒng)一性~

01 .為什么要提升界面的統(tǒng)一性

在學(xué)習(xí)用戶體驗(yàn)設(shè)計(jì)的基本原則時(shí)，提到一致性原則，為了減少用戶認(rèn)知負(fù)荷，快速上手使用我們的產(chǎn)品，需要保持用戶熟悉的設(shè)計(jì)模式，那么就需要設(shè)計(jì)師們確保界面設(shè)計(jì)的統(tǒng)一性。

統(tǒng)一性的作用：

1.對(duì)于用戶：減少用戶認(rèn)知，快速完成操作

2.對(duì)于團(tuán)隊(duì)：建議統(tǒng)一整體的設(shè)計(jì)體系，提升設(shè)計(jì)效率

3.對(duì)于產(chǎn)品：加深用戶對(duì)產(chǎn)品品牌的認(rèn)知，加深用戶對(duì)產(chǎn)品的印象

02 .如何提升界面設(shè)計(jì)的統(tǒng)一性？

在界面設(shè)計(jì)的過(guò)程中，設(shè)計(jì)師應(yīng)該時(shí)刻關(guān)注自身品牌與設(shè)計(jì)規(guī)范，通過(guò)布局結(jié)構(gòu)、視覺層次、設(shè)計(jì)風(fēng)格等維度來(lái)達(dá)到設(shè)計(jì)的統(tǒng)一性。

我們可以重點(diǎn)從以下三個(gè)維度來(lái)提升界面的統(tǒng)一性。

一、布局結(jié)構(gòu)維度

定義板式布局結(jié)構(gòu)是我們做界面設(shè)計(jì)的第一步，我們需要確保頁(yè)面基礎(chǔ)布局的統(tǒng)一性。如在頁(yè)面布局時(shí)，會(huì)涉及頁(yè)邊距、導(dǎo)航欄、tab等這種基礎(chǔ)布局結(jié)構(gòu)，我們需保持通用的設(shè)計(jì)模塊的布局統(tǒng)一性。布局結(jié)構(gòu)的統(tǒng)一依賴于我們前期設(shè)計(jì)規(guī)范文檔的制定以及設(shè)計(jì)師對(duì)規(guī)范的熟悉度與使用~

?相同的頁(yè)邊距、固定的頂部導(dǎo)航、tab布局樣式

二、視覺層次維度

在界面設(shè)計(jì)中我們通常通過(guò)顏色、大小、粗細(xì)、縱深、間距來(lái)拉開界面的視覺層級(jí)，視覺層次維度是需要我們重點(diǎn)關(guān)注的~有時(shí)在做設(shè)計(jì)的過(guò)程中我們會(huì)做著做著就放飛自我，追求差異與創(chuàng)新，忽略了視覺層級(jí)關(guān)系的統(tǒng)一性問題。

顏色

色彩不統(tǒng)一的問題比較容易出現(xiàn)在界面設(shè)計(jì)中。特別是出現(xiàn)在一些狀態(tài)顏色區(qū)分上。不同狀態(tài)的色彩應(yīng)該嚴(yán)格定義，使用時(shí)保持統(tǒng)一。比如有時(shí)會(huì)遇到這種情況，一個(gè)頁(yè)面中已完成狀態(tài)用灰色，在另一個(gè)頁(yè)面中卻用了綠色，這種情況是初級(jí)設(shè)計(jì)師比較常犯的錯(cuò)誤。

我們需要確保相同層級(jí)、相同功能的元素色彩保持統(tǒng)一。定義好品牌主色、輔助色和功能狀態(tài)色，在界面設(shè)計(jì)中，嚴(yán)格按照色彩規(guī)范來(lái)使用。

嚴(yán)格定義色彩使用規(guī)范

大小

大小統(tǒng)一性問題經(jīng)常出現(xiàn)在字體、、圖標(biāo)上。

字體大小

前期制定好字體規(guī)范后就應(yīng)該嚴(yán)格遵循，正文比如使用14px，那么所有的正文都應(yīng)該使用14px，不要為了美觀而刻意的去調(diào)整字號(hào)。

比例

我們需要重視的比例大小。在同一業(yè)務(wù)模塊中比例應(yīng)該是統(tǒng)一的，這也有助于產(chǎn)品后期按比例配圖，確保效果。比如feed流采用1：1，banner圖采用白銀比例，那么我們?cè)诮缑嬖O(shè)計(jì)中，出現(xiàn)對(duì)應(yīng)模塊下的時(shí)，比例大小也應(yīng)用我們定義好的比例，而不是每個(gè)頁(yè)面隨意定義。

圖標(biāo)大小

同一模塊下的圖標(biāo)需保持大小統(tǒng)一。在繪制圖標(biāo)的時(shí)候建議使用圖標(biāo)柵格來(lái)繪制，確保圖標(biāo)視覺重量一致。

粗細(xì)

粗細(xì)的統(tǒng)一性主要是指描邊粗細(xì)的一致。粗細(xì)不一致的問題通常出現(xiàn)在分割線粗細(xì)、圖標(biāo)粗細(xì)上。

分割線粗細(xì)

分割線建議用0.5px的描邊大小，從一開始就做成組件形式，后續(xù)要調(diào)整粗細(xì)或者顏色都可以全局調(diào)整。

圖標(biāo)描邊粗細(xì)

相同模塊的圖標(biāo)粗細(xì)需要統(tǒng)一，這里也是需要從視覺上去達(dá)到統(tǒng)一。在antdesign的設(shè)計(jì)規(guī)范中，有指出彎曲的線條會(huì)比豎直的線條看起來(lái)細(xì)、傾斜的線條也會(huì)比豎直的線條看起來(lái)細(xì)一些，我們?cè)谧鲈O(shè)計(jì)時(shí)，也應(yīng)從視覺感受上進(jìn)行靈活調(diào)整。

縱深

對(duì)象離地面越遠(yuǎn)陰影越大，模糊值越高，在UI設(shè)計(jì)中也是如此，我們主要通過(guò)陰影來(lái)達(dá)到縱深感。通過(guò)設(shè)置陰影參數(shù)來(lái)拉開視覺層級(jí)。

我們可參照ant design將卡片縱深分為無(wú)、低、中、高四個(gè) UI 層級(jí)，各自分布在不同的高度層級(jí)，陰影屬性也有所不同。相同層級(jí)模塊的陰影應(yīng)該保持統(tǒng)一，方便復(fù)用與開發(fā)。

間距

在界面設(shè)計(jì)中我們也經(jīng)常通過(guò)間距來(lái)拉開視覺層級(jí)。間距規(guī)則也很重要??！關(guān)于間距規(guī)則如何定義，可以參考此文章《方法論｜UI設(shè)計(jì)中的間距規(guī)則》

我們需要統(tǒng)一間距規(guī)則，反復(fù)使用到我們的界面設(shè)計(jì)中，使界面達(dá)到統(tǒng)一、具有節(jié)奏感，同時(shí)拉開視覺層級(jí)。

三、設(shè)計(jì)風(fēng)格維度

在界面設(shè)計(jì)中，同類的設(shè)計(jì)元素、模塊盡量保持統(tǒng)一的設(shè)計(jì)風(fēng)格。一致的設(shè)計(jì)風(fēng)格讓界面整體更加統(tǒng)一和諧。

圖標(biāo)風(fēng)格的統(tǒng)一

功能屬性相同、層級(jí)相同的圖標(biāo)應(yīng)該采用相同的設(shè)計(jì)表達(dá)形式，確保圖標(biāo)構(gòu)圖、韻律、風(fēng)格的統(tǒng)一性。

插畫風(fēng)格的統(tǒng)一

缺省頁(yè)插圖應(yīng)該采用統(tǒng)一的設(shè)計(jì)風(fēng)格。為了突顯品牌在banner插圖設(shè)計(jì)中風(fēng)格也需盡量保持統(tǒng)一。

開言英語(yǔ)banner插畫風(fēng)格的統(tǒng)一

整體設(shè)計(jì)調(diào)性的統(tǒng)一

整體設(shè)計(jì)調(diào)性是針對(duì)整個(gè)app而言的。如果我們首頁(yè)采用卡片式風(fēng)格，那么整體的重要頁(yè)面都應(yīng)該采用一致的卡片式風(fēng)格，而不是每個(gè)一級(jí)頁(yè)風(fēng)格差異明顯。頁(yè)面橫向間風(fēng)格的統(tǒng)一也是我剛工作時(shí)導(dǎo)師常強(qiáng)調(diào)的一點(diǎn)。

統(tǒng)一的設(shè)計(jì)風(fēng)格

總結(jié)

在工作中，當(dāng)我們?cè)O(shè)計(jì)完成后可以耐下心來(lái)檢查整個(gè)界面設(shè)計(jì)的一致性，橫縱向?qū)Ρ任覀兊脑O(shè)計(jì)元素否達(dá)到統(tǒng)一。我們可以從布局結(jié)構(gòu)、視覺層次、設(shè)計(jì)風(fēng)格這三個(gè)維度來(lái)提升界面設(shè)計(jì)的統(tǒng)一性。

布局結(jié)構(gòu)：頁(yè)邊距、導(dǎo)航、tab欄、分段控件等模塊布局的統(tǒng)一

視覺層次：從色彩、大小、粗細(xì)、間距、縱深維度拉開視覺層級(jí)，確保同一層級(jí)元素的視覺統(tǒng)一性

設(shè)計(jì)風(fēng)格：圖標(biāo)、插畫、整體設(shè)計(jì)調(diào)性的統(tǒng)一

通過(guò)提升界面設(shè)計(jì)的統(tǒng)一性，讓我們的設(shè)計(jì)更加規(guī)范統(tǒng)一，提升用戶體驗(yàn)；審查界面的統(tǒng)一性，通過(guò)對(duì)細(xì)節(jié)的把控，也能讓我們?cè)谧鲈O(shè)計(jì)的過(guò)程中變得更加仔細(xì)與嚴(yán)謹(jǐn)~