中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

在遵循自然習(xí)慣的基礎(chǔ)上，對(duì)頁(yè)面設(shè)計(jì)加以特殊設(shè)置，讓用戶在不知不覺(jué)中獲取設(shè)計(jì)師想讓用戶知道的信息。

不知道大家有沒(méi)有打開一個(gè)網(wǎng)站或者一個(gè)APP，但是不知道去看哪里，頁(yè)面中有太多的信息內(nèi)容，很難決定從哪里開始，然后就很容易關(guān)閉了。

在互聯(lián)網(wǎng)時(shí)代，用戶不是在讀書，讀我們?cè)O(shè)計(jì)的每段文字，他們是掃描，掃視！

掃描意味著他們只有在眼睛被吸引的時(shí)候才會(huì)停下來(lái)閱讀。

作為設(shè)計(jì)師，需要很好地控制用戶的閱讀路徑，幫助用戶處理信息，今天分享的這個(gè)視覺(jué)動(dòng)線方法希望可以幫到你。

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

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

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

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

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

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

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

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

▲高潮：昏暗的場(chǎng)景突然明亮起來(lái)，巨大的海面和行使的船只就在眼前

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

▲收尾：伴隨著音樂(lè)聲和平靜的海水聲慢慢把觀眾帶回現(xià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)，就需要設(shè)計(jì)顧客的游覽動(dòng)線，動(dòng)線直接影響了店鋪銷售額。

用戶的購(gòu)物動(dòng)線，一般分為L(zhǎng)型、F型、曲線型，大家有興趣可以去了解下。

▲上圖絲襪中，哪一個(gè)看起來(lái)讓人更顯瘦呢？

在一些國(guó)外電商中，同樣通過(guò)設(shè)計(jì)上的動(dòng)線引導(dǎo)增強(qiáng)用戶購(gòu)買欲望，在左側(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)更加豐滿？

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

上面案例看似和設(shè)計(jì)無(wú)關(guān)，但是卻很有關(guān)系，里面蘊(yùn)藏著很多心理學(xué)，很多視覺(jué)動(dòng)線的思考。

視覺(jué)動(dòng)線有幾種類型？

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

那么回歸到設(shè)計(jì)中，有哪幾種動(dòng)線類型呢？

1. F類型

▲F型案例

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

2. Z類型

▲Z類型

從左上角開始到右上角，保留著從左到右的習(xí)慣，然后眼睛會(huì)尋找到最后部分，尋找到頁(yè)面的底部。

3. 對(duì)角線類型

▲對(duì)角線類型

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

Z類型特點(diǎn)

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

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

這是一個(gè)典型的Z布局，在很多網(wǎng)站設(shè)計(jì)中都運(yùn)用比較多。

Z形結(jié)構(gòu)不會(huì)把注意力放在文字為核心，往往是突出行動(dòng)按鈕，在一些極簡(jiǎn)的設(shè)計(jì)項(xiàng)目中運(yùn)用較多，往往只需要一個(gè)簡(jiǎn)單的圖片和文字，關(guān)鍵的行地點(diǎn)案例，作為突出即可，遵循這種自然規(guī)律。

這種結(jié)構(gòu)很有效，因?yàn)楫?dāng)用戶在這種模式上移動(dòng)的時(shí)候，就會(huì)出現(xiàn)一個(gè)虛構(gòu)的Z形狀。

▲salesforce也是采用Z布局，從左到右分別是LOGO和行動(dòng)點(diǎn)，下方從左到右是導(dǎo)航菜單和按鈕

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

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

特殊的Z類型布局

▲之字型布局

我們可以理解為Z的重復(fù)排序，有一些的Z型布局出現(xiàn)，用戶的路線，從左到右，再開始從左到右，這種有一個(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è)問(wèn)題：

• 當(dāng)用戶打開這個(gè)頁(yè)面時(shí)候，你希望他注意到哪些信息？
• 你希望他們以什么樣順序查看你的信息？
• 你想讓他做什么？

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

所以Z視覺(jué)動(dòng)線，最核心的是你需要傳遞給用戶那些有價(jià)值的信息。

▲Eveynote

在用戶打開這個(gè)頁(yè)面，希望用戶注意到品牌，然后去注冊(cè)或者登錄，通過(guò)文字簡(jiǎn)單了解這個(gè)產(chǎn)品信息。

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

Z動(dòng)線缺點(diǎn)

Z型結(jié)構(gòu)也有缺點(diǎn)，作為控制用戶視線移動(dòng)的模型，它很容易受到外界元素干擾，并且讓用戶實(shí)現(xiàn)脫離我們?cè)O(shè)定好的軌跡，因?yàn)橛脩粼跒g覽時(shí)候總是容易被圖片或者明亮的元素吸引。如果你準(zhǔn)備運(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)線形式，我們需要了解每一個(gè)動(dòng)線設(shè)計(jì)的含義和使用場(chǎng)景；
• Z字型動(dòng)線，在網(wǎng)頁(yè)中運(yùn)用比較多，但是在使用前我們先要確定網(wǎng)站核心目標(biāo)，然后把核心內(nèi)容組織到動(dòng)線上。

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

#專欄作家#

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

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

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