今天為大家分享設計元素的主導地位 視覺焦點和視覺層次結構，教程很不錯，很值得學習，好了，大家一起來學習吧！

有客戶讓你設計一個大的 logo 嗎？在你制作完logo后，他們也許會問你完成他們的要求了嗎——讓標志更大。新的標志脫穎而出，相比之下現在的標志太小并且不會引起客戶的注意。因此客戶想讓標志更大些。

當然，現在的logo和標題都變大了，和主要的"引起行為號召"的按鈕相比，它們（logo和標題）將會吸引更多的注意力，因此"引起行為號召"的按鈕需要變得更大。一旦按鈕變大了，那么標題看上去又小了。

你不能強調所有元素。當你試圖想要打破這一觀點時，你所有設計元素都在爭搶用戶的注意力，反而什么元素都不突出。所有元素同時都在向你大喊大叫，一切都很響亮，反而我們什么都不會聽到。

重點也是相對來說的。一個元素脫穎而出，另一個就不得不作為背景讓第一個元素脫穎而出。一些元素需要控制其它的元素內容才能使你的設計有視覺層次。

注：這是設計原則系列文章中的第五篇帖子了。你可以看看前四篇設計原則帖子：

設計原則1：視知覺和格式塔的原則

設計原理2：空間與圖底關系

設計原理3：通過對比和相似原則連接和分離元素

設計原理4：視覺重量和視覺方向

設計主導

比較設計中的任意兩個元素。兩個元素任一元素在各方面將會是相等的或者是其中一個會占主導地位。獲得主導地位的元素將會第一時間吸引用戶注意。主導元素出現越少越表現出某種控制主導元素的能力。更具優勢的元素t可能有更大的視覺重量，并且它似乎對周圍的東西產生了力量。

由于圓和方的相對尺寸大小，圓形占了主導地位

當你研發一個作品時，你會看到許多元素彼此之間施加支配權。有些元素會占據主導地位，有些則是從屬的。如果沒有意識的控制，你希望所有的事情都能解決，并且重要的信息會吸引人的注意力。幸運的是，你能控制。

如何確立優勢地位

你設計一個元素比另一個更具主導優勢地位，那么給它更多的視覺重量。視覺重量越大，元素越能吸引注意并展現出主導地位。

通過對比，強調和相對的視覺重量來創造優勢。相同的元素彼此不能支配對方。要發揮元素的主導優勢，一個元素必須與它的控制元素不同。

你的目標是創造在視覺重量中顯著差異的元素。

在這之前系列的文章中我們討論過相同的特性，你可以改變這些相同的特性。在此提醒一下，這里是最常見的特性，你可以改變這些特征從而設置不同的視覺權重：

大小，

形狀，

顏色，

重要性，

深度，

質地，

密度，

飽和度，

方向，

局部留白，

內在特征，

物理感知重量，

同樣你也能夠通過視覺導向來設計元素的支配地位。例如你可以用多個箭頭圍繞一個元素，而這些箭頭都指向中心這一個元素。如果有足夠的方向誘導，即使這個元素和其它元素相比沒有很重的視覺重量，但它依舊占據主導統治地位。

你可以有兩個共同占主導地位的元素存在，它們共同合作。然而在你的作品中，如果這兩個元素最終沒有設計好它們的權重，那么這兩個元素就會爭奪用戶的注意力。

理想情況下，你只需要一個占設計主導地位的元素。

主導元素

在設計中主導元素是一個非常重要的視覺重量（或者說是一切事物的指向）。這個元素比頁面上其它任何元素都能吸引用戶的注意力。

注意的是我說的這個占主導地位的元素是讓它在設計中凸顯，而不是讓它完全掩蓋了一切。

你的主導元素是你即將要講的這個故事的入口點。是你想要吸引觀者首先讓他們看見的地方。

這就開始了你與游客之間的對話交流。主導元素是首先要注意被注意到的并且是為下文做鋪墊的。在結構層次上是位于頂層的。它應該是你要強調的最重要的信息，因為它可能是唯一會被人看到的。任何你想要人們帶走的信息都應該是清楚地傳達或者接近于你的主導元素。

如果沒有一個切入點，用戶將會非常困難融入到你的設計。他們不得不停下來并且思考，首先應該看哪里和這個頁面上什么是真正的重要的信息。對觀者來說缺少入口點的設計會增加認知負荷，所以不要讓用戶思考。在你的設計中提供一個切入點。

視覺焦點

焦點也是主導領域中的元素，只不過和主導元素相比，不是相同的程度，它可以被定義為最主要的焦點。視覺焦點是感興趣的領域，在作品中起強調作用，不同于主導元素，主要是吸引并保留住觀眾的注意力。

在你的設計中視覺焦點元素應該是在最重要的占主導統治元素之后被注意和突顯的元素。下圖中，一個單獨的圓形處在周圍都是大部分灰色矩形中。這個圓不僅是一個不同于周圍圖形的形狀，而且它的形狀尺寸更大，顏色也是鮮紅色。在這個平面圖形中，它可能是你眼睛最先注意到的。

矩形中有三個矩形也是紅色的，雖然不是鮮紅（和圓比起來）。圖片中紅色的矩形和灰色的矩形在尺寸上都是相同的，但由于顏色不同，紅色矩形相比灰色矩形更為顯眼。

圓和三個紅色矩形都是視覺焦點，因為它們相比其它大多數元素更能引起用戶注意。鮮亮的紅色是最最脫穎而出的。它是主導視覺焦點元素，或者說它是這張圖片里占據主導地位的元素。

就主導元素來說，你可以創建更多的視覺焦點，給予它們更多的視覺重量，除了那個在設計中占主導地位的元素——就是你最重要的占主導地位的視覺焦點。你也可以創建視覺方向引導不同視覺焦點。

對比是一個創建視覺焦點很好的方法，因為對比能引起注意本身也是不同的。任何可以用來對比的和任何能夠影響視覺重量或方向的都可以用來創建一個焦點，同樣的也可以創建一個主導元素。只是重要成度的不同。

主導元素的層級

如果你創建視覺焦點并且使其中一個焦點作為主導元素，那么你要開始創建不同層次的主導地位元素。主導元素將會是一個層級，并且相比其它元素，主導元素首先會被注意到。剩下的焦點元素會是一個級別。在實際的設計中這些元素你能劃分多少級別？三個級別，是最好也是最恰當的。通常來講，人們能夠感知三個級別的主導地位。人們能注意到最重要的主導元素，次重要主導元素和其他元素。這些級別中得有足夠的的不同人們才能夠區分他們彼此之間的差異。如果你是要創建一個獨特的層級，而不是一個連續體。你可以創建3層以上的主導地位的階層，但是彼此相鄰的階層將會縮小對比。如果你不能確保你能夠很好的對比每個階層，那堅持使用三個層級的主導地位。

1:占主導地位層級

占主導地位的這個層級是視覺重量最重的并且是需要特別強調的重點。你的主導層級通常由一個單個元素在前景中組成。

2：二級重點

這屬于重點，除了主導元素和占主導地位的焦點。這是二級重點。在這個層級里的元素相比占主導地位層級里的元素需要獲得較少的關注和強調，但是卻多于第三級別里的元素。

3:次級

這個級別是占最少的視覺重量。在某種程度上它不在突出。這個部分常常會是正文文本內容。

不同的人在看一個作品時，對于焦點元素或者是視覺主導元素可能會有不同的認知。那么在你的設計中記得讓這些差異在視覺重量上最大化，盡可能讓你的主導元素和焦點元素明顯看起來不同。

視覺層次結構

當你設計不同層級的主導地位元素時，你需要在設計中創建出視覺的層次結構。理想情況下，這種視覺層級結構將與你的概念層級相匹配。如果在一篇文章中，文章的大標題比章節標題更重要，那么文章的大標題應該更具視覺主導地位。

把真實信息的優先順序作為你視覺層次結構的基礎。首先，在頁面上把事情的優先順序排好，讓后再去設計，再設計（視覺層級結構）的時候就遵循之前排好的事物的優先級。

好的視覺層級結構能使觀者快速瀏覽信息，有助于你快速和有效地溝通。視覺層級的頂層（也就是占主導地位的元素）應該快速解決用戶在登陸頁面后的問題。在幾秒鐘之內，用戶在頁面上能夠獲取到的要點和主要信息。如果你把最重要的信息直觀的突出，那么用戶可能會這么做。

停留過幾秒的用戶能夠通過瀏覽你的設計能夠獲得下一個最重要的信息，也就是你接下來想和用戶交流的信息或者是其它信息。

倒金字塔的創作方式

在設計中建立視覺層次結構的方式與新聞記者在寫作中的方式一樣——倒金字塔的創作方式。最重要的信息在第一段或者前兩段。主要包括誰，在那，什么時間，干什么，為什么，怎么做。它會告訴你你需要知道的一切。

格式塔原則和視覺層級結構

我寫有關格式塔原則的系列文章的一個原因是想說它們是我們在設計工作所有原則的基礎。視覺層次是從格式塔發展來的。視覺焦點是格式塔眾多原則之一。而主導元素是一個特殊的視覺焦點。它們都通過對比脫穎而出。對比的另一面是相似，它有助于我們看到相同的事物。在層級結構中相似和對比是必要的部分。諸如簡單定律和對稱原則是為了創建秩序，使事物簡單化。這就是你在設計中當你構建層次結構是你要做的事情。你要組織設計元素使得它們有秩序感。

主導元素可以被看作是圖（如果就圖底關系而言），而次級視覺焦點可以看作是底（背景）。真的，任何有關聯系或者分離的原則都適用于主導地位和層級結構。

案例

正如之前的系列一樣，我都收集了一些網站的截屏，來分享我所說的主導元素，視覺焦點和層次結構。這是我的意見和觀點。你可能看到的設計和我不同，那也是很好的。批判性的思考設計比達成共識更重要。

AN EVENT APART（http://aneventapart.com/）國外的一個網站，有關網站設計的信息

在這個網頁的首頁上，主導元素是上方的這張大圖。它是最大的元素，雖然是人物攝影照片，但我們第一眼就會被它吸引。在這張圖片上，白色的文字和圖片形成對比，來引起你的注意力。

圖片中文字"The design conference for people who make websites"可能是最重要的信息，對于登陸這個頁面的用戶來說可能是需要知道的。而這種設計是非常清晰的表述關于這個網站是做什么的和為誰服務的。而且它可能是對新的用戶打開網頁時第一眼要看到的內容。

次級視覺焦點元素包括網站的logo和黑色底框中的"Upcoming Events"，還有下面加粗的證明書標題。

如果你向下滑動頁面，你會注意到，設計主要使用尺寸和顏色來創建額外的視覺焦點和視覺層次結構。重要的信息比較大。它可能很大膽。也可能是紅色的。偶爾會用一張特別的圖片來吸引你的注意力。

如果你訪問頁面僅僅是大概瀏覽一遍，你仍就可以知道

這是一個什么網站，知道和你相關的領域的會議，并且通過大量客戶的感言是你確信它是真的。

PAID TO EXIST

在Paid to Existde的網站首頁主導元素是頁面中的雙肩包圖形。它比周圍一切元素都大。由于背包的特點和與眾不同的形狀與周圍的所有環境形成了鮮明的對比。

次級視覺焦點包括網站的名字，一些文本和綠色的下載按鈕。社交分享按鈕是另一個視覺焦點。僅看下面的內容部分，你會看到三個大的標有數字的圓圈，這些作為視覺焦點來引導你閱讀它們各自附帶的內容。你可能會讀這些信息。注意，每段標題都有不同的顏色標注，且標題顏色和各自前面圓圈的顏色相同，通過顏色來吸引你的注意力。想想圓圈和文本的視覺層次結構。大的彩色圓圈（這是一個層次）吸引用戶的注意力，并且引導你去注意另一個層次的信息。

MANDY SIMS（（新網站鏈接http://www.mandysims.com/）

Mandy Sims是一個單頁網頁。在它的頂端（沒在截圖里）包含了一個Mangy的照片，在我看來這是一個主導元素。Mandy的名字作為最大的元素顯示。然而，我想引起你的注意所以選擇了一個更深的層級頁面。正如你所期望的，標題文字部分是最大的，理所應當也成為了視覺焦點。

同樣右邊有底板的用戶評論也是視覺焦點。注意用戶評論的背景和菜單鏈接的背景一個顏色。在這部分雖然有些文字沒有閱讀，你仍然可以清晰的看到Mandy為客戶提供的服務，讓客戶很高興，因為這是一個層級里面的內容。

總結

你不能強調所有元素。在設計中為了讓一些元素脫穎而出，其它元素必須與背景接近。通過改變元素的視覺重量和視覺方向，你能建立元素在不同層級的主導地位。理想的層級數量是3層；因為大多數人們都能夠辨別。設置你的主導元素在一個層級。因為它是你設計作品的入口點，并且它應該是這個頁面上或它周圍最重要的信息。第二個層級應該是視覺焦點，來引導用戶注意下個重要的信息，為下文做鋪墊。其他元素作為第三個層級。而你的大部分的內容都會是在這個層級。設計不同的層次重點或主導地位將會創建一個視覺層級結構在你的設計中，更重要的信息更直觀地突出。他會有助于你和用戶快速有效的溝通交流。

有關格式塔理論知識就要結束了。下次，我們會了解到設計中的創作流程和韻律節奏。我會講到游客在看一個設計作品時如何讓他們更容易找到信息的順序，而且是你想讓用戶看到的信息。

其它知識資料鏈接

Anabel Damstrom的"設計元素應該是強調還是讓其成為視覺焦點"

（http://605.wikispaces.com/Emphasis+or+Focal+Point?responseToken=74008151b1bb582abdc2a76f56d0d3f2）

Jim Saw的"如何通過強調來引起用戶的注意"

（http://daphne.palomar.edu/design/emphasis.html）

Patrick Cox, Codrops的"網頁設計中的重點"

（http://tympanus.net/codrops/2011/09/30/developing-emphasis-in-web-design/）

Aaron Diaz"兩個焦點的故事——主要焦點和次要焦點"

（http://dresdencodak.tumblr.com/post/833149000/primary-secondary-a-tale-of-two-focal-points）

(視頻), Roxie Mitchell"設計元素和原則是重點還是焦點"

（https://vimeo.com/30689436）

Katherine Tyrrell的"設計作品：發現和創建一個焦點"

（http://makingamark.blogspot.com/2008/01/composition-and-design-finding-and.html）

Kristine Lofgren, SFGate—"在一個空間中如何創建一個視覺焦點"

（http://homeguides.sfgate.com/create-focal-point-designing-room-51512.html）

Amy Grant,的"創建一個視覺焦點：在園林設計中應該加入一個什么視覺焦點"

（http://www.gardeningknowhow.com/garden-how-to/info/creating-a-focal-point.htm）

Sophia的"藝術中的設計：重點，多樣性與一致性"

（https://www.sophia.org/tutorials/design-in-art-emphasis-variety-and-unity）

以上就是關于設計元素的主導地位的相關介紹，希望這篇文章能對你的設計帶來一定的幫助！