趕快收下！連BAT設計師都在使用的視覺動線技巧上

不知道大家有沒有打開一個網(wǎng)站或者一個 APP，但是不知道去看那里，由于網(wǎng)頁中有太多的信息內容，我們很難決定，從哪里開始，然后我們就很容易關閉這個 APP 或者網(wǎng)站。大家都知道在互聯(lián)網(wǎng)時代，用戶不是在讀書，在讀我們設計的每段筆墨，他們是掃描，掃視！掃描意味著他們只有在眼睛被吸引的時候才會停下來閱讀。

作為設計師，我們必要很好的控制用戶在使用我們產(chǎn)品的過程中，他的視覺欣賞路徑，必要去了解我們的眼睛如何處理界面信息，我會結合我的一些學習和大家交流下在視覺動線，在設計中如何去運用。

一、什么是視覺動線？

從字面意思，看著很嵬峨上，大家可以想象一部電視劇，每一集從一個場景轉移到另外一個場景，通常情況下，這些場景會有延續(xù)性，每一個場景之間有順序。

上海迪士尼里其中一個項目加勒比海盜，在迪士尼的設計中，動線每每是里面很緊張一個環(huán)節(jié)和流程，觀眾爽不爽，刺激不刺激都在動線視覺中。

進場：從進場開始，光線越來越亮，門口用偉大的海盜建筑和石頭的海盜旗，慢慢把你帶入到電影里面的場景。

入口：潮濕的墻壁，陰暗的燈光，金幣寶箱的感覺，破舊的木頭，消沉的音樂讓你瞬間進入電影世界。

航行：陰森的燈光，骷髏人和你招手，發(fā)出著讓人驚悚的笑聲，同時還伴隨海水的聲音，讓我們的感官和聽覺都豎起來了。

氛圍：昏暗的燈光里面到處是懸崖峭壁，以及反派的出現(xiàn)，水流也越大越大，瞬間把我們置身于電影之中 。

氛圍：水面慢慢鎮(zhèn)靜，面前目今忽然出現(xiàn)一搜大船，船體忽然失去重力，伴隨著偉大的海浪聲。

高潮：陰暗的場景忽然通亮起來，偉大的海面和利用的船只就在面前目今。

大高潮：船長和他的兵士就在這里互相作戰(zhàn)，伴隨著濃濃炮火的聲音。

收尾：伴隨著音樂聲，和鎮(zhèn)靜的海水聲音慢慢把觀眾帶回實際。

上述就是迪士尼在動線上的經(jīng)典設計，整個路徑伴隨著聽覺，視覺，讓你感受特別很是好，我們做產(chǎn)品也是如此。

最近新零售很火，分外是各種生鮮店，那么這些店在設計時候為了保證生鮮店效益最大化，在設計中必要讓每一個死角天真起來，這就是顧客的視覺動線。顧客在商品購買，左右了超市的販賣額。超市的購物動線，一樣平常分為 L型，F(xiàn)型，曲線型，大家有愛好可以去了解下。

上圖絲襪中，哪一個看起來讓人更瘦呢？在一些國外電商中，同樣通過設計上的動線指導加強用戶購買欲望，在左側的圖片中，絲襪加了幾條垂直的線條，使得我們覺得這個絲襪穿身上會讓人腿顯得更長！其中就是運用到線條垂直連續(xù)感，制造動線。

那么哪一條看起來更加修長？很顯明只有一條線是不夠的，設計師又加了多條線，兩個產(chǎn)品中，左側比右側看起來更加苗條和修長。

哪一條看起來更加苗條？黑色是可以讓我們看起來更瘦，但其實不透明的，由于可以反射出更多光線，因此可以帶來更多幻覺，不透明反而能讓你的腿更加的苗條。

哪一條看起來更加豐滿？假如為了讓大腿更加豐滿，更勇敢的顏色，每每能吸引更多燈光，給人豐滿的另外一個訣竅就是圖案設計，圖案看起來比較復雜，能傳遞出復雜性，能誑騙大腦。

上面案例看似和設計無關，但是卻有很大關聯(lián)，里面蘊藏著許多生理學，許多視覺動線的思考。大家有愛好可以去看看 https://www.viennemilano.com/ 這家電商公司在商品中的一些研究，充分運用了設計中許多經(jīng)典的動線，視覺錯覺等技術。

二、視覺動線有幾種類型？

上面和大家介紹了什么是動線，其實就是人們眼睛在處理信息時候的順序，設計中我們必要去了解這些用戶視線規(guī)律，從中去創(chuàng)造更好的體驗，那么回歸到設計中，有哪幾種動線類型呢？

1. F類型

2. Z類型

Z類型顧名思義，從左上角開始到右上角，保留著從左到右的風俗，然后眼睛會探求到最后部分，探求到網(wǎng)頁的底部。

3. 對角線類型

對角線類型，是在遵從從右到左閱讀風俗的基礎上，一個更良好的布局情勢，因為我們已經(jīng)風俗了從左上角到右下角的掃描風俗，這里面包括4個項線。

三、Z類型特點

從字面意思可以看出，Z形布局是沿著 Z 的圖形追蹤，用戶在掃描時候從左到右，從上到下，這是眼睛在網(wǎng)頁中的天然移動模式。

在 UBER 的官網(wǎng)設計中，就是一個很典型的 Z形指導布局，首先遵從用戶風俗從左至右，所以左邊放公司品牌LOGO，右側是網(wǎng)頁中的司機和乘客登錄入口，下面是氛圍圖片區(qū)域，左下角是新用戶注冊入口，這是一個典型的 Z布局，在許多網(wǎng)站設計中都運用比較多。

Z形結構不會把細致力放在筆墨為核心，每每是凸起舉措按鈕，在一些機簡的設計項目中運用比較多，每每只必要一個簡單的圖片和筆墨，關鍵的地點案例，作為凸起即可。

這種結構很有用，由于當用戶在這種模式上移動的時候，就會出現(xiàn)一個假造的 Z 外形。

salesforce 也是采用 Z布局，從左到右分別是 LOGO 和舉措點，下來后從左到右是導航菜單和按鈕。

Z布局，在平時頁面設計中尤其運用頻繁，它的規(guī)則適用于大多數(shù)網(wǎng)站設計，在傳遞品牌同時，也能很好的凸現(xiàn)內容。

在最早期的時候，雜志，報紙，里面沒有任何圖片，筆墨和題目，只有長篇筆墨，列和列，在這么一個很枯燥設計中，用戶一樣平常會遵循 Z型來欣賞。

四、特別的Z類型布局

這種特別 Z布局叫之字型布局，我們可以理解為 Z 的重復排序，有一些的 Z型布局出現(xiàn)，用戶的路線，從左到右，再開始從左到右，這種有一個 Z 運動的欣賞奇觀我們叫做之字型動線。

五、怎么運用 ？

前面有聊到視覺動線，以及經(jīng)典的動線Z，那么在設計中我們如何去運用呢？當我們設計一個網(wǎng)站或者海報時候，在布局之前先問本身幾個題目：

• 當用戶打開這個網(wǎng)頁時候，你盼望他細致到那些信息？
• 你盼望他們以什么樣順序查看你的信息？
• 你想讓他做什么？

Z布局的前提其實很簡單，在網(wǎng)頁上加上 Z，然后把緊張的信息放到 Z 上，讓用戶在掃描路徑上看見這些緊張元素。所以 Z視覺動線，最核心的是你必要傳遞給用戶那些有價值的信息。

Eveynote 就是一個很好的案例，在用戶打開這個網(wǎng)頁，盼望用戶細致到品牌，然后去注冊或者登錄，通過筆墨簡單了解這個產(chǎn)品信息：

• 圖中LOGO是起點
• 右上角按鈕是舉措
• 信息內容，這個產(chǎn)品是做什么的
• 注冊登錄，網(wǎng)頁核心操作

六、Z動線瑕玷

Z型結構也有瑕玷，作為控制用戶視線移動的模型，它很容易受到外界元素干擾，并且讓用戶離開我們設定好的軌跡，由于用戶在欣賞時候總是容易被圖片，或者通亮的元素吸引，假如你預備運用 Z 動線時候，肯定必要平衡好這些元素，不要過多干擾我們核心功能操作，否則達不到好的預期。

總結

動線作為我們控制用戶的移動模型，作為設計師我們必要刻意制造用戶欣賞的動線。

在設計中常用動線有Z、F、對角線動線情勢，我們必要了解每一個動線設計的含義和使用場景。

Z字型動線，在頁面中運用比較多，但是在使用前我們先要確定我們網(wǎng)站核心目標，然后把核心內容組織到我們動線上。

迎接關注作者的微信公眾號：我們的設計日記，每周分享最新設計趨勢和設計經(jīng)驗，科學設計方法。

圖片素材作者：Julian Ybarra