亚洲欧美v国产一区二区三区,中文字日产幕乱五区,综合亚洲,,,色,亚洲伊人久久大香线蕉综合,亚洲综合精品伊人久久

首頁 > SEO動態(tài) > 網(wǎng)站技術(shù)用一個實戰(zhàn)案例,幫你學(xué)會UI設(shè)計界面優(yōu)化思路!

用一個實戰(zhàn)案例,幫你學(xué)會UI設(shè)計界面優(yōu)化思路!

用一個實戰(zhàn)案例,幫你學(xué)會UI設(shè)計界面優(yōu)化思路!

一、前言

設(shè)計稿總是沒有最終方案,不同的需求方都會有不一樣的建議,在日常工作中修修改改也是在所難免。我們只能盡量讓設(shè)計顯得更加規(guī)范、符合需求和具備更好的用戶體驗,讓作品給人感覺是一個成熟的解決方案。

日常黑馬哥也會經(jīng)常指點組員修修改改,也不一定自己的想法就是對的,只能盡量在需求和感官體驗之間嘗試。今天就挑選一個學(xué)員案例和大家交流一下,如果你有更好的想法也可以嘗試一下。

二、產(chǎn)品設(shè)計之高保真原型

我們在完成產(chǎn)品視覺層之前,需要先把高保真原型畫出來,這樣才能更好地梳理層級關(guān)系和功能結(jié)構(gòu)。所以今天的案例是在高保真原型的基礎(chǔ)上修改,重點梳理層級關(guān)系和布局結(jié)構(gòu)。

用一個實戰(zhàn)案例,幫你學(xué)會UI設(shè)計界面優(yōu)化思路!

三、案例修改分析

開始分析修改思路之前看一下前后的對比吧!

用一個實戰(zhàn)案例,幫你學(xué)會UI設(shè)計界面優(yōu)化思路!

1. 導(dǎo)航欄布局和功能調(diào)整

需求中位置是定位產(chǎn)生的,也可以手動設(shè)置,這里缺少功能指引的設(shè)計。調(diào)整到右側(cè)便于操作,結(jié)構(gòu)平衡度層面也會更穩(wěn)一些。

用一個實戰(zhàn)案例,幫你學(xué)會UI設(shè)計界面優(yōu)化思路!

掃一掃功能屬于識別題目獲取答案,需求中權(quán)重比較高,放在右上角操作體驗被弱化。修改建議放置在底部標(biāo)簽欄,一方面可以提高操作體驗度,也能表現(xiàn)出功能的權(quán)重比例。(工作中挪動功能需要進一步討論)

用一個實戰(zhàn)案例,幫你學(xué)會UI設(shè)計界面優(yōu)化思路!

2. 分類強化符號太普通

我們經(jīng)常會使用短線、弧線、符號等裝飾分類點擊狀態(tài),常規(guī)的表達可以滿足需求的基本訴求,差異化的設(shè)計需要提煉符號的設(shè)計。這里結(jié)合“勾”(答題正確)圖形進行表達,后期視覺時結(jié)合品牌色漸變,可以讓設(shè)計表達更具特點和細節(jié)。增加快捷入口便于用戶進行分類選擇和排序,功能抵達的效率更高。

用一個實戰(zhàn)案例,幫你學(xué)會UI設(shè)計界面優(yōu)化思路!

3. Banner 布局思考

通欄的 Banner 布局分割感比較強,修改之后增加了邊距,整體頁面的通透性更強。至于是否與金剛區(qū)形成布局的包含關(guān)系,大家可以嘗試更多可能性。

用一個實戰(zhàn)案例,幫你學(xué)會UI設(shè)計界面優(yōu)化思路!

4. 金剛區(qū)交互調(diào)整

金剛區(qū)通常單排顯示 3-5 個最佳,如果是 8-10 個可以考慮兩排或者多排。該需求功能只有 6 個或者 7 個,采用左右滑動交互形式可行,盡量不要在卡片里面半隱藏,顯得視覺美感度不足。調(diào)整后通過輪播進度條示意隱藏交互,有助于提高操作感官度。

用一個實戰(zhàn)案例,幫你學(xué)會UI設(shè)計界面優(yōu)化思路!

5. 卡片式設(shè)計調(diào)整為瓷片區(qū)

由于金剛區(qū)是圖標(biāo)加文字組合,精選練習(xí)也采用同類型表達顯得重復(fù)。采用瓷片區(qū)的形式不僅樣式表達更加豐富,也能根據(jù)權(quán)重突出主次層級感。在視覺時選擇的風(fēng)格范圍也比較多,還能結(jié)合微動效進行發(fā)揮,設(shè)計的延展性更高。

用一個實戰(zhàn)案例,幫你學(xué)會UI設(shè)計界面優(yōu)化思路!

6. 卡片列表設(shè)計調(diào)整

布局需要顯得飽滿且有主次層級感,之前的布局顯得比較分散,也缺少視覺表現(xiàn)的延展性。優(yōu)化后結(jié)構(gòu)更穩(wěn)重,封面設(shè)計也能提高內(nèi)容的關(guān)注度,吸引用戶進行選擇。

用一個實戰(zhàn)案例,幫你學(xué)會UI設(shè)計界面優(yōu)化思路!

7. 新增頭像的思考

在擴展資源卡片內(nèi)的調(diào)整中,除了新增封面提高視覺感以外,對老師名稱前面增加了頭像。頭像可以提高署名的權(quán)重,也能讓用戶對老師的真實性有更多信任度,至于老師的等級可以采用勛章等形式體現(xiàn)。

用一個實戰(zhàn)案例,幫你學(xué)會UI設(shè)計界面優(yōu)化思路!

8. 完成

最后再看一下完成修改的案例效果吧!如果你有更高的設(shè)計想法,也可以動手嘗試一下。

用一個實戰(zhàn)案例,幫你學(xué)會UI設(shè)計界面優(yōu)化思路!

四、小結(jié)

設(shè)計比較忌諱的就是固步自封,多與人交流也許會有更多靈感。設(shè)計也沒有絕對的完美方案,都是在不斷優(yōu)化的過程中尋找相對滿意的嘗試。

最后也拋給大家一個作業(yè),如果該案例進行最終視覺表現(xiàn),你會設(shè)計出怎樣的效果呢?

作者:黑馬家族

想了解更多網(wǎng)站技術(shù)的內(nèi)容,請訪問:網(wǎng)站技術(shù)

本文來源:http://www.sonygallery.com.cn/seodongtai/19787.html

免責(zé)聲明:部分文章信息來源于網(wǎng)絡(luò)以及網(wǎng)友投稿,本網(wǎng)站只負(fù)責(zé)對文章進行整理、排版、編輯,是出于傳遞更多信息之目的,并不意味著贊同其觀點或證實其內(nèi)容的真實性,不承擔(dān)任何法律責(zé)任。