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