日常生活中，我們通過眼睛，鼻子，嘴巴等器官接受信息的傳遞，然后經(jīng)過通過大腦把信息理解反饋出去。例如：日常我們通過眼睛看手機(jī)新聞，那么手機(jī)屏幕作為一個(gè)載體只是把信息通過眼睛傳遞了出來，這就是傳遞信息。當(dāng)眼睛把看到的信息傳遞到大腦，大腦對信息加工處理，這就是理解信息。這兩個(gè)動作傳遞信息、信息理解就是今天的主題：視覺交互。

本片文章通過 long 哥分享后，我總結(jié)整理而出。

傳遞信息

信息的傳遞主要通過身體的器官接觸到信息后，通過神經(jīng)系統(tǒng)傳遞給大腦。本文主要講的是視覺交互，那么這里的傳遞信息我們就主要講眼睛信息傳遞這個(gè)領(lǐng)域。

這是京東 Web 端的首頁，模糊處理以后，用戶第一眼看哪里？（思考一下）

第一眼被中間黑色的大圖片所吸引，接著被左下角的紅色卡片吸引，接著看到下面一排圖片。

剛才這個(gè)我們的瀏覽順序就是接下來講的視覺動線。

為什么我們的視覺動線是這樣的？

視覺動線 1 這塊，顏色、形狀都特別突出，和周邊的差異很大，所以我們剛打開網(wǎng)站就被它給吸引了，接下來我們又看到了左下角紅色的卡片，由于紅色顏色過于亮麗、突出，所以我們忽略了 1 右邊的模塊，直接轉(zhuǎn)向了 2 這個(gè)模塊，接著往右看很多圖片，就有了視覺動線 3 這個(gè)動作。

那么我們總結(jié)出吸引我們視覺動線模塊的特點(diǎn)：顏色鮮艷，形狀突出，與周邊有差異。

在移動端 app 產(chǎn)品中，有些產(chǎn)品為了吸引用戶的眼光，也會運(yùn)用其他的手法來改變用戶本來的視覺動線，吸引用戶點(diǎn)擊。

例如：左邊淘寶的首頁金剛區(qū)位置，由于“芭芭農(nóng)場”這個(gè) icon 是動態(tài)的，總是不斷的在變化，所以就會很快的把用戶吸引過去。這就是為什么產(chǎn)品在活動大促的時(shí)候，會加一些動態(tài)的效果，這樣動態(tài)的效果對比靜態(tài)的圖片更加吸引人，用戶也就能很快的被吸引過去。

右邊這是 ins 上某位明星截圖，只是一些圖片的簡單排列，相信大家的視覺動線會隨著圖片顏色、構(gòu)圖等不同原因而產(chǎn)品不同的視覺動線，這就是為什么在某些產(chǎn)品的廣告中總是喜歡放一些美女的圖片，提高點(diǎn)擊率。

通過上面兩個(gè)小例子我們也可以總結(jié)出“動態(tài)效果”、“信息敏感”這兩個(gè)方法來提高改變視覺動線?？偨Y(jié)一下影響我們視覺動線的 5 種原因：顏色鮮艷、形狀突出、與周邊有差異、動態(tài)效果、信息敏感。但是呢，在日常的產(chǎn)品設(shè)計(jì)中，由于各種原因，我們明明展示了某些信息，但是用戶就是看不到，其背后的原因就是我們的視覺動線不太明確，讓用戶忽略了一些信息。

例如：之前的 Airbnb 網(wǎng)站。根據(jù)我以往的認(rèn)知了解到 Airbnb 是一家預(yù)定民宿的產(chǎn)品。那么我什么時(shí)候才會打開 Airbnb 預(yù)定民宿？周末游、親子外游、全家旅游的場景的時(shí)候是不是打開 Airbnb 的幾率大一些，為什么我會打開 Airbnb 預(yù)定民宿？因?yàn)?Airbnb 這種高品質(zhì)民宿更多給用戶傳達(dá)了一種家庭的感覺，讓用戶在外出旅游的同時(shí)也能感受到家的溫馨，所以在 Airbnb 最早的網(wǎng)站中，產(chǎn)品為了給用戶傳達(dá)一種家的概念，首頁用了一張全家吃飯場景的大圖。左側(cè)粉色的 Airbnb 愛彼迎、與家人一起，在旅行中迎接新年，這都是在 Airbnb 剛確定中文名字以后，給用戶傳達(dá)一種愛彼迎中文品牌感，整個(gè)頭部的 banner 組合起來就是為了給用戶傳達(dá)一種我們叫愛彼迎，全家外出旅行可以找我們預(yù)定高品質(zhì)民宿。但是隨著大家對愛彼迎這個(gè)品牌的認(rèn)知，有些用戶反饋到找不到預(yù)定民宿的入口，這就是因?yàn)橛行┯脩糁活欀疵利惖拇髨D和文藝的文案信息，隨著視覺動態(tài)的變化把預(yù)定這個(gè)模塊給忽略掉了。

現(xiàn)在我們再打開 Airbnb 的官網(wǎng)就會發(fā)現(xiàn) Airbnb 在傳遞產(chǎn)品調(diào)性的同時(shí)也更多的強(qiáng)調(diào)預(yù)定民宿模塊。

通過首頁的頭圖我們可以分析出：從左到右看，左側(cè)的文案信息為了給用戶傳達(dá)一種春天到了，我們該出去玩了，再加上“趁花開 去撒野”這種比較有文藝調(diào)的文案信息，既凸顯了高品質(zhì)的產(chǎn)品調(diào)性，又給用戶傳遞了一種外出游玩的信息。接著我們看一下視覺動線。

通過視覺動線可以看出，用戶的視覺隨著故事線而變化。

• ①春天了，快出來玩吧；
• ②你看外面的花都開了，很美；
• ③去哪玩呢？如果用戶用精準(zhǔn)地點(diǎn)需求就可以直接搜索；
• ④用戶沒有精準(zhǔn)搜索的時(shí)候，現(xiàn)在有民宿特價(jià)哦，快來看看吧，你看環(huán)境多好。

用戶的視覺動線完整的隨著故事線變化，這就凸顯了產(chǎn)品和交互設(shè)計(jì)的能力，既傳達(dá)了產(chǎn)品思想，也抓住了用戶的視覺動線。

Airbnb 的網(wǎng)站上面的 banner 是固定的，不可變化的，但是日常的產(chǎn)品中，banner 位置一般都是輪播圖。這時(shí)候怎么既傳達(dá)了產(chǎn)品調(diào)性，又突出了搜索需求呢？

這是萬豪酒店的首頁，在首頁 banner 下方用一個(gè)突出的卡片顯示預(yù)定酒店模塊，這樣既傳達(dá)了產(chǎn)品現(xiàn)在的優(yōu)惠信息，又保持了用戶預(yù)定酒店的入口需求。

以上就是信息的傳遞，主要通過視覺動線引導(dǎo)用戶去瀏覽信息，當(dāng)用戶找不到自己的想要的信息的時(shí)候，我們通過改變視覺動線、對比等方法凸顯用戶想要的信息。

一般的視覺動線都是通過眼動儀進(jìn)行測試的，但是迫于一些條件的限制，我們無法進(jìn)行眼動測試，這時(shí)候我們可以瞇眼睛，用 1 秒鐘瀏覽這個(gè)網(wǎng)站，并記錄下來眼睛經(jīng)過了哪里，這個(gè)路線就是視覺動線。感興趣的同學(xué)可以嘗試著分析一下 vipkid 官網(wǎng)的視覺動線。

理解信息

我們通過視覺動線把內(nèi)容傳遞給了眼睛，眼睛又把內(nèi)容傳遞給了大腦，大腦進(jìn)行加工處理，那么這就是視覺交互的第二步：理解信息。

上圖路徑主要介紹了信息理解的步驟，下面通過一個(gè)支付寶首頁的例子來分析一下信息理解的路徑。

因?yàn)橹Ц秾毷醉擁敳康乃{(lán)色色塊，所以我們的視覺動線的第一出發(fā)點(diǎn)為頂部工具 icon，接著我們看到了金剛區(qū)入口 icon，再接著我們看到了 banner 信息區(qū)，然后我看到了補(bǔ)貼，對這個(gè)補(bǔ)貼很感興趣啊，我想點(diǎn)進(jìn)去看看。這時(shí)就找到了視覺焦點(diǎn)，然后我對文案信息進(jìn)行理解，“補(bǔ)貼”這事不錯(cuò)啊，我理解了視覺焦點(diǎn)的信息，也能看懂，還比較感興趣，緊接著我看看右邊的補(bǔ)貼券插畫，挺好的，很不錯(cuò)，然后點(diǎn)進(jìn)去看了看。那么這個(gè)路徑就是我對信息理解的路徑。

怎么才能讓用戶抓到視覺焦點(diǎn)后還能感興趣呢？文案要簡單、容易理解。符合場景的需要，熟悉、有個(gè)人的情感。

例如：拼多多總是用搶紅包提現(xiàn)微信這種強(qiáng)刺激的文案信息讓用戶不斷的去分享裂變，拉動活躍用戶。支付寶每年年底都有一個(gè)支付寶賬單活動，為什么這種活動會吸引那么多用戶點(diǎn)擊？首先信息簡單，大家看一眼知道這是支付寶賬單信息，再者年底了，各公司財(cái)務(wù)都在總結(jié)，我們作為一個(gè)個(gè)體是不是也該財(cái)務(wù)總結(jié)一下，最后有很強(qiáng)烈的個(gè)人情感，我今年花了多少錢？錢都花哪里了？這些特點(diǎn)都是支付寶賬單活動特別成功的部分原因。

我們看下面兩個(gè) banner。

例如這兩個(gè) banner，左側(cè)只是強(qiáng)調(diào)了備戰(zhàn)雙 11，右邊字太多了，用戶懶得看。每到雙 11 各大電商都在做促銷，看誰家便宜，但是這個(gè) banner 只是傳達(dá)了雙 11 這個(gè)信息，沒有突出用戶感興趣的點(diǎn)：打折多、便宜。右側(cè)這個(gè)恰好對比要好很多，直接突出 19.9 元，直接給用戶傳達(dá)了最簡單的信息。

為什么我們左側(cè)的 banner 點(diǎn)擊不太好？我們沒看懂也沒有興趣，總結(jié)下來主要是：文字太多了；內(nèi)容太亂了；重點(diǎn)標(biāo)錯(cuò)了。

我們再來分析一下支付寶的這個(gè) banner。

這個(gè) banner 很簡單，左邊橙色粗字體，右邊一個(gè)簡單的插畫，為什么支付寶會有這樣的 banner？首先不能否定支付寶的設(shè)計(jì)師能力，他們能做出非常好看非?；ㄉ诘脑O(shè)計(jì)，在這里只是因?yàn)橛脩舭阎Ц秾毊?dāng)做一個(gè)金融工具來用，買早餐，去便利店的時(shí)候，需要付款了我打開支付寶，我的能量可以收了，我打開支付寶直接收一下能量，用戶每次打開都有精準(zhǔn)目的，用完就走，在這么短的視覺焦點(diǎn)時(shí)間內(nèi)，設(shè)計(jì)師需要盡快的把想要傳達(dá)的信息傳達(dá)給用戶，讓用戶在最短的時(shí)間內(nèi)了解到我們想要傳達(dá)的信息并且對這條信息感興趣，去掉干擾，直接漏出用戶感興趣的利益點(diǎn)，快速理解然后點(diǎn)擊。

我們再看一下 Airbnb 的文案信息展示。

左右兩張對比，我只是在趁花開和去撒野之間打了個(gè)逗號，讀右側(cè)文案信息的時(shí)候，是不是有一些段挫感，先理解一下趁花開，再去理解“去撒野”？所以文案的信息展示，我們要著重思考一下，怎么寫才能讓用戶快速理解，而且感興趣，標(biāo)點(diǎn)符號的運(yùn)用都要考慮清楚，我用了標(biāo)點(diǎn)符號是不是有分裂感？用戶是不是更好理解？

總結(jié)：

通過以上我們理解了視覺交互主要分類兩大類：信息傳遞；信息理解。

信息傳遞主要通過視覺動線進(jìn)行傳達(dá)理解，優(yōu)化視覺動線的主要方法有 5 種，主要為：顏色鮮艷；形狀突出；與周邊有差異；動態(tài)效果；信息敏感。眼睛把信息傳遞給大腦以后，大腦對信息加工處理，這就是信息理解。

怎么才能讓大腦快速的對信息進(jìn)行加工呢？主要方法有 3 種，分別是：文案要簡單、容易理解；符合場景的需要；熟悉、有個(gè)人的情感。