如何創造視覺層級

更新於 發佈於 閱讀時間約 5 分鐘
視覺層級並不侷限於平面設計,在用戶體驗及介面上更是一個重要的核心之一。

視覺層級除了讓畫面的視覺編排更加精緻好看,更重要的功能是能讓畫面有效地被組織,讓觀者更容易理解。


視覺層次?層級?

多數人較多接觸的詞彙是「層次」,較常描述畫面是否豐富有變化?而這邊說的「層級」則是注重於優先順序。

層次是指系統在結構或功能方面的等級秩序。具有多樣性,可按物質的質量、能量、運動狀態、空間尺度、時間順序、組織化程度等多種標準劃分。不同層次具有不同的性質和特徵,既有共同的規律,又各有特殊規律

最初心理學家基於格式塔原理來檢測用戶對於元素之間關係的視覺感知,發現人們傾向於將視覺關係靠近的元素群視作為有關係的一組。

雖然層次與層級的意思很接近,但他們之間還是有些許的差異。

  • 層次:既有共同的規律,又各有特殊規律。
  • 層級:注重在優先順序,且有層次的特性。

不只要了解層次,更要學習如何運用層級來提升你的視覺;當你會使用層級的時候,其實就已經擁有了層次的概念。

最簡單的方式就是善用對比。

接下來介紹這些對比方式:大小、上下左右、色彩、圖片,最後則是學習如何融會貫通且打破規則。


運用大小

通常我們會優先注意最大或最顯眼的對象,最簡單的作法,就是使用大小來將元素製造優先順序。


上下左右會影響視覺順序

上下左右的順序,與我們的閱讀習慣有很大的關係。


「由上至下」、「由下至上」

右圖我們習慣由上面的點閱讀至下方的點。

而左圖就算有大小的變化,但因為視覺的對比不夠強烈,所以第一時間還是有可能先往上方的點看,再來因為由上往下觀看,可能會產生由小至大的感受,所以就分不出到底是上面的圓優先還是下方較大的圓優先?


「由左至右」、「由右至左」

左右的差別以圖形來說並沒有太大影響,但以文字來說,閱讀順序的方向會隨著內容而改變。通常我們最常以 “Z” 字形的方向閱讀。


色彩更直觀卻也較不好掌握

無彩色會優先注意到顏色較重的圓,因為他與背景的白色對比較高;而有彩色又比無彩色更顯眼,因為灰色跟白色皆為無彩色,所以對比沒有比與有彩色對比強烈。

無彩色:白、灰、黑等色系。

為何會說較不好掌握呢?因為當我們的背景是深色甚至是其他有彩色的時候,對比情況也會有所不同。

加入了色彩以後,就必須要了解不同色系之間的對比關係,彩度、明度、補色等等對比,若處理得不好就會讓人有種畫面混濁或是沒有達到凸顯效果。


圖比文字吸引人

當畫面只有圖片與色塊的時候,我們會將目光優先放在圖片上,並視讀圖片的內容。

並不是放張圖就能達到吸引人的效果,而是圖片的內容是否吸引人?
以上先以最簡單的方式區分,這些方法都是為了達到「視覺引導」的目的,引導觀者先觀看畫面不同區域的優先順序。

更多時候我們不只運用單個方式呈現,而是混合使用,並且觀察與分析一個富有視覺階層的設計是如何達成的?並且維持平衡的狀態,而不是一昧的強調所有訊息。


範例

接下來會介紹幾個範例,以視覺是有引導舒服平衡的狀態為主:

第一眼看過,會先注意到中間的女人與荷葉圖案,接下來可能會往上或往下看藏在畫面中的VATTIN字眼,最後才觀看右上角的小字,而背後的深色底襯托整體的神祕感,讓畫面顯得更吸引人。


運用顏色的統調,讓畫面看起來舒適,整體用白色來作為視線引導,以螢幕的亮度以及白球的前後大小變化相呼應,畫面的螢幕即為水平視線。

在插畫上也能讓畫面具有層次,且內容的物件是互相有關聯的,可以點擊圖片觀看更多系列的插畫。


因應主題,可以大膽的留白,藉由線條引導搭配切痕的流動,最後讓畫面聚焦到刀尖上。畫面中的物件安排具有視覺層級,看似不單調,也不會讓主題失焦。


最後的碎碎唸

  • 主角是誰?畫面只敘述一件事情或核心,切勿貪心。
  • 畫面的主題很重要,不為了強調而與畫面主題背道而馳。
  • 精隨在於傳遞訊息。
  • 除了練習視覺引導、編排等,也可以觀察或臨摹不錯的作品。
  • 打破規則,使用不同的方式呈現,避免一成不變。
  • 清楚每個元素的關係,不管是大至背景,或小至點綴的物件。
  • 你可以更大膽一點。
  • 注意呼吸與留白。
留言
avatar-img
留言分享你的想法!
avatar-img
Deerlight Design 曝鹿設計
67會員
45內容數
換帳號唷
2024/08/23
透過適當的版面安排、組織元素,有效地傳達訊息。排版設計的用意是傳達訊息,而我們如何吸引人觀看,以及讓人願意停留,這些都是影響訊息是否能有效傳達的因素。提出幾個技巧與觀念,設計好讀也好看的排版。
Thumbnail
2024/08/23
透過適當的版面安排、組織元素,有效地傳達訊息。排版設計的用意是傳達訊息,而我們如何吸引人觀看,以及讓人願意停留,這些都是影響訊息是否能有效傳達的因素。提出幾個技巧與觀念,設計好讀也好看的排版。
Thumbnail
2024/08/21
將完形心理運用在畫面中,能有效引導視覺動線。格式塔理論也稱「完形心理學」,是心理學家對於知覺組織的一種看法。將完形心理運用在畫面中,能有效引導視覺動線。
Thumbnail
2024/08/21
將完形心理運用在畫面中,能有效引導視覺動線。格式塔理論也稱「完形心理學」,是心理學家對於知覺組織的一種看法。將完形心理運用在畫面中,能有效引導視覺動線。
Thumbnail
2024/08/20
如果約束使設計更易於使用,並降低出錯的可能性。日常中有不少約束設計的例子,它在生活中佔有一席之地,舉凡紅綠燈、電梯上下行的限制等等。
Thumbnail
2024/08/20
如果約束使設計更易於使用,並降低出錯的可能性。日常中有不少約束設計的例子,它在生活中佔有一席之地,舉凡紅綠燈、電梯上下行的限制等等。
Thumbnail
看更多
你可能也想看
Thumbnail
孩子寫功課時瞇眼?小心近視!這款喜光全光譜TIONE⁺光健康智慧檯燈,獲眼科院長推薦,網路好評不斷!全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉,讓孩子學習更舒適、保護眼睛!
Thumbnail
孩子寫功課時瞇眼?小心近視!這款喜光全光譜TIONE⁺光健康智慧檯燈,獲眼科院長推薦,網路好評不斷!全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉,讓孩子學習更舒適、保護眼睛!
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
寫作的力量:超越影像與畫作的深度表達 在現代社會,照片和畫作作為視覺藝術的代表,常被用來紀錄和傳達特定瞬間的美好或情感。 每一張照片和每一幅畫作都是藝術家眼中的世界呈現。 它們以靜態的方式捕捉了短暫的瞬間,讓觀者能夠在無需言語的情況下感受到其內涵與情感。
Thumbnail
寫作的力量:超越影像與畫作的深度表達 在現代社會,照片和畫作作為視覺藝術的代表,常被用來紀錄和傳達特定瞬間的美好或情感。 每一張照片和每一幅畫作都是藝術家眼中的世界呈現。 它們以靜態的方式捕捉了短暫的瞬間,讓觀者能夠在無需言語的情況下感受到其內涵與情感。
Thumbnail
不論是平面設計、介面設計,都能見排版這一詞。而排版的作用,即在明確的設計目標中,將所有元素做有組織的安排,精確地傳達訊息。
Thumbnail
不論是平面設計、介面設計,都能見排版這一詞。而排版的作用,即在明確的設計目標中,將所有元素做有組織的安排,精確地傳達訊息。
Thumbnail
視覺層級並不侷限於平面設計,在用戶體驗及介面上更是一個重要的核心之一。視覺層級除了讓畫面的視覺編排更加精緻好看,更重要的功能是能讓畫面有效地被組織,讓觀者更容易理解。
Thumbnail
視覺層級並不侷限於平面設計,在用戶體驗及介面上更是一個重要的核心之一。視覺層級除了讓畫面的視覺編排更加精緻好看,更重要的功能是能讓畫面有效地被組織,讓觀者更容易理解。
Thumbnail
本文探討2024年UI/UX設計趨勢,包括深色模式和色彩適應性、微互動和動畫、3D元素與虛擬現實整合,以及以用戶為中心的數據驅動設計、無障礙設計和情感設計的新方法。
Thumbnail
本文探討2024年UI/UX設計趨勢,包括深色模式和色彩適應性、微互動和動畫、3D元素與虛擬現實整合,以及以用戶為中心的數據驅動設計、無障礙設計和情感設計的新方法。
Thumbnail
隨著科技的發展,數位設計領域也日益進步,其中「透明度平面化」成為了設計師在處理完稿檔案時必須面對的一大挑戰。在這篇文章中,我們將一探究竟,揭開透明度平面化的神秘面紗,並探討它在當代設計中的重要性,以及如何巧妙應對可能遇到的問題。 透明度平面化 在數位設計的豐富世界裡,透明效果提供了無限的創意
Thumbnail
隨著科技的發展,數位設計領域也日益進步,其中「透明度平面化」成為了設計師在處理完稿檔案時必須面對的一大挑戰。在這篇文章中,我們將一探究竟,揭開透明度平面化的神秘面紗,並探討它在當代設計中的重要性,以及如何巧妙應對可能遇到的問題。 透明度平面化 在數位設計的豐富世界裡,透明效果提供了無限的創意
Thumbnail
排版微系列調專門分享如何透過一些調整讓設計與排版更好看,並且每張設計都會說明為何調整的原因,以及原本設計可能有的問題。 如果你是設計初學者那這份內容會很適合你,因為會很細節的去講解排版原因,如果你看完喜歡,我每月會有三篇微調詳解固定分享給訂閱會員,歡迎訂閱。
Thumbnail
排版微系列調專門分享如何透過一些調整讓設計與排版更好看,並且每張設計都會說明為何調整的原因,以及原本設計可能有的問題。 如果你是設計初學者那這份內容會很適合你,因為會很細節的去講解排版原因,如果你看完喜歡,我每月會有三篇微調詳解固定分享給訂閱會員,歡迎訂閱。
Thumbnail
排版微系列調專門分享如何透過一些調整讓設計與排版更好看,並且每張設計都會說明為何調整的原因,以及原本設計可能有的問題。 如果你是設計初學者那這份內容會很適合你,因為會很細節的去講解排版原因,如果你看完喜歡,我每月會有三篇微調詳解固定分享給訂閱會員,歡迎訂閱。
Thumbnail
排版微系列調專門分享如何透過一些調整讓設計與排版更好看,並且每張設計都會說明為何調整的原因,以及原本設計可能有的問題。 如果你是設計初學者那這份內容會很適合你,因為會很細節的去講解排版原因,如果你看完喜歡,我每月會有三篇微調詳解固定分享給訂閱會員,歡迎訂閱。
Thumbnail
在這篇文章中,我們將帶領讀者深入探討數位圖片管理的核心——「連結影像」與「嵌入影像」的使用技巧。這是每位從事視覺設計、版面編排和數位藝術的創作者必須掌握的基本知識。在進行數位設計時,如何選擇這兩種不同的圖片處理方式,不僅關係到作品的最終呈現,還直接影響到工作流程的效率和靈活性。 追尋影像的軌跡
Thumbnail
在這篇文章中,我們將帶領讀者深入探討數位圖片管理的核心——「連結影像」與「嵌入影像」的使用技巧。這是每位從事視覺設計、版面編排和數位藝術的創作者必須掌握的基本知識。在進行數位設計時,如何選擇這兩種不同的圖片處理方式,不僅關係到作品的最終呈現,還直接影響到工作流程的效率和靈活性。 追尋影像的軌跡
Thumbnail
在這個充滿創意與創新的時代,文字不僅僅是用來傳遞信息的工具,更是一種藝術表達方式。對於設計師來說,如何在視覺傳達中巧妙運用文字,使之成為設計中不可或缺的一部分,是一門需要精心學習的技藝。今天,讓捷可印帶領你們深入探索一項關鍵技術——文字的轉外框,並看看它如何在設計領域中發揮著重要作用。 首先就來探
Thumbnail
在這個充滿創意與創新的時代,文字不僅僅是用來傳遞信息的工具,更是一種藝術表達方式。對於設計師來說,如何在視覺傳達中巧妙運用文字,使之成為設計中不可或缺的一部分,是一門需要精心學習的技藝。今天,讓捷可印帶領你們深入探索一項關鍵技術——文字的轉外框,並看看它如何在設計領域中發揮著重要作用。 首先就來探
Thumbnail
高細節-- high details 高解析度-- high resolution 高清--1080P/4K/8K 細節-- detailed 無縫-- seamless 高清畫質--full HD 電影感-- Cinematic 攝影-- photography 生動色彩-
Thumbnail
高細節-- high details 高解析度-- high resolution 高清--1080P/4K/8K 細節-- detailed 無縫-- seamless 高清畫質--full HD 電影感-- Cinematic 攝影-- photography 生動色彩-
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News