在遵循自然習慣的基礎上，對頁面設計加以特殊設置，讓用戶在不知不覺中獲取設計師想讓用戶知道的信息。

不知道大家有沒有打開一個網站或者一個APP，但是不知道去看哪里，頁面中有太多的信息內容，很難決定從哪里開始，然后就很容易關閉了。

在互聯(lián)網時代，用戶不是在讀書，讀我們設計的每段文字，他們是掃描，掃視！

掃描意味著他們只有在眼睛被吸引的時候才會停下來閱讀。

作為設計師，需要很好地控制用戶的閱讀路徑，幫助用戶處理信息，今天分享的這個視覺動線方法希望可以幫到你。

什么是視覺動線？

大家可以想象一部電視劇，每一集從一個場景轉移到另外一個場景，這些場景會有連續(xù)性，每一個場景之間有順序。

不知道大家有沒有去過上海迪斯尼，其中一個項目加勒比海盜，在迪士尼的設計中，動線往往是里面很重要一個環(huán)節(jié)和流程。

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

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

▲航行：骷髏人和你招手，發(fā)出讓人驚悚的笑聲，同時還伴隨海水的聲音，讓我們的感官和聽覺都緊張起來

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

▲氛圍：水面慢慢平靜，眼球突然出現(xiàn)一艘大船，船體突然失去重力，伴隨著巨大的海浪聲

▲高潮：昏暗的場景突然明亮起來，巨大的海面和行使的船只就在眼前

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

▲收尾：伴隨著音樂聲和平靜的海水聲慢慢把觀眾帶回現(xiàn)實

上述就是迪士尼在動線上的經典設計，整個路徑伴隨著聽覺、視覺，讓你感受非常好，我們做產品也是如此。

最近新零售很火，各種生鮮店，那么這些店在設計時候為了保證效益最大化，設計中要讓每一個角落被利用起來，就需要設計顧客的游覽動線，動線直接影響了店鋪銷售額。

用戶的購物動線，一般分為L型、F型、曲線型，大家有興趣可以去了解下。

▲上圖絲襪中，哪一個看起來讓人更顯瘦呢？

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

▲那么哪一條看起來更加修長？

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

▲哪一條看起來更加豐滿？

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

上面案例看似和設計無關，但是卻很有關系，里面蘊藏著很多心理學，很多視覺動線的思考。

視覺動線有幾種類型？

上面和大家介紹了什么是動線，其實就是人們眼睛在處理信息時候的順序。設計中我們需要去了解這些用戶視線規(guī)律，從中去創(chuàng)造更好的體驗。

那么回歸到設計中，有哪幾種動線類型呢？

1. F類型

▲F型案例

當讀者用戶閱讀時候，他們看見喜歡的東西時，會橫向閱讀，因此在熱力圖上能清晰看見用戶瀏覽順序呈現(xiàn)F型。

2. Z類型

▲Z類型

從左上角開始到右上角，保留著從左到右的習慣，然后眼睛會尋找到最后部分，尋找到頁面的底部。

3. 對角線類型

▲對角線類型

在遵從從右到左閱讀習慣基礎上，一個更優(yōu)的布局形式；由于我們已經習慣了從左上角到右下角的掃描習慣，這里面包括4個項線，后面的分享中我會詳細和大家分享。

Z類型特點

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

在UBER的官網設計中，就是一個很典型的Z形引導布局，首先遵從用戶習慣從左至右，所以左邊放公司品牌LOGO，右側是頁面中的司機和乘客登錄入口，下面是氛圍圖片區(qū)域，左下角是新用戶注冊入口。

這是一個典型的Z布局，在很多網站設計中都運用比較多。

Z形結構不會把注意力放在文字為核心，往往是突出行動按鈕，在一些極簡的設計項目中運用較多，往往只需要一個簡單的圖片和文字，關鍵的行地點案例，作為突出即可，遵循這種自然規(guī)律。

這種結構很有效，因為當用戶在這種模式上移動的時候，就會出現(xiàn)一個虛構的Z形狀。

▲salesforce也是采用Z布局，從左到右分別是LOGO和行動點，下方從左到右是導航菜單和按鈕

▲ Z布局，在平時網頁設計中尤其運營頻繁，它適用于大多數(shù)網站設計，在傳遞品牌同時，也能很好地凸顯內容

在最早期的時候，雜志，報紙，里面沒有任何圖片，文字和標題，只有長篇文字，列和列。在這么一個很枯燥的設計中，用戶一般會遵循Z型來瀏覽。

特殊的Z類型布局

▲之字型布局

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

怎么運用？

前面有聊到視覺動線，以及經典的動線Z，那么在設計中我們如何去運用呢？

當我們設計一個網站或者海報時候，在布局之前先問自己幾個問題：

• 當用戶打開這個頁面時候，你希望他注意到哪些信息？
• 你希望他們以什么樣順序查看你的信息？
• 你想讓他做什么？

Z布局的前提其實很簡單，在頁面上加上Z，然后把重要的信息放到Z上，讓用戶在掃描路徑上看見這些重要元素。

所以Z視覺動線，最核心的是你需要傳遞給用戶那些有價值的信息。

▲Eveynote

在用戶打開這個頁面，希望用戶注意到品牌，然后去注冊或者登錄，通過文字簡單了解這個產品信息。

• 圖中LOGO是起點；
• 右上角按鈕是行動點；
• 信息內容，這個產品是做什么的；
• 注冊登錄，頁面核心操作。

Z動線缺點

Z型結構也有缺點，作為控制用戶視線移動的模型，它很容易受到外界元素干擾，并且讓用戶實現(xiàn)脫離我們設定好的軌跡，因為用戶在瀏覽時候總是容易被圖片或者明亮的元素吸引。如果你準備運用Z動線時候，一定需要平衡好這些元素，不要過多干擾核心功能操作，否則達不到好的預期。

總結

• 動線作為控制用戶的移動模型，作為設計師我們需要刻意制造用戶瀏覽的動線；
• 在設計中常用動線有Z、F、對角線動線形式，我們需要了解每一個動線設計的含義和使用場景；
• Z字型動線，在網頁中運用比較多，但是在使用前我們先要確定網站核心目標，然后把核心內容組織到動線上。

之后我會和大家分享一下F型的動線，也希望大家在設計中多去觀察一些更加高級的方法，不要只局限視覺表現(xiàn)。

#專欄作家#

Sky，微信公眾號：我們的設計日記（ID：helloskys），人人都是產品經理專欄作家。支付寶體驗設計專家，阿里巴巴天貓設計專家；10年知名互聯(lián)網公司設計經驗，對于產品從0到1、品牌定位、金融產品、設計規(guī)范、運營規(guī)范、大促等有豐富實戰(zhàn)經驗。

本文原創(chuàng)發(fā)布于人人都是產品經理。未經許可，禁止轉載。

題圖來自Unsplash, 基于CC0協(xié)議。