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

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

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

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

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

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

趨勢(shì)一：語(yǔ)音交互技術(shù)進(jìn)步，更趨向人類自然對(duì)話體驗(yàn)

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

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

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

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

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

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

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

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

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

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

此外，《報(bào)告》還認(rèn)為，打造用戶喜愛(ài)的人設(shè)也將成為企業(yè)在市場(chǎng)競(jìng)爭(zhēng)中形成差異化、吸引更多用戶的重要方式。

趨勢(shì)四：智能體在被動(dòng)交互外，開(kāi)始出現(xiàn)主動(dòng)交互行為

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

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

趨勢(shì)五：智能體開(kāi)始擁有情感判斷及反饋智能

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

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

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

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

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

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

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

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

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

趨勢(shì)八：人機(jī)開(kāi)始走向深度協(xié)同，信任構(gòu)建成為首要突破點(diǎn)

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

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

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

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

AI時(shí)代大門緩緩開(kāi)啟，屬于中國(guó)和中國(guó)企業(yè)引領(lǐng)世界前沿的新時(shí)機(jī)已到來(lái)。

藍(lán)藍(lán)設(shè)計(jì)( m.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ù)。

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

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

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

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

之前聽(tīng)一位同學(xué)在公司看國(guó)外作品學(xué)習(xí)的時(shí)候，公司的一個(gè)老員工發(fā)現(xiàn)了，就過(guò)來(lái)語(yǔ)重心長(zhǎng)地和他說(shuō)，你看這些東西沒(méi)用的，學(xué)不到東西，就是在浪費(fèi)時(shí)間等等，類似這樣的話說(shuō)了一堆。聽(tīng)到這個(gè)話題的時(shí)候就特別的親切，因?yàn)樵陂_(kāi)始接觸設(shè)計(jì)的時(shí)候，和那位老員工的想法一樣。但是隨著對(duì)設(shè)計(jì)的理解越來(lái)越深，接觸的項(xiàng)目多了以后，這種想法慢慢就淡化了。

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

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

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

純圖形的UI圖標(biāo)、布展裝飾、logo徽章。

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

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

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

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

答案很明顯，不會(huì)的。了解一些構(gòu)成知識(shí)的同學(xué)都知道，構(gòu)成版面的基本元素就是點(diǎn)、線、面，而文字、圖片、圖形包括色彩，他們?cè)诎婷嬷姓w來(lái)看，本質(zhì)上就是點(diǎn)線面的具象表現(xiàn)。那我們?cè)谛蕾p這些作品的時(shí)候，完全可以把文字看成是點(diǎn)線面的存在，這樣的話也就沒(méi)有必要糾結(jié)他用的是哪個(gè)國(guó)家的文字了。

像這張國(guó)外的海報(bào)，我們把這里存在的視覺(jué)元素標(biāo)注出來(lái)，他們本質(zhì)上就是這些東西。

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

版面中的所有視覺(jué)元素，都可以看成是點(diǎn)線面的存在。

來(lái)做一組實(shí)驗(yàn)，這張英文海報(bào)，我們把這里面的英文，替換成漢字。前后對(duì)比一下，海報(bào)的整體感覺(jué)，基本沒(méi)有出現(xiàn)什么變化。

再換一組，感覺(jué)基本一致。

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

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

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

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

1. 提升審美

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

2. 培養(yǎng)興趣

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

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

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

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

這也是最重要的一點(diǎn)，不知道你有沒(méi)有一接到項(xiàng)目，大腦就一片空白的感覺(jué)，是因?yàn)槟愀苫罡傻奶俚脑騿?？不一定，有不少人每天不停的干活還這樣。其實(shí)出現(xiàn)這種狀況的主要原因就是看東西看的太少。很多好的形式我們見(jiàn)都沒(méi)有見(jiàn)過(guò)，怎么可能有印象，沒(méi)印象就更不可能把他們應(yīng)用到我們平時(shí)的工作中了。

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

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

如何欣賞作品

我們欣賞作品的場(chǎng)景主要有兩種，第一種是有目的、有針對(duì)性的去看；第二種是沒(méi)有針對(duì)性的看。這兩種場(chǎng)景要看的東西差不多，細(xì)節(jié)上會(huì)有一些差異，我們先來(lái)了解一下有針對(duì)性的。一般來(lái)說(shuō)，有目的有針對(duì)性指的是我們接到了具體的項(xiàng)目，但是這個(gè)項(xiàng)目以前沒(méi)有接觸過(guò)，需要了解一下別人都是怎么做的，然后帶著問(wèn)題去尋找答案。

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

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

或者你要做的是海報(bào)，那我們搜索的時(shí)候除了海報(bào)，還可以找日式的包裝、畫冊(cè)。

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

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

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

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

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

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

這里面每一個(gè)文字組合都是一個(gè)小的個(gè)體，比如很常見(jiàn)的日期的處理方式就有很多，像這張海報(bào)里日期文字組合的處理方式。

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

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

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

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

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

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

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

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

案例演示

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

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

看到這些材料，可能會(huì)想到以前在哪見(jiàn)過(guò)，類似這種左右放置的圖配文形式。

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

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

還見(jiàn)過(guò)所有的文字組，都以左對(duì)齊的形式進(jìn)行排列的作品。

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

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

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

我們?cè)賮?lái)看這個(gè)案例，一張藝術(shù)展的海報(bào)。

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

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

如果說(shuō)我們?cè)O(shè)計(jì)的這個(gè)文字組合之間，距離稍遠(yuǎn)，也有很多的作品會(huì)使用線的分割來(lái)解決這個(gè)問(wèn)題。

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

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

一張海報(bào)從無(wú)到有的創(chuàng)作過(guò)程。

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

總結(jié)

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

藍(lán)藍(lán)設(shè)計(jì)( m.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ù)。

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

 排行榜干貨集合。

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

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

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

藍(lán)藍(lán)設(shè)計(jì)( m.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ù)。

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

為什么你的設(shè)計(jì)看起來(lái)很亂？在此之前我們先了解一個(gè)概念，我們?cè)鯓涌催@個(gè)世界？

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

我們?cè)賮?lái)了解第二個(gè)問(wèn)題，眼睛是怎樣成像的？眼睛通過(guò)調(diào)節(jié)晶狀體的彎曲程度（屈光）來(lái)改變晶狀體焦距獲得倒立的、縮小的實(shí)像。簡(jiǎn)單來(lái)說(shuō)，成像原理就是晶狀體來(lái)改變焦距，簡(jiǎn)單一點(diǎn)解釋決定成像的重要因素是焦距。

你的設(shè)計(jì)看起來(lái)很亂，往往在這幾個(gè)方面出了問(wèn)題：

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

明暗

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

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

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

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

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

視覺(jué)焦點(diǎn)

視覺(jué)焦點(diǎn)究其概念，是讓我們的視線多停留幾秒的視覺(jué)元素，我們?cè)诋嬅嬷械谝谎劬湍芸吹降脑兀嬅嬷械摹钢鹘恰埂?

對(duì)畫面的視覺(jué)漏斗進(jìn)行分類：

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

高斯模糊法看視覺(jué)焦點(diǎn)

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

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

色彩

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

色彩插件檢查配色

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

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

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

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

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

設(shè)計(jì)雖沒(méi)有近路，但可以少走彎路。

藍(lán)藍(lán)設(shè)計(jì)( m.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ù)。

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

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

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

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

目錄

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

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

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

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

二、提高視覺(jué)層次的方法

• 利用線、面、留白將模塊進(jìn)行分割

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

• 利用顏色對(duì)比提高視覺(jué)感受

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

  
  

  
  

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

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

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

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

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

?     

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

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

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

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

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

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

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

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

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

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

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

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

二、提高視覺(jué)層次的方法

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

1.利用線、面、留白將模塊進(jìn)行分割

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

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

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

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

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

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

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

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