01 互補(bǔ)色的定義

互補(bǔ)色分為“光學(xué)互補(bǔ)色”和“印刷（色料）互補(bǔ)色”兩種。

光學(xué)互補(bǔ)色：兩種色光以適當(dāng)?shù)谋壤旌?，能產(chǎn)生白光時，則這兩種顏色就稱為“互為補(bǔ)色”。

本文主要探討的是印刷（色料）方面的互補(bǔ)色：在色相環(huán)上相對180°角的兩種顏色，這兩個顏色混合會得到灰色。

互補(bǔ)色由于在色環(huán)上相距最遠(yuǎn)，色彩差異最大，色彩對比很強(qiáng)烈，合理的搭配往往會產(chǎn)生強(qiáng)烈的視覺沖擊力。

雖然從色環(huán)上來看，互補(bǔ)色可以有很多組，但最常用的互補(bǔ)色有3組，分別是紅和綠、藍(lán)和橙、紫和黃。

由于紅色和綠色在色相上缺乏共性，放在一起會造成極強(qiáng)的視覺反差，搭在一起容易有格格不入、扎眼的感覺，容易出現(xiàn)散亂、土氣的感覺。

要取得好的視覺效果，則需要使用一些調(diào)和手段，可以在明度、飽和度上中和兩種色彩的突兀，使其形成和諧統(tǒng)一的對比。

藍(lán)橙是一組經(jīng)典的冷暖互補(bǔ)色，溫暖的橙色在與偏冷的藍(lán)色搭配時，更加醒目，活潑的橙色可以很好的緩解深藍(lán)色的沉悶，增加畫面的愉悅氣氛，可以很好的營造出畫面的層次感。

紫色和黃色不論是色相還是明度差異都非常大，因此黃色與紫色的搭配容易產(chǎn)生相當(dāng)高的視覺強(qiáng)度。

02 互補(bǔ)色配色的方法

互補(bǔ)色對比性強(qiáng)烈，因此在視覺上會產(chǎn)生極大的隔離作用。由于色相對比過大，配色難度也最大，如何化解互補(bǔ)色之間的沖突感，是用好互補(bǔ)色的關(guān)鍵。

1.通過面積比來達(dá)到平衡

如果使用面積相近的互補(bǔ)色的搭配，具有強(qiáng)烈的沖突感，產(chǎn)生的視覺效果強(qiáng)烈而鮮明，情感濃烈，令人記憶深刻。非常適合夸張的、張揚(yáng)的情感表達(dá)。

大多數(shù)情況下，我們會選擇一種顏色作為主色調(diào)，大面積的色相占據(jù)主導(dǎo)位置，再用小面積的互補(bǔ)色去點(diǎn)綴畫面。這樣才能表現(xiàn)出主次關(guān)系和豐富的色調(diào)效果，色彩對比強(qiáng)烈卻又不違和。

2、調(diào)整明度與飽和度來減弱色彩沖突

高明度與高飽和的互補(bǔ)色搭配，對比強(qiáng)烈，在視覺上會產(chǎn)生極大的隔離作用，它們組合在起，會產(chǎn)生相互襯托、相互抗衡、相互排斥的感覺，并使各自的色相更顯突出，更為艷麗，具有強(qiáng)烈的視覺沖擊力。

可以考慮降低互補(bǔ)色的明度與飽和度，來減弱沖突，既保留了對比色搭配的特點(diǎn)，同時降低了過強(qiáng)的視覺刺激。

3、加入中性色緩沖其強(qiáng)烈的對抗性

互補(bǔ)色鮮艷熱烈，而中性色（黑白灰）則剛好相反，它們毫無情緒感，中庸冷靜。在對比色中加入中性色可以很好的調(diào)和畫面的平衡感。通過中性色的調(diào)和，既保持了互補(bǔ)色所帶來的豐富的層次感，也避免了互補(bǔ)色之間強(qiáng)烈的沖突。

原文地址：藝海拾貝Design（公眾號）

作者：鄧海貝

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》聽說這是最難的配色方法——互補(bǔ)色篇

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

1. 一定要注意識別度

其實(shí)我一直不敢使用毛玻璃效果的原因，就是害怕有識別度問題，其實(shí)網(wǎng)上現(xiàn)在有很多毛玻璃圖標(biāo)：

做概念稿練習(xí)練習(xí)還好，如果真的落地肯定不行，太影響識別了。

為了不影響識別，我們可以有兩個做法。

其一：就是毛玻璃的透明度別太低，像騰訊視頻這種：

這樣不影響我們識別圖形的輪廓。

其二，我們可以把圖標(biāo)主圖形用顏色填充，毛玻璃的面積只是很小一部分，起到輔助作用即可，比如像喜馬拉雅這種：

這樣整體的識別度也不會太受影響。

以上就是關(guān)于不影響識別的小方法。

2. 技法

毛玻璃圖標(biāo)大部分一共分三層，填充層、玻璃層，模糊層（模糊層是嵌入到玻璃層的）。

其中最重要的一個關(guān)鍵點(diǎn)就是，玻璃層其實(shí)是假的，并不是透明的，而是100%的填充色。

舉個最簡單的例子，我們先畫一個深藍(lán)色的填充層：

然后加一個玻璃層，這個玻璃層不是透明的，而是100%填充色：

那有同學(xué)就會問了，毛玻璃效果怎么產(chǎn)生呢？其實(shí)就是把下面的深藍(lán)色圓復(fù)制一個進(jìn)入到前面的玻璃層：

有人又會問，這也沒效果啊，對，因?yàn)閺?fù)制進(jìn)入玻璃層的圓形和后面的原型位置一摸一樣，如果不做改變，就看不出變化，所以我們先來模糊下：

區(qū)分的還是不夠開，我們再降低透明度：

這效果就立馬出來了。

所以從技法層面來說，并不是很難，主要是要注意識別度和整體的設(shè)計感。（當(dāng)然，這只是我個人制作的方法，可能別人也有其他的方式）。

3. 底色

前幾天在群里看到一位星友問，說為什么他做的效果是第二個，而不是第一個那種透透的毛玻璃感覺：

其實(shí)我在最開始做毛玻璃效果的時候和她遇到了一樣的問題，這個問題產(chǎn)生的原因就是因?yàn)榈咨?，現(xiàn)在的底色是黑色，一個玻璃放在黑色上面，透出來的顏色肯定是深灰色，而不是淺白色（除非你這塊毛玻璃本來就是白色的）。

我在之前的一次練習(xí)時，做一個黑金配的的毛玻璃效果，最開始就做成了這個樣子：

總感覺有點(diǎn)奇怪，其實(shí)就是因?yàn)樵诤谏尘吧?，玻璃層的顏色用了白色，感覺沒透過去，就感覺怪怪的，后來我把玻璃層的顏色變成深灰色：

這樣看起來就好多了。

制作的原理和剛才說的是一樣的，先把大形畫完：

然后前面整一個玻璃層，選一個深灰色：

然后把下面的形狀復(fù)制一個剪切到玻璃層中：

現(xiàn)在看不出效果是因?yàn)椴Ａ永锩娴膱D形和后面的圖形位置是一摸一樣的，這時候我們把玻璃層的圖形模糊：

現(xiàn)在已經(jīng)差不多區(qū)分出來了，如果想要更明顯的區(qū)分，可以把透明度再降低一點(diǎn)：

也還ok，當(dāng)然，我覺得加不加透明度，還是看具體效果調(diào)整就可以了！

再強(qiáng)調(diào)下，大家在做毛玻璃的時候一定要注意背景色哦，不然可能就會看起來很奇怪。

總結(jié)

好了，以上就是我個人對于毛玻璃效果的一點(diǎn)總結(jié)，我個人還是比較喜歡一組毛玻璃圖標(biāo)是多色的，如果是一個顏色，比如這種：

相對來說沒那么耐看，如果是多色的：

就會耐看很多，希望給大家一點(diǎn)啟發(fā)，下期見，默默扔！

01. 評論區(qū)雙指上滑送出“抱抱”

在聽一首喜歡的音樂時，參與評論可以表達(dá)自己對音樂帶來的共鳴感，也可以看其它聽友的評論尋找知音。在網(wǎng)易云音樂的評論區(qū)隱藏著一個手勢交互，對某一條評論雙指上滑就會針對其給出擁抱，兩個小人微笑擁抱的動畫顯示在該條評論右下角，進(jìn)而用戶頭像下方會顯示“收到了抱抱”的標(biāo)簽提示。

在不新增功能入口的同時，借助雙指手勢交互來滿足需求，既能不破壞原生的結(jié)構(gòu)，又能帶給用戶不一樣的操作體驗(yàn)。這個隱藏的彩蛋你是否注意到？以后在體驗(yàn)產(chǎn)品的時候除了發(fā)現(xiàn)視覺表層的可見內(nèi)容以外，也要加強(qiáng)手勢交互的操作來發(fā)現(xiàn)更多隱藏的功能。

02. 長按激活單擊退出

iOS 的設(shè)計在手勢交互的探索上比較多，全屏的模式將手勢發(fā)揮到了極致，也帶給我們對于手勢交互的更多理解。在蘋果手機(jī)桌面，我們可以通過長按激活應(yīng)用管理，單擊則會退出管理模式，操作非常便利。

無需在當(dāng)前的設(shè)計上面新增更多繁瑣的控件，手勢的借助可以使得我們的設(shè)計更加極簡，減少過多的內(nèi)容對用戶的干擾。

03. 長按與時間跨度的結(jié)合

長按激活功能比較常見，但是結(jié)合時間長短的變化相對較少。蘋果手機(jī)桌面的應(yīng)用管理，在長按應(yīng)用圖標(biāo)時會彈窗展示功能列表，繼續(xù)維持長按則會進(jìn)入應(yīng)用管理，隨著長按的時間跨度不一樣激活不同功能需求。

在手勢交互設(shè)計過程中，除了通過動作的不同激活功能操作之外，也可以結(jié)合時間跨度、力度、位置等進(jìn)行組合交互，來滿足多重功能操作的需求。

04. 可以移動的紅包

通過紅包吸引用戶進(jìn)而轉(zhuǎn)化是很多電商產(chǎn)品的玩法，在必要 APP 中紅包通過倒計時的形式營造出緊迫感，促使用戶立即使用，進(jìn)而提高紅包的使用率。紅包懸浮在左側(cè)會擋住分類的展示，為了解決這個問題紅包借助滑動手勢可以移動，用戶可以在左側(cè)導(dǎo)航欄到底部標(biāo)簽欄之間任意滑動，方便預(yù)覽分類。

單指滑動是常用的手勢交互，精準(zhǔn)定位元素之后可以拖動使其改變位置，不僅方便內(nèi)容的展示也不會造成底層內(nèi)容的閱讀干擾。

05. 同一個功能不同的手勢交互

我們在觀看視頻的時候，短視頻是單擊控制播放/暫停，而視頻播放軟件則是通過雙擊控制。由于長視頻用戶需要觀看很久，容易觸屏造成誤操作，雙擊是為了形成二次確認(rèn)，降低誤操作的概率。

短視頻播放由于內(nèi)容比較簡短，可以通過單擊控制播放/暫停，雙擊則是更多功能的輔助，同一個功能在不同的場景需要配合不同的手勢。我們在進(jìn)行產(chǎn)品設(shè)計的時候，可以根據(jù)業(yè)務(wù)類型和用戶場景的差異借助手勢來滿足更多功能的操作，用戶習(xí)慣培養(yǎng)之后將會提高其操作體驗(yàn)度。

06. 通過左滑程度控制刪除

左滑動是產(chǎn)品設(shè)計中非常普遍的手勢交互，通過左滑展開列表隱藏功能，比如編輯、置頂、刪除等。

在脈脈 APP 的消息模塊，消息列表左滑可以進(jìn)行置頂和刪除，如果繼續(xù)往左側(cè)滑動則會實(shí)現(xiàn)自動刪除，以此來替代點(diǎn)擊刪除圖標(biāo)完成刪除操作的步驟。通過左滑配合點(diǎn)擊刪除操作路徑多一步，而左滑程度控制刪除效率更高，針對一些消息較多的產(chǎn)品，可以方便用戶快速清理未讀消息。

07. 雙擊頭像“拍一拍”

在微信群聊或者與好友聊天的時候，為了重點(diǎn)提示好友，可以通過雙擊好友頭像進(jìn)行“拍一拍”，晃動的頭像和震動的提示加強(qiáng)好友對信息的關(guān)注度。

結(jié)合雙擊的手勢交互，在不改變當(dāng)前布局的情況下加強(qiáng)社交屬性，增強(qiáng)好友間的互動提示，通過手勢豐富了社交體驗(yàn)。

08. 單擊進(jìn)入全屏模式

雖然手機(jī)逐步進(jìn)入大屏?xí)r代，但是用戶還是希望獲得更少的干擾，全屏模式的操作可以讓干擾降到最低。

百度地圖在操作后會有彈窗式的內(nèi)容呈現(xiàn)，用戶可以通過單擊屏幕退出彈窗，再次單擊則會進(jìn)一步隱藏基礎(chǔ)控件，進(jìn)入全屏模式。通過單擊的手勢交互來簡化內(nèi)容結(jié)構(gòu)，降低干擾帶給用戶更集中的操作體驗(yàn)。

09. 長按快速預(yù)覽精彩片段

通過愛奇藝 APP 刷劇的時候，在搜尋影視作品的過程中，可以通過長按作品封面進(jìn)行快速預(yù)覽，播放精彩片段來判斷是否值得追劇。

通過長按激活彈窗，可以在不改變當(dāng)前布局結(jié)構(gòu)的前提下，進(jìn)行更多功能操作。適合針對隱藏式功能，也能避免誤操作。

10. 長按結(jié)合位置區(qū)域變化

很多影視類產(chǎn)品在全屏播放視頻時，除了通過拖動進(jìn)度條進(jìn)行快進(jìn)/倒退之外，也能通過長按屏幕進(jìn)行快進(jìn)。

而騰訊視頻與之不同的是結(jié)合了屏幕區(qū)域，在全屏狀態(tài)下，左側(cè)區(qū)域長按快退，右側(cè)區(qū)域長按快進(jìn)。長按結(jié)合位置區(qū)域變化功能狀態(tài)，深入了手勢交互的操作，也能帶來不一樣的操作體驗(yàn)。

11. 三擊激活“輔助觸控”

單擊和雙擊的手勢交互較為常見，而三擊手勢應(yīng)用較少，有待深入探索。目前來說，帶有 Home 鍵的蘋果系列手機(jī)，可以通過三擊 Home 鍵激活“輔助觸控”快捷鍵，再次三擊隱藏快捷鍵。

通過三擊可以快速激活功能快捷鍵，減少了多個步驟路徑，也不會導(dǎo)致用戶誤操作。

12. 下拉程度影響功能變化

手勢下滑形成下拉刷新已經(jīng)成為產(chǎn)品設(shè)計中的基礎(chǔ)操作，為了進(jìn)一步延展功能，很多產(chǎn)品在下拉過程中根據(jù)下拉的程度判斷是刷新還是進(jìn)入二層樓（活動或者功能模塊）。

通常是通過控制下拉的距離來做判斷，會提示“松開刷新”的字樣，如果繼續(xù)下拉則會激活功能變化。進(jìn)入二級功能界面或者二層樓活動界面，深度的功能開發(fā)帶給用戶更多的選擇性。

13. 縮放預(yù)覽相冊大小

蘋果手機(jī)自帶的相冊（照片）APP，可以通過雙指縮放來改變照片預(yù)覽的大小，方便用戶在眾多照片中通過縮小快速查看，再通過放大做進(jìn)一步的選擇。借助縮放的手勢交互，方便用戶自由縮放預(yù)覽并作出快捷的操作，提高了用戶的操作體驗(yàn)感。

雙指縮放對于屏幕的縮放預(yù)覽十分便利，在很多應(yīng)用場景都有涉足，比如相冊、地圖、繪圖工具等。

14. 雙擊最大化圖片預(yù)覽

在圖片預(yù)覽的時候，可以通過雙擊最大化圖片，方便對細(xì)節(jié)的觀察。通過雙擊的手勢交互來快速放大圖片，在很多相冊應(yīng)用、電商產(chǎn)品、微信等社交產(chǎn)品中都有涉足，只要是全屏模式下預(yù)覽圖片，都可以通過該手勢交互完成縮放。

雙指縮放屬于慢動作，而雙擊最大化屬于快速一步到位，適合查看圖片細(xì)節(jié)等操作。通常是雙擊最大化，再次雙擊恢復(fù)正常。

15. 手勢交互控制地圖預(yù)覽

手勢交互在地圖軟件中的運(yùn)用表現(xiàn)得淋漓盡致，對于用戶來說操作變得更加便利和快捷。

以高德地圖舉例：單擊手勢可以隱藏操作欄進(jìn)入全屏模式；長按固定區(qū)域會激活當(dāng)前位置定位，方便隨時查看和開始導(dǎo)航；雙擊手勢可以對地圖進(jìn)行固定倍數(shù)放大；雙指縮放可以對地圖進(jìn)行任意縮放，便于精準(zhǔn)查看位置區(qū)域等。手勢交互控制地圖預(yù)覽提升了操作便捷度，借助手勢提升了地圖類產(chǎn)品的體驗(yàn)感。

16. 拖動完成自定義設(shè)置

隨著用戶對個性化的需求升級，很多產(chǎn)品都開放了部分常用功能模塊的自定義設(shè)置。比如網(wǎng)易云音樂的底部導(dǎo)航欄在設(shè)置環(huán)節(jié)中，便可通過拖動完成自定義設(shè)置。

利用壓力結(jié)合滑動可以實(shí)現(xiàn)拖動手勢交互，對于一些需要用戶謹(jǐn)慎操作的功能比較適合，也能有效防止誤操作。

17. 拖動疊加實(shí)現(xiàn)應(yīng)用建組

當(dāng)用戶下載的應(yīng)用很多的時候，通常都會通過建組管理手機(jī)桌面上的各類應(yīng)用軟件?？梢酝ㄟ^拖動應(yīng)用疊加到其他應(yīng)用軟件上實(shí)現(xiàn)自動建組，建組、進(jìn)組、移出等操作均可通過拖動手勢完成，操作非常便利。

拖動手勢交互針對一些防止誤操作的功能比較適合，相當(dāng)于二次確認(rèn)的過程。

18. 長按滑動實(shí)現(xiàn)多選

在百度網(wǎng)盤中可以通過單擊選擇控件對文件進(jìn)行選擇操作，也可以通過長按整個區(qū)域?qū)崿F(xiàn)選中，長按過程中可以結(jié)合滑動實(shí)現(xiàn)多選。

長按滑動進(jìn)行多選針對文件較多的場景非常便利，也不用擔(dān)心誤操作。在一些相冊應(yīng)用中點(diǎn)擊選擇按鈕之后也可以通過滑動實(shí)現(xiàn)多選，操作路徑多一步。無論是通過激活選擇按鈕，還是長按都是起到二次確認(rèn)的作用，長按滑動操作相對更簡單。

小結(jié)

如果想做HMI體驗(yàn)設(shè)計了解開發(fā)流程后，首先開始設(shè)計前最需要知道的是以什么為基準(zhǔn)去設(shè)計，以及設(shè)計的限制，也就是設(shè)計原則。尤其HMI體驗(yàn)設(shè)計是整車體驗(yàn)的一部分，也變得越來越重要。

剛開始進(jìn)入車載行業(yè)的同學(xué)都會存在一個誤區(qū)，會拿互聯(lián)網(wǎng)那一套設(shè)計規(guī)范套路汽車HMI設(shè)計，但其實(shí)汽車HMI有自己的設(shè)計原則和設(shè)計規(guī)范以及美學(xué)理念。

汽車行業(yè)本身是一個有著強(qiáng)烈美學(xué)理念和設(shè)計規(guī)范的行業(yè)，其實(shí)準(zhǔn)確的說應(yīng)該是汽車HMI中控設(shè)計是基于自身傳統(tǒng)規(guī)范，結(jié)合互聯(lián)網(wǎng)移動端和Web端的基礎(chǔ)上，慢慢形成了一種新的設(shè)計規(guī)范。加上龐大的行業(yè)從業(yè)者的外溢，互聯(lián)網(wǎng)的美學(xué)理念和設(shè)計規(guī)范，已經(jīng)在入侵進(jìn)來形成HMI設(shè)計新興的細(xì)分領(lǐng)域。

那很多同學(xué)問了我們想去做HMI設(shè)計應(yīng)該從哪里下手啊，在這里我建議大家無論做任何的設(shè)計都應(yīng)該從用戶場景、用戶痛點(diǎn)下手。

一、了解與用戶溝通的設(shè)計語言

在設(shè)計HMI的過程當(dāng)中，都是基于用戶在智能車的場景里。就像設(shè)計APP會基于用戶痛點(diǎn)和用戶場景來的一樣。在智能車的體驗(yàn)里，首先是駕駛員、其次是車、以及系統(tǒng)三個要元素組成了車內(nèi)場景。

在結(jié)合了現(xiàn)有的互聯(lián)網(wǎng)車機(jī)設(shè)計原則，主要考慮的還是簡單易用和高效專注。

簡單易用

在設(shè)計上應(yīng)該為駕駛員提供更完善的包容機(jī)制，操作和信息的統(tǒng)一性和延續(xù)性，幫助用戶降低操作成本，提升用戶體驗(yàn)。

高效專注

考慮駕駛員的實(shí)際場景的多樣性，注意力容易分散或暫時中斷。所以在設(shè)計的時候 要考慮除非重要的警報，盡量用聽覺給到用戶的提示。操作上可以滿足單手操作，并為用戶的每一步操作提供及時的反饋。

二、三秒原則

之前看過一個“三秒原則”的理論，開車時在高速上要保持和前面通過一個參照物三秒的距離，才是安全的，說明人在高速行駛的反應(yīng)時間是三秒。

用戶的注意力管理對減少由注意力分散導(dǎo)致的交通事故十分必要，開車過程中，必要操作需要遵循3秒原則，用戶必須在第1秒內(nèi)找到應(yīng)用場景的重點(diǎn)信息與功能入口，然后第2秒進(jìn)行交互動作，最后第3秒得到想要的信息結(jié)果。準(zhǔn)確把握每個過程中的時間，排除多余元素干擾，避免分散注意力。

相關(guān)鏈接：車載系統(tǒng)中，交互設(shè)計的「三秒原則」

在三秒原則里，一秒視覺、兩秒交互。排除車的硬件體驗(yàn)，那HMI設(shè)計師在系統(tǒng)里要給到用戶一個什么樣的視覺原則和交互原則是我們今天要研究的問題。

三、HMI視覺設(shè)計原則

1.顏色

車載的美學(xué)他們大多是深色的，金屬質(zhì)感，邊框和陰影。早期的車載用戶界面都是硬性的感覺。但是現(xiàn)在行業(yè)已經(jīng)成熟到一個包羅萬象的男女皆宜的當(dāng)代審美。所以現(xiàn)在的視覺可以在以往的傳統(tǒng)上，是汽車界面更新潮更科技。

1.1 關(guān)于色彩

主流的背景以深色為主，那是因?yàn)樯钌谋尘案蝗菀追稚⑺緳C(jī)注意力，減少了眩光的問題?，F(xiàn)在一些新能源車可以切換白天黑夜模式，也會出現(xiàn)淺色的背景，淺色模式的整體色調(diào)不好把控，處理不好會使屏幕一直處于高亮狀態(tài)，會讓駕駛員產(chǎn)生一定視覺疲勞。

色彩規(guī)則以 中華人民共和國國家標(biāo)準(zhǔn) 關(guān)于駕駛安全的基礎(chǔ)標(biāo)準(zhǔn)為大前提，設(shè)定符合車載場景的取色類型。

色彩對比度

由于駕駛環(huán)境的復(fù)雜光線條件，需要滿足在不同照明條件（日間/夜間/暗光/眩光）下的可讀性，對比度需滿足以下條件：

• 文本與底圖對比度建議大于7：1（至少4.5：1）。背景推薦使用深色，避免大面積使用純白色，過度吸引用戶注意。

• 過高的對比度導(dǎo)致視覺疲勞和閱讀效率的降低。深色模式下背景與文本或圖形的對比度建議不大于18：1。

* 注：下圖來自 https://color.review/可在此鏈接查閱色彩對比度關(guān)系。

飽和度與明度的合理搭配

長時間駕駛本身精神與視覺會更加需要集中注意力在前方，此時車內(nèi)環(huán)境中，不宜有過于強(qiáng)烈明顯的色彩干擾視線，可試想你在電影院中看電影時，身邊的人的手機(jī)亮度最高，此時會嚴(yán)重影響視覺的余光，難以聚焦在前方畫面上。

因此視覺設(shè)計的整體色彩體系應(yīng)當(dāng)適當(dāng)?shù)慕档惋柡投?，同樣的，車載系統(tǒng)視覺的設(shè)計也應(yīng)避免使用同一色系的方案，這樣無法在1秒的安全時間以內(nèi)讓用戶有效果的判斷識別信息

根據(jù) Munsell Color 原理得出，飽和度和明度的兩個數(shù)值越大，顏色越鮮艷。在車機(jī)配色選擇上請遵循以下規(guī)則：

• 越靠右上角的色值越鮮艷，所以不建議選取。

• 取色時，同時考慮飽和度和明度，這兩個因素的值之和盡量小于180（即：S + B ≤ 180）。

不建議選擇單色，建議增加輔助色

更好的可以幫助我們分組，提高信息的獲取能力。

結(jié)合 ISO 15008 （道路車輛.運(yùn)輸信息和控制系統(tǒng)的人類工效學(xué)方面.車輛目視顯示用規(guī)范和試驗(yàn)程序）

車載界面色彩傾向度定義了適合作為品牌主要控件的色調(diào)的功能色，強(qiáng)調(diào)品牌視覺形象。并結(jié)合 GB 4094 相關(guān)信號顏色規(guī)定同樣定義不適合的色彩闕值。

按照功能色分類可以根據(jù)常規(guī)場景將功能定位一級色、二級色、三級色。

狀態(tài)顏色

反饋成功及警戒提醒在駕駛場景中至關(guān)重要，結(jié)合 GB4094相關(guān)信號顏色規(guī)定，狀態(tài)定義需要與相關(guān)法規(guī)及駕駛者習(xí)慣思維的明確色相相結(jié)合。

狀態(tài)用色分類：此處顏色以 HSV 顏色模型參數(shù)為標(biāo)準(zhǔn)。

百度主題案例：

阿里顏色規(guī)范：

華為顏色設(shè)計規(guī)范：

設(shè)計走查自測表：阿里車載-設(shè)計走查自測表

為方便車載小程序設(shè)計，提供輕量化的小程序設(shè)計走查表以供參考； 可用于項(xiàng)目前期設(shè)計自測、項(xiàng)目中研發(fā)自測檢查、項(xiàng)目上線后設(shè)計/產(chǎn)品協(xié)同開發(fā)同學(xué)完成自測問題，查缺補(bǔ)漏規(guī)避風(fēng)險點(diǎn)；

2. 字體

中控與駕駛員的距離處在70cm-85cm之間，設(shè)計稿一定要在實(shí)車上感受，是否足夠清晰，是否能快速識別，中控屏搭載的更多是各種應(yīng)用，顯示的文字相對會多一點(diǎn)，除了文字需要保證在可視區(qū)間里，文字內(nèi)容應(yīng)當(dāng)通過字號字重來區(qū)分主次關(guān)系，用戶在掃一眼的過程中即可準(zhǔn)確的看到重點(diǎn)信息。保證易讀性。

字體的顏色盡量選擇對比度高的，參考WCAG標(biāo)準(zhǔn)。方便用戶能快速掃視。

字體的大小，層級，對比度等都是影響視覺可讀性和閱讀效率的重要因素，為保障文本的易讀性，界面文字需滿足以下要求：

• 最小可識別文字尺寸：5.4mm。
• 字體層級：區(qū)分文本主副層級，字號差距需保持4-6sp。
• 需要用戶閱讀和處理的重要段落文字不超過20個字（700字/分鐘，2秒內(nèi)讀完）。
• 對于需要用戶關(guān)注的文本信息可通過增加字重的方式突出內(nèi)容。

推薦閱讀：適合車載顯示的10款字體

百度字體設(shè)計規(guī)范：

阿里字體設(shè)計規(guī)范：

3. ICON

ICON的設(shè)計形式，可更多結(jié)合應(yīng)用的內(nèi)容，應(yīng)注意在內(nèi)容與形式結(jié)合時，視線上要保持一致性，可有助于在一秒的安全時間內(nèi)讓用戶快速瀏覽并判斷信息

點(diǎn)擊是交互行為中最為常用的動作，為確保用戶點(diǎn)擊操作的易用性和成功率，操作按鈕及熱區(qū)需滿足以下規(guī)則：

• 圖標(biāo)：最小的圖標(biāo)尺寸為6.9mm，推薦圖標(biāo)大小為9.2mm。
• 熱區(qū)：最小10.7mm，推薦熱區(qū)15.3mm以上，熱區(qū)間隔3mm以上。

4. 內(nèi)容排版

車載以駕駛員的操作為主，功能布局盡量設(shè)計在離手最近的位置，縮短操作距離，盡可能將熱區(qū)放大，展示信息放在右側(cè)。

4.1 層次和數(shù)量

所有的信息按照使用場景、功能。分組展示，確保信息按照的優(yōu)先級進(jìn)行交付。在任何場景下展示盡可能少的信息。避免過多信息的干擾，必須做到界面顯示輕量化。數(shù)量盡量不超過3-4個。

4.2 閱讀排版

可以根據(jù)閱讀瀏覽模型Z字型和F字型?；炫诺臅r候建議使用一種字體。

4.3 預(yù)留安全熱區(qū)

避免元素?zé)釁^(qū)過近或重疊，需要使可觸摸目標(biāo)之間預(yù)留足夠的安全距離，至少保持 3.5mm 的熱區(qū)間隔。

5、品牌IP

用戶對傳統(tǒng)汽車的品牌感認(rèn)知，還是停留在車標(biāo)、車造型等硬件外觀，而智能汽車，搭載了一個智能系統(tǒng)，除了駕駛需求，人和車的交互更多的會停留在HMI，所以，對于HMI融入品牌元素也相當(dāng)重要，品牌化是智能座艙視覺設(shè)計重要的發(fā)展趨勢之一。

現(xiàn)在主要品牌的體現(xiàn)形式是車載的IP管家，他有具體的名字，可以用語音喚醒。

四、HMI的設(shè)計六大交互原則

說到HMI設(shè)計，雖然所有人都很容易理解，HMI設(shè)計要考慮注重安全，需要在設(shè)計上適應(yīng)車載的使用場景。但是UI設(shè)計原則和UX設(shè)計原則很少有人系統(tǒng)性的回答過。對比原有的交互六大原則，適配到車載的場景下，提煉出六大交互設(shè)計原則。

1、基本原則

1.1、安全性原則  ?? ?? ?? ?? ??

HMI涉及到的載體都是汽車零部件中的安全件，HMI設(shè)計首先考慮的必須是以安全為第一導(dǎo)向， 所有顯示信息都應(yīng)該按照人機(jī)工程學(xué)進(jìn)行合理排布，按照駕駛者的行為習(xí)慣進(jìn)行設(shè)計。

與移動端的視覺顯示不同，HMI設(shè)計師需要注意除了基礎(chǔ)的視覺顯示規(guī)范外，還需格外注意與安全相關(guān)信息的展示、視覺警告、文字易讀性和顯示眩光等顯示問題。

1.2、及時反饋原則

人的大腦每天通過五種感官接受外部信息的比例分別為：味覺1%；觸覺1.5%；嗅覺3.5%；聽覺11%；視覺83%。

時刻保障關(guān)鍵信息是最高優(yōu)先級的，保證在各種環(huán)境場景下具有良好的可見性和易讀性，無需駕駛員費(fèi)力尋找和識別。

隨著大屏、多屏化的發(fā)展趨勢，除了依賴視覺反饋，以及減少或避免觸摸屏的誤觸功能，聽覺和觸覺也可以輔助視覺反饋。

1.2.1 不同場景下的提示

除以上正常駕駛場景外，還有部分對特殊場景的提示，如油耗、故障、雨雪天、超速、疲勞等

車載系統(tǒng)需要有能力面對復(fù)雜的應(yīng)用場景，處理需要更加智能，（比如復(fù)雜路況+不良天氣的提示），以及車內(nèi)的環(huán)境控制（如聲音、氣溫）需要更加敏感。

車載系統(tǒng)的設(shè)計相比于移動端有著更明顯的約束，不論是從空間（使用環(huán)境）、時間（三秒原則）、行為（交互方式）、心智（心理訴求），都有著明顯獨(dú)特的場景和特點(diǎn)，要做好車載系統(tǒng)設(shè)計，我們需要有豐富的同理心以及親身體驗(yàn)并反復(fù)驗(yàn)證設(shè)計。

圖片來源：https://dribbble.com/czx

1.2.2 信息獲取效率

同樣，現(xiàn)在的智能汽車，信息呈現(xiàn)的方式，主要也還是視覺為主，聽覺為輔。在還沒有完全實(shí)現(xiàn)自動駕駛前，信息呈現(xiàn)層級保持不變。

在汽車行駛的過程中當(dāng)中最高優(yōu)先級是視覺，時刻要觀察道路，查看導(dǎo)航。聽覺輔助也是很有必要考慮的場景，通過語音反饋司機(jī)需要獲取的信息，能讓司機(jī)盡量保持視覺焦點(diǎn)在路況上。多場景的融合考慮信息獲取的效率，能減少在開車過程中的安全隱患。

1.3、完整性原則

將頁面信息根據(jù)某些關(guān)聯(lián)性，分區(qū)塊進(jìn)行顯示，這將有助于用戶更容易的建立信息位置記憶，用極少量的時間查看車輛狀態(tài)，減少搜索信息帶來的注意力分散，保障駕駛安全。

1.4、簡單學(xué)習(xí)原則

面對C端用戶，設(shè)計師要考慮盡最大可能使用符合用戶習(xí)慣交互方式，減少學(xué)習(xí)和適應(yīng)。讓駕駛員更有安全感和便捷的操作。如果交互界面改變了，用戶極有可能必須從頭開始學(xué)習(xí)一些基本操做。在市場競爭壓力這么大的情況下，用戶很容易就轉(zhuǎn)向自己接受程度高的產(chǎn)品。隨著屏幕越做越大，需要駕駛員操做的功能也越來越多，所以駕駛員會因?yàn)閺?fù)雜操做，面臨交通路況擁擠的情況下的額外壓力。

1.5、信息可視化原則

盡可能的采用圖像化/擬物化風(fēng)格，避免或減少使用復(fù)雜的、過于專業(yè)的、技術(shù)性的圖標(biāo)和術(shù)語。

1.6、情感化原則

馬斯洛需求指出，人們需要動力實(shí)現(xiàn)某些需求，有些需求優(yōu)先于其他需求。我們當(dāng)下在滿足基礎(chǔ)需求后需要的更高階的需求。情感化設(shè)計是用戶體驗(yàn)和需求金字塔的最高層級，情感化需求也是必然的需求。在移動端，情感化的體現(xiàn)主要還是視覺層面，比如加載過程中的動效、缺省頁的插畫、異常狀態(tài)的提示等，還有就是和品牌的結(jié)合，增加用戶對品牌的認(rèn)知。

而對于汽車而言，它是一個空間，就靠屏幕里的視覺元素是遠(yuǎn)遠(yuǎn)不夠的，應(yīng)該從整車的角度去分析，通過五感（視、聽、觸、嗅、知）創(chuàng)造更豐富的全局體驗(yàn)，比如可以根據(jù)自己的駕駛需求和個人行為習(xí)慣，自定義氛圍燈，香氛、語音等。

汽車IP

汽車IP用虛擬的人物語音來扮演管家的角色，功能包括了記錄車主的駕駛習(xí)慣，不斷優(yōu)化程序來契合車主習(xí)慣，讓車主有更好的駕駛體驗(yàn)。

比如蔚來的nomi，既可以陪玩陪聊，還有表情互動，若是加上管家功能，汽車豈不立馬變身駕駛員最好的伙伴？看這小表情，是不是還挺可愛、暖心的哇？

2、分場景

在討論如何對超寬一體屏進(jìn)行體驗(yàn)設(shè)計前，我們需要對人在不同場景下的多樣化需求有大致的了解。為此，我們將人與車空間關(guān)系的場景劃分為四大方向依次是：生活、娛樂、辦公和共享。

如生活場景下，全家出游，疲憊的人可以直接在車上睡覺休息，無聊的人可以玩游戲，車內(nèi)空間采用多音道技術(shù)，不同的音道技術(shù)可以避免彼此干擾。除此之外，還可以起到保護(hù)隱私的作用，滿足每個人對個人空間的需求。

在娛樂場景下，人可以進(jìn)行多項(xiàng)休閑娛樂，比如：看電影或者讀書看報，其中使用超寬一體屏觀看電影時，大屏?xí)o人以良好的觀感體驗(yàn)。

在辦公場景下，人可以在駕艙內(nèi)進(jìn)行各項(xiàng)辦公活動，諸如：視頻會議、電腦辦公、商務(wù)信息處理等。

在共享場景下，車不僅可以是運(yùn)輸人的移動工具，還能成為運(yùn)輸貨物的移動工具、移動商城、移動酒店等等。

3、交互方式

3.1觸控：

這里分兩種，一種是通過按鍵控制；一種是通過觸屏控制。都是通過不斷的觸控功能按鈕行程鍛煉肌肉記憶，現(xiàn)在的趨勢越來越趨向重觸屏，輕按鈕，這樣不僅系統(tǒng)迭代成本小，功能可以動態(tài)分布。但是對于一些精準(zhǔn)調(diào)節(jié)的功能還是按鍵控制好一些。

微軟 的Surface Dial可以給我們很好的啟發(fā)，智能旋鈕可以解決大部分屏幕調(diào)節(jié)的不精準(zhǔn)的痛點(diǎn)，而效率又高。

3.2語音：

在汽車人機(jī)交互中，語音交互被認(rèn)為是車內(nèi)場景下最自然的交互方式，而語音交互需要一個載體來傳達(dá)多樣化的情感。

語音控制的前景主要在于兩個因素，一個是可以把除了界面以外的利用起來，一個可以與HMI自由交談，二是最小化HMI手動操作產(chǎn)生的干擾，增加安全性。

3.3手勢：

手勢交互是對語音交互、觸控交互的很好補(bǔ)充，能夠讓車主通過簡單的手勢和語音就能完成車內(nèi)的交互任務(wù)，也是能夠增加交互趣味性、表達(dá)情感、傳達(dá)情緒的另一個自然交互方式。

常用的手勢：單指滑動（上下左右）、雙指滑動（左右）、五指抓取等。

HMI的交互手勢不同于手機(jī)和IPAD，手機(jī)和IPAD握在手里，左右手都可以操作，多指組合的可能性也多，而HMI的手勢定義，更多的是需要滿足駕駛員的使用場景，屏幕是固定在車上的，要規(guī)避掉一些不方便的手勢。比如雙指往上滑動就很不方便，向上推不靈活，也有阻力。

五、六大車載系統(tǒng)開源網(wǎng)站

大家要是想了解的更深入，或者想針對于某個平臺去做設(shè)計可以參考一下開源網(wǎng)站。

1. 阿里 Alios 開放平臺

https://miniapp.alios.cn/index#/document

2. 百度車載生態(tài)開放平臺

https://chelianwang.baidu.com/homepage/openPlateform/design/sec-4-1.html

3. 騰訊-車載小場景 (私我領(lǐng)取PDF)

4. 谷歌駕駛

https://developers.google.com/cars/design/design-foundations

5. 蘋果 Apple Car Play

iOS – CarPlay 車載

6. 華為車機(jī)三方應(yīng)用交互設(shè)計規(guī)范

https://developer.huawei.com/consumer/cn/doc/50902

六、設(shè)計開眼

如果同學(xué)們還是對中控設(shè)計的設(shè)計標(biāo)準(zhǔn)沒有一個概念的話，建議多去看些現(xiàn)有設(shè)計，去展廳試駕試乘實(shí)車，感受下交互，或者在網(wǎng)站上看看視覺不錯的界面設(shè)計都是可以的。

部分圖片來源于https://dribbble.com/czx

圖片來源于網(wǎng)絡(luò)，侵刪

今天的分享就到這里！接下來我會分模塊去跟大家講解歡迎持續(xù)關(guān)注

歡迎大家補(bǔ)充交流！

原文地址：站酷

作者：郝小七

 轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》HMI設(shè)計需要遵循什么設(shè)計原則？

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

▽

這是今天一個學(xué)員發(fā)來要修改的海報，不管是重新還是修改設(shè)計，最重要的是能從圖中分析問題并進(jìn)行改正。

1、主體不夠明顯

文字在整個版面中的占比過大后，擠壓了主體視覺的產(chǎn)品展現(xiàn)，弱化了視覺信息。

2、信息缺少層次

當(dāng)文字越多時，就越要將內(nèi)容的主次進(jìn)行有效的區(qū)分，讓用戶在閱讀畫面時，清晰直觀的體現(xiàn)出文字信息，而如果所有的文字都一樣的大小并且每段文字之間都沒有很好的間隔和空間的留出，這就容易造成閱讀的障礙。

3、背景不匹配

高飽和度的色彩雖然看起來鮮艷，但不代表就一定適用于所有的物體和設(shè)計中，比如畫面中的質(zhì)感和主體的關(guān)聯(lián)，就很難體現(xiàn)出來。

4、字體不統(tǒng)一

字體是要與主題、風(fēng)格的調(diào)性形成一致性，當(dāng)一個畫面中使用了非常多的字體在進(jìn)行展現(xiàn)時，不僅無法展示出設(shè)計的美觀，也降低了整體的和諧感。

當(dāng)分析完這張圖后，我們用兩種構(gòu)圖技巧可以在最短的時間內(nèi)快速改正以上的問題，這里我做了2個修改示例供大家參考。

示例一

1、首先我們運(yùn)用三等分的構(gòu)圖方法，也就是將畫布分成三個同樣等分大小的區(qū)域。

2、將重要的文字、圖形或者物體分別置入進(jìn)這三個區(qū)域中。

3、這時會觸發(fā)新的問題，左右以及部分過多的留白應(yīng)該怎么處理，可以將一些次要的文字或點(diǎn)綴裝飾性的圖形搭配在上面，以補(bǔ)足留白過多的問題。

4、之前我們分析修改前的海報中提到，主體被壓縮后不夠明顯，在這里面我們需要一個能明顯被注視的主體。

一個牛丸很孤獨(dú)，很孤獨(dú)。

它需要人陪。

于是，用手給它搓一下。

一只手，肯定不行，得兩只手，但干搓也太難受了。

還得加點(diǎn)水，讓畫面多點(diǎn)有趣的聯(lián)系。

就這樣，海報原本的問題就這么以合理的排版方式解決了。

示例二

利用的是對焦線構(gòu)圖的方式，這次我們以主體放置為先，看看后面不同的版式變化。

還是一個牛丸，很孤獨(dú)，很孤獨(dú)。

它需要人陪。

于是，我找到了它的同伴陪它一起。

同伴說咱倆有點(diǎn)無趣，要不再叫點(diǎn)人一起玩。

于是大伙紛紛跟上，并給它們加了點(diǎn)動力。

對角線的引導(dǎo)會幫助我們加深被引導(dǎo)的內(nèi)容記憶，所以我們放置了LOGO，并且四周分布了信息內(nèi)容。

隨之而來的就是新的問題出現(xiàn)了，

下面很空，看起來它也很孤獨(dú)。

于是我攜帶著它們，穿越季節(jié)，掠過高架，鋪在留白的框架之間。

而信息主次的變化就在文字的大小、粗細(xì)、比例布局之間形成。

我們最后再看下兩個示例中，不同的構(gòu)圖帶來的變化。

這就是今天帶來排版那點(diǎn)事！

原文地址：修先森撩設(shè)計（公眾號）

作者：修先森

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》版式教程 | 海報修改，構(gòu)圖版式的變化

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

1. 怎么算好用

用戶覺得軟件不好用通常是由于操作界面不符合常識，交互邏輯出人意料導(dǎo)致的。這里我們要引入三個模型的概念：實(shí)現(xiàn)模型，心理模型和呈現(xiàn)模型。實(shí)現(xiàn)模型是軟件的內(nèi)部運(yùn)行原理，用戶無需關(guān)心。心理模型是用戶期望中完成任務(wù)的方式，呈現(xiàn)模型則是軟件被設(shè)計來完成任務(wù)的方式。呈現(xiàn)模型越是接近用戶的心理預(yù)期，用戶的學(xué)習(xí)成本越低，也就會覺得這款軟件很好用。

2. 理解業(yè)務(wù)訴求

有個很恰當(dāng)?shù)谋扔鳎河脩舨皇切枰话央娿@，而是墻上要有個洞。后來的研究理論更進(jìn)一步：還得搞明白為什么用戶需要在墻上打洞，他要連接什么東西？能不能做成無線的？等等。

接到需求后產(chǎn)品經(jīng)理一般會在 PRD 評審時向設(shè)計側(cè)講解需求背景和功能邏輯，在這個階段我們可以了解到產(chǎn)品經(jīng)理規(guī)劃中的用戶流程和使用方式。產(chǎn)品原型呈現(xiàn)的只是無數(shù)解決方案中的一種，了解了業(yè)務(wù)訴求再回顧原型方案，經(jīng)?？梢詭砣碌囊曇?，并由此推導(dǎo)設(shè)計方案。下面我們就看下如何從組件，結(jié)構(gòu)，功能，狀態(tài)幾個層面解決設(shè)計問題。

一. 明確功能用途

1.1 信達(dá)雅的文案

文案是界面的重要構(gòu)成，卻是界面設(shè)計中最不被重視的一部分。很多軟件之所以用起來有一層朦朧的隔閡感，罪魁禍?zhǔn)拙褪腔逎奈陌?。簡單的糾正文案可能會帶來煥然一新的使用感受。

• 信：語義準(zhǔn)確，明確事件的主體客體。
• 達(dá)：避免無效或重復(fù)文案，減少被動語態(tài)，簡潔通順地進(jìn)行描述。
• 雅：優(yōu)雅且有涵養(yǎng)地與用戶溝通。
• 配圖：有些流程或者用詞比較特殊，單用語言難以描述，配上圖一目了然。

1.2 視覺線索（功能可見性）

圖形用戶界面誕生之初，界面元素對物理世界的模擬是為了便于用戶將現(xiàn)實(shí)中的常識套用到虛擬界面上；擬物化通過質(zhì)感暗示用戶界面的交互方式；在扁平化時代，提供視覺線索仍然是必要的原則。拿拖拽操作來說，首先可以拖動的組件上要有把手，暗示可以被撿起。組件被拿起來時要明顯擴(kuò)大的投影樣式描繪高度，并在列表中顯示一條瞄準(zhǔn)線便于用戶精確定位。

再比如卡片式設(shè)計，和現(xiàn)實(shí)中的卡片相同，它可以明確地劃分出功能和信息的關(guān)系。要注意的是，視覺分區(qū)越多，頁面復(fù)雜度越高，設(shè)計時需要控制平衡。

1.3 熟悉的組件

用戶點(diǎn)擊下拉選擇器的時候，自然會期望在周圍彈開一個選項(xiàng)浮層，因?yàn)樗麄冇眠^的所有軟件交互都是這樣。這個就是習(xí)慣用法范式的應(yīng)用[注]，盡可能套用常規(guī)的交互方式讓軟件的操作容易預(yù)測，用戶理解成本低。

然而在常規(guī)組件無法承載實(shí)際需求時，有必要跳出慣用范式，通過差異的視覺樣式給用戶思想準(zhǔn)備。例如一些原型圖中的選擇器使用了下拉的樣式，觸發(fā)的卻是選擇抽屜或者彈窗。這種意外的發(fā)生或多或少會降低用戶使用時的信心，因?yàn)樗麄冊僖膊淮_定點(diǎn)擊下拉后會發(fā)生什么。通過特殊與常規(guī)的區(qū)分，其實(shí)也維護(hù)了慣用范式的一致性。

二. 導(dǎo)航結(jié)構(gòu)分配

你一定遇到過這種棘手的原型：頁面導(dǎo)航又多又深，林林總總地鋪灑在導(dǎo)航區(qū)和功能區(qū)，信息密度堪比柯林斯英漢辭典。頁面導(dǎo)航是界面的基本框架，處理系統(tǒng)的導(dǎo)航方式是頁面設(shè)計早期就需要完成的工作。

2.1 幾種反例

• 主導(dǎo)航級數(shù)過多：視覺樣式復(fù)雜，操作時需要頻繁卷展。
• 內(nèi)容區(qū)頭部導(dǎo)航堆積：用戶先看到的不是內(nèi)容而是導(dǎo)航，瀏覽效率較低。
• 橫縱導(dǎo)航分配不合理：不合理的結(jié)構(gòu)會影響視線掃描和點(diǎn)選，且空間利用率低。以圖中的結(jié)構(gòu)為例，一級導(dǎo)航下不一定都會有二級或三級導(dǎo)航，就會導(dǎo)致頁面版式差異過大。

2.2 控制一級導(dǎo)航深度

一級導(dǎo)航過深時，有必要進(jìn)行降級。頂欄導(dǎo)航可以向邊欄導(dǎo)航卸載。邊欄導(dǎo)航是一級時，可將最低級的導(dǎo)航放到內(nèi)容區(qū)吸頂；若層級仍然不夠用或?qū)Ш綏l目較多，可以再增加一個縱向?qū)Ш健?

2.3 平衡內(nèi)容區(qū)導(dǎo)航

吸頂導(dǎo)航會占用內(nèi)容區(qū)的縱向空間，但可以隨時跳轉(zhuǎn)。內(nèi)容區(qū)內(nèi)的導(dǎo)航性質(zhì)更類似于篩選，能夠隨內(nèi)容滾動，不便于隨時切換。頁簽類型區(qū)別大或是需要切換對比時，可以將導(dǎo)航吸頂；頁簽下內(nèi)容形式近似或需要更多瀏覽空間時，可以將導(dǎo)航放在內(nèi)容區(qū)。

2.4 減少空間浪費(fèi)

很多原型會習(xí)慣性地在頁面頂部配置一個頂欄。實(shí)際上里面的商標(biāo)，賬戶信息，設(shè)置等功能可以整合到邊欄中，這樣內(nèi)容區(qū)上方會多一些縱向空間。

三. 合理布置功能

3.1 分級展示功能

比如一些的圖表類頁面主要用于瀏覽而不是編輯，這種情況下將操作隱藏到省略號或者漢堡菜單中，不僅可以減少信息干擾，還能避免誤操作。

高級功能的隱藏很好理解，比如 macOS 的網(wǎng)絡(luò)配置只顯示基礎(chǔ)的連接功能，DNS 配置等高級操作被整理到了一個按鈕中。你可以想象如果所有的配置項(xiàng)都展示一個頁面，對于用戶日常聯(lián)網(wǎng)操作會有多么不友好。

3.2 拆分功能

除了分級，當(dāng)頁面或區(qū)域內(nèi)的功能過于集中時，可以進(jìn)行拆分以降低信息壓力。

分離檢索與查看：列表同時兼具瀏覽與管理的功能，但在字段眾多，空間有限的情況下，可以選擇其中有代表性的字段在單元行中顯示，便于快速掃描和管理，完整的單元行信息放到下一個層級顯示。

分離表單區(qū)塊：當(dāng)表單存在區(qū)塊表單時，可以只在表單中顯示區(qū)塊的預(yù)覽，將區(qū)塊的新增和配置放到抽屜中進(jìn)行，由此減少功能堆積。

3.3 數(shù)據(jù)的編輯

涉及數(shù)據(jù)編輯的頁面存在四種設(shè)計方式，需要綜合考慮表單的數(shù)量，用戶的操作頻次和使用方式來判斷采用哪種。對于此類問題的推敲，也可以在 StackExchange 的用戶體驗(yàn)社區(qū)參考更多案例：

例1：https://ux.stackexchange.com/questions/28210/inline-editing-vs-edit-view?rq=1

例2：https://ux.stackexchange.com/questions/93159/view-mode-or-always-in-edit-mode

查看模式：帶查看模式的頁面視覺效果整齊，信息干擾最小，且不會誤操作。但需要進(jìn)入編輯模式修改頁面內(nèi)容。

直接編輯模式：用戶到達(dá)頁面時，數(shù)據(jù)就可以被修改生效。常見于設(shè)置類頁面。該模式使用效率最高。但由于容易誤操作且視覺信息冗雜，不太適合大型表單。

行內(nèi)編輯模式：頁面樣式類似查看模式，當(dāng)鼠標(biāo)懸停在數(shù)據(jù)上，界面會提示用戶此處可以編輯，用戶點(diǎn)擊后可以快速針對局部數(shù)據(jù)做修改。該模式只適用表單項(xiàng)少的情況。

實(shí)時保存：頁面長期處于編輯模式，系統(tǒng)會自動保存用戶的操作。常見于線上文檔工具。該模式誤操作風(fēng)險最高，需要提供版本控制和操作撤回功能。

3.4 減輕視覺壓力

業(yè)務(wù)層面上無法避免單頁出現(xiàn)大量表單時，可以在視覺上分節(jié)。注意！和真正的分步不同，這里的只是從視覺層面對頁面信息進(jìn)行處理，沒有流程先后的概念，所以盡可能不要拆分頁面。以下圖為例，通過視覺上的劃分，即使在同一個頁面顯示同樣數(shù)量的表單，版面空間的呼吸給予了用戶喘歇的余地。錨點(diǎn)導(dǎo)航是個錦上添花的控件，空間允許時可以加上。

3.5 定制化交互

3DS Max 的四元菜單是一個很有代表性的設(shè)計，在視口右鍵時會圍繞光標(biāo)彈出4個內(nèi)容敏感菜單而不是一個，這四個菜單顯示的工具甚至可以自定義。普通系統(tǒng)在處理此類問題時，要么采用需要滾動的長菜單，要么用聯(lián)級選擇器分類。而這個設(shè)計的優(yōu)越性在于，通過分類并同時顯示四個面板，用戶點(diǎn)擊次數(shù)少，光標(biāo)的移動距離短，大大提高了工作效率。

再比如 Spotify 底欄的探索頁簽，點(diǎn)擊會進(jìn)入音樂探索頁面（頂部有搜索框），雙擊會直接進(jìn)入搜索框，長按則會激活語音助手。這些定制化交互的特點(diǎn)在于，它們巧妙地簡化了操作流程，但是用戶不知道也絲毫不影響使用。

四. 補(bǔ)救意外情況

4.1 空狀態(tài)引導(dǎo)

一個列表出現(xiàn)空狀態(tài)的可能性有：

• 確實(shí)沒有條目：如果能添加的話，可以提示用戶如何添加。
• 應(yīng)用了過多篩選器：提示用戶嘗試其他篩選方式或重置篩選器。
• 加載異常：提示用戶刷新頁面。

雖然后果一樣，但問題本質(zhì)不同，解決方式自然也不同，此時需要分別給出對應(yīng)的引導(dǎo)。

4.2 異常引導(dǎo)

再沒有什么比一行“操作失敗”的提示更讓人絕望，用戶不知道哪出了問題，也不清楚如何解決。異常流程時有發(fā)生，此時系統(tǒng)的引導(dǎo)會起到至關(guān)重要的作用，它能夠帶用戶走回正軌，減少無助感。

4.3 標(biāo)明功能不可用的原因

該問題的重災(zāi)區(qū)是工具類軟件，用著用著一些功能突然就灰掉了，只能慢慢摸索是哪里的問題。功能之所以不可用肯定有個原因，不論是直接顯示還是鼠標(biāo)懸停時顯示，有必要要讓用戶明白原由或者如何解決，避免把用戶困在死胡同。

4.4 提供幫助

新手教程特別考驗(yàn)用戶的記憶力，尤其是在新接觸軟件的學(xué)習(xí)爬坡階段，而且很難保證在一段時間不用后，用戶還能記得如何操作。當(dāng)系統(tǒng)引入了晦澀概念或復(fù)雜交互時，最好在該功能周圍提供說明，或懸停時展示 tooltip. 使用戶無需長期記憶，在用到該功能時又可以快速上手。

我曾經(jīng)寫過一篇介紹 Protopie 的文章，慚愧的說，由于日常項(xiàng)目中的交互大多比較基礎(chǔ)，其實(shí)用到 Protopie 的并不是很多，重新打開難免手生。但這款軟件界面上可以見到很多問號圖標(biāo)，點(diǎn)擊即可跳轉(zhuǎn)到詳細(xì)的功能講解文檔，不論是對于新人上手還是發(fā)掘軟件功能都很有幫助。

結(jié)語

圖形界面的本質(zhì)是人與機(jī)器交流的語言。與現(xiàn)實(shí)生活一樣，我們傾向與禮貌體貼的對象溝通。所以下手設(shè)計時要盡最大可能從人類的本性出發(fā)，才能在業(yè)務(wù)和產(chǎn)品邏輯的限制下，為用戶塑造更具親和力的界面模型。

注：文章中均為設(shè)計時遇到的真實(shí)案例，為脫敏隱去了細(xì)節(jié)。三種模型和界面范式的內(nèi)容整理自 About Face，分別在14頁和240頁, 有興趣可以詳細(xì)閱讀了解。

原文地址：京東設(shè)計中心JDC（公眾號）

作者：邢禹

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》引起舒適！什么是好用的界面

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)