中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語(yǔ)：UI設(shè)計(jì)師在處理界面上的信息層級(jí)時(shí)，有很多小細(xì)節(jié)需要注意，比如界面上的排序、以及功能的使用性等等；本文作者分享了關(guān)于UI界面中一些常見(jiàn)的層級(jí)區(qū)分的設(shè)計(jì)技巧，我們一起來(lái)了解一下。

Hello，馬上放假啦！先給大家拜個(gè)早年，新年快樂(lè)鴨～

今天給大家?guī)?lái)的主題是關(guān)于UI界面信息層級(jí)的處理小技巧；大家都知道，UI設(shè)計(jì)師最重要的工作之一就是將界面上的信息清晰有序的呈現(xiàn)給用戶，使產(chǎn)品界面不僅有用，并且美觀易用。

當(dāng)界面具有優(yōu)秀的信息層級(jí)時(shí)，用戶獲取信息的速度會(huì)更快，用戶體驗(yàn)更好；而當(dāng)界面毫無(wú)層級(jí)關(guān)系或?qū)哟稳鯐r(shí)，不僅界面視覺(jué)相對(duì)平淡，甚至?xí)褂脩衾Щ笮畔⒅g的關(guān)系從而造成認(rèn)知負(fù)擔(dān)。

01 優(yōu)秀的信息層級(jí)

那我們?cè)趺慈ダ斫馑^「優(yōu)秀的信息層級(jí)」呢？我們先來(lái)看下這 2 張圖感受一下：

像左圖，我們可以一眼區(qū)分出重點(diǎn)信息/次級(jí)信息以及不同的信息模塊之前的關(guān)系，整體頁(yè)面更有節(jié)奏感；而右圖則因?yàn)槟K之間劃分不清晰、信息之間對(duì)比不夠，使所有的信息都混為一體，頁(yè)面看起來(lái)有點(diǎn)凌亂，信息獲取成本高。

因此，我們可以總結(jié)出「優(yōu)秀的信息層級(jí)」主要有這 2 個(gè)特點(diǎn)：

• 重點(diǎn)信息與次級(jí)信息對(duì)比適中；
• 信息與模塊的層級(jí)關(guān)系清晰；

想要做到以上 2 點(diǎn)，從設(shè)計(jì)技巧上來(lái)說(shuō)也是有套路的。下面我們來(lái)看看有哪些技巧吧~

02 創(chuàng)建優(yōu)秀信息層級(jí)的設(shè)計(jì)技巧

大家在工作中可能都聽(tīng)過(guò)類似的聲音：“感覺(jué)信息不是很突出” “感覺(jué)看起來(lái)字好多”。很多時(shí)候都是因?yàn)轫?yè)面的信息層級(jí)沒(méi)有拉開(kāi)，也就是說(shuō)重點(diǎn)信息和次級(jí)信息對(duì)比不夠。

當(dāng)對(duì)比度不夠的時(shí)候，信息重要程度都是相似的，我們會(huì)把信息看成一團(tuán)，沒(méi)有重點(diǎn)。

對(duì)設(shè)計(jì)師而言，我們可以通過(guò)一些設(shè)計(jì)手法將頁(yè)面中的信息進(jìn)行優(yōu)化調(diào)整，可以從以下幾個(gè)維度著手：

1. 加大字號(hào)或字重

這是相對(duì)簡(jiǎn)單的一種處理方式，我們都知道字體是有重量的，字體越大/越粗對(duì)應(yīng)的視覺(jué)重量越重；因此我們可以使用不同的字體大小與字重去體現(xiàn)信息。

對(duì)于一級(jí)標(biāo)題或重點(diǎn)信息，我們可以適當(dāng)增大字號(hào)及字重去拉開(kāi)標(biāo)題與其他信息的層級(jí)，使人一眼看過(guò)去就可以抓住界面的重點(diǎn)，提高信息獲取效率。

舉個(gè)例子例子：

如上圖所示，文字信息間的字重都是一樣的，字號(hào)也沒(méi)有拉開(kāi)對(duì)比，顯得文字非常多，一眼看過(guò)去沒(méi)有重點(diǎn)。

我們來(lái)看看簡(jiǎn)單的加大字號(hào)與字重，拉開(kāi)文字之間的對(duì)比會(huì)如何呢？

是不是頁(yè)面信息多了些層次感和節(jié)奏感呢？一看掃過(guò)去，我們可以快速的將頁(yè)面分成上下不同的模塊；同時(shí)，用戶關(guān)心的房型名稱和價(jià)格也相應(yīng)地從其他信息中突出了。

因此，當(dāng)設(shè)計(jì)的界面收到類似“字太多”“頁(yè)面太平”的反饋時(shí)，就可以試試“大膽”地加大字號(hào)及字重。

同時(shí)，適當(dāng)?shù)膶?duì)比還可以增加整體板式的視覺(jué)節(jié)奏感?！敢曈X(jué)節(jié)奏感」指的是運(yùn)用視覺(jué)元素的重復(fù)、發(fā)散、對(duì)比、重疊等多種變化形成節(jié)奏的變化；這在平面設(shè)計(jì)中運(yùn)用的比較多，是設(shè)計(jì)師必須掌握的技能；而在UI設(shè)計(jì)中，一些需要呈現(xiàn)強(qiáng)烈視覺(jué)風(fēng)格的界面，也常?？梢赃\(yùn)用到類似的技巧。

2. 增加圖形用于標(biāo)示重點(diǎn)

有時(shí)候頁(yè)面層級(jí)比較多或者限制于一些設(shè)計(jì)規(guī)范，字號(hào)大小和字重變化不能達(dá)到層級(jí)區(qū)分的目的時(shí)，我們還可以通過(guò)增加修飾元素來(lái)標(biāo)示重點(diǎn)。特別是類似下面這種信息層級(jí)多到爆炸的情況。

常見(jiàn)的修飾元素可以有短線/圓點(diǎn)/基礎(chǔ)塊面等，這些元素需要根據(jù)產(chǎn)品本身的視覺(jué)語(yǔ)言和風(fēng)格去使用。

同時(shí)，如何去運(yùn)用這些元素也需要大家平時(shí)多積累。如我們?cè)诳匆恍﹥?yōu)秀作品的時(shí)，多總結(jié)頁(yè)面的層級(jí)關(guān)系是通過(guò)哪些表現(xiàn)技法體現(xiàn)的，這樣我們?cè)趯?shí)際項(xiàng)目中，才能做到胸有成竹。

下面舉 2 個(gè)例子簡(jiǎn)單的分析一下～

例子 1 ：

如上圖黃色框內(nèi)的信息，屬于推廣內(nèi)容的類別，需要讓用戶注意到，但同時(shí)字號(hào)/字重不能過(guò)于強(qiáng)調(diào)，否則又可能會(huì)搶了推廣內(nèi)容的視覺(jué)重點(diǎn)。

這里的處理方式是通過(guò)增加 icon ，讓信息更明顯，同時(shí)又不會(huì)奪去推廣內(nèi)容的視覺(jué)重心。大家也可以思考一下是否還有其他方式～

例子 2 ：

如上圖黃色框里的內(nèi)容，盡管整體文字信息層級(jí)比較豐富，但我們還是可以快速知道黃框里的內(nèi)容主要是分成了 2 個(gè)部分：當(dāng)?shù)剡_(dá)人的基本信息和推薦內(nèi)容，這是為什么呢？

原因就在于「推薦內(nèi)容部分增加了底色」，底色形成了一個(gè)基礎(chǔ)塊面，我們視覺(jué)上會(huì)自動(dòng)把底色塊里的所有信息先聚攏在一起。

3. 使用顏色區(qū)分信息

無(wú)論是什么產(chǎn)品，其視覺(jué)語(yǔ)言中都會(huì)有不同色階的灰色；因?yàn)轭伾顪\、冷暖也可以起到信息層級(jí)區(qū)分的作用。如重點(diǎn)信息是黑灰，次級(jí)信息是深灰，輔助信息是淺灰，再結(jié)合字重/大小的變化，我們可以讓頁(yè)面層級(jí)更清晰。

使用顏色變化拉開(kāi)信息層級(jí)時(shí)，需要注意灰色變化的文字適用于白或黑色背景，遇到彩色背景時(shí)，不太建議使用，因?yàn)槿菀罪@得界面臟。

4. 拉開(kāi)間距，引導(dǎo)視線

格式塔原理中有個(gè)叫接近性原理，指的是位置相近的各元素我們傾向于認(rèn)為是一個(gè)整體；還有研究驗(yàn)證，接近性原理中距離的接近，比起顏色/形狀的接近，更容易被認(rèn)為是一個(gè)整體。

如圖（2），我們可以發(fā)現(xiàn)，當(dāng)元素之間的距離達(dá)到一定程度時(shí)，即使它們有著完全不同的特征，我們也更傾向于認(rèn)為互相靠近的元素是相關(guān)的，組成了一個(gè)整體。

因此，我們的界面設(shè)計(jì)中也可以沿用此原理，不同模塊之間的間距適當(dāng)拉開(kāi)，使信息模塊區(qū)分的更明顯，如下面的 2 個(gè)例子：

除了不同模塊的區(qū)分外，文字信息還需要注意字距與行距；如果文本的行間距過(guò)小，會(huì)導(dǎo)致文字內(nèi)容擠在一起，使用戶閱讀時(shí)產(chǎn)生疲勞感。

當(dāng)字間距與行間距比例不正確時(shí)，會(huì)使閱讀方向發(fā)生錯(cuò)位，造成用戶認(rèn)知障礙。

5. 運(yùn)用陰影、分割線創(chuàng)建層級(jí)

對(duì)信息模塊的區(qū)分，除了拉開(kāi)間距外，時(shí)常還會(huì)搭配分割線/陰影的運(yùn)用來(lái)創(chuàng)建層級(jí)。

不管用什么方式，我們都需要保持界面的干凈清爽，讓這些元素發(fā)揮層級(jí)區(qū)分的作用，而不是變成視覺(jué)干擾。

因此在運(yùn)用這些元素時(shí)，要注意以下這些問(wèn)題：

1）分割線與背景的對(duì)比度不宜過(guò)大

2）陰影不宜太深硬

3）克制使用這些元素

03 寫(xiě)在最后

以上便是關(guān)于本期的所有內(nèi)容啦。我們分享了UI界面中一些常見(jiàn)的層級(jí)區(qū)分的設(shè)計(jì)技巧。

當(dāng)然，從設(shè)計(jì)的形式上來(lái)說(shuō)肯定遠(yuǎn)不止這些，但其中的原理都是相通的，希望大家能夠有所收獲，并能運(yùn)用到實(shí)際的項(xiàng)目中。

#專欄作家#

設(shè)計(jì)牛奶盒，微信公眾號(hào)：設(shè)計(jì)牛奶盒，人人都是產(chǎn)品經(jīng)理專欄作家。做一個(gè)有生活態(tài)度的設(shè)計(jì)牛奶盒。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議。