我們都經(jīng)歷過信息過載。幻燈片太密集了。沒有明確行動(dòng)號召的網(wǎng)頁。選項(xiàng)太多的表單。

Figma的設(shè)計(jì)師倡導(dǎo)者M(jìn)iguel Cardona解釋道：“如果一切看起來都一樣，那么你什么也看不到。”。“視覺層次結(jié)構(gòu)可以改變這一點(diǎn)。”

什么是視覺層次？

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

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

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

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

設(shè)計(jì)師運(yùn)用八個(gè)關(guān)鍵的視覺層次原則來幫助大腦快速掌握想法。

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

2.顏色通常用色調(diào)、亮度和飽和度來描述。然而，顏色可能很棘手，因?yàn)槿藗儗λ目捶ǚ浅２煌榱私⑶逦囊曈X層次，卡多納在設(shè)計(jì)中指定了亮度和亮度。

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

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

5.尺寸是指物體或設(shè)計(jì)元素的尺寸。按鈕或內(nèi)容等UI元素的大小可能是可訪問性的重要考慮因素。卡多納說：“如果你不為低視力用戶提供在文本和圖像大小上擁有代理權(quán)的機(jī)會(huì)，你就會(huì)讓你的內(nèi)容難以閱讀和理解。”。

6.紋理是表面的感覺或UI元素的感覺。Cardona說：“紋理可以讓你賦予設(shè)計(jì)意義，并可能有助于清晰地視覺指示如何使用。”。當(dāng)UI設(shè)計(jì)師使用紋理來模仿觸覺、現(xiàn)實(shí)生活中的材料的外觀時(shí)，這被稱為skeomorphism——除非小心處理，否則它可能會(huì)給人留下過時(shí)或字面的印象。卡多納解釋道：“在數(shù)字設(shè)計(jì)中，很多設(shè)計(jì)師都避免使用紋理，但它確實(shí)很有影響力。紋理可以用來創(chuàng)造高光，而不是依賴顏色。”

7.時(shí)間在屏幕上的展開方式不同于在印刷頁面和靜態(tài)產(chǎn)品上。屏幕可以改變、反應(yīng)和變換，打開了一個(gè)時(shí)間設(shè)計(jì)的新世界