當(dāng)前位置：首頁(yè) >UI設(shè)計(jì) >優(yōu)化UI設(shè)計(jì)，提升用戶體驗(yàn)和視覺(jué)層次

優(yōu)化UI設(shè)計(jì)，提升用戶體驗(yàn)和視覺(jué)層次

發(fā)布時(shí)間：2023-12-18 14:12:29 瀏覽量：181次

UI設(shè)計(jì)中的視覺(jué)層次營(yíng)造可以顯著提升用戶體驗(yàn)，那么構(gòu)建合理的視覺(jué)層次方法有哪些呢？今天和大家分享一些個(gè)人在工作中常用的技巧。

視覺(jué)層次具體是什么呢，下面通過(guò)幾組圖片對(duì)比來(lái)進(jìn)一步感受。

左圖菜攤子里各種顏色的菜堆疊在一起，混亂的擺放讓人花費(fèi)更多時(shí)間挑選自己想要的菜，想必大家也遇到這樣的困擾。右圖超市貨架上，用框一格格清晰分開(kāi)不同水果，顏色區(qū)分明顯。我們能快速找到紅色的火龍果，綠色的牛油果。這就是擺放有層次的體現(xiàn)。

上面兩封簡(jiǎn)歷，大家第一眼看，哪張最引起的你注意?

很明顯肯定是右圖。圖二把信息模塊化處理，突出標(biāo)題，層次分明，方便HR快速找到需要的信息。比如我們找教育的信息，左圖必須逐行從上往下看到第9行才能看到教育相關(guān)的信息，而右圖馬上就能看到教育這個(gè)版塊相關(guān)信息。

我們回到正題，來(lái)看下兩張UI界面，哪張使用體驗(yàn)更好。

毋庸置疑是右圖。相較于左圖平淡無(wú)奇，毫無(wú)重點(diǎn)的界面設(shè)計(jì)計(jì)，具有良好視覺(jué)層次的右圖界面更受用戶青睞。

這就是今天我們要講的UI設(shè)計(jì)中的視覺(jué)層次。

界面缺乏視覺(jué)層次的影響

乍一看上去信息還整齊規(guī)整，但卻是毫無(wú)重點(diǎn)，不知道從而看起。

首先選中Tab并沒(méi)有明顯強(qiáng)化凸顯，容易讓用戶疑惑自己所處位置，增加理解成本；然后下面的列表中，作者和時(shí)間這行輔助信息用了跟標(biāo)題一樣的字號(hào)和明度，視線從第一個(gè)標(biāo)題到第二個(gè)標(biāo)題之間會(huì)被干擾，妨礙用戶快速獲取信息。并且這樣的信息展示無(wú)強(qiáng)弱視覺(jué)對(duì)比沒(méi)有亮點(diǎn)，會(huì)導(dǎo)致缺乏美感。

視覺(jué)層次的作用

大字標(biāo)題讓頁(yè)面對(duì)比強(qiáng)烈，視覺(jué)更具引導(dǎo)性。

進(jìn)入頁(yè)面視覺(jué)落腳點(diǎn)，很快落在選中的推薦tab上，然后在依次從上往下看。

同時(shí)突出選中的推薦欄目，弱化其他未選中的欄目，這樣信息主次結(jié)構(gòu)更加合理。

營(yíng)造視覺(jué)層次的具體方法

設(shè)計(jì)前，可以根據(jù)信息關(guān)聯(lián)性，合理劃分歸類(lèi)，優(yōu)化原型

仔細(xì)分析原型我們會(huì)發(fā)現(xiàn)：

①評(píng)分和星級(jí)本是用戶評(píng)價(jià)信息卻分開(kāi)展示；

②頂部的兩條提示信息原本屬于詳情T(mén)ab下“溫馨提示”模塊，卻分離開(kāi)；

③最佳設(shè)計(jì)獎(jiǎng)不屬于游戲基本信息，也不是每個(gè)游戲都有卻放在游戲名稱(chēng)描述下方。

用戶視覺(jué)從上往下，從評(píng)分?jǐn)?shù)值跳到提示信息然后又跳到星級(jí)，完整的用戶評(píng)價(jià)信息被提示信息割裂，視覺(jué)層次就有問(wèn)題了。

同樣提示信息也是，頂部?jī)蓷l提示信息和下面的溫馨提示被中間的信息阻隔，用戶不能在同一區(qū)域看到所有相關(guān)信息，視覺(jué)層次混亂，獲取信息的效率降低。

該怎么優(yōu)化呢？

可以根據(jù)信息關(guān)聯(lián)性，把評(píng)分和星界歸類(lèi)在一起，頂部?jī)蓷l提示信息劃入溫馨提示里，與游戲基本信息不相關(guān)的最佳設(shè)計(jì)獎(jiǎng)獨(dú)立一個(gè)區(qū)域展示。

可以看到優(yōu)化后的原型用戶視覺(jué)信息流不再被打斷，視覺(jué)層次合理，更快地獲得相關(guān)信息。

設(shè)計(jì)中，將從整體頁(yè)面逐步細(xì)化到模塊，圖標(biāo)、字體和輔助元素來(lái)講

不單是頁(yè)面里的元素有視覺(jué)層次，不同入口層級(jí)的頁(yè)面之間也有視覺(jué)層次關(guān)系。入口層級(jí)高的頁(yè)面信息量相對(duì)較多需要更多刻畫(huà)；入口層級(jí)低的頁(yè)面信息量少，簡(jiǎn)單化處理，頁(yè)面跳轉(zhuǎn)時(shí)體驗(yàn)上就有層次感。

頁(yè)面

舉個(gè)明顯的例子，一般APP的首頁(yè)都會(huì)做得相對(duì)信息復(fù)雜一些，樣式較多，比如像閑魚(yú)，頭部有圖標(biāo)入口區(qū)域，兩個(gè)運(yùn)營(yíng)板塊等等內(nèi)容很多，用到卡片化，背景色等樣式，而二級(jí)頁(yè)則設(shè)計(jì)比較清爽直觀的列表頁(yè)。

從首頁(yè)到二級(jí)頁(yè)時(shí)，信息組合由復(fù)雜跳轉(zhuǎn)到簡(jiǎn)單，這樣視覺(jué)體驗(yàn)上就有層次感。

餓了么也是，超市的擬物頭部樣式，banner，擬物圖標(biāo)等等，內(nèi)容很豐富。

二級(jí)頁(yè)面就是簡(jiǎn)單的商品羅列沒(méi)有過(guò)多樣式。這樣視覺(jué)上跳轉(zhuǎn)有層次，試想內(nèi)部列表頁(yè)樣式設(shè)計(jì)比首頁(yè)還復(fù)雜，那會(huì)讓用戶感受到困擾。

在這里我相信有很多想要學(xué)習(xí)UI設(shè)計(jì)的小伙伴，我自己是一名從事了多年UI設(shè)計(jì)工作的設(shè)計(jì)師，辭職目前在做自己的私人定制課程，今年年初我花了一個(gè)月時(shí)間整理了一份最適合2019年學(xué)習(xí)的學(xué)習(xí)干貨，從最基礎(chǔ)到實(shí)戰(zhàn)都有整理，送給每一位想學(xué)習(xí)的小伙伴，想要獲取的可以關(guān)注然后私信我“學(xué)習(xí)”兩個(gè)字，即可免費(fèi)獲取資料，伸手黨勿擾~

上一篇北師大未來(lái)設(shè)計(jì)學(xué)院在第六屆中國(guó)教博會(huì)發(fā)布五項(xiàng)PBL大挑戰(zhàn)項(xiàng)目

下一篇 4種常見(jiàn)用戶體驗(yàn)地圖的速覽

激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

優(yōu)化UI設(shè)計(jì)，提升用戶體驗(yàn)和視覺(jué)層次

請(qǐng)綁定手機(jī)號(hào)