01 互補(bǔ)色的定義

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

原文地址：藝海拾貝Design（公眾號(hào)）

作者：鄧海貝

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

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

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

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)

1. 一定要注意識(shí)別度

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

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

為了不影響識(shí)別，我們可以有兩個(gè)做法。

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

這樣不影響我們識(shí)別圖形的輪廓。

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

這樣整體的識(shí)別度也不會(huì)太受影響。

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

2. 技法

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

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

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

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

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

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

區(qū)分的還是不夠開(kāi)，我們?cè)俳档屯该鞫龋?

這效果就立馬出來(lái)了。

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

3. 底色

前幾天在群里看到一位星友問(wèn)，說(shuō)為什么他做的效果是第二個(gè)，而不是第一個(gè)那種透透的毛玻璃感覺(jué)：

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

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

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

這樣看起來(lái)就好多了。

制作的原理和剛才說(shuō)的是一樣的，先把大形畫(huà)完：

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

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

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

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

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

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

總結(jié)

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

相對(duì)來(lái)說(shuō)沒(méi)那么耐看，如果是多色的：

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

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

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

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

02. 長(zhǎng)按激活單擊退出

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

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

03. 長(zhǎng)按與時(shí)間跨度的結(jié)合

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

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

04. 可以移動(dòng)的紅包

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

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

05. 同一個(gè)功能不同的手勢(shì)交互

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

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

06. 通過(guò)左滑程度控制刪除

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

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

07. 雙擊頭像“拍一拍”

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

18. 長(zhǎng)按滑動(dòng)實(shí)現(xiàn)多選

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

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

小結(jié)

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

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

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

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

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

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

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

簡(jiǎn)單易用

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

高效專注

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

二、三秒原則

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

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

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

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

三、HMI視覺(jué)設(shè)計(jì)原則

1.顏色

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

1.1 關(guān)于色彩

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

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

色彩對(duì)比度

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

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

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

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

飽和度與明度的合理搭配

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

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

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

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

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

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

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

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

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

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

狀態(tài)顏色

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

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

百度主題案例：

阿里顏色規(guī)范：

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

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

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

2. 字體

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

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

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

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

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

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

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

3. ICON

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

點(diǎn)擊是交互行為中最為常用的動(dòng)作，為確保用戶點(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è)計(jì)在離手最近的位置，縮短操作距離，盡可能將熱區(qū)放大，展示信息放在右側(cè)。

4.1 層次和數(shù)量

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

4.2 閱讀排版

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

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

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

5、品牌IP

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

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

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

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

1、基本原則

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

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

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

1.2、及時(shí)反饋原則

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

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

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

1.2.1 不同場(chǎng)景下的提示

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

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

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

圖片來(lái)源：https://dribbble.com/czx

1.2.2 信息獲取效率

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

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

1.3、完整性原則

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

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

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

1.5、信息可視化原則

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

1.6、情感化原則

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

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

汽車IP

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

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

2、分場(chǎng)景

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

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

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

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

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

3、交互方式

3.1觸控：

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

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

3.2語(yǔ)音：

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

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

3.3手勢(shì)：

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

常用的手勢(shì)：?jiǎn)沃富瑒?dòng)（上下左右）、雙指滑動(dòng)（左右）、五指抓取等。

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

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

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

1. 阿里 Alios 開(kāi)放平臺(tái)

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

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

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

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

4. 谷歌駕駛

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

5. 蘋果 Apple Car Play

iOS – CarPlay 車載

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

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

六、設(shè)計(jì)開(kāi)眼

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

部分圖片來(lái)源于https://dribbble.com/czx

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

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

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

原文地址：站酷

作者：郝小七

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

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

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

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)

▽

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

1、主體不夠明顯

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

2、信息缺少層次

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

3、背景不匹配

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

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

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

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

示例一

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

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

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

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

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

它需要人陪。

于是，用手給它搓一下。

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

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

就這樣，海報(bào)原本的問(wèn)題就這么以合理的排版方式解決了。

示例二

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

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

它需要人陪。

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

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

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

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

隨之而來(lái)的就是新的問(wèn)題出現(xiàn)了，

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

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

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

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

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

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

作者：修先森

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

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

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

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)

1. 怎么算好用

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

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

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

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

一. 明確功能用途

1.1 信達(dá)雅的文案

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

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

1.2 視覺(jué)線索（功能可見(jiàn)性）

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

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

1.3 熟悉的組件

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

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

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

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

2.1 幾種反例

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

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

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

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

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

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

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

三. 合理布置功能

3.1 分級(jí)展示功能

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

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

3.2 拆分功能

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

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

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

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

涉及數(shù)據(jù)編輯的頁(yè)面存在四種設(shè)計(jì)方式，需要綜合考慮表單的數(shù)量，用戶的操作頻次和使用方式來(lái)判斷采用哪種。對(duì)于此類問(wèn)題的推敲，也可以在 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

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

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

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

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

3.4 減輕視覺(jué)壓力

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

3.5 定制化交互

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

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

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

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

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

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

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

4.2 異常引導(dǎo)

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

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

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

4.4 提供幫助

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

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

結(jié)語(yǔ)

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

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

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

作者：邢禹

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

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

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

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)