我們平時(shí)在大廠的項(xiàng)目總結(jié)和一些作品集案例中，會(huì)經(jīng)?？匆姾鸵曈X動(dòng)線有關(guān)的講解和說明，雖然大家可能對(duì)它有個(gè)模糊的概念，但并不知道具體怎么應(yīng)用和分析，所以今天這篇干貨，就是圍繞視覺動(dòng)線進(jìn)行具體的解釋和分享。

更多動(dòng)線干貨：

一、什么是視覺動(dòng)線

視覺動(dòng)線這個(gè)詞可以分解成 “視覺”·“動(dòng)線” 兩個(gè)部分，視覺就是我們觀看的圖形內(nèi)容，而動(dòng)線則主要是建筑和室內(nèi)相關(guān)行業(yè)的術(shù)語，指人在空間中移動(dòng)的路線、軌跡。

比如住房設(shè)計(jì)中的走廊過道的預(yù)留，餐廳、展館中的路線規(guī)劃和引導(dǎo)等，都是空間中的動(dòng)線設(shè)計(jì)內(nèi)容。

優(yōu)秀的動(dòng)線設(shè)計(jì)可以讓處于該空間的人獲得良好的行動(dòng)體驗(yàn)，比如大家都逛過的宜家，之所以購(gòu)物體驗(yàn)好，很大一部分原因就是它的動(dòng)線設(shè)計(jì)，通過規(guī)劃一條蜿蜒的單一的路線，讓顧客體驗(yàn)宜家的所有商品和主題區(qū)域。

同理，目前新商場(chǎng)越來越多采用中空式的設(shè)計(jì)，使用兩側(cè)環(huán)形回廊，也是因?yàn)閯?dòng)線設(shè)計(jì)的需要，顧客直接沿著走廊逛，能獲得更佳的購(gòu)物體驗(yàn)。所以商鋪堆在一起路線阡陌交錯(cuò)的老式百貨商場(chǎng)逐漸被顧客拋棄，不是倒閉就要重新改造。

動(dòng)線的設(shè)計(jì)對(duì)人的體驗(yàn)有非常大的影響，同理，視覺的動(dòng)線也一樣需要經(jīng)過設(shè)計(jì)，也會(huì)對(duì)用戶的體驗(yàn)產(chǎn)生非常大的影響。

講到視覺動(dòng)線，就要提人的視覺特點(diǎn)。人眼雖然可以接受大量的視覺信息，但是我們的意識(shí)、注意力，一般只能注意到這些視覺信息的某個(gè)特定的區(qū)域、對(duì)象、點(diǎn)，所以我們需要通過移動(dòng)視覺的中心來完成對(duì)信息的獲取和識(shí)別，而視覺中心的移動(dòng)軌跡，就叫視覺動(dòng)線。

但這個(gè)過程并不是隨機(jī)的，而是會(huì)遵循一定的特征和規(guī)律。比如現(xiàn)代報(bào)紙?jiān)O(shè)計(jì)之父 Edmund C. Arnold 在長(zhǎng)期的排版經(jīng)歷中，認(rèn)為閱讀是應(yīng)該遵循某種原則、習(xí)慣進(jìn)行的，比如看書閱讀就是從左到右從上到下（不同國(guó)家地區(qū)可能不同）。并且設(shè)計(jì)了一個(gè)四象限圖例來解釋視覺的關(guān)注順序。

簡(jiǎn)單解釋，就是一個(gè)平面中，左上角是視覺的優(yōu)先關(guān)注區(qū)域和起點(diǎn)，到右下角結(jié)束。左下角和右上角都是相對(duì)弱勢(shì)的關(guān)注區(qū)域，但是右上角關(guān)注度更低一點(diǎn)。這個(gè)模式主要應(yīng)用在平面的版式中，相信大家看過不少類似的排版方案。

但是，視覺的關(guān)注模式并不是僅僅只有這一種，還有尼爾森的《眼睛軌跡的研究》中，通過眼動(dòng)儀記錄視覺熱區(qū)，發(fā)現(xiàn)人們會(huì)不由自主使用 F 字母形狀的模式來閱讀網(wǎng)頁。

而在非搜索引擎型的其它網(wǎng)站中，還能得到 Z 字型的瀏覽習(xí)慣。

這些都是對(duì)人類視覺原生習(xí)慣、行為的研究，但是，這些結(jié)論并不是完美的、通用的、絕對(duì)的！如果這些理論能作為基本定理使用，那就沒有這篇分享存在的必要，大家隨便看點(diǎn)材料就行了。

比如阿拉伯語系，它們的閱讀是從右往左的，也就是上面提到的這幾種習(xí)慣得做個(gè)鏡像反轉(zhuǎn)。

同時(shí)，如果學(xué)過繪畫或攝影的同學(xué)，應(yīng)該也會(huì)發(fā)現(xiàn)構(gòu)圖教學(xué)中包含大量引導(dǎo)觀眾視覺的說明和案例，不同構(gòu)圖的重心所在位置和瀏覽順序是完全不同的，比如根據(jù)黃金螺旋的重心，或者黃金三分法的左右中心線或四個(gè)交點(diǎn)重心等等……

再深入研究不同設(shè)計(jì)領(lǐng)域的視覺和瀏覽模式，你會(huì)發(fā)現(xiàn)并不存在統(tǒng)一的理論，每個(gè)理論僅僅都只是提供一個(gè)可能性或建議。

這要說明，人的視覺習(xí)慣是后天培養(yǎng)的，且基于不同的場(chǎng)景可以培養(yǎng)出不同的習(xí)慣，而這些習(xí)慣大多不是固定的。因?yàn)槿耸呛苋菀资艿桨凳径唤俪肿⒁饬Φ纳?，所以?chuàng)作者可以根據(jù)自己的需要去引導(dǎo)用戶的視覺和關(guān)注順序，這為我們的創(chuàng)作提供了大量的可能性，也是設(shè)計(jì)的挑戰(zhàn)和魅力。

在 UI 設(shè)計(jì)中，對(duì)動(dòng)線的應(yīng)用并不是學(xué)習(xí)相關(guān)的理論然后照搬進(jìn)設(shè)計(jì)里，而是理解這些概念以后，結(jié)合使用場(chǎng)景以及用戶的視覺習(xí)慣，有意識(shí)的，有目的性的去創(chuàng)建產(chǎn)品的視覺動(dòng)線。

二、視覺動(dòng)線的應(yīng)用

在界面設(shè)計(jì)中，視覺的動(dòng)線本質(zhì)上就是信息設(shè)計(jì)的一部分，通過對(duì)信息的規(guī)劃來實(shí)現(xiàn)對(duì)視覺動(dòng)線管理。

而針對(duì)視覺動(dòng)線的管理中，可以分為兩個(gè)層級(jí)，模塊視覺動(dòng)線和內(nèi)容視覺動(dòng)線。因?yàn)檫@是兩個(gè)不同的層級(jí)，也是用戶查看一個(gè)頁面識(shí)別、查詢信息的認(rèn)知順序。
比如我們看 Adobe PhotoShop 的界面，我們會(huì)先識(shí)別模塊是什么，然后再關(guān)注下方的信息和操作內(nèi)容。

而內(nèi)容視覺動(dòng)線則是模塊內(nèi)具體內(nèi)容信息的瀏覽路徑，例如字段、選項(xiàng)、數(shù)據(jù)、按鈕等細(xì)節(jié)元素。

之所以這么拆，原因就是 UI 的界面不是書籍、雜志，很多分享拿 F 形或 Z 形的動(dòng)線來套 UI 界面是不合理的。用戶觀看頁面并不是根據(jù)內(nèi)容依次往下看，更多是根據(jù)模塊作為視覺的著陸點(diǎn)。如果一個(gè)模塊本身內(nèi)容不實(shí)用戶想要的，那么用戶就會(huì)轉(zhuǎn)移到別的模塊去，再查看模塊內(nèi)的信息。

比如下面的餓了么的首頁，我們第一次打開的話，肯定第一步注意到頂部的 Banner，但我們幾乎不用看字就能知道這是個(gè)廣告模塊，多數(shù)人肯定選擇直接忽視掉。除非匆匆一瞥中里面有文案是吸引你的，你會(huì)再去認(rèn)真看里面的信息。

接著實(shí)現(xiàn)就會(huì)被下方紅包的模塊吸引，部分用戶也會(huì)發(fā)現(xiàn)這是個(gè)廣告模塊直接略過，另一部分用戶可能會(huì)被吸引查看具體的優(yōu)惠信息。

第三步才會(huì)開始查看頂部的快速入口模塊，如果看了幾個(gè)不知道有什么用也不想點(diǎn)的話，那么才上滑查看底部的商家列表。

移動(dòng)端中，正常的閱讀順序肯定是從上到下的，但顯然在畫面中增加了這種強(qiáng)視覺的元素時(shí)，我們的視覺是會(huì)被它們吸引的，于是視覺動(dòng)線就并不是根據(jù)常規(guī)的順序行進(jìn)。

這種體驗(yàn)好嘛？肯定不好。但是大廠的專業(yè)設(shè)計(jì)師們會(huì)不明白這個(gè)道理嘛？當(dāng)然是主動(dòng)這么去做的，因?yàn)檫\(yùn)營(yíng)的需要，部分模塊對(duì)用戶權(quán)重很高很重要，但它們是用戶主動(dòng)要去操作和使用的模塊，往往是固定不變的，不能產(chǎn)生額外價(jià)值。而運(yùn)營(yíng)內(nèi)容則多數(shù)是侵入式的讓用戶被動(dòng)接受，但又不能放在符合邏輯最重要的地方，于是就通過視覺的手段來進(jìn)行強(qiáng)引導(dǎo)，修改用戶的視覺動(dòng)線來實(shí)現(xiàn)自己的商業(yè)目標(biāo)。

這在移動(dòng)端是非常普遍的，大家可以多打開一些國(guó)內(nèi)的應(yīng)用看看，就會(huì)發(fā)現(xiàn)你的視覺動(dòng)線往往并不是按常理推進(jìn)的，總是會(huì)被吸引到一些別的東西上面，這就是模塊視覺動(dòng)線上的設(shè)計(jì)結(jié)果。

所以在界面設(shè)計(jì)的前期規(guī)劃中，就需要通過原型的方式去放置模塊，除了符合上下、左右的基本順序外，可以通過視覺的對(duì)比來進(jìn)行 “插隊(duì)”，完成模塊視覺動(dòng)線的管理。

即使在 B 端的設(shè)計(jì)中也適用，我們想強(qiáng)行讓用戶關(guān)注到的模塊，就用對(duì)比突出它。

有了第一級(jí)模塊的劃分，然后才是模塊內(nèi)部的視覺動(dòng)線梳理。同理，一個(gè)大的模塊如果比較復(fù)雜，就可能包含子模塊，我們就要進(jìn)一步先識(shí)別子模塊，再進(jìn)入具體的內(nèi)容。

比如餓了么的店鋪卡片，可以拆分成左上的店鋪圖片，左下的評(píng)價(jià)，右上的店鋪名，右中的店鋪信息，右下的店內(nèi)商品。主要的視覺動(dòng)線大概率是這樣的：

到這里是不是發(fā)現(xiàn)開始難受起來了？不僅僅是難受，我們也沒辦法像上面一樣用業(yè)務(wù)需要來解釋這個(gè)動(dòng)線的有效性、和理性，這是一個(gè)非常非常重要的設(shè)計(jì)判斷標(biāo)準(zhǔn)。

內(nèi)容視覺動(dòng)線同理，同樣可以歸納視覺動(dòng)線的順序和軌跡。比如我們之前分享的騰訊云產(chǎn)品面板，就是視覺的動(dòng)線凌亂而又缺乏邏輯性的代表，所以我們對(duì)它改版的核心目標(biāo)就是調(diào)整視覺的動(dòng)線，讓產(chǎn)品選項(xiàng)的查找更容易。

如果我們?cè)O(shè)計(jì)出來的界面、模塊內(nèi)容看起來很別扭，往往就是視覺動(dòng)線的混亂引起的?？梢允褂蒙厦娴姆椒▽?dòng)線畫出來，往往就可以發(fā)現(xiàn)問題出在哪里，并進(jìn)行對(duì)應(yīng)的優(yōu)化。

結(jié)尾

更進(jìn)一步的案例和演示我會(huì)在之后分享，希望你們看完以后可以認(rèn)真思考自己項(xiàng)目中的動(dòng)線是怎么安排的，尤其是想在作品集中添加這種說明就一定是要經(jīng)過自己規(guī)劃后的動(dòng)線軌跡，而不是套個(gè) F 或者 Z 形模式強(qiáng)行解釋。

我們?cè)谙乱黄韶浿性儋v！

歡迎關(guān)注作者的微信公眾號(hào)：「超人的電話亭」