公主的腿间舌奴们np肉_国产在热线精品视频99公交_公主车上荫蒂添的好舒服_公侵犯人妻中文字慕一区二区_公么大龟弄得我好舒服秀_公交车+多人+高cH文章推荐_日本熟妇另类视频在线播放

如何提高界面信息識(shí)別效率？

2023-2-15 ui設(shè)計(jì)分享達(dá)人

一、為什么要提高界面信息識(shí)別效率？（Why）

界面設(shè)計(jì)的好壞，會(huì)直接影響到用戶(hù)的使用體驗(yàn)，很多時(shí)候我們往往會(huì)直接拿到競(jìng)品的頁(yè)面搬運(yùn)到自己產(chǎn)品上，而沒(méi)有針對(duì)自身產(chǎn)品的特點(diǎn)和業(yè)務(wù)加以思考。

這種做法理論上不會(huì)讓自己的頁(yè)面出錯(cuò)。但是很多人往往忽略了一點(diǎn)，就是別人這么設(shè)計(jì)的出發(fā)點(diǎn)是什么，是否匹配自身產(chǎn)品的業(yè)務(wù)流程，如果不了解這些貿(mào)然的去搬運(yùn)設(shè)計(jì)，那么時(shí)間久了就會(huì)養(yǎng)成一個(gè)不好的習(xí)慣，導(dǎo)致思維不能得到足夠的刺激和知識(shí)的沉淀。當(dāng)需要我們專(zhuān)門(mén)進(jìn)行設(shè)計(jì)構(gòu)思時(shí)，就會(huì)遇到諸多困難。

如果是剛?cè)胧值念I(lǐng)域，前期可以去進(jìn)行適當(dāng)?shù)陌徇\(yùn)參考，但是一定要了解別人設(shè)計(jì)思考點(diǎn)，明白其背后的原因，將其沉淀成自己的知識(shí)儲(chǔ)備在腦海中。

1. 信息大爆炸

過(guò)去60年，人類(lèi)社會(huì)的數(shù)據(jù)發(fā)生了爆炸式增長(zhǎng)。2008年人類(lèi)大約創(chuàng)造了近10億張DVD能存儲(chǔ)的數(shù)據(jù)，這等同于過(guò)去5000年的人類(lèi)創(chuàng)造數(shù)據(jù)的總和。12年，調(diào)研機(jī)構(gòu)預(yù)測(cè)信息每隔18月會(huì)翻一倍20年，調(diào)研機(jī)構(gòu)預(yù)測(cè)信息每隔73天會(huì)翻一倍

2. 人類(lèi)的生理局限

在信息爆炸的年代，人類(lèi)進(jìn)化的速度卻是緩慢的，我們現(xiàn)在的大腦跟250萬(wàn)年前的原始人并沒(méi)有太大區(qū)別。

我們的大腦每秒鐘要接收約4000萬(wàn)次的感官信息輸入，但意識(shí)一次能注意到其中約40個(gè)，其中短期工作記憶能處理的只有4±1個(gè)。

正是由于現(xiàn)代信息數(shù)據(jù)的大爆炸，多數(shù)產(chǎn)品日益臃腫的結(jié)構(gòu)，以及人類(lèi)有限的處理能力，所以呈現(xiàn)什么信息，以何種形式呈現(xiàn)的信息層級(jí)設(shè)計(jì)就非常重要。

作為設(shè)計(jì)師，我們有必要根據(jù)自身產(chǎn)品的業(yè)務(wù)方向，以及用戶(hù)的行為和特征，結(jié)合信息環(huán)境，選擇合適的信息，并以適合的方式進(jìn)行組織和呈現(xiàn)，以便讓用戶(hù)獲取并理解信息更容易，完成信息的組織和傳達(dá)作用。

二、如何提高界面信息識(shí)別效率？（How）

1. 信息分類(lèi)

相關(guān)聯(lián)信息需要進(jìn)行歸類(lèi)，無(wú)論是什么類(lèi)型的產(chǎn)品模塊，我們?cè)谠O(shè)計(jì)中應(yīng)當(dāng)做好信息分層，當(dāng)兩段內(nèi)容元素具有關(guān)聯(lián)性時(shí)，他們應(yīng)當(dāng)作為一個(gè)整體給用戶(hù)展現(xiàn)。

2. 層級(jí)區(qū)分

（1）層級(jí)數(shù)量應(yīng)靠近“3”

信息層級(jí)作為影響頁(yè)面信息傳達(dá)效率的重要因素之一，那么怎樣做好頁(yè)面的信息層級(jí)便尤為重要。網(wǎng)上資料大多都在圍繞對(duì)比、對(duì)齊、親密、重復(fù)四個(gè)基本原則講解。

不可否認(rèn)的是這四個(gè)方法對(duì)于我們排布信息層級(jí)確實(shí)起到了很大的作用，并且也是我們非常熟悉的。但其闡述得太過(guò)寬泛，在我們實(shí)際工作中面對(duì)復(fù)雜層級(jí)排版時(shí)，仍會(huì)面感到困惑，很難直接有效地利用。

于是我把優(yōu)秀的案例進(jìn)行收集并整理分析。

經(jīng)過(guò)線(xiàn)上頁(yè)面與概念的整體研究發(fā)現(xiàn)，他們?cè)谧裱虐嬖瓌t的基礎(chǔ)上，都存在著一個(gè)簡(jiǎn)單的規(guī)律：主內(nèi)容的層級(jí)控制在三層左右。

如下圖所示：

可以發(fā)現(xiàn)，三層左右的層級(jí)是最容易被用戶(hù)識(shí)別的，且視覺(jué)上不易混亂。三層往后，隨著層級(jí)越多其復(fù)雜性會(huì)成比增加。

比如我們看下面這兩個(gè)例子，左邊層級(jí)方面平鋪直敘沒(méi)有重構(gòu)區(qū)分，使得層級(jí)復(fù)雜，造成用戶(hù)識(shí)別效率變低。但其實(shí)我們只需要對(duì)信息加以歸類(lèi)并控制層級(jí)數(shù)量，瞬間就變得更簡(jiǎn)單且易懂。

因此，我們需要在著手設(shè)計(jì)前，首先思考一個(gè)邏輯：盡量將我們的內(nèi)容層級(jí)控制在三層左右，且這三層內(nèi)有比較明顯的對(duì)比關(guān)系。

有朋友看到這肯定要問(wèn)了，這個(gè)道理大家都懂啊，可是在實(shí)際工作中大多數(shù)拿到的信息都非常多，根本做不到保持在三層以?xún)?nèi)。別著急，本文的重點(diǎn)當(dāng)然不是告訴你這么簡(jiǎn)單的道理，而是在面對(duì)復(fù)雜層級(jí)的時(shí)候，我們應(yīng)該怎樣去控制它的層級(jí)表現(xiàn)，從而讓它在最終呈現(xiàn)上保持在三層左右，讓用戶(hù)獲取信息的效率更高。

（2）源頭篩選處理

源頭篩選的關(guān)鍵在于接手復(fù)雜信息時(shí)，我們首先需要從源頭上進(jìn)行第一層的判斷，了解這些信息是否真實(shí)地被需要。這也是我們大多數(shù)人容易忽視的一點(diǎn)，當(dāng)然這也不能完全怪我們，因?yàn)橥ǔＰ枨蠼o到我們的時(shí)候都是大致的概括，好一點(diǎn)的話(huà)還有個(gè)交接文檔，甚至有時(shí)候需求拿到我們手上時(shí)，已經(jīng)轉(zhuǎn)好幾手了交接人可能也不知所云，導(dǎo)致很難知曉其底層出因，

源頭篩選的本質(zhì)就是判斷我們當(dāng)前所要呈現(xiàn)的信息是不是必要的。

比如某些時(shí)候產(chǎn)品給到了我們很多信息，但我們并不一定會(huì)全盤(pán)接受，而是通過(guò)當(dāng)前頁(yè)面的業(yè)務(wù)場(chǎng)景去進(jìn)行判斷。確定每個(gè)信息的合理性，從而可以決定有些元素是否可以刪減，提高整體信息設(shè)計(jì)的一致性。

過(guò)程需要我們對(duì)以下2點(diǎn)進(jìn)行思考：

此信息真的是頁(yè)面中的必要信息嗎，如果去掉是否會(huì)產(chǎn)生直接影響：比如當(dāng)打開(kāi)高德地圖的時(shí)候，在你瀏覽地圖時(shí)，界面只呈現(xiàn)強(qiáng)關(guān)聯(lián)功能模塊。只有當(dāng)你上劃進(jìn)入二級(jí)頁(yè)面時(shí)，其它相關(guān)功能才會(huì)展現(xiàn)，這些都是按照用戶(hù)的使用場(chǎng)景來(lái)進(jìn)行對(duì)應(yīng)的呈現(xiàn)。
當(dāng)前信息的重要程度是怎樣的，對(duì)于某些不重要的信息是否可以通過(guò)隱藏的方式展現(xiàn)：當(dāng)你拿到一堆信息，信息的重要程度就決定了我們需要將哪些信息作為主體，哪些信息作為次要輔助信息，哪些信息甚至可以收起或者省略。比如當(dāng)你使用語(yǔ)雀創(chuàng)建文檔時(shí)，編輯和瀏覽永遠(yuǎn)是最關(guān)注的，而跳轉(zhuǎn)入口等都是次要信息，將其隱藏反而提高效率。

上述兩個(gè)問(wèn)題的確認(rèn)，會(huì)影響我們對(duì)后面的信息排布。因此我們需要在源頭，比如去和產(chǎn)品或者業(yè)務(wù)溝通，弄清楚該信息呈現(xiàn)的緣由以及必要性，這樣能夠幫助我們最后理清楚信息層級(jí)。

（3）在排布上降低復(fù)雜度

信息排布的本質(zhì)是通過(guò)我們對(duì)信息進(jìn)行主觀的排列上的組織重構(gòu)，來(lái)將復(fù)雜的層級(jí)控制在三層左右的區(qū)間里。從而保證我們頁(yè)面的簡(jiǎn)潔性、規(guī)律性、識(shí)別性。

通過(guò)目前的實(shí)踐總結(jié)，合理地安排信息層級(jí)的方法大致可以分為：分組、組件、組織、融入、弱化。

① 信息分組

信息分組是大家在設(shè)計(jì)時(shí)都能夠想到的形式，分組能夠?qū)?fù)雜的信息歸組從整，從而降低整體復(fù)雜度，清晰線(xiàn)索。

我們常用的分組方式主要有三種：間距、分割線(xiàn)、卡片。

那么這三種方式有沒(méi)有區(qū)分呢？

VIVO設(shè)計(jì)團(tuán)隊(duì)曾經(jīng)就這個(gè)問(wèn)題展開(kāi)過(guò)用戶(hù)調(diào)研，但結(jié)果表示，如果純粹從用戶(hù)的角度來(lái)講，對(duì)其變化感知不大。但這三種分割方式會(huì)影響我們?cè)诔尸F(xiàn)信息時(shí)的整體視覺(jué)觀感，因此我們可以根據(jù)當(dāng)前信息的復(fù)雜度作出以下規(guī)則：

復(fù)雜度較低時(shí)，優(yōu)先采用留白分割，視覺(jué)清爽五干擾；
當(dāng)留白分割效果不明顯時(shí)，可引入線(xiàn)性分割，讓層次更清晰且保證屏效；
需要進(jìn)一步強(qiáng)化信息之間的邊界感，可引入卡片樣式，強(qiáng)化層次和可操作性。

② 利用組件拆分

組件其實(shí)是目前大部分設(shè)計(jì)師在進(jìn)行信息排布時(shí)必備的部分，因此對(duì)于這部分設(shè)計(jì)師的熟練度也是最高的。而本篇想要強(qiáng)調(diào)的是，目前這幾種組件對(duì)于我們信息層級(jí)的劃分起到了比較重要的作用：樹(shù)形結(jié)構(gòu)、表格結(jié)構(gòu)、步驟條、選項(xiàng)卡。

樹(shù)形結(jié)構(gòu)。對(duì)于有關(guān)聯(lián)性的多層級(jí)非常適合，可以將復(fù)雜的層級(jí)結(jié)構(gòu)進(jìn)行收攏，從而能夠顯著降低信息的復(fù)雜度。
表格結(jié)構(gòu)。對(duì)于信息多且關(guān)聯(lián)性不大的復(fù)雜信息，可以聚合到表格來(lái)進(jìn)行呈現(xiàn)，但表格的呈現(xiàn)方式不宜濫用，需要根據(jù)我們場(chǎng)景來(lái)進(jìn)行選擇。
步驟條。步驟條則對(duì)場(chǎng)景要求非常明確，我們可以將多個(gè)場(chǎng)景通過(guò)分步的形式進(jìn)行呈現(xiàn)，從而減少當(dāng)前頁(yè)面的復(fù)雜度。
選項(xiàng)卡。選項(xiàng)卡更適合與同級(jí)的數(shù)據(jù)，對(duì)于同類(lèi)型的結(jié)構(gòu)可以更好地將頁(yè)面進(jìn)行拆分，從而讓當(dāng)前頁(yè)面更簡(jiǎn)潔。

③ 靈活組織

通過(guò)對(duì)組織方式的調(diào)整，我們可以將多層結(jié)構(gòu)的樣式通過(guò)拆分布局來(lái)將其控制在三層內(nèi)。

舉個(gè)簡(jiǎn)單的例子：

從圖中你可以看出左側(cè)的層級(jí)較多，尤其是兩層tab的疊加，視覺(jué)上就會(huì)顯得稍微有點(diǎn)凌亂。我們可以通過(guò)將第二層tab換個(gè)布局，從上下結(jié)構(gòu)變?yōu)樽笥医Y(jié)構(gòu)，達(dá)到從視覺(jué)上簡(jiǎn)化層級(jí)的作用：

當(dāng)然以上只是舉了一個(gè)簡(jiǎn)單的例子。這里底層邏輯就是當(dāng)遇到相對(duì)比較復(fù)雜邏輯時(shí)，我們可以通過(guò)改變結(jié)構(gòu)使其交互邏輯更清晰，從而減少其復(fù)雜度。

④ 巧妙融入

我們可以利用信息融入的形式來(lái)減弱其對(duì)層級(jí)的影響。信息融入從本質(zhì)上講就是將某兩種層級(jí)信息通過(guò)不同的組合方式，讓其融入到同一個(gè)層級(jí)中。比如我們看下面這一個(gè)例子，產(chǎn)品設(shè)計(jì)中將button與查詢(xún)項(xiàng)利用分割排列在一起，從而變?yōu)橥粚蛹?jí)，通過(guò)這種方式有效降低了頁(yè)面的復(fù)雜度。

當(dāng)我們?cè)谶M(jìn)行B端布局時(shí)，信息融入這個(gè)方法用得比較多。比如我們最常見(jiàn)的標(biāo)題、搜索和按鈕等都放在同一行上。這樣既能夠節(jié)省視覺(jué)空間，還能夠降低信息層級(jí)的復(fù)雜度。

但在進(jìn)行信息融入的過(guò)程中，我們需要注意的是：如果放在同一層級(jí)會(huì)造成理解上的誤解時(shí)，這個(gè)時(shí)候不要采用該方案。比如搜索框的位置，放在哪個(gè)層級(jí)決定了對(duì)應(yīng)的搜索范圍。

⑤ 信息弱化

信息弱化的原則是：將某些超出層級(jí)的部分進(jìn)行弱化。

比如圖中有5個(gè)層級(jí)，但其巧妙地將功能篩選融入到了當(dāng)前的結(jié)構(gòu)中，使得即使超過(guò)3層我們也不會(huì)覺(jué)得其特別復(fù)雜。

在很多時(shí)候，我們覺(jué)得信息混亂的原因，就是頁(yè)面要素太多太花哨。

比如工作中的一個(gè)小卡片，也就是利用信息弱化去減少畫(huà)面的復(fù)雜度：

因此我們需要學(xué)會(huì)對(duì)信息分級(jí)，不重要的信息就進(jìn)行弱化，這樣整體的呈現(xiàn)上會(huì)好很多。

但不可否認(rèn)仍會(huì)有更復(fù)雜的頁(yè)面，即使縮減也仍有過(guò)多層級(jí)，那么這個(gè)時(shí)候就一定要記得最開(kāi)始的從源頭去追溯這些所有信息是否必要。

（4）突出熱區(qū)

當(dāng)模塊具有按鈕、文字鏈、圖片入口等需要下一步操作的關(guān)鍵元素，需要進(jìn)行高亮顯示，以此幫助用戶(hù)快速定位目標(biāo)。

圖中 “Learn more” 使用文字高亮進(jìn)行處理，通過(guò)顏色讓用戶(hù)快速定位入口，且不影響用戶(hù)正常閱讀，若使用色塊按鈕進(jìn)行突出，模塊會(huì)冗余，過(guò)于喧賓奪主。

3. 可見(jiàn)性

當(dāng)產(chǎn)品需要用戶(hù)進(jìn)行多步驟完成任務(wù)時(shí)，應(yīng)當(dāng)展示系統(tǒng)進(jìn)度，讓用戶(hù)了解他們的行為操作在界面中所處于的位置。

比如下圖中房屋裝修信息填寫(xiě)流程，用戶(hù)面對(duì)這種多流程任務(wù)時(shí)，耐心往往很低，我們可以在設(shè)計(jì)時(shí)添加系統(tǒng)狀態(tài)進(jìn)度條，時(shí)刻提示用戶(hù)當(dāng)前的節(jié)點(diǎn)，此方法應(yīng)用場(chǎng)景還有注冊(cè)登錄、信息完善等更多場(chǎng)景，目的都是為了讓用戶(hù)達(dá)到交互可預(yù)測(cè)的狀態(tài)，提升用戶(hù)體驗(yàn)。

4. 遵循視覺(jué)動(dòng)線(xiàn)

我們?cè)谠O(shè)計(jì)內(nèi)容復(fù)雜的網(wǎng)頁(yè)時(shí)，建議根據(jù)產(chǎn)品訴求和用戶(hù)目標(biāo)，合理的放置元素，以此來(lái)達(dá)到目標(biāo)，另一方面符合眼動(dòng)規(guī)律的瀏覽順序，可以讓用戶(hù)不會(huì)產(chǎn)生視覺(jué)疲憊，每個(gè)視覺(jué)點(diǎn)停頓時(shí)看到元素都是不同，提升用戶(hù)體驗(yàn)。

5. 合理的字體加粗

在設(shè)計(jì)大面積文字排版時(shí)，應(yīng)當(dāng)注意字體粗細(xì)，它決定著我們的設(shè)計(jì)是否易讀性高。

無(wú)論標(biāo)題還是內(nèi)容，字體過(guò)重或者過(guò)輕都會(huì)降低文本的基本識(shí)別度，而且遇到文字信息過(guò)多的情況，長(zhǎng)時(shí)間專(zhuān)注文本的識(shí)別很容易出現(xiàn)視覺(jué)疲勞的情況。

在設(shè)計(jì)UI界面中，無(wú)論是長(zhǎng)文字體還是模塊元素字體，我們都要注意字體的重量，保證基本識(shí)別度的同時(shí)，優(yōu)化視覺(jué)重心，確保用戶(hù)在閱讀時(shí)不容易陷入疲勞。

6. 孰輕孰重

當(dāng)界面中存在多個(gè)入口時(shí)，我們可以對(duì)這些入口進(jìn)行優(yōu)先級(jí)處理，以突出核心功能為目的，用戶(hù)瀏覽界面的動(dòng)作是大面積掃讀的形式，這就意味著我們需要弱化無(wú)關(guān)信息，既保證了界面的基本美觀性，又能夠具備良好的體驗(yàn)。