主體及背景關(guān)系

　　網(wǎng)站建設(shè)的這個(gè)原則非常強(qiáng)大，非常重要，你應(yīng)該盡早掌握它。在你的設(shè)計(jì)上，你應(yīng)該經(jīng)常問(wèn)自己一個(gè)簡(jiǎn)單的問(wèn)題:哪些元素在背景中，哪些在前景中?
 

　　在下圖例子中，您可以看到，內(nèi)容和按鈕可以明顯地從背景中突出出來(lái)。清晰的區(qū)分對(duì)于用戶(hù)的關(guān)注是非常重要的。這里的線(xiàn)條有點(diǎn)模糊，有趣的是，但仍然有非常清晰的輪廓。
 

 

　　（Cayenne website）
 

　　當(dāng)我們的早期祖先忙于狩獵和采集的時(shí)候，我們通常非常重要的一點(diǎn)是要辨別出眼前可能的威脅或優(yōu)勢(shì)。將事物快速地與背景噪音區(qū)分開(kāi)來(lái)似乎仍然是我們生存的一部分。想象一只老虎隱藏在叢林中相對(duì)于在地平線(xiàn)上的雨滴哪個(gè)更明顯。從神經(jīng)學(xué)上講，這種視覺(jué)生存策略留下了深刻的印記我們不太可能改變這種簡(jiǎn)單的感知機(jī)制。對(duì)于數(shù)字用戶(hù)來(lái)說(shuō)，這可能聽(tīng)起來(lái)很有趣，但大多數(shù)時(shí)候都已經(jīng)過(guò)時(shí)了，但是知道了這一點(diǎn)，就可以更容易地決定如何為用戶(hù)強(qiáng)調(diào)重要的信息，以及如何在背景中隱藏更少的相關(guān)細(xì)節(jié)。
 

　　下圖中，有一個(gè)非常突出的背景圖像吸收了很多的注意力，它很有用，它以個(gè)人聯(lián)系的形式傳達(dá)情感。不過(guò)，采取行動(dòng)的按鈕被巧妙地放置，它的顏色把它帶到了前臺(tái)。
 

 

　?。╖appka website）
 

　　另一個(gè)問(wèn)題可能是，我們的眼睛和大腦在同時(shí)處理大量信息時(shí)并不是特別快，這就導(dǎo)致我們優(yōu)先考慮我們需要關(guān)注的事情。理解這一點(diǎn)將有助于您更有效地放置網(wǎng)站建設(shè)設(shè)計(jì)難題的部分。
 

　　層級(jí)關(guān)系

　　層次結(jié)構(gòu)是關(guān)于如何分配視覺(jué)重要性的;這是一種強(qiáng)調(diào)減少視覺(jué)混亂的兄弟。它是一個(gè)宏觀的指導(dǎo)，告訴你什么是首先關(guān)注的，以及如何跟隨視覺(jué)，潛意識(shí)的面包屑，就像在瀏覽你的網(wǎng)站內(nèi)容時(shí)，告訴你一個(gè)用戶(hù)可以抓住的視覺(jué)故事。將設(shè)計(jì)元素作為重要的層次，需要有效地安排。只有幾部分被強(qiáng)烈地強(qiáng)調(diào)，你應(yīng)該巧妙安排各部分內(nèi)容，然后按照預(yù)期的方式將他們移到網(wǎng)站上。
 

　　就像我們之前說(shuō)過(guò)的，你不希望所有的東西看起來(lái)都一樣重要。如果是這樣的話(huà)，你的觀眾將很難消化你的內(nèi)容。相反，要?jiǎng)?chuàng)造出不同層次的重要性，強(qiáng)調(diào)你的構(gòu)圖的整體結(jié)構(gòu)。一個(gè)一般的經(jīng)驗(yàn)法則是:規(guī)模越大，重要性越大。一旦一個(gè)基本的層次結(jié)構(gòu)通過(guò)大小和間隔來(lái)實(shí)現(xiàn)，你就可以為混合添加顏色，從而幫助強(qiáng)調(diào)某些元素。通過(guò)逆向工作，從顏色開(kāi)始，你將會(huì)使你的工作變得不必要的困難，或者至少是不那么有效。
 

 

　?。═he Reddit index page）
 

　　上圖中Reddit索引頁(yè)面的截圖也許不是精心設(shè)計(jì)的最佳設(shè)計(jì)范例，尤其是在建立清晰和強(qiáng)大的層級(jí)結(jié)構(gòu)的意義上。我認(rèn)為，Reddit是其中一個(gè)案例：網(wǎng)站的成功和設(shè)計(jì)并沒(méi)有緊密聯(lián)系。我的意思是，它是凌亂的，但它不需要太多的東西來(lái)建立一個(gè)更清晰的視覺(jué)層次。
 

　　下圖中，我喜歡GitHub上的探索頁(yè)面如何處理排版，以創(chuàng)建一個(gè)微妙而清晰的層級(jí)結(jié)構(gòu)。對(duì)眼睛進(jìn)行掃描和跟蹤是很容易的。顏色也可以用來(lái)創(chuàng)建視覺(jué)錨，同樣適用于他們的搜索結(jié)果。
 

 

　?。═he Explore page at GitHub）
 

　　顏色、形狀、空白、大小和排列組合在一起，形成一個(gè)穩(wěn)固的層次結(jié)構(gòu)。一個(gè)清晰的網(wǎng)站建設(shè)層次結(jié)構(gòu)可以快速地將好的和平庸的設(shè)計(jì)方案區(qū)分開(kāi)來(lái)。