01 互補色的定義

互補色分為“光學互補色”和“印刷（色料）互補色”兩種。

光學互補色：兩種色光以適當的比例混合，能產生白光時，則這兩種顏色就稱為“互為補色”。

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

互補色由于在色環上相距最遠，色彩差異最大，色彩對比很強烈，合理的搭配往往會產生強烈的視覺沖擊力。

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

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

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

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

紫色和黃色不論是色相還是明度差異都非常大，因此黃色與紫色的搭配容易產生相當高的視覺強度。

02 互補色配色的方法

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

1.通過面積比來達到平衡

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

大多數情況下，我們會選擇一種顏色作為主色調，大面積的色相占據主導位置，再用小面積的互補色去點綴畫面。這樣才能表現出主次關系和豐富的色調效果，色彩對比強烈卻又不違和。

2、調整明度與飽和度來減弱色彩沖突

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

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

3、加入中性色緩沖其強烈的對抗性

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

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

作者：鄧海貝

轉載請注明：學UI網》聽說這是最難的配色方法——互補色篇

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

1. 一定要注意識別度

其實我一直不敢使用毛玻璃效果的原因，就是害怕有識別度問題，其實網上現在有很多毛玻璃圖標：

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

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

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

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

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

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

以上就是關于不影響識別的小方法。

2. 技法

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

其中最重要的一個關鍵點就是，玻璃層其實是假的，并不是透明的，而是100%的填充色。

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

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

那有同學就會問了，毛玻璃效果怎么產生呢？其實就是把下面的深藍色圓復制一個進入到前面的玻璃層：

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

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

這效果就立馬出來了。

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

3. 底色

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

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

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

總感覺有點奇怪，其實就是因為在黑色背景上，玻璃層的顏色用了白色，感覺沒透過去，就感覺怪怪的，后來我把玻璃層的顏色變成深灰色：

這樣看起來就好多了。

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

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

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

現在看不出效果是因為玻璃層里面的圖形和后面的圖形位置是一摸一樣的，這時候我們把玻璃層的圖形模糊：

現在已經差不多區分出來了，如果想要更明顯的區分，可以把透明度再降低一點：

也還ok，當然，我覺得加不加透明度，還是看具體效果調整就可以了！

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

總結

好了，以上就是我個人對于毛玻璃效果的一點總結，我個人還是比較喜歡一組毛玻璃圖標是多色的，如果是一個顏色，比如這種：

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

就會耐看很多，希望給大家一點啟發，下期見，默默扔！

01. 評論區雙指上滑送出“抱抱”

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

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

02. 長按激活單擊退出

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

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

03. 長按與時間跨度的結合

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

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

04. 可以移動的紅包

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

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

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

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

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

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

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

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

07. 雙擊頭像“拍一拍”

在微信群聊或者與好友聊天的時候，為了重點提示好友，可以通過雙擊好友頭像進行“拍一拍”，晃動的頭像和震動的提示加強好友對信息的關注度。

結合雙擊的手勢交互，在不改變當前布局的情況下加強社交屬性，增強好友間的互動提示，通過手勢豐富了社交體驗。

08. 單擊進入全屏模式

雖然手機逐步進入大屏時代，但是用戶還是希望獲得更少的干擾，全屏模式的操作可以讓干擾降到最低。

百度地圖在操作后會有彈窗式的內容呈現，用戶可以通過單擊屏幕退出彈窗，再次單擊則會進一步隱藏基礎控件，進入全屏模式。通過單擊的手勢交互來簡化內容結構，降低干擾帶給用戶更集中的操作體驗。

09. 長按快速預覽精彩片段

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

通過長按激活彈窗，可以在不改變當前布局結構的前提下，進行更多功能操作。適合針對隱藏式功能，也能避免誤操作。

10. 長按結合位置區域變化

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

而騰訊視頻與之不同的是結合了屏幕區域，在全屏狀態下，左側區域長按快退，右側區域長按快進。長按結合位置區域變化功能狀態，深入了手勢交互的操作，也能帶來不一樣的操作體驗。

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

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

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

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

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

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

13. 縮放預覽相冊大小

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

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

14. 雙擊最大化圖片預覽

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

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

15. 手勢交互控制地圖預覽

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

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

16. 拖動完成自定義設置

隨著用戶對個性化的需求升級，很多產品都開放了部分常用功能模塊的自定義設置。比如網易云音樂的底部導航欄在設置環節中，便可通過拖動完成自定義設置。

利用壓力結合滑動可以實現拖動手勢交互，對于一些需要用戶謹慎操作的功能比較適合，也能有效防止誤操作。

17. 拖動疊加實現應用建組

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

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

18. 長按滑動實現多選

在百度網盤中可以通過單擊選擇控件對文件進行選擇操作，也可以通過長按整個區域實現選中，長按過程中可以結合滑動實現多選。

長按滑動進行多選針對文件較多的場景非常便利，也不用擔心誤操作。在一些相冊應用中點擊選擇按鈕之后也可以通過滑動實現多選，操作路徑多一步。無論是通過激活選擇按鈕，還是長按都是起到二次確認的作用，長按滑動操作相對更簡單。

小結

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

剛開始進入車載行業的同學都會存在一個誤區，會拿互聯網那一套設計規范套路汽車HMI設計，但其實汽車HMI有自己的設計原則和設計規范以及美學理念。

汽車行業本身是一個有著強烈美學理念和設計規范的行業，其實準確的說應該是汽車HMI中控設計是基于自身傳統規范，結合互聯網移動端和Web端的基礎上，慢慢形成了一種新的設計規范。加上龐大的行業從業者的外溢，互聯網的美學理念和設計規范，已經在入侵進來形成HMI設計新興的細分領域。

那很多同學問了我們想去做HMI設計應該從哪里下手啊，在這里我建議大家無論做任何的設計都應該從用戶場景、用戶痛點下手。

一、了解與用戶溝通的設計語言

在設計HMI的過程當中，都是基于用戶在智能車的場景里。就像設計APP會基于用戶痛點和用戶場景來的一樣。在智能車的體驗里，首先是駕駛員、其次是車、以及系統三個要元素組成了車內場景。

在結合了現有的互聯網車機設計原則，主要考慮的還是簡單易用和高效專注。

簡單易用

在設計上應該為駕駛員提供更完善的包容機制，操作和信息的統一性和延續性，幫助用戶降低操作成本，提升用戶體驗。

高效專注

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

二、三秒原則

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

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

相關鏈接：車載系統中，交互設計的「三秒原則」

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

三、HMI視覺設計原則

1.顏色

車載的美學他們大多是深色的，金屬質感，邊框和陰影。早期的車載用戶界面都是硬性的感覺。但是現在行業已經成熟到一個包羅萬象的男女皆宜的當代審美。所以現在的視覺可以在以往的傳統上，是汽車界面更新潮更科技。

1.1 關于色彩

主流的背景以深色為主，那是因為深色的背景更不容易分散司機注意力，減少了眩光的問題?，F在一些新能源車可以切換白天黑夜模式，也會出現淺色的背景，淺色模式的整體色調不好把控，處理不好會使屏幕一直處于高亮狀態，會讓駕駛員產生一定視覺疲勞。

色彩規則以 中華人民共和國國家標準 關于駕駛安全的基礎標準為大前提，設定符合車載場景的取色類型。

色彩對比度

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

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

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

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

飽和度與明度的合理搭配

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

因此視覺設計的整體色彩體系應當適當的降低飽和度，同樣的，車載系統視覺的設計也應避免使用同一色系的方案，這樣無法在1秒的安全時間以內讓用戶有效果的判斷識別信息

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

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

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

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

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

結合 ISO 15008 （道路車輛.運輸信息和控制系統的人類工效學方面.車輛目視顯示用規范和試驗程序）

車載界面色彩傾向度定義了適合作為品牌主要控件的色調的功能色，強調品牌視覺形象。并結合 GB 4094 相關信號顏色規定同樣定義不適合的色彩闕值。

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

狀態顏色

反饋成功及警戒提醒在駕駛場景中至關重要，結合 GB4094相關信號顏色規定，狀態定義需要與相關法規及駕駛者習慣思維的明確色相相結合。

狀態用色分類：此處顏色以 HSV 顏色模型參數為標準。

百度主題案例：

阿里顏色規范：

華為顏色設計規范：

設計走查自測表：阿里車載-設計走查自測表

為方便車載小程序設計，提供輕量化的小程序設計走查表以供參考； 可用于項目前期設計自測、項目中研發自測檢查、項目上線后設計/產品協同開發同學完成自測問題，查缺補漏規避風險點；

2. 字體

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

字體的顏色盡量選擇對比度高的，參考WCAG標準。方便用戶能快速掃視。

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

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

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

百度字體設計規范：

阿里字體設計規范：

3. ICON

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

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

• 圖標：最小的圖標尺寸為6.9mm，推薦圖標大小為9.2mm。
• 熱區：最小10.7mm，推薦熱區15.3mm以上，熱區間隔3mm以上。

4. 內容排版

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

4.1 層次和數量

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

4.2 閱讀排版

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

4.3 預留安全熱區

避免元素熱區過近或重疊，需要使可觸摸目標之間預留足夠的安全距離，至少保持 3.5mm 的熱區間隔。

5、品牌IP

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

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

四、HMI的設計六大交互原則

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

1、基本原則

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

HMI涉及到的載體都是汽車零部件中的安全件，HMI設計首先考慮的必須是以安全為第一導向， 所有顯示信息都應該按照人機工程學進行合理排布，按照駕駛者的行為習慣進行設計。

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

1.2、及時反饋原則

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

時刻保障關鍵信息是最高優先級的，保證在各種環境場景下具有良好的可見性和易讀性，無需駕駛員費力尋找和識別。

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

1.2.1 不同場景下的提示

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

車載系統需要有能力面對復雜的應用場景，處理需要更加智能，（比如復雜路況+不良天氣的提示），以及車內的環境控制（如聲音、氣溫）需要更加敏感。

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

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

1.2.2 信息獲取效率

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

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

1.3、完整性原則

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

1.4、簡單學習原則

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

1.5、信息可視化原則

盡可能的采用圖像化/擬物化風格，避免或減少使用復雜的、過于專業的、技術性的圖標和術語。

1.6、情感化原則

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

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

汽車IP

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

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

2、分場景

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

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

在娛樂場景下，人可以進行多項休閑娛樂，比如：看電影或者讀書看報，其中使用超寬一體屏觀看電影時，大屏會給人以良好的觀感體驗。

在辦公場景下，人可以在駕艙內進行各項辦公活動，諸如：視頻會議、電腦辦公、商務信息處理等。

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

3、交互方式

3.1觸控：

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

微軟 的Surface Dial可以給我們很好的啟發，智能旋鈕可以解決大部分屏幕調節的不精準的痛點，而效率又高。

3.2語音：

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

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

3.3手勢：

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

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

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

五、六大車載系統開源網站

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

1. 阿里 Alios 開放平臺

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

2. 百度車載生態開放平臺

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

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

4. 谷歌駕駛

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

5. 蘋果 Apple Car Play

iOS – CarPlay 車載

6. 華為車機三方應用交互設計規范

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

六、設計開眼

如果同學們還是對中控設計的設計標準沒有一個概念的話，建議多去看些現有設計，去展廳試駕試乘實車，感受下交互，或者在網站上看看視覺不錯的界面設計都是可以的。

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

圖片來源于網絡，侵刪

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

歡迎大家補充交流！

原文地址：站酷

作者：郝小七

 轉載請注明：學UI網》HMI設計需要遵循什么設計原則？

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

▽

這是今天一個學員發來要修改的海報，不管是重新還是修改設計，最重要的是能從圖中分析問題并進行改正。

1、主體不夠明顯

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

2、信息缺少層次

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

3、背景不匹配

高飽和度的色彩雖然看起來鮮艷，但不代表就一定適用于所有的物體和設計中，比如畫面中的質感和主體的關聯，就很難體現出來。

4、字體不統一

字體是要與主題、風格的調性形成一致性，當一個畫面中使用了非常多的字體在進行展現時，不僅無法展示出設計的美觀，也降低了整體的和諧感。

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

示例一

1、首先我們運用三等分的構圖方法，也就是將畫布分成三個同樣等分大小的區域。

2、將重要的文字、圖形或者物體分別置入進這三個區域中。

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

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

一個牛丸很孤獨，很孤獨。

它需要人陪。

于是，用手給它搓一下。

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

還得加點水，讓畫面多點有趣的聯系。

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

示例二

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

還是一個牛丸，很孤獨，很孤獨。

它需要人陪。

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

同伴說咱倆有點無趣，要不再叫點人一起玩。

于是大伙紛紛跟上，并給它們加了點動力。

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

隨之而來的就是新的問題出現了，

下面很空，看起來它也很孤獨。

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

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

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

這就是今天帶來排版那點事！

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

作者：修先森

轉載請注明：學UI網》版式教程 | 海報修改，構圖版式的變化

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

1. 怎么算好用

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

2. 理解業務訴求

有個很恰當的比喻：用戶不是需要一把電鉆，而是墻上要有個洞。后來的研究理論更進一步：還得搞明白為什么用戶需要在墻上打洞，他要連接什么東西？能不能做成無線的？等等。

接到需求后產品經理一般會在 PRD 評審時向設計側講解需求背景和功能邏輯，在這個階段我們可以了解到產品經理規劃中的用戶流程和使用方式。產品原型呈現的只是無數解決方案中的一種，了解了業務訴求再回顧原型方案，經?？梢詭砣碌囊曇?，并由此推導設計方案。下面我們就看下如何從組件，結構，功能，狀態幾個層面解決設計問題。

一. 明確功能用途

1.1 信達雅的文案

文案是界面的重要構成，卻是界面設計中最不被重視的一部分。很多軟件之所以用起來有一層朦朧的隔閡感，罪魁禍首就是晦澀的文案。簡單的糾正文案可能會帶來煥然一新的使用感受。

• 信：語義準確，明確事件的主體客體。
• 達：避免無效或重復文案，減少被動語態，簡潔通順地進行描述。
• 雅：優雅且有涵養地與用戶溝通。
• 配圖：有些流程或者用詞比較特殊，單用語言難以描述，配上圖一目了然。

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

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

再比如卡片式設計，和現實中的卡片相同，它可以明確地劃分出功能和信息的關系。要注意的是，視覺分區越多，頁面復雜度越高，設計時需要控制平衡。

1.3 熟悉的組件

用戶點擊下拉選擇器的時候，自然會期望在周圍彈開一個選項浮層，因為他們用過的所有軟件交互都是這樣。這個就是習慣用法范式的應用[注]，盡可能套用常規的交互方式讓軟件的操作容易預測，用戶理解成本低。

然而在常規組件無法承載實際需求時，有必要跳出慣用范式，通過差異的視覺樣式給用戶思想準備。例如一些原型圖中的選擇器使用了下拉的樣式，觸發的卻是選擇抽屜或者彈窗。這種意外的發生或多或少會降低用戶使用時的信心，因為他們再也不確定點擊下拉后會發生什么。通過特殊與常規的區分，其實也維護了慣用范式的一致性。

二. 導航結構分配

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

2.1 幾種反例

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

2.2 控制一級導航深度

一級導航過深時，有必要進行降級。頂欄導航可以向邊欄導航卸載。邊欄導航是一級時，可將最低級的導航放到內容區吸頂；若層級仍然不夠用或導航條目較多，可以再增加一個縱向導航。

2.3 平衡內容區導航

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

2.4 減少空間浪費

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

三. 合理布置功能

3.1 分級展示功能

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

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

3.2 拆分功能

除了分級，當頁面或區域內的功能過于集中時，可以進行拆分以降低信息壓力。

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

分離表單區塊：當表單存在區塊表單時，可以只在表單中顯示區塊的預覽，將區塊的新增和配置放到抽屜中進行，由此減少功能堆積。

3.3 數據的編輯

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

例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

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

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

行內編輯模式：頁面樣式類似查看模式，當鼠標懸停在數據上，界面會提示用戶此處可以編輯，用戶點擊后可以快速針對局部數據做修改。該模式只適用表單項少的情況。

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

3.4 減輕視覺壓力

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

3.5 定制化交互

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

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

四. 補救意外情況

4.1 空狀態引導

一個列表出現空狀態的可能性有：

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

雖然后果一樣，但問題本質不同，解決方式自然也不同，此時需要分別給出對應的引導。

4.2 異常引導

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

4.3 標明功能不可用的原因

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

4.4 提供幫助

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

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

結語

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

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

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

作者：邢禹

轉載請注明：學UI網》引起舒適！什么是好用的界面

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務