如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

 回執單的界面設計；

藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

該報告是百度人工智能交互設計院基于過去一年多對AI領域前沿技術、產品和設計的深入研究和洞察，結合產業界和學術界的經驗探析而來。AI賦能的人機交互革新了大眾的生活形態，未來，AI加持的人機交互模式又會呈現出什么樣的態勢呢？

《報告》從“人機交互介質”、“交互對象”、“AI應用場景”、“人機關系”等方面總結了AI人機交互的八大趨勢。

趨勢一：語音交互技術進步，更趨向人類自然對話體驗

研究公司Ovum預測稱，到2021年，地球上的語音助手的數量會和人類一樣多，人們會越來越傾向于向語音助手尋求情感上的幫助。在AI人機交互中，語音交互技術在用戶終端上的覆蓋最為廣泛。

以智能音箱為例，有數據顯示，2018年全球智能音箱市場同比增長200%。其中，中國智能音箱市場增速達到罕見的5370%。谷歌、亞馬遜、蘋果等全球巨頭企業均加速了用語音交互技術開啟大眾智能生活的步伐。截止2018年12月31日，搭載百度對話式人工智能操作系統DuerOS的智能設備激活量也已超2億。

目前，語音交互技術已經加速在智能家居、手機、車載、智能穿戴、機器人等行業的滲透和落地。《報告》指出，未來隨著語音技術的不斷完善，語音交互的自然度將進一步提升，并愈加趨向人類自然對話的體驗。具體表現為：語音交互將從機械的單輪對話進階到更流暢的多輪對話；合成語音更自然、真實，接近真人水平；語音交互具備聽覺選擇能力，提升多人對話體驗；語音交互將支持多種方言，并針對細分群體進行差異化設計。

趨勢二：人臉、手勢等通道更多出現在產品中，多通道融合交互成為主流交互形式

媒介學家雷吉斯·德布雷（Régis Debray)曾提出：“技術能實現不同區域里不同文化的人之間的連接”。隨著技術的發展，人與人之間的連接早已不成問題。當前，AI技術更是拓展了人與智能體交互的通道。除語音交互外，計算機視覺技術的發展已使得智能體實現了通過識別人臉、指紋、面部表情、肢體動作等人體信息，而更加快捷多元地與人類進行交互。但是不同的交互通道在有其獨特優勢和場景適用性外，也有一定的局限性。

《報告》認為，未來，人與智能體的交互將融合語音、人臉、手勢、生理信號等多種方式，為人類打開更多的交互空間和應用場景。具體表現為：人臉檢測及識別聚集更細維度的面部特征，拓展更多的交互空間和場景；空中手勢交互將成為新熱點；觸控、語音、手勢、人臉最有可能成為多通道融合的主流通道；生理信號、觸覺、嗅覺等也將成為輔助通道融入多通道交互中。

趨勢三：智能體開始擁有明確的人設

近期，明星“人設”崩塌已成大家茶余飯后的熱門話題。但是你想過，智能體也將擁有明確的“人設”么？《報告》認為，未來，用戶可以更加明顯地感知到智能體鮮活的“人設”。

所謂智能體的“人設”是指，用戶在與智能體的互動過程中，根據感知到的綜合特征推斷出一種具有一致性的角色形象，一般由性格（如外向、善良等）、關系（如助手、朋友等）和基本屬性（如性別、年齡等）構成?！秷蟾妗分赋?，目前，智能體人設的設計和表達主要聚焦在語音（如音色、語調等）和語言層面（如表達方式），并且通常局限在部分場景、部分話術上，缺少一致性和全局感。

《報告》提出，未來，智能體人設將從語音、產品外觀、虛擬形象等多維度進行設計，甚至聘用編劇設計具有統一形象特點的話術，利用混合現實（MR）、全息投影等技術將人設具象化，讓用戶在不同場景下均感受到智能體一致、明顯的人設特征。換句話說，未來，智能體的人設會具有很明顯的特征，但不會輕易崩塌。

此外，《報告》還認為，打造用戶喜愛的人設也將成為企業在市場競爭中形成差異化、吸引更多用戶的重要方式。

趨勢四：智能體在被動交互外，開始出現主動交互行為

技術的發展雖然革新了我們的生活方式，但是長久以來，人機交互一直延續著人類“輸入”，機器“反饋”的循環模式，人類始終是主動的，機器始終是被動的。

《報告》認為，人工智能賦予了機器情境感知和自主認知能力，使我們有機會構建機器主動服務于人的交互模型。智能體出現主動交互行為的具體表現為：主動交互越來越“貼心”；主動交互在“家”和“車”的場景下率先商用落地；主動交互將提升公共場景下人機協同的效率。

趨勢五：智能體開始擁有情感判斷及反饋智能

2014年在北美上映的動畫片《超能陸戰隊》中的機器人大白，以對主人公關懷備至的暖萌形象收獲了大批影迷的喜愛。觀影后的每個人都希望自己能夠擁有一臺如大白一樣忠心耿耿又溫柔體貼的機器人。令人欣喜的是，具有情感判斷和應對能力的智能體正逐漸成為現實。

過去20年，在人機交互中，機器基于表情、文本等方式的的情感識別能力已有很大的提升。目前市面上出現的如情感陪護機器人、智能音箱、智能汽車等已經初步具備一些情感識別能力，可以根據不同的場景、對象，進行適當的情感交互。

《報告》指出，未來，情感計算技術的提升及硬件升級將賦予智能體在“視”“聽”等方面更強的情感識別能力；同時智能體對于人類思維理解、情景理解能力也將更加完善，情感交互能力將更智能、更體貼。

趨勢六：AI對特定人群的關懷得到快速發展和應用

人機交互的發展為兒童、老人、殘障人士等群體更便捷地利用機器獲得服務，提供了充分可能。當前市面上已經出現大量針對兒童教育的AI產品。搭載DuerOS的小度智能音箱也針對以兒童為中心的家庭語音互動需求，特別開發了兒童語音識別引擎，并定制兒童語音播報音色及對話邏輯，陪伴兒童一起成長。在養老領域，為老人提供陪聊、提醒等陪護服務的智能產品也被AI企業提上了日程。此外，少數AI產品也開始專注殘障、病患等更加細分的人群，如2018年11月，百度推出了AI眼底篩查一體機，幫助患者快速篩查眼底疾病，為基層醫療帶去了極大的便利。

《報告》提出，未來，AI對人類的關懷將得到快速發展和應用，覆蓋更加細分的人群和更深入的場景。為兒童，AI將從易于交互到提供心智陪伴的服務；為老人，AI將縮小他們與科技的鴻溝，助推他們開啟品質生活；為感官殘障人士，AI將幫助他們重獲對世界的立體感知；為特殊疾病人群，AI將提供預測、診斷和康復服務。

趨勢七：智能設備互聯互通，多場景銜接

以BAT為首的互聯網企業，在2018年紛紛調整組織架構，轉向To B。巨頭重提產業互聯網戰略成為當前市場新現象。此現象背后，正是AI、5G、云計算等新興技術的發展與升級。2018年的政府工作報告，進一步強調了“產業升級的人工智能應用”。“產業化”和“應用化”成為未來幾年人工智能的兩大發展方向。

《報告》指出，隨著AI技術的進一步成熟和落地，及其與大數據、IoT的結合，AI將從單品智能、獨立場景到互聯智能，場景融合進階。智能設備將互聯互通，場景將進一步融合，實現多場景銜接；VR/AR將促進線上和線下、虛擬和現實的聯結，未來，VR會加速拓展到更多的產業和實體，AR中的現實與虛擬將從簡單疊加到有機融合，實現用戶可以源自自然意識進行人機互動。

趨勢八：人機開始走向深度協同，信任構建成為首要突破點

2018年6月，百度研究院發布并開源“神經條件隨機場”的AI算法。該算法擁有強大的腫瘤病理切片檢測能力，可以大幅提升醫生閱讀病理切皮的效率和準確率。人機協同即，通過人工智能增強人類智能，讓人工智能成為人類智能的自然延伸和擴展。

目前，人機協同已在工業領域初步實現，而隨著智能體從工業生產領域向商業服務、社會服務和家居服務領域拓展，人機將走向深度協同。《報告》認為，人機深度協同可以最大化發揮雙方優勢，實現合作共贏。

而人們對AI的信任，是智能體全面進入人類工作和生活，實現真正人機協同的前提。即，信任構建成為了實現人機深度協同的首要突破點。與此同時，AI倫理道德將更加細化，成為所有從業者需遵守的行業準繩。AI行業的發展在帶給大眾便利生活之時，避免算法歧視、保護人類隱私、尊重人類價值等也變成了從業者們亟需重視的問題。

最后，《報告》指出，AI時代的人因工程是一個真正的系統工程。而每個人機交互行業的從業者都需要擁有AI思維。最重要的是，中國的人機交互設計和研究者們將首次和發達國家站在同一起跑線上，我們有機會去定義這些體驗標準，而不再是追隨或遵守。

AI時代大門緩緩開啟，屬于中國和中國企業引領世界前沿的新時機已到來。

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

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

分享車內交互界面設計

藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

之前聽一位同學在公司看國外作品學習的時候，公司的一個老員工發現了，就過來語重心長地和他說，你看這些東西沒用的，學不到東西，就是在浪費時間等等，類似這樣的話說了一堆。聽到這個話題的時候就特別的親切，因為在開始接觸設計的時候，和那位老員工的想法一樣。但是隨著對設計的理解越來越深，接觸的項目多了以后，這種想法慢慢就淡化了。

其實新人對研究國外作品這件事存在誤區是很正常的，畢竟應用的文字不一樣，內容多數我們也看不懂，把時間花在這上面給人的第一感覺確實有點不合適，哪有直接去看國內的作品來得過癮。我們暫時拋開作品的數量與質量不談，來聊聊這個話題。

我們平時在工作中完成的作品，里面基本都會包含文字、圖片或圖形、色彩這幾種基本元素，不管你做的是海報、logo還是畫冊都離不開它們，比如純文字類型的海報、公告、條幅。

純圖片形式的燈箱、畫冊、展板、品大片。

純圖形的UI圖標、布展裝飾、logo徽章。

包括純顏色的手機屏保、背景墻之類的設計，這些基本的設計元素，會在設計作品中單獨出現。

而更多的設計作品都是這幾種元素同時出現的結果，這些海報中，文字、圖片、圖形、色彩這幾種元素都占全了。注意，這些海報用的都是中文，屬于國內的海報對吧？也能夠在這上面學到一些東西，那我們換幾張國外的作品看看，有什么不一樣的地方。

日本的、歐洲的等等都是優質的設計作品，我們可以來分析一下這些作品，風格、技法、表現形式暫時可以拋開。

構成他們的元素和國產海報有什么區別？都存在文字、圖片、圖形包括色彩，唯一的區別就是上面說的，不同的國家，使用的文字會不太一樣。那么這種文字上的差異真的會影響到我們對這個作品的研究、欣賞嗎？

答案很明顯，不會的。了解一些構成知識的同學都知道，構成版面的基本元素就是點、線、面，而文字、圖片、圖形包括色彩，他們在版面中整體來看，本質上就是點線面的具象表現。那我們在欣賞這些作品的時候，完全可以把文字看成是點線面的存在，這樣的話也就沒有必要糾結他用的是哪個國家的文字了。

像這張國外的海報，我們把這里存在的視覺元素標注出來，他們本質上就是這些東西。

國內的也一樣，如果你看到的是這些東西，還需要糾結這是哪個國家的作品嗎？

版面中的所有視覺元素，都可以看成是點線面的存在。

來做一組實驗，這張英文海報，我們把這里面的英文，替換成漢字。前后對比一下，海報的整體感覺，基本沒有出現什么變化。

再換一組，感覺基本一致。

再來一組，這回我們把英文替換成日文。類似這個版面構成的形式，我們把文字替換成英文、漢字，變化也不會很多，依然很美觀。我們研究、學習、欣賞優秀作品的時候，一定不能受到類似「看國外的設計沒用」這類思維的束縛，不然的話你會錯過很多的。

不光從構成的角度看這個問題是這樣，其實從設計發展的角度來看，也能得出同樣的結論。因為現代設計教育的起源來自德國的包豪斯，后來包豪斯的理念傳到了美國，又通過美國傳遍了整個世界。包括我們現在學習的平面設計體系，都是一脈相承的。從這個起源的角度來看，也不存在國內、國外那么大的差別。都是一個門派的，只要做的好，那看誰的都一樣。說了這么多，應該能看出來，我們是鼓勵大家去多看優秀作品的。那么堅持做這件事，又能得到什么呢？下面就來說一下，為什么要養成欣賞優秀作品的習慣？

欣賞優秀作品的習慣

先來看看這個習慣能給我們帶來的好處有哪些。

1. 提升審美

長時間欣賞優秀的作品，會對我們個人的審美能力有質的提升，幫助我們開闊眼界。眼高手低雖然是個貶義詞，不過這對于正在成長的我們來說是好事，最起碼能讓自己對自己的能力有一個比較清晰的認知，知道自己做的不夠好，這樣會有動力不斷的鞭策自己學習新的東西，把專業做到更好。

2. 培養興趣

如果我們對這個行業沒興趣的話，就算你再有設計天賦，也很難做好的。堅持看優秀的作品給我們提供持續的刺激，說不定哪幅作品就非常合你的胃口，勾起你的興趣，讓你花時間去研究。

3. 利用碎片化的時間學習

平時都很忙很累，再懶一點，就沒什么完整的時間學習。這個時候如果能把碎片化的時間利用上，我們坐地鐵、坐公交、午休、睡覺前，包括上廁所的時候都是可以通過欣賞這些優秀的作品提升自己的，這也是一個提升學習效率的習慣。

4. 為設計提供靈感和參照

這也是最重要的一點，不知道你有沒有一接到項目，大腦就一片空白的感覺，是因為你干活干的太少的原因嗎？不一定，有不少人每天不停的干活還這樣。其實出現這種狀況的主要原因就是看東西看的太少。很多好的形式我們見都沒有見過，怎么可能有印象，沒印象就更不可能把他們應用到我們平時的工作中了。

所以說，我們想有好的想法、無盡的靈感，必須通過看優秀作品這個成本低、見效快的方式來提升了，并且通過我們持續不斷的積累，得到的東西會越來越多，這是一種可以不斷提升自己的方式。

當然了，欣賞優秀作品也是有方法的，走馬觀花的看一大堆，最后能得到的可能只有審美的提升。就是感覺自己周圍的人做的東西都是垃圾，輪到自己做，發現自己也很垃圾。那為了避免這個悲劇發生在你的身上，下面分享一些欣賞優秀作品的正確方法。

如何欣賞作品

我們欣賞作品的場景主要有兩種，第一種是有目的、有針對性的去看；第二種是沒有針對性的看。這兩種場景要看的東西差不多，細節上會有一些差異，我們先來了解一下有針對性的。一般來說，有目的有針對性指的是我們接到了具體的項目，但是這個項目以前沒有接觸過，需要了解一下別人都是怎么做的，然后帶著問題去尋找答案。

先從項目要求入手，就是看看你做的內容是關于什么的，比如你要做日本壽司海報，就去搜集這方面的作品。有些同學在搜索的時候很實在，要做關于壽司的海報就專門去找日本壽司的作品，這種方式的缺陷特別明顯，如果你要做的這個項目品類能找到的優秀作品很多還好，不過多數情況下，優秀作品是不那么好找的。這個時候把思路打開，選擇的余地就會大很多。

比如把日本壽司海報這個關鍵詞縮減成日本料理海報，優秀作品的數量會成倍的增加。

或者你要做的是海報，那我們搜索的時候除了海報，還可以找日式的包裝、畫冊。

網站、插畫等等作品，都會給我們帶來很多的思路。

數量的問題，這也是我們推薦看國外優秀作品的一個原因，光去找中文的作品，在一個小品類里，很難找到足夠多的優秀作品，一般的東西又沒有什么學習的價值，這時候加入國外的東西會讓我們的選擇余地更大、思路更廣。我們在搜集作品的同時，連帶關于項目的一些圖片、文字材料都可以一起搜索，這樣能幫助我們更深的理解這個項目，學到更多的知識。

其實學習這個行為不是非得上學、看書才能學，我們設計師在接觸各種項目的時候，通過與客戶溝通和查閱項目相關資料的過程也是在學習，而且我覺得這種學習方式比我們單純的去上學讀書更深刻、實用。學到的東西也是在工作中甚至生活中用得上。

在找到這些優秀作品以后，就可以嘗試去尋找這些作品共同的規律。

比如文字，如果文字屬于同一種題材的設計，就算是不同國家的作品，我們也會在里面找到一些共同的特征。比如這些關于食品的字體，都會表現出屬于食物的那份圓潤的特征，這就是一種規律。這些規律性的東西總結出來，就可以嘗試應用到自己的作品中。這個是學習大的規律，在這個大規律的基礎上，再去關注這里面的一些小的細節。想做好東西，稍小的細節也很重要。

再比如文字組的形式。文字的主要作用是傳遞信息，那么如何、美觀的把文字表現出來就要靠文字組了。一款作品做的是否優秀，通過觀察文字組的處理是否細致，很容易看出來。信息的層級關系需要文字組來表現，主標題、副標題、段落文字、時間、裝飾性的文字等等，這些文字可不是隨便扔到版面中就行了，它們都是通過設計師的處理，以文字組合的形式分布在版面的各個位置。

這里面每一個文字組合都是一個小的個體，比如很常見的日期的處理方式就有很多，像這張海報里日期文字組合的處理方式。

我們看到了覺得這個形式不錯，就可以記下來。那這些處理方式我們見過了，遇到合適的項目，換一個字體，或者調整一下數字，就能應用到自己的項目中了，這些組合形式，你沒看見、沒有印象，自己拍腦袋是很難想出來的。

包括這種產品或圖形的表現排列形式，在做畫冊、雜志、頭圖、詳情頁、海報、展板的時候經常會碰到。

自己排不好的話，就可以借鑒這些作品的形式和規律，再上手就輕松多了。如果你想做的是logo設計，也可以去觀察優秀作品的細節，比如字體與圖形的比例、文字與圖形的間距是多少、文字與文字的間距如何控制，包括別人的創意點在哪，這些東西都是可以在別人的作品中學到的。

△ 《高手的平面課堂！解鎖LOGO設計新技巧》

就像異形同構這篇文章，你看到了這類作品，就能回憶起這款 logo 使用的是異形同構中的邊線同構這個方式設計的，這種方式有哪些特點？如何能設計出類似的作品？教程里都講過了，這樣又把之前學到東西鞏固了一遍。

△ 《平面設計中，如何通過“抄襲”優秀的作品成為高手？》

包括你看過的作品，他們的網格是怎么劃分的。使用的是什么樣的字體、構圖如何都可以作為我們思考學習的方向，關于這幾點的詳細內容，在之前的文章里很細致的講過，沒看過的同學可以去看看。

如果是沒有針對性的看作品，和上面的思考路徑是一致的，只不過是利用碎片化的時間來學習而已，更靈活一些，可以快速瀏覽，也可以觀察細節。如果你有收藏整理這些材料的習慣會更好，拿出來就能用，收集整理的越多、越細致，以后工作起來越輕松。

案例演示

所謂的創意就是我們把不同的元素重新發散、打散、重組呈現的過程。能夠保證有想法、思路的前提就是見識，要見過很多好東西，有了很深的印象以后才能憑借這些印象，學到的東西設計成新的、屬于你自己的作品。下面給大家演示一遍，我們看多了優秀作品以后，再去做設計的時候會發生什么變化。

比如我們要用這些材料來設計一款網頁頭圖。

看到這些材料，可能會想到以前在哪見過，類似這種左右放置的圖配文形式。

產品價格的處理方式見過這樣的。

文字的形式全部使用黑體和無襯線字體，很多作品都是這樣處理的，放在一起很和諧。

還見過所有的文字組，都以左對齊的形式進行排列的作品。

只要有印象，我們在設計的過程中就會下意識的往這些方向上靠，設計出的作品也會接近前面的那些規則。

在這些規則影響的基礎上，如果我們還見過襯線體搭配無襯線體的作品，圖疊字的形式，也能做出接近的風格作品。

同樣內容，不同的表現形式。你看過的優秀作品越多，選擇的空間就越大。

我們再來看這個案例，一張藝術展的海報。

整體的骨架是這樣的，這種骨架布局的方式來自于左邊這個案例，類似的形式有很多。

主體文字組合的結構是因為見過類似的組合方式，在文字量近似的情況下，我們的文字組合也可以設計成類似的形式。

如果說我們設計的這個文字組合之間，距離稍遠，也有很多的作品會使用線的分割來解決這個問題。

包括其他文字組合的布局方式，也是參照這種軸線式的排列方法。文字使用的是宋體搭配西文襯線體的方式，中文的宋體和西文的襯線體具有類似的筆畫特征，基礎文字的統一性能夠得到保障。

將和主題相關的照片填充到劃分好的網格中，這里面使用的照片是同一張照片的不同局部，這種對照片重復的處理方式也很常見，在給版面增加變化的同時，也會制造出一定的故事性，引發受眾的聯想。

一張海報從無到有的創作過程。

想設計出不錯的作品，沒有大量的積累，對優秀的作品沒有印象是肯定行不通的。

總結

怎么樣，是不是覺得多看看優秀的作品還是有用的？不管是國外的、國內的都一樣能學到很多。類似我是做電商的，看印刷品的設計沒用；我是做包裝的，看版式的作品沒用；我專門做商業項目的，看藝術類的項目沒用；我們公司是做金融產品的，那看其他行業的東西都沒用。遇到這種言論，我們可以冷靜的思考一下，是真的沒用，還是這個人，他不會用。

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

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

 排行榜干貨集合。

藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

圖片相較于純文字具備更強的視覺性，所以選擇合適的好圖片就至關重要，下面為大家介紹三種思路。

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

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

為什么你的設計看起來很亂？在此之前我們先了解一個概念，我們怎樣看這個世界？

我們通過眼睛看世界，眼（又稱眼睛，目）是一個可以感知光線的器官。那么結論來了，我們看到這個世界，其實本質就是看到了光。舉個例子，晴空萬里時我們可以看到很遠很遠的距離，反之在漆黑的屋子里，我們什么都看不見。

我們再來了解第二個問題，眼睛是怎樣成像的？眼睛通過調節晶狀體的彎曲程度（屈光）來改變晶狀體焦距獲得倒立的、縮小的實像。簡單來說，成像原理就是晶狀體來改變焦距，簡單一點解釋決定成像的重要因素是焦距。

你的設計看起來很亂，往往在這幾個方面出了問題：

• 明暗關系紊亂；
• 視覺焦點不明確，畫面沒有重點；
• 顏色雜亂，毫無章法。

明暗

明暗是指畫中物體受光、背光和反光部分的明暗度變化以及對這種變化的表現方法。明暗分亮面，灰面，暗面，以及明暗交界線，反光五大調子。單個物體明暗關系，暗部（反光，投影）＞灰面＞亮面。整體關系，靠近光源暗部＞遠離光源……畫畫核心畫的是光，遵循光照的自然規律即可。

去色檢查畫面明暗關系

從上至下三張圖依次是去色之后的黑白圖；運用色相和飽和度給畫面賦予一個顏色的單色圖；原圖。

從下圖可以粗略得出結論，明暗（光源色）+固有色=色彩。調色之前先處理明暗，畫面顏色處理起來就非常簡單了。

最近火爆的國產硬核科幻片海報，即使去掉顏色，黑白關系依舊明確清楚。好的設計即使沒有任何顏色，依舊是一副好的素描畫。我所理解的明暗關系與色彩的關系相當于人體與衣服妝容的關系，對于一個美女是否漂亮，衣服妝容的搭配是你能達到漂亮的上限，然而你的臉型，身高，氣質，皮膚才是你能達到的驚為天人的基礎。

視覺焦點

視覺焦點究其概念，是讓我們的視線多停留幾秒的視覺元素，我們在畫面中第一眼就能看到的元素，畫面中的「主角」。

對畫面的視覺漏斗進行分類：

• 視覺焦點：想看不見都很難，表現突出；
• 重要元素：不經意就能看見；
• 輔助元素：仔細看看也能看見（類似買理財產品的最右下角的小標注，「投資有風險，理財需謹慎」）

高斯模糊法看視覺焦點

瞇著眼睛看形，睜著眼睛看細節。把畫面模糊調到一定程度，然后看畫面，如果畫面仍然能看清楚「主角」，那么畫面的視覺中心就是可以的。下圖畫面即使模糊了，我們依然能看清「男主角」沈騰以及飛馳人生四個大字，雖然原圖背景復雜以及其他裝飾物很多，依然不影響畫面的整體協調感，元素多且雜而不亂。

這上面的兩個例子看出，即使畫面模糊了，還是能清晰看到畫面表達的主題。那么模糊度多少合適呢，一般調整到上面所說的視覺漏斗中重要元素看起來剛好模糊到看不清就可以了。

色彩

色彩是附著在物品上由于光的照射產品漫反射的顏色，可以粗略按色彩元素分為光源色，固有色和漫反射產生的環境色。按照長期的實踐經驗來看，通常比較和諧的配色方式是除了產品的固有色之外，盡量把光源色和環境色統一在三種顏色（黑白灰不算顏色）之內，顏色比例盡量類光源色的主色調占據畫面百分之八十的面積，其他環境色作為補充。

色彩插件檢查配色

谷歌插件 palette.site 能分析出畫面顏色的狀態以及畫面中幾種主要的顏色，借助這個插件能很輕松檢查畫面是否超過了3種顏色（黑白灰不算顏色），如果超過三種顏色，那么頁面就需要做減法，或者將顏色統一在一個色系里，用明度以及飽和度區分。

插件的使用方法：可以直接使用瀏覽器下載，然后也可以在瀏覽器中選擇一張圖片，右鍵「在新標簽中打開圖片」，然后再「點擊右上角的插件按鈕」分析顏色狀態。

從上面的兩個案例中可以看出，兩個 banner 的顏色分析基本都在三種顏色以內，特別是下面的看起來比較復雜的顏色，總共分析的顏色也就紅黃藍，其中藍色還是點綴色的存在。

今天的內容就說到這里了，我們回顧一下重點內容，解決畫面看起來很亂可以有以下方法：

• 去色檢查畫面明暗關系
• 高斯模糊法看視覺焦點
• 色彩插件檢查配色

設計雖沒有近路，但可以少走彎路。

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

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

剛入行的新手設計師容易出現一個問題，接到需求就開始設計，最后出現的界面和原型幾乎一模一樣，唯一的區別就是上了色，加了圖片和圖標，最后提交審核時老板反饋，“這個界面看上去太“平”了，你在這里加個背景色吧；這個圖標太小，你再放大一點；這個位置你在加點裝飾……”。

這主要原因還是界面沒層次導致的，雖然老板對設計不太清楚，但是關于業務邏輯我們的設計稿是否表達清楚，重點是否突出這個他最清楚了。

那么如何才能提高界面層次呢？我們可以從兩個方面入手，在設計前我們需要考慮突出內容層次的方法；在設計中需要考慮突出視覺層次的方法。

目錄

一、突出內容層次的方法

• 將相關聯的元素進行組合

• 確認內容優先級，將優先級高的放在前面

• 確認重要內容，將其差異化設計

二、提高視覺層次的方法

• 利用線、面、留白將模塊進行分割

• 利用大小、投影、背景圖突出視覺層次

• 利用顏色對比提高視覺感受

• 利用文字對比提高界面的可閱讀性

  
  

  
  

一、突出內容層次的方法

當一個界面信息量比較大時，層次感好的界面用戶進來能快速的獲得想要的信息，同時最終達到產品的目的。而層次感差的界面用戶看半天也不知道要做什么，看一會也就走了。因此良好的視覺層級是界面成功的關鍵。在設計前我們需要將相關聯的元素進行組合；確認內容優先級，將優先級高的放在前面；確認重要內容，并將其差異化設計。

1.將相關聯的元素進行組合

在設計前，產品原型圖已經將我們的元素進行了分類組合，但是他們更多的是考慮邏輯、功能上的層次，而如何有一個清晰的內容層次呢？設計師可以利用《格式塔心理學》中的接近性原則將相關聯的元素組合在一起，不相關的拉開距離，同時形成一定的規律和節奏，這樣會讓用戶閱讀起來更輕松。

需要注意的是，界面中的間距需要滿足一定的規律和節奏，比如模塊之間的間距大于標題到內容的間距；在內容中不相關聯的內容間距大于相關聯的間距，如下圖所示。              

?     

天貓個人主頁的個人信息區排在最前面就是遵循了用戶的瀏覽習慣；其次是我的訂單和物流信息排在了第二的位置這是用戶想看到的內容；最后是我的福利排在了第三位這是產品想給用戶看的內容。

京東金融的我的頁面用戶的資產信息排在最前面，他首先是遵循了用戶的瀏覽習慣，同時也是用戶想要看到的內容，其次是功能入口區排在了第二的位置這是產品想給用戶看的內容，最后是福利大禮包排在第三位這也是產品想個用戶看的內容。

2.確認內容優先級，將優先級高的放在前面

將相關聯的信息整理之后就需要確認模塊的優先級了，由于用戶的瀏覽順序是自上而下的，因此我們需要將優先級高的模塊放到前面。

那么優先級如何判斷呢？大家可以從三個方面去考慮，第一是遵循用戶的瀏覽習慣；第二是用戶想看的內容；第三是產品想要用戶看的內容，如下圖所示。

天貓個人主頁的個人信息區排在最前面就是遵循了用戶的瀏覽習慣；其次是我的訂單和物流信息排在了第二的位置這是用戶想看到的內容；最后是我的福利排在了第三位這是產品想給用戶看的內容。

京東金融的我的頁面用戶的資產信息排在最前面，他首先是遵循了用戶的瀏覽習慣，同時也是用戶想要看到的內容，其次是功能入口區排在了第二的位置這是產品想給用戶看的內容，最后是福利大禮包排在第三位這也是產品想個用戶看的內容。

3.確認重要內容，將其差異化設計

在設計時我們需要知道，優先級高的模塊不一定重要程度就高，因此我們還需要確認模塊的重要層級，同時利用背景、布局等方式進行差異化設計，用起用戶注意，如下圖所示。

網易嚴選中的新人專享禮和品牌制造商直供就采用了差異化設計，職工類模塊采用的是普通的宮格式布局，新人專享禮采用添加背景的方式，加深了模塊的縱深感，對比其他模塊更加突出。

大麥網中的特色模塊和其他模塊也采用了差異化設計，特色模塊采用拼圖的方式設計，其他模塊采用列表的方式進行設計，用戶進入頁面首先就能夠看到這個模塊，提高用戶接受信息的效率。

土豆視頻個人主頁的列表部分也采用了差異化設計，消息提醒、我的收藏、觀看記錄、我的緩存這四個用戶常用的功能采用宮格式布局，其他不常用的我的會員、客戶與反饋、設置采用列表式結構，這樣也能夠提高用戶操作速度。

二、提高視覺層次的方法

當然內容層級確定了顯然不夠，我們還需要考慮突出界面的視覺層次，這樣用戶才能夠清晰舒適的瀏覽我們的界面。那么提高視覺層次的方法有哪些呢？在設計中，我們可以利用線、面、留白將模塊進行分割；利用大小、投影、背景圖等突出視覺層次；利用顏色對比提高視覺感受；利用文字對比提高界面的可閱讀性。

1.利用線、面、留白將模塊進行分割

大家記得在設計前我們已經對界面中相關聯的元素進行了組合，組合之后就可以利用線、面、留白的方式，將不相關聯的元素進行分割，提高界面的視覺層次，從而提高用戶的瀏覽和操作效率。

線分割：是最為基礎的分割方式，其優勢是占用空間小、分割感弱，多用于列表、Feed流中。需要注意的是，分割線顏色設置需要非常淺，避免模塊之間強烈的分割感，比如橘子娛樂的列表就是采用若隱若現的線，讓列表中的內容更規整。

面分割：也可叫背景欄分割，其優勢是占用空間小、可操作性高，同時能夠更好的區分不同模塊之間的關系，多用于模塊和模塊之間的分割，比如轉轉個人主頁的模塊采用面分割瀏覽性更強。

留白分割：是iOS11發布之后興起的以留白或間距的方式進行分割，其優勢是無強烈的分割感，界面清爽，多用于比較有規律或以大圖為主的模塊之間的分割，比如轉轉主頁下方的賣二手還錢、買實惠好貨等，其內容部分都較為規則，采用該方式較為合適。

2.利用投影、大小、背景圖突出視覺層次

為了突出界面的視覺層次，我們還可以通過投影、大小、布局等增加界面的對比，從而突出重要信息。

投影：是界面對比較常用的一種方式，其優勢是提升界面的空間感，改變視覺次序，通過投影大小的變化還可營造不同的空間關系，多用于卡片風格的設計中，比如Keep均是采用卡片風格的設計，添加投影后讓界面視覺層次更突出了。

大?。?/strong>是大眾最為熟知的對比方式，其優勢是通過大小對比能夠很快的拉開視覺層次，同時能夠很好的引導用戶瀏覽路徑，比如ofo黃色的大按鈕遠遠都能看見，該頁面就一個目的掃碼用車。