回歸本質(zhì),打磨信息架構(gòu)

2021-5-28    資深UI設(shè)計(jì)者

人的時(shí)間精力都是有限的,建立良好的信息架構(gòu)和層級(jí),能讓用戶在有限的時(shí)間里快速獲取和理解有用的信息,并進(jìn)行下一步操作。




一張圖上有四句話,讀者根據(jù) 字號(hào) 判斷先讀哪一句。在從測試和調(diào)研中收集來的用戶需求和期望的基礎(chǔ)上,首先明確內(nèi)容和交互的優(yōu)先級(jí),確認(rèn)信息的先后順序和關(guān)聯(lián)性后,才能夠設(shè)計(jì)出有重點(diǎn)的交互界面。這些行為是為了引導(dǎo)用戶在閱讀過程中 一眼獲取重要信息。


用視覺語言來說,上面的例子只是通過調(diào)整 文案的尺寸 去探索如何設(shè)計(jì)頁面層級(jí)。同時(shí),通過調(diào)整其他平面設(shè)計(jì)元素例如 字重、顏色、透明度 等等也可以達(dá)成同樣的效果。當(dāng)然,這種行為同時(shí)適用于 按鈕菜單欄、表單 等其他控件。

通過距離劃分視覺元素展示它們之間聯(lián)系的基礎(chǔ)前提是 格式塔心理學(xué) 組織原則,這是在構(gòu)建數(shù)字界面時(shí)所考慮的設(shè)計(jì)系統(tǒng)的基礎(chǔ)指導(dǎo)理論。因?yàn)橛脩粢话阃ㄟ^ 視覺元素的位置 來判斷閱讀順序,設(shè)計(jì)視覺元素和控件的位置是為了促使用戶完成任務(wù),同時(shí)在某些情況下,也會(huì)引導(dǎo)用戶去做他們所期望的事。在很多情況下,用戶會(huì)自己選擇想看的信息

“在網(wǎng)絡(luò)上,人們會(huì)一目十行而不是逐字逐句的閱讀內(nèi)容。他們一般傾向于付出更少的精力,以高效的方式達(dá)成目標(biāo)。”

這意味著在一個(gè)擁有很多功能的頁面上,用戶會(huì)一目十行的迅速尋找他們的目標(biāo),因此 大部分的視覺信息會(huì)被屏蔽。


用戶在網(wǎng)絡(luò)上的閱讀方式高度取決于:

  • 用戶的任務(wù)目標(biāo)

  • 用戶習(xí)慣

  • 頁面層級(jí)

  • 頁面內(nèi)容形式

這就非常明顯了:最后兩個(gè)因素是設(shè)計(jì)師可以控制的,并且考慮到網(wǎng)絡(luò)設(shè)計(jì)越來越先進(jìn),運(yùn)用知識(shí)和技術(shù)推動(dòng)用戶行為,而不是使電子產(chǎn)品成為用戶的阻礙?;谶@個(gè)原因,我提出一個(gè)設(shè)計(jì)原則。

將用戶分級(jí)
Users by levels

有一些人說如果需要在圖標(biāo)旁邊放一個(gè)文字說明,圖標(biāo)就沒有存在意義了,因?yàn)樗恼J(rèn)知優(yōu)先級(jí)被降低了,成為了識(shí)別序列里的一個(gè)負(fù)擔(dān)。因?yàn)閳D標(biāo)視覺系統(tǒng)是建立在 邏輯原則 上的(和文字表達(dá)的意思相同),所以無論是對(duì)于有沒有相關(guān)交互經(jīng)驗(yàn)的用戶而言,圖標(biāo)被認(rèn)為是可以幫助用戶迅速理解功能的


一個(gè)只有文字說明的軟件菜單和同時(shí)擁有圖標(biāo)和文字的菜單相比,圖標(biāo)可以幫助用戶更快的理解。在上圖中,根據(jù)用戶所期望的功能,可以看到菜單中的圖標(biāo)帶有要訪問頁面的標(biāo)題名。接下來,當(dāng)用戶習(xí)慣圖標(biāo)后,圖標(biāo)將會(huì)更加簡單的引導(dǎo)用戶快速的在界面中尋找到所需要的內(nèi)容。

當(dāng)設(shè)計(jì)一個(gè)新界面時(shí)設(shè)計(jì)師需要知道,頁面必定會(huì)被有不同閱讀習(xí)慣的人使用。為了促進(jìn)理解,我會(huì)把用戶分成三種人并且定義為:新手用戶、中間用戶、專家用戶。

新手用戶 — 就像你所想象的那樣,這是一個(gè) 第一次接觸 這個(gè)界面的用戶。如果這個(gè)界面是某個(gè)系統(tǒng)中的一部分,那意味著始終有某些功能點(diǎn)是他第一次接觸到的。這個(gè)趨勢是說,這個(gè)等級(jí)的用戶 理解頁面的速度會(huì)低于用戶理解頁面的平均值,并且花費(fèi)更多的時(shí)間去理解語句直到找到所需的內(nèi)容為止。

中間用戶 — 比新手用戶多一些數(shù)字產(chǎn)品的使用經(jīng)驗(yàn),但并不是一個(gè)界面使用專家,理解界面的時(shí)間大概是處于平均值左右。

專家用戶 — 他們已經(jīng)使用這個(gè)平臺(tái)很多次了,所以可以較快的閱讀,而且并不需要通過閱讀所有的內(nèi)容去理解界面,可以 快速識(shí)別元素、布局和交互的視覺呈現(xiàn)。也許正因?yàn)檫@些原因,很多用戶 對(duì)產(chǎn)品界面的突然改變抱有抵觸心理。

現(xiàn)在,想想看如果一個(gè)投資 APP 每周通過 Email 將以下這個(gè)界面發(fā)送給用戶。用戶會(huì)不會(huì)閱讀上面所有的內(nèi)容呢?每次打開都會(huì)閱讀嗎?或者只是閱讀對(duì)他比較重要的內(nèi)容?

這個(gè)來自金融 APP 的卡片信息展示了用戶的收入。看看這個(gè)例子,你的閱讀順序是怎么樣的?我可以通過元素的擺放位置、比重、尺寸大小…所形成的視覺層級(jí)邏輯來理解它。由于缺乏明確的層級(jí)關(guān)系,有一些內(nèi)容無法被精準(zhǔn)獲知,必須在事后實(shí)際運(yùn)營的過程中調(diào)試,通過用戶使用數(shù)據(jù)反饋來決定內(nèi)容的優(yōu)先級(jí)和必要性,并進(jìn)行修改(使用 Hotjar,Crazy Egg 之類的熱點(diǎn)地圖可以收集數(shù)據(jù))。

請注意在這些內(nèi)容中:唯一的 動(dòng)態(tài)信息 就是整個(gè)【 3 】模塊中的重要信息【 4 】中的內(nèi)容。所有的郵件頁面中位于【 1 】的內(nèi)容都是一樣的。【 2 】中的信息是不變的,并且重復(fù)出現(xiàn)在每一封這類型的郵件中,它們都是其認(rèn)知標(biāo)識(shí)的一部分。

第一次看到的用戶需要理解這是關(guān)于什么內(nèi)容的信息,所以信息全面是非常重要的,但是 并不需要把所有信息都放在突出的位置上。考慮到這點(diǎn),通過 減少色彩飽和度、改變字號(hào)大小 等降低視覺重量的方式,是不打斷用戶閱讀過程的選擇。

一張展示了用戶收入的來自金融 APP 的 Email 卡片,它應(yīng)用合理排版促進(jìn)用戶更好的理解信息。


在上面這張卡片里,簡單的改變了內(nèi)容排布,突出了最重要的內(nèi)容。他們展示了 層級(jí)關(guān)系 對(duì)用戶體驗(yàn)的影響。一味格式化的信息傳遞被更具個(gè)性化、同理心的方法所取代。頭部和底部信息與主體信息相合并,通過這種隔離降低了被突出的可能性。最后,將主按鈕更改為次級(jí)按鈕(具體情況要根據(jù)點(diǎn)擊率來決定,主按鈕可能是最好的方式,有背景色的主按鈕更能激起用戶點(diǎn)擊欲望)

在商業(yè)軟件環(huán)境中,確切的說是在大量的表格中,更多見的是列表標(biāo)題比每一行的內(nèi)容更加突出。因?yàn)闃?biāo)題是固定信息,而且用戶可能每天都會(huì)看到,而不是將重要等級(jí)修改為 主要和可變內(nèi)容(列表內(nèi)的內(nèi)容信息)。

認(rèn)識(shí)到設(shè)計(jì)界面時(shí)成本和實(shí)現(xiàn)功能之間的復(fù)雜性,遵循這一思路可以幫助設(shè)計(jì)師確定元素優(yōu)先級(jí),并且創(chuàng)建層級(jí)關(guān)系以提升用戶的使用體驗(yàn)。同時(shí),因?yàn)橐龑?dǎo)對(duì)新用戶來說是必須的,所以在設(shè)計(jì)產(chǎn)品的時(shí)候,重要功能需要結(jié)合良好的入門教程、功能提示和及時(shí)反饋。這樣便建立了可以提升用戶日活及留存的高效、友好的用戶體驗(yàn)。




藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png



文章來源:站酷   作者:ZZiUP

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)





分享本文至:

日歷

鏈接

個(gè)人資料

存檔