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

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

傳遞信息

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

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

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

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

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

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

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

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

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

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

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

例如：之前的 Airbnb 網站。根據我以往的認知了解到 Airbnb 是一家預定民宿的產品。那么我什么時候才會打開 Airbnb 預定民宿？周末游、親子外游、全家旅游的場景的時候是不是打開 Airbnb 的幾率大一些，為什么我會打開 Airbnb 預定民宿？因為 Airbnb 這種高品質民宿更多給用戶傳達了一種家庭的感覺，讓用戶在外出旅游的同時也能感受到家的溫馨，所以在 Airbnb 最早的網站中，產品為了給用戶傳達一種家的概念，首頁用了一張全家吃飯場景的大圖。左側粉色的 Airbnb 愛彼迎、與家人一起，在旅行中迎接新年，這都是在 Airbnb 剛確定中文名字以后，給用戶傳達一種愛彼迎中文品牌感，整個頭部的 banner 組合起來就是為了給用戶傳達一種我們叫愛彼迎，全家外出旅行可以找我們預定高品質民宿。但是隨著大家對愛彼迎這個品牌的認知，有些用戶反饋到找不到預定民宿的入口，這就是因為有些用戶只顧著看美麗的大圖和文藝的文案信息，隨著視覺動態的變化把預定這個模塊給忽略掉了。

現在我們再打開 Airbnb 的官網就會發現 Airbnb 在傳遞產品調性的同時也更多的強調預定民宿模塊。

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

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

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

用戶的視覺動線完整的隨著故事線變化，這就凸顯了產品和交互設計的能力，既傳達了產品思想，也抓住了用戶的視覺動線。

Airbnb 的網站上面的 banner 是固定的，不可變化的，但是日常的產品中，banner 位置一般都是輪播圖。這時候怎么既傳達了產品調性，又突出了搜索需求呢？

這是萬豪酒店的首頁，在首頁 banner 下方用一個突出的卡片顯示預定酒店模塊，這樣既傳達了產品現在的優惠信息，又保持了用戶預定酒店的入口需求。

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

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

理解信息

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

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

因為支付寶首頁頂部的藍色色塊，所以我們的視覺動線的第一出發點為頂部工具 icon，接著我們看到了金剛區入口 icon，再接著我們看到了 banner 信息區，然后我看到了補貼，對這個補貼很感興趣啊，我想點進去看看。這時就找到了視覺焦點，然后我對文案信息進行理解，“補貼”這事不錯啊，我理解了視覺焦點的信息，也能看懂，還比較感興趣，緊接著我看看右邊的補貼券插畫，挺好的，很不錯，然后點進去看了看。那么這個路徑就是我對信息理解的路徑。

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

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

我們看下面兩個 banner。

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

為什么我們左側的 banner 點擊不太好？我們沒看懂也沒有興趣，總結下來主要是：文字太多了；內容太亂了；重點標錯了。

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

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

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

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

總結：

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

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

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