網(wǎng)頁設(shè)計中視覺層次的五大支柱

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

1.工作尺寸

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

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

標題:29像素

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

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

2.顏色

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

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

3.產(chǎn)品布局

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

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

正如您所看到的，Huncwot將其主頁的選項保持在一條直線的水平線上(在您所選擇的任何選擇的后面都有一個動畫)。在決定布局時，請記住我們在交互設(shè)計好實踐中談到的Hick法則。簡而言之，希克斯定律指出，一個人做出的決定越多，決策的過程就越長。因此，您希望在給您的用戶提供許多選項并將他們的選擇限制為基本要素之間找到一個好的平衡。這將影響您選擇的布局方法，因為您不想讓用戶負擔(dān)的內(nèi)容太多，但是您也希望提供足夠的內(nèi)容來滿足他們。這是一個微妙的平衡，但對每個網(wǎng)站都是強制性的。否則，如果你的網(wǎng)站上有太多的界面元素，你的視覺層次就會變得平坦，沒有任何東西能吸引用戶。

4.產(chǎn)品間距

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

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

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

5.風(fēng)格

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

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

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

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

最后

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

分享標題：網(wǎng)頁設(shè)計中視覺層次的五大支柱
分享地址：http://muchs.cn/news5/48205.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、品牌網(wǎng)站設(shè)計、品牌網(wǎng)站建設(shè)、服務(wù)器托管、電子商務(wù)、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)