2021-1-13 資深UI設計者
為什么ui要有一致性設計
大家有沒有聽說過一次性設計
一次性設計就是，我今天投入成本完成了一個界面或者營銷需求，但也只是完成了這個需求而已，今后再碰到類似的需求依然吃癟，還得重新投入一輪成本。這種設計就好像一次性的碗筷，用后即扔，非常非常得低效，它不僅沒有辦法復用，而且無體系、非模塊的處理方式非常摧殘設計師的精力。
所以保持一致性設計也是可以提升操作的一致性、提高工作效率、延續(xù)品牌定位……而且一致性設計是UI和開發(fā)交接的一種很好的辦法。
一致性設計的好處
1.復用資源，降低設計成本
很多不同的界面中會用到同一個資源，如果見一個重做一個，會很大程度浪費設計的人力資源
2.產品風格及體驗不易出問題
因為資源的復用，能基本保證整個產品的風格不跑偏，而在用戶體驗上，也起碼能保持在一貫的水準
3.新人可以快速上手
比較大型的項目中如果人員流動率較高，一致性就相當有必要了。新人先閱讀規(guī)范后更容易展開工作，根據一致性也能更快了解當前產品
4.程序能提高開發(fā)速度
主要也是因為能夠復用自用資源，有些界面和控件，程序甚至無需找設計出資源，在產品策劃指導下可直接開發(fā)
1.對界面和功能操作的認知統(tǒng)一，學習成本低
熟悉過主要界面/功能后，在其他界面/功能中能基本自由操作
比如在北京開車是靠右行駛，到上海你不用學就知道也是這樣。因為中國道路交通相關法律中對此是做了統(tǒng)一規(guī)范的。要是這一點不一致的話，到上海突然讓你靠左行駛，你肯定要適應一段時間并難免犯錯.....
2.提高操作效率
在降低了認知成本后，用戶很容易就熟悉了產品的設計風格，那么操作起來自然也更容易上手，效率也更高
3.加強對產品（品牌）辨識度
別人一看很容易辨識出：哦，這是某某等那個產品
常見的產品中保持一致性設計的例子非常多，相信各位天天見，我就不啰嗦了。
一致性的規(guī)范提現在哪里
設計規(guī)范是一個老生常談的話題了，網上相關的文章也非常多，但我相信有很多設計師對設計規(guī)范的理解還是比較模糊，認為設計規(guī)范指的就是字體，顏色，控件規(guī)范那些，這種理解其實是比較狹隘的。
于我而言，設計規(guī)范用一句話總結就是：設計規(guī)范是針對特定產品所制定出來的一整套產品標準，包括流程標準，技術標準，設計規(guī)則等等。
今天就只來說最基礎的幾個小方面（也算是干貨滿滿了）
顏色
字體
組件
交互
其他的一些需要大家根據自己的產品定義
顏色
顏色的搭配和選擇影響著產品最后呈現出來的視覺效果，合理的顏色配比能加深用戶對品牌的印象。色彩無處不在。
那我們如何去定義顏色規(guī)范呢，下面本人分享一套規(guī)范，小伙伴們可以根據自己的產品進行套用（如果不對大佬勿噴，一起學習）
首先要定義基本色。理想情況下應該有1-3個基本色與產品相關聯。
基本顏色的使用場景主要是
突出顯示重要的界面狀態(tài)或信息
在交互方面：如文本字段切換、復選框等
根據數據反饋60%+30%+10%是是整體畫面最有平衡感，也是用戶最滿意的方案引導用戶的視線從一個CTA區(qū)域平滑移動到另一個區(qū)域。
60%的空間用于主色調
30%是空間輔助/次要顏色
如圖
按其他順序搭配，它仍然有效
3.了解受眾
好的用戶體驗的關鍵是理解受眾。顏色在這里起著重要的作用，因為顏色的選擇會影響用戶與產品交互時的感受和情緒。
你需要考慮的問題
誰是你的目標受眾？
他們的年齡？
產品的專業(yè)化是什么？
你想讓產品喚起什么樣的情感？
注意：與團隊討論選擇時，請始終關注這些問題。
如果你想把用戶的注意力集中在特定的操作上，最好使用強對比度的顏色來幫助用戶找到焦點。
通過這種小技巧檢查顏色的飽和度，能看到別人看不見的東西。
另外分享一些將圖像生成調色板的實用工具：
Coolors.co/image-picker（Web app）
Alembic(Sketch插件)
Image-Palette(Figma插件)
字體
在項目中文案風格也要和產品定位統(tǒng)一，各個界面出現的文字提示等要風格統(tǒng)一。
主要從五個方面入手
類型
字號
字重
行高
行寬
iOS設備的系統(tǒng)默認字體，中文為蘋方，英文&數字為SF UI Text。
Android設備系統(tǒng)默認字體，中文為思源黑體，英文&數字為Roboto。
不同的使用場景，文字的字號也不相同。文字的主使用場景分為：一級標題、二級標題、三級標題、正文和提示文字 。
通常最小字號為12px也有文字最小字號為11px的，特殊情況下，字號為10甚至可能更小，例如標簽里面的文字。
字重就是指字體筆畫的粗細。字重的等級是用來標明同一字體家族中不同粗細筆畫的字型。
UI設計中，常用的字重有兩個，一個是常規(guī)（Regular），另一個是中黑體（ Medium）。
正常文字使用常規(guī)體（Regular）。當需要突出層級展示，增加對比時使用中黑體（ Medium），中黑體（ Medium）常用于標題。
字號大小等于文字高度，如下圖所示，字號為16時，行高設置為16，那么其行高也是字體本身的高度（16pt）。
如下圖所示：行間距距離文字上方為3pt，行間距距離文字下方也為3pt。字體高度為16pt。
舉個例子，設計一個標簽時，當字號為14時，行高為20，那么為了保持視覺上字體到四周距離相同，那么上下間距為4，左右間距為8。
因為行間距的存在，不能將上下間距和左右間距設置相同。
如果行高設置為14（文字本身大?。?，那么上下間距應該也為8pt，而非4pt。
下圖是Sketch默認字號和行高對照表
行寬=字體寬度+兩側距離字體的寬度
將行寬拉長，代表著設置了文本內容范圍，文本距離右側語音圖標為12pt，表示當文字內容距離語音圖標12pt時，文字打點或截斷展示。
組件
組件的使用場景有很多今天借一個例子來分析和總結，讓大家了解和認識組件的使用和規(guī)范。
那就來個最基本的：頂部欄設計
組成
變化
交互方式
來認識組件的模式和規(guī)則
頂部欄的常見樣式
頂部欄是什么樣子，它由什么組成？
通常，頂部欄提供有關此頁面總體的信息，以及用戶可能對該頁面進行的潛在操作。常見的頂部欄如下所示：
頂部欄中常見的組件包括：標題、容器、操作項、導航圖標等，接下來為大家逐一介紹各個組件的使用。
頂部標題通常與底部導航一起使用，共同解釋頁面的信息。
如果一個頁面中底部導航只有圖標沒有文字解釋，用戶有可能不了解圖標的意思，那么解釋頁面信息的重任就落在了頂部欄的標題上。
大多數情況下，標題位于頂部欄的中間，有時也會在左上角有一個很大的標題作為導航（IOS應用中）。除了解釋頁面的目的，大標題還可以用于品牌推廣。
標題也可以解釋用戶在這個頁面上執(zhí)行的操作。例如，當用戶想修改個人資料時，標題會顯示“edit profile”，用來解釋操作。
有時，在頂部欄主標題的下方會有補充文本，這樣方便為用戶提供更多的信息。
容器的趨勢越來越不明顯。容器通常是灰色或者不飽和的顏色，有時容器也會使用品牌主題色，起到宣傳和推廣品牌的作用。
操作項通常以圖標和文本按鈕的形式出現在頂欄上 ，當需要時可以在頂欄上顯示0-4個圖標或文本按鈕。
在不同的頁面中操作項可能代表不同的含義，但一些常見的圖標/操作遵循著一定的規(guī)則：
1、返回：當用戶進入第二/第三層級頁面時，“返回”通常出現在左上角。單擊“返回”圖標可引導用戶回到原始頁面。
2、關閉或取消的位置不固定，可以在左側也可以在右側，具體取決于是否有其他操作。
這里討論一個常見的問題，頂部欄中“返回”和“關閉”分別應該在什么情況下使用：使用“返回”：當用戶在一個漫長的探索過程中需要不止一步的操作，或者在該頁面上沒有一個簡短而明確的目的時。使用“關閉”：表示一個完整的單頁操作，它有明確的起點和終點，在頁面上執(zhí)行特定的操作實現特定的目的。
3、個人資料或帳戶有時會出現在頂部欄上，以方便用戶編輯個人信息，設置或切換帳戶。
4、添加或搜索可幫助用戶瀏覽更多內容或者擴展他們感興趣的區(qū)域，通常出現在右上角作為易觸摸的目標。
需要注意的一點是，為了避免引起不必要的關注，頂部欄上的圖標/文本按鈕通常是線性圖標而不是填充圖標，并且是非飽和顏色。除非它們確實想吸引用戶的注意，或者為了提示用戶進行操作。
使用App時我們會發(fā)現，有的頁面頂部欄中沒有標題，而是增加了一個搜索框(淘寶首頁)。
根據特定的需要，可以將搜索用在不同頁面的頂欄上，因為它在用戶瀏覽內容時為用戶提供了更多的價值。
什么時候放棄使用頂部欄？
當頂部有很多內容時，一些App會讓頂部欄變得非常簡單甚至完全舍棄。
在Robinhood頂部顯示最重要的用戶信息——每日投資增長，右上角只有一個提示文本按鈕，用來邀請好友。
放棄使用頂部欄的常見案例是個人資料頁面。這樣做的目的是自我暗示，這個頁面自己可以掌控，個人信息在頂部占據了很大的空間。
一個頁面中可以有很多交互發(fā)生，有時頂部欄需要通過改變樣式或內容來反映交互動作。
反映滑動位置
下滑出現頂部欄:當頂部欄有許多重要信息但又占用大量空間的情況下，頂欄的內容可能會根據滾動位置而變化。當用戶下拉頁面以獲取更多內容時頂部欄會出現。
下滑隱藏上拉出現:另一種形式是在Google搜索中，用戶向下滑動頂部搜索框會隱藏(Google猜測用戶希望集中精力瀏覽內容)，但是只要用戶向上滑動，中止瀏覽過程，頂欄搜索框又會出現。
不管交互形式如何，這類頂部欄能在用戶需要時快速顯示：
用戶可以進行搜索功能或常見操作；
標題/重要信息作為參考，提醒用戶在哪個頁面。
下滑隱藏頂部欄:對于那些不會影響用戶需求和操作求的頂部欄，通常會隨著頁面的向下滑動而隱藏。
星巴克頂部有一個令人愉快的問候語，當用戶向下滑動并嘗試選擇要喝哪種咖啡時，它會隨著頁面滑動而消失。
Airbnb會在頂部展示房屋圖片，以便給用戶留下深刻印象，但是當用戶向下滑動時，頂部的圖片也會跟著滑動。
反映當前頁面的變化
有時，頂部欄的信息會根據內容的變化而實時發(fā)生改變。
最常見的案例是收到消息時的反饋：在微信中，頂部標題會顯示用戶收到信息數量的變化；Instagram通過頂部小紅點的變化來展示收到的消息。
作為頁面中必不可少的一部分，交互式頂欄減輕了頁面中其它元素的負擔。除了常見的圖標或文本按鈕(添加、取消、后退)的變化，在頂部欄中還會發(fā)生哪些有趣的交互？
互動標題
有的產品服務非常依賴于用戶的偏好、位置，例如常見的外賣或打車軟件。
在這種情況下，App通常依靠用戶的初始輸入來決定顯示的內容，用戶也可以直接在頂欄標題上編輯信息。
交互式圖標/文本按鈕 交互式圖標/文本按鈕意味著用戶可以在頂部欄上執(zhí)行某些操作，而不必離開此頁面。在robinhood中用戶可以在不用切換頁面的情況下，直接選擇購買股票要用的計算方法，或者把頁面上的股票添加到自己的收藏中。
頂部導航
有的App希望在一個頁面中能顯示多個平行的內容，所以會在頂部欄上設置多個選項，實現更方便的導航。
常見的頂部導航包括分段控件和標簽導航:
分段控件導航選項一般不支持左右滑動,選項較少，；標簽導航選項的設計更多樣，支持左右滑動切換。
https://www.xueui.cn/experience/app-experience/top-bar-ui-design-patterns-and-rules.html
研究過程可能會花費很多的時間和精力，卻能讓我們真正受益。
總結
一致性設計大方向為產品有更杰出的體驗，在保證用戶體驗良好的同時，我們需要與同類產品做出差異化競爭設計，這就需要我們平時多觀察互聯網設計趨勢，國外設計趨勢，集合自己品牌去打造一套好用的產品。
這里推薦幾個必看的大廠設計規(guī)范官網，建議收藏。
蘋果iOS設計官網：https://developer.apple.com/design/human-interface-guidelines
谷歌Material Design設計官網：https://material.io/design
微軟Fluent Design System設計官網：https://www.microsoft.com/design/fluent
IBM設計官網：https://www.ibm.com/design/language
Facebook設計官網：https://design.facebook.com
螞蟻金服設計官網：https://ant.design/index-cn
其實，規(guī)范也是要在遵守和引領用戶習慣中不斷迭代的。既要保持大的設計規(guī)范框架不變化，又要在設計的過程中給用戶制造驚喜。比如，整個UI的配色和字體需要保持統(tǒng)一，但在一些圖形，動效上可以做出亮點，讓用戶在整個使用體驗中既是沉浸的又能有些小驚喜。規(guī)范的打破與重建一定是需要一個動態(tài)平衡的過程。
藍藍設計( m.91whvog3.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務