一個(gè)"看起來(lái)不錯(cuò)"的網(wǎng)站他的視覺(jué)層次結(jié)構(gòu)是可以直接影響用戶的流量和決策的。從基本的角度來(lái)說(shuō)，視覺(jué)層次結(jié)構(gòu)描述了哪些元素在你的用戶的注意力中占據(jù)了主導(dǎo)地位，并最吸引他們的眼球。但是，沒(méi)有一種正確的方法來(lái)構(gòu)建一個(gè)具體的層級(jí)結(jié)構(gòu)，而有競(jìng)爭(zhēng)力的設(shè)計(jì)師必須完善不同的方法，或者發(fā)明新的方法才能在游戲中保持領(lǐng)先。我們將描述五個(gè)最基本的元素，它們是支持簡(jiǎn)單或復(fù)雜層次結(jié)構(gòu)所必需的基本構(gòu)件。

1.工作尺寸

Fitts定律的一個(gè)原則是，尺寸更大的物體，特別是可點(diǎn)擊的范圍更容易接觸。換句話說(shuō)，用戶更不費(fèi)力地點(diǎn)擊更大的項(xiàng)目。對(duì)于呼叫到行動(dòng)，這一點(diǎn)尤其適用，在這里您不需要對(duì)用戶應(yīng)該去的地方留下任何疑問(wèn)。

當(dāng)然，這并不是說(shuō)它就像讓你的"現(xiàn)在下載"的呼叫到動(dòng)作的10x更容易轉(zhuǎn)換一樣簡(jiǎn)單。元素之間的微妙和和諧是關(guān)鍵。例如，你認(rèn)為Teye網(wǎng)站的設(shè)計(jì)師想讓你和大多數(shù)人互動(dòng)嗎?大的、可點(diǎn)擊的、互動(dòng)性的Teye產(chǎn)品顯然是主要的吸引力而且顯而易見(jiàn)的是它的尺寸。事實(shí)上，甚至沒(méi)有必要告訴用戶要與產(chǎn)品進(jìn)行接觸因?yàn)樗念伾痛笮∈菍?duì)比色的，因此圖像功能是一種微妙的呼叫。結(jié)果是，它周圍的四個(gè)圖標(biāo)需要較少的關(guān)注，實(shí)際上，當(dāng)你點(diǎn)擊時(shí)，它會(huì)擴(kuò)展到產(chǎn)品描述。除了點(diǎn)擊能力之外，大小仍然是網(wǎng)站整體視覺(jué)的重要組成部分。根據(jù)不同的程度，更大的元素甚至可以支配我們的硬連線從左到右，最新的網(wǎng)站模式。此外，因?yàn)樗腔谕敢晥D的，所以大小也可以用對(duì)比度來(lái)表示。你可以通過(guò)讓其他元素更小而不是更大的元素來(lái)達(dá)到同樣的效果記住這是節(jié)省屏幕空間的一種有用的方法。大小甚至影響文本和排版，正如您可以看到的這篇文章的標(biāo)題、副標(biāo)題和內(nèi)容文本。作為靈活的指導(dǎo)方針，Smashing Magazine對(duì)50個(gè)熱門網(wǎng)站的研究計(jì)算了一些平均尺寸:

標(biāo)題:29像素

內(nèi)文:12 - 14像素

所有大小的原則都可以從大公司的截圖中看到，你首先注意到的是最大的:作為他們標(biāo)志的風(fēng)格H。其次是"耐克制造"，它的大號(hào)字體和大膽的風(fēng)格創(chuàng)造了即時(shí)的重量。下面是直接在它下面的文本行，以較小的字體大小來(lái)寫，這樣就不會(huì)從關(guān)鍵的視覺(jué)效果中竊取注意力。如果你的眼睛仍然有興趣去閑逛，他們最終會(huì)注意到角落里的小圖標(biāo)和漢堡包菜單，或者右邊的導(dǎo)航欄。這里的層次結(jié)構(gòu)是有意義的。首先，五顏六色的大H吸引了你的眼球。不久之后，你將會(huì)為非正統(tǒng)的視覺(jué)尋找背景，這將立即被超鏈接的"耐克制造"的標(biāo)題和第二句。視覺(jué)層次結(jié)構(gòu)列出了用戶的路徑，而Fitts的法則簡(jiǎn)化了交互，使整個(gè)復(fù)制的部分都可以點(diǎn)擊，并且非常接近它的相關(guān)視覺(jué)。如果沒(méi)有考慮過(guò)，你最終會(huì)點(diǎn)擊設(shè)計(jì)師想讓你去的地方。

2.顏色

你選擇的顏色，即使只是黑人和白人，也會(huì)對(duì)用戶如何看待你的網(wǎng)站產(chǎn)生巨大的影響。首先，每種顏色都有自己的心理聯(lián)系，我們?cè)诰W(wǎng)站UI設(shè)計(jì)中為人眼詳細(xì)解釋。除此之外，顏色本身也有自己的層次結(jié)構(gòu)，在這里，黑色和紅色更容易引起注意，而柔和的黃色和面霜可能會(huì)退居次要位置。然而，這些影響可以通過(guò)使用對(duì)比增強(qiáng)甚至逆轉(zhuǎn)。對(duì)比色與自然相反的顏色(即互補(bǔ)色)吸引了更多的注意。這對(duì)視覺(jué)層次結(jié)構(gòu)產(chǎn)生了巨大的影響，因?yàn)樵谒{(lán)色背景下放置一個(gè)黃色的呼叫會(huì)比一個(gè)紅色的CTA產(chǎn)生更好的效果。

自然，數(shù)字設(shè)計(jì)師和藝術(shù)總監(jiān)維托·塞爾瓦托(Vito Salvatore)的網(wǎng)站應(yīng)該包括引人注目的視覺(jué)效果。他選擇的主頁(yè)展示了他的能力。從顏色上看，沙子的顏色與天空的深藍(lán)形成了對(duì)比，這使得這是一個(gè)視覺(jué)上的動(dòng)態(tài)圖像。對(duì)于功能來(lái)說(shuō)，選擇白色的排版允許鏈接突出地突出，盡管背景攝影的宏偉。在更微妙的層次上，棕褐色的顏色實(shí)際上是藍(lán)色天空的補(bǔ)充，就像你在這個(gè)色輪里看到的那樣。雖然這在照片中可能是純粹的巧合，但它在美學(xué)上創(chuàng)造了一種平衡的感覺(jué)。還要注意的是，棕褐色的塵埃軌跡會(huì)產(chǎn)生一種行動(dòng)感，讓你的眼睛朝向紅色的汽車(然后指向白色文本菜單的方向)。當(dāng)我們解構(gòu)設(shè)計(jì)時(shí)，你可以真正開(kāi)始看到顏色、視覺(jué)和排版如何引導(dǎo)你的眼睛朝向屏幕最有價(jià)值的部分。

3.產(chǎn)品布局

你的網(wǎng)站界面布局是控制你的視覺(jué)層次的最直接的方式之一你可以把一個(gè)元素放在視覺(jué)層次的頂部，把它放在前面。但還有更多的游戲，而不僅僅是屏幕上的高度。其中一個(gè)因素是質(zhì)數(shù)。菲特定律的另一個(gè)原理，我們已經(jīng)簡(jiǎn)單描述過(guò)，就是利用最容易到達(dá)的位置。在網(wǎng)頁(yè)設(shè)計(jì)中，這些都是屏幕的邊角和邊框，將光標(biāo)"扔"到一邊需要的鼠標(biāo)控制比中間的一個(gè)固定點(diǎn)要少。

雖然您可能主要關(guān)注屏幕的中心(考慮到它的大小和對(duì)比度的黑線)，但是停滯的可點(diǎn)擊鏈接仍然很容易在角落和底部訪問(wèn)。向上和向下滾動(dòng)會(huì)改變中間顯示的內(nèi)容，但是網(wǎng)站標(biāo)識(shí)、漢堡包菜單、聯(lián)系信息和社交媒體鏈接會(huì)牢牢地停留在它們的主要位置。當(dāng)然，布局當(dāng)然會(huì)影響視覺(jué)層次，更不用說(shuō)可用性了。格式塔原理(如下所述)表明，線條中的物體創(chuàng)造了推動(dòng)視力的動(dòng)力，甚至控制了顏色的效果。行和列，然后，除了支持一個(gè)有組織的結(jié)構(gòu)來(lái)防止混亂，在他們結(jié)束時(shí)也創(chuàng)造了一些優(yōu)質(zhì)的房地產(chǎn)——完美的CTAs或其他的首選內(nèi)容。

正如您所看到的，Huncwot將其主頁(yè)的選項(xiàng)保持在一條直線的水平線上(在您所選擇的任何選擇的后面都有一個(gè)動(dòng)畫)。在決定布局時(shí)，請(qǐng)記住我們?cè)?a href="http://gagu89.com/seojianzhan/17750.html" target="_blank" >交互設(shè)計(jì)最佳實(shí)踐中談到的Hick法則。簡(jiǎn)而言之，?？怂苟芍赋?，一個(gè)人做出的決定越多，決策的過(guò)程就越長(zhǎng)。因此，您希望在給您的用戶提供許多選項(xiàng)并將他們的選擇限制為基本要素之間找到一個(gè)完美的平衡。這將影響您選擇的布局方法，因?yàn)槟幌胱層脩糌?fù)擔(dān)的內(nèi)容太多，但是您也希望提供足夠的內(nèi)容來(lái)滿足他們。這是一個(gè)微妙的平衡，但對(duì)每個(gè)網(wǎng)站都是強(qiáng)制性的。否則，如果你的網(wǎng)站上有太多的界面元素，你的視覺(jué)層次就會(huì)變得平坦，沒(méi)有任何東西能吸引用戶。

4.產(chǎn)品間距

與布局相關(guān)，界面內(nèi)的間距會(huì)引導(dǎo)眼睛，在合適的情況下，解釋或建議功能。間距以兩種不同的方式影響你的視覺(jué)層次:接近性和負(fù)性空間。對(duì)于web設(shè)計(jì)人員來(lái)說(shuō)，鄰近性是一個(gè)強(qiáng)大的工具，因?yàn)樗梢允褂靡曈X(jué)效果來(lái)顯示元素的意義和功能。格式塔原理，從20世紀(jì)早期的視覺(jué)心理學(xué)派，導(dǎo)致了發(fā)現(xiàn)，用戶傾向于感知的元素被放在一起，有相似的功能。

在片段頁(yè)面的間隔顯示完格式塔的分組原則。與中心圖像相關(guān)的元素直接在它下面。網(wǎng)站內(nèi)容，與相關(guān)的導(dǎo)航選項(xiàng)，被分組在一起在右邊。整個(gè)站點(diǎn)的導(dǎo)航控件在左邊被分組，整個(gè)站點(diǎn)的非導(dǎo)航鏈接在底部被分組在一起。在相關(guān)的說(shuō)明上，也注意到它是如何通過(guò)在水平邊框上放置重要的滾動(dòng)選項(xiàng)來(lái)利用質(zhì)數(shù)像素的。另一個(gè)方面是負(fù)空間，通常稱為空白。在web設(shè)計(jì)中，將空白作為空白畫布而不是作為設(shè)計(jì)工具，這是新手的錯(cuò)誤。熟練的設(shè)計(jì)師知道你擁有的元素越少，剩下的元素就越強(qiáng)大。在你的關(guān)鍵元素之間的適當(dāng)數(shù)量的空隙會(huì)使它們成為注意力的中心。事實(shí)上，Dmitry Fadeyev引用了一項(xiàng)研究，發(fā)現(xiàn)段落之間和邊緣之間的空白提高了近20%的理解。

Nua自行車很好地利用了負(fù)空間。憑借其簡(jiǎn)約的風(fēng)格和缺乏相互沖突的視覺(jué)效果，該網(wǎng)站將用戶的注意力集中在重要的東西上自行車的銷售。為了更多地了解負(fù)空間的力量，我們強(qiáng)烈推薦設(shè)計(jì)師馬克·博爾頓的一篇文章。他更詳細(xì)地探索了負(fù)空間，解構(gòu)了它的主動(dòng)和被動(dòng)元素，以及將負(fù)空間歸類為微觀或宏觀的空白。

5.風(fēng)格

我們并不是要給人這樣的印象:網(wǎng)頁(yè)設(shè)計(jì)只是一種可以量化的做法，只有一種方法。個(gè)人風(fēng)格，例如使用紋理、圖形和圖像類型(如圖標(biāo)或照片重)，都影響視覺(jué)層次，并允許你表達(dá)個(gè)人的設(shè)計(jì)角色。最有力的文體工具之一就是織體。當(dāng)使用得當(dāng)?shù)臅r(shí)候，紋理在增加深度和氛圍的同時(shí)，也具有同樣的大小和顏色的優(yōu)勢(shì)(在審美情趣上)。最明顯的例子是位移:只提供一個(gè)元素紋理將使其突出，而具有紋理的背景將使前景中的非紋理對(duì)象突出。

正如你可以在Le Mystere de GrimoUVille上看到的，標(biāo)題上的紋理不僅吸引了人們的注意，也給網(wǎng)站注入了一種古雅的氛圍和風(fēng)格。紋理，以及大小和位置，將標(biāo)題與不重要的正文分開(kāi)。神秘的效果是完美的，考慮到這個(gè)網(wǎng)站講述了一個(gè)神秘的故事，它困擾了諾曼底的140名居民四年多。

采用相反的方法，Jib戰(zhàn)略性增加紋理到背景中繪制出前景。這不僅影響了用戶的注意力，它還創(chuàng)造了一個(gè)老式的風(fēng)格，帶有顆粒狀的木頭，但仍然顯得現(xiàn)代，有清晰的字體和圖形。除了紋理之外，你使用的圖形和圖像的類型也會(huì)影響你的視覺(jué)層次。圍繞著這個(gè)標(biāo)志的一個(gè)旋轉(zhuǎn)的繁盛吸引了人們的注意并反映了這個(gè)網(wǎng)站的個(gè)性。同樣，無(wú)論你的網(wǎng)站布局或顏色方案如何，豐富的照片或聰明的圖標(biāo)一定會(huì)吸引眼球。

不淡化米洛蒂網(wǎng)站的色彩使用，但它是內(nèi)容的誘惑一頓美味的食物使它成為屏幕上最令人垂涎欲滴的東西。事實(shí)上，這個(gè)網(wǎng)站的紋理并不是以傳統(tǒng)的漸變、陰影或一些照片現(xiàn)實(shí)效果來(lái)執(zhí)行的。只要用一張豐富的照片展示一張質(zhì)樸的餐桌，我們就能感受到屏幕上彌漫著的環(huán)境的質(zhì)感。因?yàn)檎掌旁诒尘爸?，界面?duì)象(大部分還是很清楚的，我們也有同樣的感覺(jué)在設(shè)計(jì)視覺(jué)效果時(shí)，不要低估了人類興趣的力量，因?yàn)樗麄冇袝r(shí)會(huì)認(rèn)為規(guī)則是一成不變的。說(shuō)到質(zhì)地，要記住，適度是關(guān)鍵，否則你最終會(huì)變成完全變形，這感覺(jué)很俗氣。

最后

知道如何使用這些構(gòu)建塊是web設(shè)計(jì)人員的標(biāo)準(zhǔn)要求，但是知道什么時(shí)候該使用什么甚至更好的是，如何一起使用它們——是對(duì)技能的掌握。界面中的每個(gè)元素都將相互混合，爭(zhēng)奪視覺(jué)優(yōu)勢(shì)。即使你的設(shè)計(jì)是像素級(jí),每個(gè)用戶將與他們不可預(yù)測(cè)的因素(例如,用戶可能有一個(gè)偏好綠色…)。請(qǐng)記住，這不僅是一門科學(xué)，也是一門藝術(shù)——可以自由地進(jìn)行實(shí)驗(yàn)，讓自己的創(chuàng)造力閃耀。