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

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

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

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

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

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

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

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

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

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

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

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

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

二、視覺層次維度

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

顏色

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

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

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

大小

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

字體大小

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

比例

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

圖標(biāo)大小

同一模塊下的圖標(biāo)需保持大小統(tǒng)一。在繪制圖標(biāo)的時候建議使用圖標(biāo)柵格來繪制，確保圖標(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è)計規(guī)范中，有指出彎曲的線條會比豎直的線條看起來細(xì)、傾斜的線條也會比豎直的線條看起來細(xì)一些，我們在做設(shè)計時，也應(yīng)從視覺感受上進(jìn)行靈活調(diào)整。

縱深

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

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

間距

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

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

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

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

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

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

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

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

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

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

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

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

總結(jié)

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

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

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

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

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