一直以為保持界面的一致性是很簡單的，但最近在復盤自己之前做的項目時，發現界面不夠統一，缺乏一致性，有些細節容易被忽略掉，根據自己的學習與見解，與大家分享一下如何提升界面設計的統一性~

01 .為什么要提升界面的統一性

在學習用戶體驗設計的基本原則時，提到一致性原則，為了減少用戶認知負荷，快速上手使用我們的產品，需要保持用戶熟悉的設計模式，那么就需要設計師們確保界面設計的統一性。

統一性的作用：

1.對于用戶：減少用戶認知，快速完成操作

2.對于團隊：建議統一整體的設計體系，提升設計效率

3.對于產品：加深用戶對產品品牌的認知，加深用戶對產品的印象

02 .如何提升界面設計的統一性？

在界面設計的過程中，設計師應該時刻關注自身品牌與設計規范，通過布局結構、視覺層次、設計風格等維度來達到設計的統一性。

我們可以重點從以下三個維度來提升界面的統一性。

一、布局結構維度

定義板式布局結構是我們做界面設計的第一步，我們需要確保頁面基礎布局的統一性。如在頁面布局時，會涉及頁邊距、導航欄、tab等這種基礎布局結構，我們需保持通用的設計模塊的布局統一性。布局結構的統一依賴于我們前期設計規范文檔的制定以及設計師對規范的熟悉度與使用~

?相同的頁邊距、固定的頂部導航、tab布局樣式

二、視覺層次維度

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

顏色

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

我們需要確保相同層級、相同功能的元素色彩保持統一。定義好品牌主色、輔助色和功能狀態色，在界面設計中，嚴格按照色彩規范來使用。

嚴格定義色彩使用規范

大小

大小統一性問題經常出現在字體、、圖標上。

字體大小

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

比例

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

圖標大小

同一模塊下的圖標需保持大小統一。在繪制圖標的時候建議使用圖標柵格來繪制，確保圖標視覺重量一致。

粗細

粗細的統一性主要是指描邊粗細的一致。粗細不一致的問題通常出現在分割線粗細、圖標粗細上。

分割線粗細

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

圖標描邊粗細

相同模塊的圖標粗細需要統一，這里也是需要從視覺上去達到統一。在antdesign的設計規范中，有指出彎曲的線條會比豎直的線條看起來細、傾斜的線條也會比豎直的線條看起來細一些，我們在做設計時，也應從視覺感受上進行靈活調整。

縱深

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

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

間距

在界面設計中我們也經常通過間距來拉開視覺層級。間距規則也很重要?。￡P于間距規則如何定義，可以參考此文章《方法論｜UI設計中的間距規則》

我們需要統一間距規則，反復使用到我們的界面設計中，使界面達到統一、具有節奏感，同時拉開視覺層級。

三、設計風格維度

在界面設計中，同類的設計元素、模塊盡量保持統一的設計風格。一致的設計風格讓界面整體更加統一和諧。

圖標風格的統一

功能屬性相同、層級相同的圖標應該采用相同的設計表達形式，確保圖標構圖、韻律、風格的統一性。

插畫風格的統一

缺省頁插圖應該采用統一的設計風格。為了突顯品牌在banner插圖設計中風格也需盡量保持統一。

開言英語banner插畫風格的統一

整體設計調性的統一

整體設計調性是針對整個app而言的。如果我們首頁采用卡片式風格，那么整體的重要頁面都應該采用一致的卡片式風格，而不是每個一級頁風格差異明顯。頁面橫向間風格的統一也是我剛工作時導師常強調的一點。

統一的設計風格

總結

在工作中，當我們設計完成后可以耐下心來檢查整個界面設計的一致性，橫縱向對比我們的設計元素否達到統一。我們可以從布局結構、視覺層次、設計風格這三個維度來提升界面設計的統一性。

布局結構：頁邊距、導航、tab欄、分段控件等模塊布局的統一

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

設計風格：圖標、插畫、整體設計調性的統一

通過提升界面設計的統一性，讓我們的設計更加規范統一，提升用戶體驗；審查界面的統一性，通過對細節的把控，也能讓我們在做設計的過程中變得更加仔細與嚴謹~