你不能強調一切。她打敗了這一點。當你嘗試這樣做時，你所有的設計元素都會爭奪注意力，沒有什么突出的。他們都在同一時間大喊大叫。一切都變得更響亮了，但仍然什么也聽不見。

重點是相對的。為了讓一個元素脫穎而出，另一個元素必須作為第一個元素脫穎而出的背景。一些元素需要主導其他元素，以便您的設計顯示任何類型的視覺層次結構。

優勢 #

比較設計中的任意兩個元素。要么這些元素在各方面都是平等的，要么一個元素對另一個元素施加某種程度的支配地位。占主導地位的元素會吸引眼球并首先被注意到。她甚至可能似乎對不那么占主導地位的元素表現出某種控制。

占主導地位的元素可能比她占主導地位的元素具有更大的視覺權重。她似乎會對周圍的事物施加壓力。

由于她們的相對大小，圓在正方形上占主導地位。（查看大圖）

當您開發一個構圖時，您會看到許多元素相互支配。有些元素會占主導地位，有些元素會從屬。如果沒有有意識的控制，你只會希望事情一切順利，重要的信息會引起注意。幸運的是，您確實可以控制。

如何建立支配地位 #

您可以通過賦予一個元素更多的視覺權重來設計一個元素，使其比另一個元素更具優勢。她的視覺重量越大，一個元素就越能吸引眼球并表現出優勢。

你通過對比、強調和相對視覺權重來創造優勢。相同的項目不能相互支配。為了發揮主導作用，一個元素必須看起來與她要主導的元素不同。

您的目標是創建視覺重量有明顯差異的元素。

您可以改變我們在本系列的最后幾篇文章中討論過的相同特征。提醒一下，以下是您可以更改以設置不同視覺權重的最常見特征：

您也可以通過視覺方向創造優勢。例如，您可以用全部指向該元素的箭頭包圍一個元素。如果有足夠的方向提示，即使該元素的視覺權重低于頁面上的其他元素，該元素也可能成為主導。

你也可以有共同支配，其中兩個主要元素存在于一個合成中。但是，如果在您的競爭中沒有正確的整體平衡，兩者都會爭奪注意力，最終可能會分散注意力。

理想情況下，您需要一個單一的主導元素。

主導元素 #

設計中的主導元素是具有最大視覺重量的元素（或其他所有元素都指向的元素）。她是首先吸引眼球的元素，而不是頁面上的其他任何東西。

小心不要讓元素占主導地位，以至于她完全掩蓋了其他一切，但要使其在設計中脫穎而出。

你的主導元素是你講述的故事的起點。她是您設計的切入點。她應該將訪客吸引到您希望他們首先看到的地方。

這就是您與訪客開始對話的方式。主導元素首先被注意到，并為接下來看到的內容設置上下文。她位于層次結構的頂部。她應該強調您最重要的信息，因為她可能是任何人都會看到的唯一內容。無論你想讓人們帶走什么信息，都應該在你的主導元素中或附近清楚地傳達出來。

如果沒有切入點，觀眾將不得不更加努力地找到進入你的設計的方式。他們將不得不停下來思考先看哪里，然后思考頁面上真正重要的內容。缺乏切入點會增加訪客的認知負擔。不要讓他們思考。為您的設計提供一個切入點。

焦點 #

焦點也是占主導地位的元素或領域，只是與你的一個主導元素不同，后者可以被定義為你最主要的焦點。焦點是作品中的興趣、重點或差異區域，可以吸引并保持觀眾的注意力。

設計中的焦點應該突出，但應該在最顯著的元素之后被注意到。下圖顯示了在大部分為灰色方塊的海洋中的一個單獨的圓圈。圓圈不僅形狀不同，而且更大，呈鮮紅色。這可能是您的眼睛在圖形中注意到的第一件事。

四個方塊中的三個也是微紅色的，但沒有圓圈那么亮。她們與圖像中的其他方塊大小相同，但由于她們的顏色，她們確實從灰色方塊中脫穎而出。

圓圈和三個紅色方塊都是焦點，因為她們在圖形中的大多數其他元素中脫穎而出。她們與大量的灰色方塊形成對比。明亮的大紅色圓圈最為醒目。她是該圖像中的主要焦點，或主要元素。

紅色圓圈和方塊是焦點。圓圈是主要元素或主要焦點。（查看大圖）

與主要元素一樣，您可以通過賦予她們比除主要元素之外的所有內容都更大的視覺權重來創建焦點——這也是您最主要的焦點。您還可以創建導致不同焦點的視覺方向。

對比是創造焦點的好方法，因為對比會引起人們對不同之處的關注。任何可以對比的東西以及任何可以影響視覺重量或方向的東西都可以用來創建一個焦點，就像她可以用來創建一個主導元素一樣。區別只是程度。

支配等級 #

如果您創建焦點并使這些點之一成為主導元素，那么您就開始創建不同級別的主導地位。主導元素將位于一個級別，并且會在所有其他元素之前被注意到。其余的焦點將位于另一個層面。在一個設計中，你實際上可以擁有多少級別的主導地位？

三是一個很好的數字。作為一般規則，人們可以感知三個層次的支配地位。他們注意到什么是最重要的，什么是最不重要的，然后是其他一切。這些級別之間需要有足夠的差異，以便人們將一個級別與另一個級別區分開來。您想要創建不同的級別，而不是連續體。

您可以創建三個以上的支配級別，但每增加一個級別都會降低相鄰級別之間的對比度。除非你確定你可以很好地對比每個級別，否則堅持三個。

不同的人可能會看到一個構圖，并認為不同的元素是焦點，甚至是主導元素。請記住，在視覺重量上的差異要足夠大，以明確哪個級別更占優勢。您希望您的主要元素和焦點盡可能明顯。

視覺層次結構 #

當您設計不同的主導級別時，您在設計中創建了視覺層次結構。理想情況下，此視覺層次結構將與您的內容的概念層次結構相匹配。如果一篇文章的標題比文章中的標題更重要，那么標題應該更具視覺優勢。

根據所呈現信息的實際優先級建立視覺層次結構。首先，對頁面上的所有內容進行優先級排序，一旦設置好，就設計一個視覺層次結構來遵循該優先級。

視覺層次結構使訪問者能夠瀏覽信息。她可以幫助您快速有效地傳達信息。層次結構的頂部（主要元素）應該有助于回答訪問者在登陸頁面后可能立即提出的問題。

在幾秒鐘內，訪問者應該能夠找到頁面的關鍵點和主要信息。如果您使最重要的信息在視覺上最突出，他們就可以做到這一點。

停留時間超過幾秒鐘的人應該能夠瀏覽您設計中的焦點，以獲得您想要傳達的下一個最重要的信息，以及您的其余信息。

寫作的倒金字塔 #

在設計中建立層次結構類似于發文人使用倒金字塔寫作的方式。最重要的消息都在第一段或第二段。線索涵蓋了誰、什么、在哪里、何時、為什么和如何。她告訴你你需要知道的一切。

寫作的倒金字塔（圖片：維基百科）（查看大圖）

主角之后是填充故事的重要細節。她們是提供上下文或幫助您更深入地理解故事的細節。在文章的末尾是一般和背景信息，很高興知道但不是理解正在發生的事情所必需的。

如果有人只閱讀一兩句話，他們應該會帶走最重要的信息。他們停留的時間越長，消費的越多，他們獲得的細節就越多。

視覺層次結構的工作方式相同，只是她不必從頁面頂部線性流動。你可以控制人們首先看的地方，其次等等

同樣，建議采用三個級別的支配地位或等級，盡管四五個級別仍然是可能的。

格式塔原則和視覺層次結構 #

我以一篇關于格式塔原則的文章開始本系列的原因之一是展示她們如何導致我們使用的許多設計原則。

視覺層次從完形演變而來。焦點是格式塔原則之一。你的主導元素是一個極端的焦點。兩者都使用對比來脫穎而出。硬幣的另一面是相似性，這有助于我們將事物視為相同。相似性和對比是層次結構中的必要成分。

諸如 pr?gnanz 和對稱法則之類的法則是關于創造秩序并使事情變得更簡單和更清晰。這正是您在設計中構建層次結構時所做的。您正在組織設計元素以建立秩序感。

主要元素很可能被視為數字。最不占優勢的元素很可能被視為地面。實際上，任何與連接或分離有關的原則都可以應用于支配地位和等級制度。

例子 #

正如我在本系列中所做的那樣，我從幾個網站收集了屏幕截圖，以分享我認為的主要元素、焦點和層次結構。

這是我的意見。你可能會看到不同的設計，這很好。批判性地思考設計比同意我們的想法更重要。

分開的事件 #

An Event Apart主頁上的主要元素是頂部的圖像。這是最大的元素。這也是我們通常被吸引的人物形象。圖像上的大號白色文字與圖像形成對比，引起您的注意。

An Event Apart首頁頂部截圖（查看大圖）

“網站制作人的設計會議”這句話可能是任何登陸頁面的人都需要知道的最重要的信息。這是關于什么是 An Event Apart 以及該網站的用途的非常明確的聲明。這可以說是網站新手應該看到的第一件事。

焦點包括網站的徽標、“即將發生的事件”后面的深色背景以及設置為大粗體標題的推薦信。

如果您向下滾動頁面，您會注意到該設計主要使用大小和顏色來創建額外的焦點和視覺層次。重要信息更大。很大膽?？赡苁羌t色的。有時，圖像會吸引眼球。

如果您訪問該頁面并僅掃描她，您仍然會知道該網站的內容，知道您所在地區是否有任何會議，并且已經被大量的推薦信所說服。

付費存在 #

Paid to Exist主頁的主要元素是頁面頂部的背包圖形。這是一個圖像，比她周圍的其他東西都大。她與周圍環境形成對比，因為她是一個具有內在興趣和不同形狀的圖形。

Paid to Exist首頁頂部截圖（查看大圖）

焦點包括網站名稱、圖形右側的一些文本以及綠色的“下載”大按鈕。社交分享按鈕是另一個焦點。

查看正下方的內容部分，您將看到三個大數字圓圈，她們作為焦點并引導您訪問其隨附的內容。

你的意思是閱讀信息。請注意每個段落上方的標題如何反映其伴隨圓圈的顏色，以吸引您。

從視覺層次結構的角度考慮圓圈和文本。彩色大圓圈（層次結構中的一個級別）會吸引您的注意力，并將您引導至位于層次結構另一層次的信息。

曼迪·西姆斯 #

Mandy Sims有一個單頁網站。最頂部（屏幕截圖中未顯示）包括一張 Mandy 的圖像，這對我來說是主要元素。Mandy 的名字也顯示為最大的文本。

但是，我想提請您注意頁面下方的部分。正如您所料，該部分的標題是其中最大的文本，因此她成為焦點。

Mandy Sims的單頁網站部分截圖（查看大圖）

焦點也是右側的推薦信。請注意推薦的背景顏色與菜單中活動鏈接的背景顏色相同。

無需閱讀本節中的文本，您仍然可以清楚地看到 Mandy 為滿意的客戶提供輔導服務，因為層次結構的一個級別傳達了這一點。

萬西設計 #

最后一個例子來自我自己的網站。這是我幾年前寫的一篇博客文章。請原諒我的放縱，但與其他示例不同，我確切地知道為什么頁面上的每個元素看起來都是這樣。我是否成功是另一回事，但我確信我的意圖。

Vanseo Design 文章頂部截圖（查看大圖）

頁面的主標題是主要元素。這是一篇我希望人們閱讀的博客文章，但我想讓人們在花時間閱讀之前先了解這篇文章的內容。

局部圖像也吸引眼球，您可能認為她更具主導性，但這樣的圖像不一定出現在網站上每個帖子的頂部。

左上角的徽標和右上角的 RSS 圖標旨在比其他文本更突出一點，因此兩者都是紅色的。兩者都會以更亮的紅色更突出，但我不希望人們被她們分心。整個標題中也使用相同的紅色。

左側的元信息旨在從正文中脫穎而出。在這里，我使用了局部空白來增加純文本的視覺重量。理想情況下，有人會瀏覽她并獲取有關我的信息以及帖子的類別和標簽。

我決定對設計做的一件事是讓正文中的鏈接比大多數網站上的鏈接更不明顯。我希望人們能夠找到她們，但我不希望他們將您從內容中拉出來。我使用了藍色，與黑色文本并沒有太大區別，我選擇了斜體而不是粗體。這些鏈接并不是要成為焦點，所以我在視覺上不再強調她們。

我希望登陸這篇文章或網站上的其他帖子的人能夠很快地知道這篇文章是關于什么的，并在希望閱讀這篇文章之前發現一些關于我的基本信息，比如我的名字或網站的名稱.

總結 #

你不能強調一切。為了使設計中的某些元素脫穎而出，其他元素必須淡入背景。

通過改變某些元素的視覺權重和其他元素的視覺方向，您可以建立不同程度的支配地位。三個級別是理想的；他們是大多數人都能辨別的。

在一個層面上將是你的主導元素。她是您設計的入口點，她應該位于或靠近頁面上最重要的信息。第二級焦點可以將注意力吸引到訪問者應該看到的下一個最重要的信息上。你的第三層擁有其他一切。您的大部分內容都將處于此級別。

設計不同級別的強調或主導將在您的設計中創建視覺層次結構，更重要的信息在視覺上更加突出。她將幫助您快速有效地與訪客溝通。

我們即將接近本系列的結尾。下一次，我們將研究構圖的流動、動作和節奏。我將討論通過設計引導訪問者，以便他們更有可能按照您希望他們看到的順序找到信息。