趕快收下！連BAT設(shè)計(jì)師都在使用的視覺(jué)動(dòng)線技巧上

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

作為設(shè)計(jì)師，我們必要很好的控制用戶在使用我們產(chǎn)品的過(guò)程中，他的視覺(jué)欣賞路徑，必要去了解我們的眼睛如何處理界面信息，我會(huì)結(jié)合我的一些學(xué)習(xí)和大家交流下在視覺(jué)動(dòng)線，在設(shè)計(jì)中如何去運(yùn)用。

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

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

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

進(jìn)場(chǎng)：從進(jìn)場(chǎng)開(kāi)始，光線越來(lái)越亮，門(mén)口用偉大的海盜建筑和石頭的海盜旗，慢慢把你帶入到電影里面的場(chǎng)景。

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

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

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

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

高潮：陰暗的場(chǎng)景忽然通亮起來(lái)，偉大的海面和利用的船只就在面前目今。

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

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

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

最近新零售很火，分外是各種生鮮店，那么這些店在設(shè)計(jì)時(shí)候?yàn)榱吮ＷC生鮮店效益最大化，在設(shè)計(jì)中必要讓每一個(gè)死角天真起來(lái)，這就是顧客的視覺(jué)動(dòng)線。顧客在商品購(gòu)買(mǎi)，左右了超市的販賣(mài)額。超市的購(gòu)物動(dòng)線，一樣平常分為 L型，F(xiàn)型，曲線型，大家有愛(ài)好可以去了解下。

上圖絲襪中，哪一個(gè)看起來(lái)讓人更瘦呢？在一些國(guó)外電商中，同樣通過(guò)設(shè)計(jì)上的動(dòng)線指導(dǎo)加強(qiáng)用戶購(gòu)買(mǎi)欲望，在左側(cè)的圖片中，絲襪加了幾條垂直的線條，使得我們覺(jué)得這個(gè)絲襪穿身上會(huì)讓人腿顯得更長(zhǎng)！其中就是運(yùn)用到線條垂直連續(xù)感，制造動(dòng)線。

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

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

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

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

二、視覺(jué)動(dòng)線有幾種類(lèi)型？

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

1. F類(lèi)型

2. Z類(lèi)型

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

3. 對(duì)角線類(lèi)型

對(duì)角線類(lèi)型，是在遵從從右到左閱讀風(fēng)俗的基礎(chǔ)上，一個(gè)更良好的布局情勢(shì)，因?yàn)槲覀円呀?jīng)風(fēng)俗了從左上角到右下角的掃描風(fēng)俗，這里面包括4個(gè)項(xiàng)線。

三、Z類(lèi)型特點(diǎn)

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

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

Z形結(jié)構(gòu)不會(huì)把細(xì)致力放在筆墨為核心，每每是凸起舉措按鈕，在一些機(jī)簡(jiǎn)的設(shè)計(jì)項(xiàng)目中運(yùn)用比較多，每每只必要一個(gè)簡(jiǎn)單的圖片和筆墨，關(guān)鍵的地點(diǎn)案例，作為凸起即可。

這種結(jié)構(gòu)很有用，由于當(dāng)用戶在這種模式上移動(dòng)的時(shí)候，就會(huì)出現(xiàn)一個(gè)假造的 Z 外形。

salesforce 也是采用 Z布局，從左到右分別是 LOGO 和舉措點(diǎn)，下來(lái)后從左到右是導(dǎo)航菜單和按鈕。

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

在最早期的時(shí)候，雜志，報(bào)紙，里面沒(méi)有任何圖片，筆墨和題目，只有長(zhǎng)篇筆墨，列和列，在這么一個(gè)很枯燥設(shè)計(jì)中，用戶一樣平常會(huì)遵循 Z型來(lái)欣賞。

四、特別的Z類(lèi)型布局

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

五、怎么運(yùn)用 ？

前面有聊到視覺(jué)動(dòng)線，以及經(jīng)典的動(dòng)線Z，那么在設(shè)計(jì)中我們?nèi)绾稳ミ\(yùn)用呢？當(dāng)我們?cè)O(shè)計(jì)一個(gè)網(wǎng)站或者海報(bào)時(shí)候，在布局之前先問(wèn)本身幾個(gè)題目：

• 當(dāng)用戶打開(kāi)這個(gè)網(wǎng)頁(yè)時(shí)候，你盼望他細(xì)致到那些信息？
• 你盼望他們以什么樣順序查看你的信息？
• 你想讓他做什么？

Z布局的前提其實(shí)很簡(jiǎn)單，在網(wǎng)頁(yè)上加上 Z，然后把緊張的信息放到 Z 上，讓用戶在掃描路徑上看見(jiàn)這些緊張?jiān)?。所?Z視覺(jué)動(dòng)線，最核心的是你必要傳遞給用戶那些有價(jià)值的信息。

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

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

六、Z動(dòng)線瑕玷

Z型結(jié)構(gòu)也有瑕玷，作為控制用戶視線移動(dòng)的模型，它很容易受到外界元素干擾，并且讓用戶離開(kāi)我們?cè)O(shè)定好的軌跡，由于用戶在欣賞時(shí)候總是容易被圖片，或者通亮的元素吸引，假如你預(yù)備運(yùn)用 Z 動(dòng)線時(shí)候，肯定必要平衡好這些元素，不要過(guò)多干擾我們核心功能操作，否則達(dá)不到好的預(yù)期。

總結(jié)

動(dòng)線作為我們控制用戶的移動(dòng)模型，作為設(shè)計(jì)師我們必要刻意制造用戶欣賞的動(dòng)線。

在設(shè)計(jì)中常用動(dòng)線有Z、F、對(duì)角線動(dòng)線情勢(shì)，我們必要了解每一個(gè)動(dòng)線設(shè)計(jì)的含義和使用場(chǎng)景。

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

迎接關(guān)注作者的微信公眾號(hào)：我們的設(shè)計(jì)日記，每周分享最新設(shè)計(jì)趨勢(shì)和設(shè)計(jì)經(jīng)驗(yàn)，科學(xué)設(shè)計(jì)方法。

圖片素材作者：Julian Ybarra