我們都經(jīng)歷過(guò)信息過(guò)載?；脽羝芗?。沒(méi)有明確行動(dòng)號召的網(wǎng)頁(yè)。選項太多的表單。

Figma的設計師倡導者M(jìn)iguel Cardona解釋道：“如果一切看起來(lái)都一樣，那么你什么也看不到?！??！耙曈X(jué)層次結構可以改變這一點(diǎn)?！?

什么是視覺(jué)層次？

視覺(jué)層次結構是按重要性順序排列元素的做法，目的是將用戶(hù)的注意力引導到能夠滿(mǎn)足其需求的內容和工具上。什么首先引起他們的注意？那么它們看起來(lái)在哪里呢？用戶(hù)是否采取了你想要的行動(dòng)，并對結果感到滿(mǎn)意

如果做得好，視覺(jué)層次結構可以幫助人們直觀(guān)地理解信息。這就是觀(guān)眾如何通過(guò)一眼電影海報就能快速了解電影的內容、演員和上映日期。仔細觀(guān)察，你可能會(huì )發(fā)現一些不那么關(guān)鍵的信息，比如它的評級和工作室隸屬關(guān)系。

7個(gè)基本的視覺(jué)層次原則

視覺(jué)層次結構的靈感來(lái)自格式塔心理學(xué)，該心理學(xué)探討了大腦如何從混亂中創(chuàng )造秩序，形成模式，并將不同的元素組合成一個(gè)統一的整體。

設計師運用八個(gè)關(guān)鍵的視覺(jué)層次原則來(lái)幫助大腦快速掌握想法。

1.對齊是指一個(gè)視覺(jué)元素相對于組中其他元素的放置。當對象對齊或排列時(shí)，它們被理解為彼此相關(guān)。

2.顏色通常用色調、亮度和飽和度來(lái)描述。然而，顏色可能很棘手，因為人們對它的看法非常不同。為了建立清晰的視覺(jué)層次，卡多納在設計中指定了亮度和亮度。

3.對比是指明顯不同的元素靠近在一起。設計師經(jīng)常將溫暖和涼爽的元素或互補的顏色并置，以增強視覺(jué)吸引力并提高可及性的對比度。

4.接近度描述物品之間的關(guān)系。將對象分組或“分塊”就是這一原則的一個(gè)例子。

5.尺寸是指物體或設計元素的尺寸。按鈕或內容等UI元素的大小可能是可訪(fǎng)問(wèn)性的重要考慮因素?？ǘ嗉{說(shuō)：“如果你不為低視力用戶(hù)提供在文本和圖像大小上擁有代理權的機會(huì )，你就會(huì )讓你的內容難以閱讀和理解?！?。

6.紋理是表面的感覺(jué)或UI元素的感覺(jué)。Cardona說(shuō)：“紋理可以讓你賦予設計意義，并可能有助于清晰地視覺(jué)指示如何使用?！?。當UI設計師使用紋理來(lái)模仿觸覺(jué)、現實(shí)生活中的材料的外觀(guān)時(shí)，這被稱(chēng)為skeomorphism——除非小心處理，否則它可能會(huì )給人留下過(guò)時(shí)或字面的印象?？ǘ嗉{解釋道：“在數字設計中，很多設計師都避免使用紋理，但它確實(shí)很有影響力。紋理可以用來(lái)創(chuàng )造高光，而不是依賴(lài)顏色?！?br />
7.時(shí)間在屏幕上的展開(kāi)方式不同于在印刷頁(yè)面和靜態(tài)產(chǎn)品上。屏幕可以改變、反應和變換，打開(kāi)了一個(gè)時(shí)間設計的新世界