如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

 回執(zhí)單的界面設(shè)計；

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

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

該報告是百度人工智能交互設(shè)計院基于過去一年多對AI領(lǐng)域前沿技術(shù)、產(chǎn)品和設(shè)計的深入研究和洞察，結(jié)合產(chǎn)業(yè)界和學(xué)術(shù)界的經(jīng)驗探析而來。AI賦能的人機交互革新了大眾的生活形態(tài)，未來，AI加持的人機交互模式又會呈現(xiàn)出什么樣的態(tài)勢呢？

《報告》從“人機交互介質(zhì)”、“交互對象”、“AI應(yīng)用場景”、“人機關(guān)系”等方面總結(jié)了AI人機交互的八大趨勢。

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

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

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

目前，語音交互技術(shù)已經(jīng)加速在智能家居、手機、車載、智能穿戴、機器人等行業(yè)的滲透和落地?！秷蟾妗分赋觯磥黼S著語音技術(shù)的不斷完善，語音交互的自然度將進一步提升，并愈加趨向人類自然對話的體驗。具體表現(xiàn)為：語音交互將從機械的單輪對話進階到更流暢的多輪對話；合成語音更自然、真實，接近真人水平；語音交互具備聽覺選擇能力，提升多人對話體驗；語音交互將支持多種方言，并針對細分群體進行差異化設(shè)計。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

趨勢六：AI對特定人群的關(guān)懷得到快速發(fā)展和應(yīng)用

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

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

趨勢七：智能設(shè)備互聯(lián)互通，多場景銜接

以BAT為首的互聯(lián)網(wǎng)企業(yè)，在2018年紛紛調(diào)整組織架構(gòu)，轉(zhuǎn)向To B。巨頭重提產(chǎn)業(yè)互聯(lián)網(wǎng)戰(zhàn)略成為當前市場新現(xiàn)象。此現(xiàn)象背后，正是AI、5G、云計算等新興技術(shù)的發(fā)展與升級。2018年的政府工作報告，進一步強調(diào)了“產(chǎn)業(yè)升級的人工智能應(yīng)用”?！爱a(chǎn)業(yè)化”和“應(yīng)用化”成為未來幾年人工智能的兩大發(fā)展方向。

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

趨勢八：人機開始走向深度協(xié)同，信任構(gòu)建成為首要突破點

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

目前，人機協(xié)同已在工業(yè)領(lǐng)域初步實現(xiàn)，而隨著智能體從工業(yè)生產(chǎn)領(lǐng)域向商業(yè)服務(wù)、社會服務(wù)和家居服務(wù)領(lǐng)域拓展，人機將走向深度協(xié)同。《報告》認為，人機深度協(xié)同可以最大化發(fā)揮雙方優(yōu)勢，實現(xiàn)合作共贏。

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

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

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

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

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

分享車內(nèi)交互界面設(shè)計

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

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

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

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

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

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

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

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

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

日本的、歐洲的等等都是優(yōu)質(zhì)的設(shè)計作品，我們可以來分析一下這些作品，風(fēng)格、技法、表現(xiàn)形式暫時可以拋開。

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

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

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

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

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

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

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

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

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

欣賞優(yōu)秀作品的習(xí)慣

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

1. 提升審美

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

2. 培養(yǎng)興趣

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

3. 利用碎片化的時間學(xué)習(xí)

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

4. 為設(shè)計提供靈感和參照

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

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

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

如何欣賞作品

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

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

比如把日本壽司海報這個關(guān)鍵詞縮減成日本料理海報，優(yōu)秀作品的數(shù)量會成倍的增加。

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

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

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

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

在找到這些優(yōu)秀作品以后，就可以嘗試去尋找這些作品共同的規(guī)律。

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

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

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

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

包括這種產(chǎn)品或圖形的表現(xiàn)排列形式，在做畫冊、雜志、頭圖、詳情頁、海報、展板的時候經(jīng)常會碰到。

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

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

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

△ 《平面設(shè)計中，如何通過“抄襲”優(yōu)秀的作品成為高手？》

包括你看過的作品，他們的網(wǎng)格是怎么劃分的。使用的是什么樣的字體、構(gòu)圖如何都可以作為我們思考學(xué)習(xí)的方向，關(guān)于這幾點的詳細內(nèi)容，在之前的文章里很細致的講過，沒看過的同學(xué)可以去看看。

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

案例演示

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

比如我們要用這些材料來設(shè)計一款網(wǎng)頁頭圖。

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

產(chǎn)品價格的處理方式見過這樣的。

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

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

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

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

同樣內(nèi)容，不同的表現(xiàn)形式。你看過的優(yōu)秀作品越多，選擇的空間就越大。

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

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

主體文字組合的結(jié)構(gòu)是因為見過類似的組合方式，在文字量近似的情況下，我們的文字組合也可以設(shè)計成類似的形式。

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

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

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

一張海報從無到有的創(chuàng)作過程。

想設(shè)計出不錯的作品，沒有大量的積累，對優(yōu)秀的作品沒有印象是肯定行不通的。

總結(jié)

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

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

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

 排行榜干貨集合。

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

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

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

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

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

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

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

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

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

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

明暗

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

去色檢查畫面明暗關(guān)系

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

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

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

視覺焦點

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

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

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

高斯模糊法看視覺焦點

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

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

色彩

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

色彩插件檢查配色

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

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

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

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

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

設(shè)計雖沒有近路，但可以少走彎路。

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

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

剛?cè)胄械男率衷O(shè)計師容易出現(xiàn)一個問題，接到需求就開始設(shè)計，最后出現(xiàn)的界面和原型幾乎一模一樣，唯一的區(qū)別就是上了色，加了圖片和圖標，最后提交審核時老板反饋，“這個界面看上去太“平”了，你在這里加個背景色吧；這個圖標太小，你再放大一點；這個位置你在加點裝飾……”。

這主要原因還是界面沒層次導(dǎo)致的，雖然老板對設(shè)計不太清楚，但是關(guān)于業(yè)務(wù)邏輯我們的設(shè)計稿是否表達清楚，重點是否突出這個他最清楚了。

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

目錄

一、突出內(nèi)容層次的方法

• 將相關(guān)聯(lián)的元素進行組合

• 確認內(nèi)容優(yōu)先級，將優(yōu)先級高的放在前面

• 確認重要內(nèi)容，將其差異化設(shè)計

二、提高視覺層次的方法

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

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

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

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

  
  

  
  

一、突出內(nèi)容層次的方法

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

1.將相關(guān)聯(lián)的元素進行組合

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

需要注意的是，界面中的間距需要滿足一定的規(guī)律和節(jié)奏，比如模塊之間的間距大于標題到內(nèi)容的間距；在內(nèi)容中不相關(guān)聯(lián)的內(nèi)容間距大于相關(guān)聯(lián)的間距，如下圖所示。              

?     

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

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

2.確認內(nèi)容優(yōu)先級，將優(yōu)先級高的放在前面

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

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

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

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

3.確認重要內(nèi)容，將其差異化設(shè)計

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

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

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

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

二、提高視覺層次的方法

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

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

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

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

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

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

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

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

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

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