畫面中的視覺動線設計

有意識地控制觀看者的視線。

排版的作用,即在明確的設計目標中,將所有元素做有組織的安排,精確地傳達訊息,運用視覺動線的規劃,引導使用者觀看。


大綱
1. 前言
1. 單個「點」
2. 單個「點」的視覺運用
3. 多個「點」
4. 觀察視線動線的練習
5. 最後的碎碎唸

單個「點」

只有一個黑點

觀看以下的圖片,你的視線會停留在黑點?還是黑點以外的區域呢?

Design by Jhane Chou

視線集中在中央

假設在畫面中只有一個黑點,多數人的視線會被中央的黑點吸引,中央的黑點成為視覺焦點。而更仔細觀察的人,會注意右下角有浮水印,視線會在中央黑點與右下角之間移動,停留在黑點的次數會大於浮水印。

視線在黑點及浮水印的移動過程,就是視覺動線。

Design by Jhane Chou

因為多了浮水印,不符合一開始所說的「只有一個」焦點的狀態。於是我再將浮水印移除,只留下黑點,再看一次畫面。

Design by Jhane Chou

這次的視線幾乎集中於黑點,沒有其他東西吸引我們的視線。

Design by Jhane Chou

單個「點」的視覺運用

提升主角份量

運用這樣的手法,使周圍留白,與具有份量的主角產生對比,讓視覺集中,提升主角的份量,乾淨的畫面,營造俐落的專業感。

Design by Jhane Chou

運用在動態中

可見作品〈招き猫〉在切換不同招財貓的時候,每一個物件的位置皆保持在相同的地方,使視覺達到連貫,並避免視覺過度移動的疲憊感,能專注於招財貓身上。


多個「點」

多個大小不一的黑點

將畫面中的多個黑點,依大小排列,觀看以下圖片,你的視線是從何開始,又如何移動的呢?

Design by Jhane Chou

視線由大的黑點移動到小的黑點

多數人觀看時,視線會先從最大的黑點吸引,依序觀看次小的黑點,不斷持續到最小的黑點,形成由左至右的視覺動線。

當然,這也跟我們「由左至右」的閱讀方式有絕大影響。

Design by Jhane Chou
Design by Jhane Chou

不管是由小到大,還是由大到小

以下的案例,最明顯最亮眼的是方形大螢幕,接著視線會從鍵盤上的小球,依序往越大的球前進,空間感的延伸。

Design by Jhane Chou

多個大小相同的黑點

就算是大小相同的黑點,也能透過距離的疏密來產生關聯。

Design by Jhane Chou

距離越近,越容易成為有關係的群組

隨意排列的狀態下,我們依然會找尋有關係的黑點,因此距離越近的黑點,在視覺中被認定為有關聯。

Design by Jhane Chou

元素靠得越近,關係就越強烈。在排版設計中,將關係接近的元素組合在一起,讓畫面有組織。

設計法則:格式塔理論 Gestalt Theory

點的群集,構成線的形象。

設計基礎:點.線.面 Point and Line to Plane

觀察視線動線的練習

觀看資訊的優先順序。

平常看見具有美感的視覺、編排設計時,可以停下來好好觀看內容,從最明顯的主角至不起眼的點綴。

以這份簡易的作品展示為例:

Taiwan Bear 臺灣熊好|Design by Jhane Chou

01/徒手繪製該視覺的版面草圖

過程中盡可能簡化,只留下基本的草圖。

Design by Jhane Chou

02/繪製視覺動線的起點、移動過程、終點

起點為圓點,終點為箭頭,模擬視覺移動的路線,盡量一氣呵成畫完。

Design by Jhane Chou

03/思考其版面構成的原因

為什麼圖要擺左邊?字要擺右邊?這張視覺使用的是哪種對齊方法?他如何安排這些位置,產生視覺引導?


最後的碎碎唸

排版的作用,即在明確的設計目標中,將所有元素做有組織的安排,精確地傳達訊息,運用視覺動線的規劃,引導使用者觀看。

文章同步發佈平台&支持,可前往不同平台進行拍手支持,或透過下方的 Like 讚賞(註冊 Liker 完全免費)讓創作者獲得額外收入!

.MediumMatters
Aesthetics
設計基礎:美的形式原理
Life
書評《點子就是一直來:不論在順境還是逆境,10 個保持創意來源的方法》
Freelancer
接案設計師的工作流程
Product
LINE 原創主題|豆芽歷險記-岩之森
Life
書評《少年與狗》
Freelancer
接案時應避免以口頭或訊息提供報價
Freelancer
使用圖表分散焦慮感的負面循環
精選文章
文章指南&支持作者的方式

Share