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