双色球胆码公式2019096:設計中的“視覺動線”

  • A+
所屬分類:經驗思維

排三复式投注计算公式 www.ygqvkm.com.cn 本文來源: sky(公眾號:我們的設計日記), 共 2687 字

不知道大家有沒有打開一個網站或者一個APP,但是不知道去看哪里,頁面中有太多的信息內容,很難決定從哪里開始,然后就很容易關閉了。在互聯網時代,用戶不是在讀書,讀我們設計的每段文字,他們是掃描,掃視!掃描意味著他們只有在眼睛被吸引的時候才會停下來閱讀!

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

?什么是視覺動線??

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

設計中的“視覺動線”

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

設計中的“視覺動線”

▲?進?。捍詠】?,光線越來越亮,門口用巨大的海盜建筑和石頭的海盜旗,慢慢把你帶入到電影里面的場景。

設計中的“視覺動線”

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

設計中的“視覺動線”

▲?航行:陰沉的燈光,骷髏人和你招手,發出著讓人驚悚的笑聲,同時還伴隨海水的聲音,讓我們的感官和聽覺都豎起來了。

設計中的“視覺動線”

▲?氛圍:陰暗的燈光里面到處是懸崖峭壁,以及反派的出現,水流也越大越大,瞬間把我們置身于電影之中。

設計中的“視覺動線”

▲?氛圍:水面慢慢平靜,眼球突然出現一艘大船,船體突然失去重力,伴隨著巨大的海浪聲。

設計中的“視覺動線”

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

設計中的“視覺動線”

▲?高潮:船長和他的戰士就在這里互相作戰,伴隨著濃濃炮火的聲音。

設計中的“視覺動線”

▲?收尾:伴隨著音樂聲和平靜的海水聲慢慢把觀眾帶回現實。

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

設計中的“視覺動線”

▲?最近新零售很火,各種生鮮店,那么這些店在設計時候為了保證效益最大化,設計中要讓每一個角落被利用起來,就需要設計顧客的游覽動線,動線直接影響了店鋪銷售額,用戶的購物動線,一般分為L型,F型,曲線型,大家有興趣可以去了解下。

設計中的“視覺動線”

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

設計中的“視覺動線”

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

設計中的“視覺動線”

設計中的“視覺動線”

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

上面案例看似和設計無關,但是卻很有關系,里面蘊藏著很多心理學,很多視覺動線的思考!大家有興趣可以去看看https:/ /www.viennemilano.com/這家電商公司在商品中的一些應用,充分運用了設計中很多經典的動線,視覺錯覺等技術。

?視覺動線有幾種類型??

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

1.F類型

設計中的“視覺動線”

設計中的“視覺動線”

▲?這是一個F型的案例,當讀者用戶閱讀時候,他們看見喜歡的東西時,會橫向的去閱讀,因此在熱力圖上能清晰的看見用戶瀏覽順序的呈現F型。

2.Z類型

設計中的“視覺動線”

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

3.對角線類型

設計中的“視覺動線”

設計中的“視覺動線”

▲?對角線類型,是在遵從從右到左閱讀習慣基礎上,一個更優的布局形式,由于我們已經習慣了從左上角到右下角的掃描習慣,這里面包括4個項線,后面的分享中我會詳細和大家分享。

?Z類型特點?

設計中的“視覺動線”

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

設計中的“視覺動線”

設計中的“視覺動線”

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

設計中的“視覺動線”

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

設計中的“視覺動線”

▲?這種結構很有效,因為當用戶在這種模式上移動的時候,就會出現一個虛構的Z形狀。

設計中的“視覺動線”

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

設計中的“視覺動線”

▲?Z布局,在平時網頁設計中尤其運營頻繁,它的規則是用于大多數網站設計,在傳遞品牌同時,也能很好的凸顯內容。

設計中的“視覺動線”

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

?特殊的Z類型布局?

設計中的“視覺動線”

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

設計中的“視覺動線”

?怎么運用??

前面有聊到視覺動線,以及經典的動線Z,那么在設計中我們如何去運用呢?當我們設計一個網站或者海報時候,在布局之前先問自己幾個問題:

1.當用戶打開這個頁面時候,你希望他注意到哪些信息?

2.你希望他們以什么樣順序查看你的信息?

3.你想讓他做什么?

Z布局的前提其實很簡單,在頁面上加上Z,然后把重要的信息放到Z上,讓用戶在掃描路徑上看見這些重要元素!所以Z視覺動線,最核心的是你需要傳遞給用戶那些有價值的信息。

設計中的“視覺動線”

設計中的“視覺動線”

▲ Eveynote就是一個很好的案例,在用戶打開這個頁面,希望用戶注意到品牌,然后去注冊或者登錄,通過文字簡單了解這個產品信息。

1.圖中LOGO是起點

2.右上角按鈕是行動點

3.是信息內容,這個產品是做什么的

4.注冊登錄,頁面核心操作

?Z動線缺點?

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

?總結?

1.動線作為控制用戶的移動模型,作為設計師我們需要刻意制造用戶瀏覽的動線。

2.在設計中常用動線有Z,F,對角線動線形式,我們需要了解每一個動線設計的含義和使用場景。

3.Z字型動線,在網頁中運用比較多,但是在使用前我們先要確定網站核心目標,然后把核心內容組織到動線上。

本文到這里就結束了,也希望大家在設計中多去觀察一些更加高級的方法,不要只局限視覺表現!

?
  • 版權聲明:本文源自 sky(公眾號:我們的設計日記), 共 2687 字。
  • 轉載請注明,本文鏈接:設計中的“視覺動線”

發表評論

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: