有客戶問(wèn)過(guò)你滤蝠，說(shuō)把logo做的再大一些嗎豌熄？如果這種事真正的發(fā)生過(guò)，而且你還完成了他們的請(qǐng)求物咳。新的logo會(huì)由此脫穎而出锣险，但是和之前的較小的logo相比并沒(méi)有提高用戶的吸引力，所以客戶就希望logo變的更大。這樣的情況有嗎芯肤？
當(dāng)然巷折，目前的logo和標(biāo)題也已經(jīng)足夠的大了，而為了吸引更多關(guān)注崖咨，主要文字和按鈕這些也將會(huì)變得足夠大锻拘。而一旦按鈕變大了標(biāo)題部分就顯得小了。
而這些違背了很重要的一點(diǎn)：那就是不可能突出強(qiáng)調(diào)所有元素 掩幢。當(dāng)我們嘗試開(kāi)始這樣做的時(shí)候逊拍，所有的設(shè)計(jì)元素都太突出而沒(méi)有來(lái)突出，它們都是一樣的大小际邻。
因此最主要的在于相對(duì)性芯丧，對(duì)于一個(gè)元素能否脫穎而出，就需要有一個(gè)背景的情況下就可以為突出他人所需來(lái)設(shè)計(jì)任何形式的視覺(jué)層次感世曾。
主導(dǎo)元素
在設(shè)計(jì)中任意兩個(gè)元素做出比較時(shí)缨恒，當(dāng)其他方面都是一樣的時(shí)候，會(huì)人為的施加一些作用力來(lái)突出其占有主導(dǎo)地位轮听，這種元素將作為主導(dǎo)元素更加吸引眼球骗露，也會(huì)導(dǎo)致主導(dǎo)元素較少的出現(xiàn)。
當(dāng)進(jìn)行設(shè)計(jì)時(shí)萧锉，會(huì)希望無(wú)數(shù)的元素都能占據(jù)著主導(dǎo)地位，可是這只能是少數(shù)述寡，有的元素必須要服從柿隙。如果沒(méi)有有意識(shí)的控制，那就只是簡(jiǎn)單的展示而已鲫凶，最重要的信息就不會(huì)引起人們的關(guān)注禀崖，但幸運(yùn)的是我們有控制權(quán)。
如何使元素占據(jù)主導(dǎo)地位
當(dāng)我們?cè)O(shè)計(jì)一個(gè)元素時(shí)螟炫，賦予它更多的視覺(jué)權(quán)重以及相比較于另一個(gè)主要元素波附。占據(jù)主導(dǎo)地位的就相對(duì)于將更多的元素來(lái)吸引眼球。
通過(guò)對(duì)比來(lái)創(chuàng)建一個(gè)重要或相對(duì)視覺(jué)權(quán)重主導(dǎo)地位的元素昼钻，相同的元素是不能支配對(duì)方掸屡，而發(fā)揮主要作用的元素是看起來(lái)也是不同的，那這就是主導(dǎo)元素然评。我們的目標(biāo)是創(chuàng)建一個(gè)視覺(jué)權(quán)重差異明顯的元素折晦。
可以通過(guò)改變下面的屬性來(lái)有效的控制視覺(jué)權(quán)重，這也是最常用的方法沾瓦。
（1）尺寸
（2）形狀
（3）顏色
（4）值
（5）深度
（6）質(zhì)感
（7）密度
（8）飽和度
（9）方向
（10）留白
（11）內(nèi)在興趣點(diǎn)
（12）元素自身重量
以及使用視覺(jué)導(dǎo)向來(lái)創(chuàng)建主導(dǎo)元素。例如我們可以在主要元素周?chē)褂眉^來(lái)指向這個(gè)元素。如果這種指示足夠的多贯莺，那這個(gè)元素就是主導(dǎo)元素风喇，哪怕頁(yè)面上其他元素的視覺(jué)權(quán)重大于主導(dǎo)元素，這也不會(huì)影響到它的地位缕探。
另外我們也可以在組合物中有兩個(gè)主導(dǎo)元素共同存在魂莫，可是無(wú)論兩者之間如何爭(zhēng)搶著注意力，最終還是會(huì)分散它們爹耗，而是保持一種相對(duì)平衡的狀態(tài)耙考。所以，理想情況下只希望有一個(gè)主導(dǎo)元素潭兽，而注意力不會(huì)被其他的元素分散倦始。
主導(dǎo)元素
設(shè)計(jì)中的主導(dǎo)元素具有較大的視覺(jué)權(quán)重（或者是一個(gè)點(diǎn)），這個(gè)地方相對(duì)于其他將會(huì)是最先吸引人目光的地方山卦，另外這里我們也需要謹(jǐn)慎處理鞋邑，不能讓主導(dǎo)元素完全掩蓋一切并顯得鶴立雞群。
主導(dǎo)元素就好比我們講故事的開(kāi)始處账蓉，這也是吸引用戶的第一站枚碗。其次就是如何和用戶交談，由于主導(dǎo)元素是入口铸本，那么就會(huì)有上下文的類似元素肮雨，而且它們位于結(jié)構(gòu)層次的頂部，作為最為強(qiáng)調(diào)的那部分箱玷，無(wú)論怎樣都是希望向用戶傳達(dá)我們最想要表達(dá)的意思怨规。
如果不存在切入點(diǎn)，那用戶就不得不努力的尋找并以自己的角度進(jìn)入設(shè)計(jì)中汪茧。這個(gè)過(guò)程就會(huì)伴隨著暫停椅亚，想一想先看哪里再看哪里的，什么是最重要的情況發(fā)生舱污。因此呀舔，缺乏切入點(diǎn)將會(huì)使用戶產(chǎn)生認(rèn)知負(fù)荷，最后為了不要出現(xiàn)這種局面發(fā)生扩灯，請(qǐng)?jiān)O(shè)計(jì)一個(gè)好的入口媚赖。
焦點(diǎn)
焦點(diǎn)元素在區(qū)域中也是占據(jù)主導(dǎo)地位，只是都作為主導(dǎo)元素在程度上有較大的差異珠插，焦點(diǎn)可以被定義為最重要的主導(dǎo)元素惧磺。焦點(diǎn)元素也是有趣的、強(qiáng)調(diào)或是不同組合捻撑，功能在于吸引并保持住用戶的注意力磨隘。
要注意的是缤底，在設(shè)計(jì)中最重要的元素突顯出來(lái)后，其他的主要元素就要依次站出來(lái)了番捂。下面的圖片中顯示有很大空白區(qū)域內(nèi)大部分灰色的正方形个唧。但是最明顯是較大紅色明亮的圓。而這也是最先印入視線中元素设预。
三個(gè)偏紅色的正方形塊徙歼，雖然亮度不如大紅圓，但是相對(duì)于其他灰色的正方形要更加突出鳖枕。
這張圖片中圓和三個(gè)微紅的方塊都是焦點(diǎn)魄梯，因?yàn)樗鼈兌寄軓幕疑刂忻摲f而出，大紅色圓最為突出宾符，這是最主要的焦點(diǎn)元素酿秸，也是圖片中的主導(dǎo)元素。
和主導(dǎo)元素相對(duì)吸奴，我們可以創(chuàng)建更多的視覺(jué)焦點(diǎn)允扇，除了對(duì)比主導(dǎo)元素的視覺(jué)權(quán)重小一些，這也是很重要的焦點(diǎn)则奥。我們還可以通過(guò)視覺(jué)導(dǎo)向來(lái)控制不同的焦點(diǎn)考润。
對(duì)比度也是建立焦點(diǎn)的好方法，因?yàn)閷?duì)比的本質(zhì)就是區(qū)分彼此之間的不同读处。任何可以對(duì)比和影響視覺(jué)權(quán)重以及視覺(jué)導(dǎo)向的都可以來(lái)創(chuàng)建焦點(diǎn)糊治。當(dāng)然以同樣的方式也可以創(chuàng)建主導(dǎo)元素只是它們的程度不同而已。
主導(dǎo)位置的結(jié)構(gòu)層次
如果我們建立一些焦點(diǎn)罚舱，而這些焦點(diǎn)形成主導(dǎo)元素井辜，以此我們就可以創(chuàng)造出不同的結(jié)構(gòu)層次。占據(jù)主導(dǎo)地位的元素將會(huì)在一個(gè)層面與其他層面都會(huì)被發(fā)現(xiàn)管闷，剩下的焦點(diǎn)將會(huì)落在另一個(gè)層面上粥脚，那么如何控制多個(gè)層級(jí)關(guān)系來(lái)影響設(shè)計(jì)呢？
三是一個(gè)不錯(cuò)的數(shù)字包个，一般情況下人們會(huì)感知三個(gè)層面的結(jié)構(gòu)刷允，也會(huì)感知到什么是最有焦點(diǎn)的什么是最占主導(dǎo)地位的。對(duì)于層次關(guān)系需要有足夠的差異來(lái)區(qū)分下一個(gè)層級(jí)碧囊，所以我們創(chuàng)建的層級(jí)不是連續(xù)的树灶。
當(dāng)然我們也可以創(chuàng)造三個(gè)以上的主導(dǎo)地位，然后每增加一個(gè)級(jí)別將會(huì)降一個(gè)級(jí)別的對(duì)比糯而，除非對(duì)每個(gè)層次結(jié)構(gòu)把握的非常好天通，否則就不要超過(guò)三個(gè)。
（1）主導(dǎo)層級(jí)：這是在其他是視覺(jué)層級(jí)中最強(qiáng)調(diào)的層級(jí)熄驼，如果我們按照水平的模式布局像寒，那么這一層就出于前景色的地方烘豹。
（2）次層級(jí)：這是焦點(diǎn)元素的分割線，唯一的例外就是上面還會(huì)存在主導(dǎo)因素的占據(jù)主導(dǎo)地位的焦點(diǎn)元素萝映，它們也是重要的吴叶。在這個(gè)層面雖然也是占據(jù)主導(dǎo)層級(jí)，但相比較上面的第一層要弱一些序臂。
（3）從屬層級(jí)：這個(gè)層級(jí)和視覺(jué)權(quán)重有或多或少的關(guān)系。它應(yīng)該退居到背景層級(jí)实束，這一層通常也是頁(yè)面的本身層奥秆。
另外不同的用戶會(huì)在組合中看到不同的焦點(diǎn)元素，或是主導(dǎo)因素咸灿。最后要記得只有足夠的大以及視覺(jué)權(quán)重差異明顯的層級(jí)將更加突出构订，就像我們希望的那些主導(dǎo)層級(jí)越明顯越好一樣。
視覺(jué)層次
當(dāng)設(shè)計(jì)的主導(dǎo)地位處于不同的層級(jí)時(shí)避矢，就要?jiǎng)?chuàng)建及設(shè)計(jì)視覺(jué)層次關(guān)系悼瘾。而在理想情況下，這種視覺(jué)層次關(guān)系將會(huì)與自己要強(qiáng)調(diào)的內(nèi)容概念的層次結(jié)構(gòu)相匹配审胸。如果一篇文章的標(biāo)題比文章一個(gè)章節(jié)的標(biāo)題更為重要亥宿，那么標(biāo)題就應(yīng)該更加直觀并占據(jù)主導(dǎo)地位。
對(duì)于畫(huà)布背景也是我們要優(yōu)先考慮的砂沛，因?yàn)橐坏┰陧?yè)面上進(jìn)行設(shè)計(jì)烫扼，就會(huì)按照這種優(yōu)先順序來(lái)設(shè)計(jì)視覺(jué)層次。
視覺(jué)層次可以讓用戶有階段的讀取碍庵，這樣就會(huì)更加快速高效傳達(dá)信息映企。對(duì)于層次結(jié)構(gòu)（占據(jù)主導(dǎo)地位的元素）的頂部應(yīng)該是有助于幫助用戶回答問(wèn)題的，例如可以立即出現(xiàn)登陸頁(yè)面静浴。
在短暫的幾秒鐘內(nèi)用戶就可以輕松讀取關(guān)鍵點(diǎn)和頁(yè)面所展示的主要信息堰氓。如果自己要表達(dá)的最重要的信息，那就是最顯眼最容易讀取的元素苹享。
先比較與停留時(shí)間的幾秒鐘双絮，再傳達(dá)給用戶接下來(lái)需要獲取的最重要的信息是什么，并和其余的信息有所區(qū)分富稻。
倒金字塔手法
在設(shè)計(jì)上也建立類似的結(jié)構(gòu)層次掷邦，記者一般也會(huì)用文字寫(xiě)出倒金字塔的記錄方法，在頂部第一椭赋、二條通常是最重要的抚岗，例如發(fā)生時(shí)間、地點(diǎn)哪怔、事件和原因宣蔚，它可以告訴我們所要知道的重點(diǎn)向抢。
在分割線下會(huì)添上故事的更多細(xì)節(jié)，這些細(xì)節(jié)在于幫助我們可以更好的深入理解故事胚委，另外在文章的結(jié)尾處一般還會(huì)有背景資料提供參考挟鸠，但是那并不是重點(diǎn)要理解的。
如果有人只讀取一兩句話亩冬，那就會(huì)刪除一些很重要 的內(nèi)容艘希。反之，用戶使用的時(shí)間越長(zhǎng)硅急，那么在文章的周?chē)牡臅r(shí)間越多覆享，也就會(huì)看到更多的細(xì)節(jié)。
另外還有一點(diǎn)要注意的：視覺(jué)層次的不同之處在于其從頁(yè)面的頂部開(kāi)始营袜，而是那種沒(méi)有線性的流動(dòng)性撒顿，而我們可以控制的就是人們會(huì)看到第一層、第二層以此下去荚板。最后推薦使用三個(gè)層次凤壁，盡管也可以使用四層、五層甚至更多跪另。
格式塔原則：視覺(jué)層級(jí)
在我開(kāi)始寫(xiě)這一系列關(guān)于格式塔原理文章之初拧抖，就在思考一個(gè)問(wèn)題這些設(shè)計(jì)的原則之間的組合是影響設(shè)計(jì)的？
由視覺(jué)層次關(guān)系演變的格式塔原則中罚斗，焦點(diǎn)也是其中之一徙鱼，而起到主導(dǎo)因素的元素就一個(gè)很極端的焦點(diǎn)，兩者都能夠從對(duì)比中脫穎而出针姿，例如硬幣另一面的相似性袱吆，這些有助于看到東西一樣。相似性和對(duì)比度在層次結(jié)構(gòu)中是必須存在的成分距淫。
就像pragnanz（環(huán)境認(rèn)知心理學(xué)）中提到的對(duì)稱會(huì)創(chuàng)造秩序绞绒，從而使事情變的更加簡(jiǎn)單和清晰。而當(dāng)我們?cè)O(shè)計(jì)建立結(jié)構(gòu)層次時(shí)這也是正要做的事情榕暇，使設(shè)計(jì)元素組織的更加有秩序感蓬衡。
而占據(jù)主要地位的元素會(huì)被看作一張圖，而其它元素被視為一個(gè)背景彤枢，所以很多有關(guān)連接或分離的任何原則都是可以應(yīng)用于主導(dǎo)地位和主要層級(jí)中的狰晚。
案例
正如前面的幾篇文章那樣，我會(huì)從網(wǎng)站上收集幾個(gè)網(wǎng)站的截圖缴啡，分享我所看到的那些作為主導(dǎo)因素和重點(diǎn)突出以及層級(jí)關(guān)系壁晒。如果你們可以看到與我不同的觀點(diǎn)，這樣很好业栅，我們需要這種批判性思考的設(shè)計(jì)秒咐，這是更為重要的部分谬晕。
An Event Apart
網(wǎng)站An Event Apart 的主頁(yè)上的主導(dǎo)區(qū)域就是頂部的banner部分，而且通常是最吸引我們的圖像携取。在圖片的外圍使用大量的反差留白攒钳，更加吸引注意力。
在banner上的文字部分應(yīng)該是任何人登陸頁(yè)面時(shí)需要知道的最重要的信息了雷滋，這是關(guān)于網(wǎng)站本身的精煉介紹不撑，使得用戶第一眼就明白這個(gè)網(wǎng)站是干嘛的？
焦點(diǎn)也包括網(wǎng)站的logo部分晤斩，以及頁(yè)面底部設(shè)置的黑色粗體字體燎孟。如果向下滾動(dòng)頁(yè)面就會(huì)發(fā)現(xiàn)這里面采用了不同的大小和顏色來(lái)創(chuàng)造聯(lián)絡(luò)節(jié)點(diǎn)和視覺(jué)層次，如重要的信息字體較大和粗體尸昧，另外部分紅色的部分也會(huì)吸引眼球的注意。
如果只是簡(jiǎn)單的訪問(wèn)這個(gè)網(wǎng)站旷偿，當(dāng)離開(kāi)時(shí)仍然知道這個(gè)網(wǎng)站是干嘛的烹俗？知道你所在地區(qū)的任何會(huì)議，就足以讓人深刻萍程。
Paid to Exist
Paid to Exist的主導(dǎo)元素在于banner部分的背包幢妄，相比較其它就很大，對(duì)比周?chē)沫h(huán)境因?yàn)樗鼉?nèi)在的興趣和不同的形狀茫负。
焦點(diǎn)包括網(wǎng)站的名稱蕉鸳，banner的右側(cè)文字，與大綠的“下載”按鈕忍法，還有社交分享按鈕潮尝。
看著正下方的內(nèi)容部分，會(huì)看到三個(gè)大圓圈饿序，可以作為焦點(diǎn)勉失，并引導(dǎo)你的視線移動(dòng)到相應(yīng)的內(nèi)容區(qū)域。另外當(dāng)讀取這些信息時(shí)原探，請(qǐng)注意標(biāo)題每個(gè)段落上面使用了反映與之配套的圓的顏色乱凿。
想想圓和文字的視覺(jué)層次關(guān)系，豐富多彩的大圓圈（這是層次結(jié)構(gòu)中的一個(gè)級(jí)別）咽弦，能夠得到關(guān)注和引導(dǎo)我們轉(zhuǎn)向?qū)哟谓Y(jié)構(gòu)的另一層面的信息徒蟆。
Mandy Sims
Mandy Sims是一個(gè)單頁(yè)網(wǎng)站，最高的地方有一個(gè)圖片型型，這是主要元素段审，截圖中看不到。而且字體也是最大的输莺，不過(guò)我想說(shuō)的重點(diǎn)是下面的頁(yè)面中戚哎，標(biāo)題的文字很大裸诽，這也是一個(gè)焦點(diǎn)。
還有焦點(diǎn)在右側(cè)的相同菜單的鏈接背景顏色型凳，如果沒(méi)有閱讀文字區(qū)域的內(nèi)容丈冬，但是我們還是在腦海中有這個(gè)網(wǎng)站提供的服務(wù)以取悅客戶的印象，因?yàn)樵诮Y(jié)構(gòu)層次中就表達(dá)了這一點(diǎn)甘畅。
Vanseo Design
Vanseo Design這是我自己的網(wǎng)站埂蕊，這個(gè)帖子是幾年前寫(xiě)的，相比于其他的網(wǎng)站疏唾，更能說(shuō)明白我當(dāng)時(shí)為什么要這樣設(shè)計(jì)蓄氧？我不敢說(shuō)設(shè)計(jì)的很成功，但是可以說(shuō)出自己的意圖槐脏。
本頁(yè)面的主標(biāo)題是主導(dǎo)元素喉童，我想用戶在閱讀博客文章時(shí)很希望知道關(guān)??于他們必須投入很多的時(shí)間閱讀之前的主要意義是什么。
還有就是部分圖像也吸引眼球顿天，可能會(huì)覺(jué)得它更占優(yōu)勢(shì)堂氯，但像這樣的圖像不一定在網(wǎng)站上每一個(gè)區(qū)域都可見(jiàn)。
而在左上角logo和右上角的RSS圖標(biāo)就是為了突出而比其他文字等牌废，兩者都使用更加突出的明亮紅色咽白，但又不希望訪問(wèn)者被它們分心，相同的紅色也用于整個(gè)標(biāo)題部分鸟缕。
左側(cè)的基本信息是為了從主文本中脫穎而出晶框。在這里使用固有的白色背景，增加純文本的視覺(jué)重量懂从。理想的情況下授段，讓類別和標(biāo)簽的公告信息，只需要有人會(huì)看它一眼莫绣。
還有一個(gè)地方要說(shuō)明的畴蒲，我決定做的設(shè)計(jì)自身的聯(lián)系相比于大多數(shù)網(wǎng)站是不可見(jiàn)的。希望用戶能夠快速找到自己所需要的內(nèi)容对室，但又不想讓他們點(diǎn)擊出來(lái)模燥，就用了一個(gè)藍(lán)色的，還使用很黑的黑色文字掩宜，關(guān)鍵字部分選擇斜體蔫骂，而不是粗體，來(lái)加以區(qū)分牺汤。這些鏈接意味著是重點(diǎn)辽旋，所以我在視覺(jué)上來(lái)強(qiáng)調(diào)它們。
我希望有人訪問(wèn)到這個(gè)或網(wǎng)站上的另一篇文章就可以很快了解文章是關(guān)于什么，以及發(fā)現(xiàn)“有關(guān)我”的一些基本信息补胚，并在訪問(wèn)之后知道我的名字或網(wǎng)站的名稱等信息码耐。
總結(jié)
為了使得有些元素在設(shè)計(jì)中可以脫穎而出，我們不能強(qiáng)調(diào)所有的元素溶其，其他的元素需要在背景中消失掉骚腥。
通過(guò)改變一些元素的視覺(jué)權(quán)重以及訪問(wèn)者的視線方向，可以建立不同級(jí)別的主導(dǎo)地位瓶逃。理想層次是三個(gè)層次結(jié)構(gòu)束铭，因?yàn)榇蠖鄶?shù)人都認(rèn)為這是容易辨別的。
在一個(gè)層面上會(huì)存在一個(gè)主導(dǎo)元素厢绝。這是我們?cè)O(shè)計(jì)中的一個(gè)入口點(diǎn)契沫，它應(yīng)該是或靠近本頁(yè)上的最重要的信息。聯(lián)絡(luò)節(jié)點(diǎn)可以提醒用戶請(qǐng)注意下一個(gè)最重要的信息昔汉，用戶也很容易察覺(jué)到懈万。而第三個(gè)級(jí)別就是包含其他所有了，因?yàn)榇蟛糠謨?nèi)容將在這一水平面上靶病。
設(shè)計(jì)不同層次重點(diǎn)或主導(dǎo)元素將在設(shè)計(jì)中創(chuàng)建視覺(jué)層次钞速，在視覺(jué)上更加突出更重要的信息。它會(huì)幫助我們的訪問(wèn)者快速有效地溝通嫡秕。
我們正在接近這個(gè)系列的結(jié)尾。接下來(lái)的時(shí)間苹威，我們將討論流量和節(jié)奏及如何使用設(shè)計(jì)引導(dǎo)用戶流量昆咽，使他們更容易找到你想要他們看到它的信息內(nèi)容。
作者：Steven Bradley
https://www.smashingmagazine.com/2015/02/design-principles-dominance-focal-points-hierarchy/
