如何改進(jìn) UI 中的層次結(jié)構(gòu)
視覺層次結(jié)構(gòu)可以成就或破壞您的設(shè)計(jì)。將消息發(fā)送給用戶或讓他們處于壓倒性狀態(tài)，讓他們迷失在要采取的操作上。要改善層次結(jié)構(gòu)，您需要了解它的基礎(chǔ)知識(shí)
什么是視覺層次結(jié)構(gòu)？
視覺層次結(jié)構(gòu)有助于將用戶的眼睛引導(dǎo)到他們需要知道的信息上，并相應(yīng)地采取行動(dòng)。加快決策制定并轉(zhuǎn)化更多預(yù)期結(jié)果。
對(duì)格式塔設(shè)計(jì)原則的簡(jiǎn)要了解將為用戶如何一起感知元素并與之相關(guān)提供堅(jiān)實(shí)的基礎(chǔ)。
那么，是什么創(chuàng)建了視覺層次結(jié)構(gòu)？
我會(huì)說對(duì)比。由大小，顏色，類型，樣式創(chuàng)建的對(duì)比度?；旧希琔I元素的物理差異。讓我們?cè)敿?xì)介紹一下
視覺層次結(jié)構(gòu)工具
在UI元素中創(chuàng)造物理差異的工具，以建立我們內(nèi)容的優(yōu)先級(jí)
1. 尺寸
尺寸可能是最常用和最重要的工具之一。作為人類，我們?cè)谛睦砩险J(rèn)為較大的物體比較小的物體具有更高的重要性，因此我們的眼睛會(huì)更快地指向大文字，圖片或任何視覺效果。
讓我們以排版為例：
一旦您登陸此頁面，您就可以快速了解您所在的位置。產(chǎn)品的定義或標(biāo)識(shí)。這同樣適用于您在頁面中使用的其他組件。
你的眼睛知道在哪里看，這是層次結(jié)構(gòu)101。
2. 顏色
應(yīng)用此工具創(chuàng)建層次結(jié)構(gòu)需要基本了解色彩心理學(xué)。
使用一些高對(duì)比度的顏色，您可以創(chuàng)建層次結(jié)構(gòu)。將此顏色與較淺顏色的背景一起使用，反之亦然，即使您保持較小的文本大小，也會(huì)添加顏色工具。
例如，這里的“應(yīng)用于驅(qū)動(dòng)器”按鈕由于顏色而迅速吸引注意力。此頁面的整個(gè)色調(diào)（包括圖像）已飽和，因此彈出CTA顏色
3. 負(fù)空間
在一種非常不常見但必要的技術(shù)中，使用是添加負(fù)空格/空格。它隔離了主題，使它更加集中。
在下面的屏幕截圖中，整個(gè)第一折都有空白，中間有一個(gè)簡(jiǎn)短的介紹。它賦予信息力量并減少認(rèn)知負(fù)荷
4. 類型重量
除了類型大小，類型重量也很重要。30px 的粗體字體會(huì)比常規(guī)字體更吸引注意力。在組件中組合粗體和常規(guī)會(huì)帶來更多的對(duì)比度并定義內(nèi)容的優(yōu)先級(jí)
5. 投影
這是我一路走來學(xué)到的東西。在包含多個(gè)數(shù)據(jù)點(diǎn)的擁擠頁面中，我們?nèi)绾问褂藐幱皝砭劢箍ㄆM件。添加更寬的陰影可提供更大的深度，并在 z 軸上提供更隆起的視覺提示
現(xiàn)在，您設(shè)計(jì)了所有內(nèi)容，使用所需的工具來建立層次結(jié)構(gòu)，以及如何測(cè)試自己的設(shè)計(jì)。一種方法是讓你的眼睛休息2-3分鐘，休息一下，然后回來，但在看到它們時(shí)瞇起眼睛。
我個(gè)人最喜歡的另一種方法是將圖層模糊添加到具有 li'l 不透明度的白色矩形中。把它放在你的設(shè)計(jì)上，瞧，較暗的圖案是用戶將看到的圖案?，F(xiàn)在，判斷你的設(shè)計(jì)是否是你打算做的。
留言