畫面中的視覺動線設計
![](https://assets.matters.news/embed/5fb12bdc-fe58-45a7-a967-c571ef54ddc2.png)
排版的作用,即在明確的設計目標中,將所有元素做有組織的安排,精確地傳達訊息,運用視覺動線的規劃,引導使用者觀看。
目錄 ────────────────
⊙ 從「點」開始
⊙ 視線引導
⊙ 觀察視線動線的練習
⊙ 三大視覺動線
⊙ 黑歷史
───────────────────
⊙ 從「點」開始
只有一個黑點
觀看以下的圖片,你的視線會停留在黑點?還是黑點以外的區域呢?
![](https://assets.matters.news/embed/77200d0c-1afc-415b-bbdd-a49d357cdddf.png)
視線集中在中央
假設在畫面中只有一個黑點,多數人的視線會被中央的黑點吸引,中央的黑點成為視覺焦點。而更仔細觀察的人,會注意右下角有浮水印,視線會在中央黑點與右下角之間移動,停留在黑點的次數會大於浮水印。
視線在黑點及浮水印的移動過程,就是視覺動線。
![](https://assets.matters.news/embed/22258a34-60cd-4749-bb29-3f89a9be190d.png)
因為多了浮水印,不符合一開始所說的「只有一個」焦點的狀態。於是我再將浮水印移除,只留下黑點,再看一次畫面。
![](https://assets.matters.news/embed/8723a18d-d344-4dc3-9a49-f102925e67ae.png)
這次的視線幾乎集中於黑點,沒有其他東西吸引我們的視線。
![](https://assets.matters.news/embed/1ef9fea4-b5c9-4e9d-b07d-487bab475950.png)
提升主角的份量
運用這樣的手法,使周圍留白,與具有份量的主角產生對比,讓視覺集中,提升主角的份量,乾淨的畫面,營造俐落的專業感。
![](https://assets.matters.news/embed/534878b1-ec26-4c61-a5aa-42daa6655ae6.jpeg)
![](https://assets.matters.news/embed/92ac08f2-814b-4b2a-88f6-df4dceee4a00.jpeg)
→ Samurai Spirit Inc. Logo Design by Jhane Chou
→ YOSGO Logo Design by Jhane Chou
運用在動態中
可見作品〈招き猫〉在切換不同招財貓的時候,每一個物件的位置皆保持在相同的地方,使視覺達到連貫,並避免視覺過度移動的疲憊感,能專注於招財貓身上。
→ 招き猫 | Maneki-Neko Collection
多個大小不一的黑點
將畫面中的多個黑點,依大小排列,觀看以下圖片,你的視線是從何開始,又如何移動的呢?
![](https://assets.matters.news/embed/e87c7deb-04a9-4c07-a9f2-7540e5832dd8.png)
視線由大的黑點移動到小的黑點
多數人觀看時,視線會先從最大的黑點吸引,依序觀看次小的黑點,不斷持續到最小的黑點,形成由左至右的視覺動線。
當然,這也跟我們「由左至右」的閱讀方式有絕大影響。
![](https://assets.matters.news/embed/698660e8-6fba-4bf7-9b4b-0a08cfde6756.png)
![](https://assets.matters.news/embed/8778570f-ce89-4f31-a4c3-e69534c9ea1b.png)
不管是由小到大,還是由大到小
以下的案例,最顯眼的是方形大螢幕,接著視線會從鍵盤上的小球,依序往越大的球前進,空間感的延伸。
![](https://assets.matters.news/embed/f99ebae7-7fe3-4461-97bb-a3b70c80e032.gif)
多個大小相同的黑點
就算是大小相同的黑點,也能透過距離的疏密來產生關聯。
![](https://assets.matters.news/embed/0134d858-6fe6-41d5-8532-5a771a337f62.png)
距離越近,越容易成為有關係的群組
隨意排列的狀態下,我們依然會找尋有關係的黑點,因此距離越近的黑點,在視覺中被認定為有關聯。
![](https://assets.matters.news/embed/52f30607-37d0-4be9-bb08-bc387c77bf26.png)
- 元素靠得越近,關係就越強烈。在排版設計中,將關係接近的元素組合在一起,讓畫面有組織。──設計法則:格式塔理論 Gestalt Theory
- 點的群集,構成線的形象。──設計基礎:點.線.面 Point and Line to Plane
⊙ 視線引導
觀看資訊的優先順序。
運用版面的內容排列,引導觀看者的視覺動線,更容易傳達訊息。預想如何引導移動的視線,再進行排版。讓觀看者可以順著易懂的順序,理解我們想傳達的內容。
![](https://assets.matters.news/embed/7a47e654-33d3-4476-9ee3-848b149ef470.jpeg)
以上圖視覺為例,主標「豐年熟物誌」的層級最高,一眼就能明確知道這張視覺傳達的主題,接著你可能會注意到副標是誠品書店舉辦的展覽。
而其他的相關資訊則是依序弱化,或視情況加以凸顯,整體的規劃和諧,卻不失精緻感。
⊙ 觀察視線動線的練習
平常看見具有美感的視覺、編排設計時,可以停下來好好觀看內容,從最明顯的主角至不起眼的點綴。
以這份簡易的作品展示為例:
![](https://assets.matters.news/embed/fb67f115-d9db-443a-84f8-dce803fc8b5c.jpeg)
01/徒手繪製該視覺的版面草圖
過程中盡可能簡化,只留下基本的草圖
![](https://assets.matters.news/embed/c30cd244-ac89-4009-bca9-f870a90eb12d.png)
02/繪製視覺動線的起點、移動過程、終點
起點為圓點,終點為箭頭;模擬視覺移動的路線盡量一氣呵成
![](https://assets.matters.news/embed/b550ec53-c169-4786-b73f-2ddfb43b7314.png)
03/思考其版面構成的原因
為什麼圖要擺左邊?字要擺右邊?這張視覺使用的是哪種對齊方法?他如何安排這些位置,產生視覺引導?
![](https://assets.matters.news/embed/c70e0b1a-8a72-4dd7-9a35-c47437b3097d.gif)
→ Taiwan Bear 臺灣熊好|Design by Jhane Chou
⊙ 三大視覺動線
這些動線偏向大部分的版面,通常與內容物的「閱讀」方式,以及使用的「載體」有關,屬於較不容易出錯的動線規劃。
![](https://assets.matters.news/embed/24cf01bf-0046-4633-9af8-2ac5bcd08edb.png)
- Z|報紙或網頁橫排版面
- N|雜誌常見的縱排版面
- F|網頁常見
不過,這並不代表必須得使用這些方式排列,更沒有絕對的公式,時代和人們的習慣會不斷地更新累積,會持續演變新的設計以符合人的需求。
⊙ 黑歷史
看著以前生疏的設計,對比現在,天差地遠。
![](https://assets.matters.news/embed/06fd2fbc-efee-4c5e-a53e-79b79eb40f77.png)
2013 年,幫鄰居設計的 DM
高三時幫鄰居設計的宣傳單,完全不管能不能看懂、好不好閱讀,各種字體都給他放~進~去!看不清楚?全部加陰影來製造對比(住手啊!
不過右邊的 DM 直到現在還貼在鄰居的實體店面…還是海報的大小。
再看看現在的作品:Deerlight Design|曝鹿設計
文章首次發布於 Medium,目前閱讀的版本為同步版。
感謝你的閱讀及支持,任何問題都歡迎來信交流|imjhanemi@gmail.com
Medium|Instagram|Facebook|Deerlight
喜欢我的作品吗?别忘了给予支持与赞赏,让我知道在创作的路上有你陪伴,一起延续这份热忱!
![](https://imagedelivery.net/kDRCweMmqLnTPNlbum-pYA/prod/avatar/64cc05a9-318b-4f70-9415-9108411f36d0.jpeg/public)
![](https://imagedelivery.net/kDRCweMmqLnTPNlbum-pYA/prod/avatar/64cc05a9-318b-4f70-9415-9108411f36d0.jpeg/public)
![](https://imagedelivery.net/kDRCweMmqLnTPNlbum-pYA/prod/avatar/647a90b5-b7c8-4ab1-b949-f1ec0a1e2800.jpeg/public)
![](https://imagedelivery.net/kDRCweMmqLnTPNlbum-pYA/prod/avatar/647a90b5-b7c8-4ab1-b949-f1ec0a1e2800.jpeg/public)
![](https://imagedelivery.net/kDRCweMmqLnTPNlbum-pYA/prod/avatar/19b36f6e-6311-4cd6-b703-c143a4a49113.png/public)
![](https://imagedelivery.net/kDRCweMmqLnTPNlbum-pYA/prod/avatar/19b36f6e-6311-4cd6-b703-c143a4a49113.png/public)
![](https://imagedelivery.net/kDRCweMmqLnTPNlbum-pYA/prod/avatar/588b19da-1f3e-4113-870a-7f12a0647cb9.jpeg/public)
- 来自作者
- 相关推荐