用一個實戰(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)。
三、案例修改分析
開始分析修改思路之前看一下前后的對比吧!
1. 導(dǎo)航欄布局和功能調(diào)整
需求中位置是定位產(chǎn)生的,也可以手動設(shè)置,這里缺少功能指引的設(shè)計。調(diào)整到右側(cè)便于操作,結(jié)構(gòu)平衡度層面也會更穩(wěn)一些。
掃一掃功能屬于識別題目獲取答案,需求中權(quán)重比較高,放在右上角操作體驗被弱化。修改建議放置在底部標(biāo)簽欄,一方面可以提高操作體驗度,也能表現(xiàn)出功能的權(quán)重比例。(工作中挪動功能需要進一步討論)
2. 分類強化符號太普通
我們經(jīng)常會使用短線、弧線、符號等裝飾分類點擊狀態(tài),常規(guī)的表達可以滿足需求的基本訴求,差異化的設(shè)計需要提煉符號的設(shè)計。這里結(jié)合“勾”(答題正確)圖形進行表達,后期視覺時結(jié)合品牌色漸變,可以讓設(shè)計表達更具特點和細節(jié)。增加快捷入口便于用戶進行分類選擇和排序,功能抵達的效率更高。
3. Banner 布局思考
通欄的 Banner 布局分割感比較強,修改之后增加了邊距,整體頁面的通透性更強。至于是否與金剛區(qū)形成布局的包含關(guān)系,大家可以嘗試更多可能性。
4. 金剛區(qū)交互調(diào)整
金剛區(qū)通常單排顯示 3-5 個最佳,如果是 8-10 個可以考慮兩排或者多排。該需求功能只有 6 個或者 7 個,采用左右滑動交互形式可行,盡量不要在卡片里面半隱藏,顯得視覺美感度不足。調(diào)整后通過輪播進度條示意隱藏交互,有助于提高操作感官度。
5. 卡片式設(shè)計調(diào)整為瓷片區(qū)
由于金剛區(qū)是圖標(biāo)加文字組合,精選練習(xí)也采用同類型表達顯得重復(fù)。采用瓷片區(qū)的形式不僅樣式表達更加豐富,也能根據(jù)權(quán)重突出主次層級感。在視覺時選擇的風(fēng)格范圍也比較多,還能結(jié)合微動效進行發(fā)揮,設(shè)計的延展性更高。
6. 卡片列表設(shè)計調(diào)整
布局需要顯得飽滿且有主次層級感,之前的布局顯得比較分散,也缺少視覺表現(xiàn)的延展性。優(yōu)化后結(jié)構(gòu)更穩(wěn)重,封面設(shè)計也能提高內(nèi)容的關(guān)注度,吸引用戶進行選擇。
7. 新增頭像的思考
在擴展資源卡片內(nèi)的調(diào)整中,除了新增封面提高視覺感以外,對老師名稱前面增加了頭像。頭像可以提高署名的權(quán)重,也能讓用戶對老師的真實性有更多信任度,至于老師的等級可以采用勛章等形式體現(xiàn)。
8. 完成
最后再看一下完成修改的案例效果吧!如果你有更高的設(shè)計想法,也可以動手嘗試一下。
四、小結(jié)
設(shè)計比較忌諱的就是固步自封,多與人交流也許會有更多靈感。設(shè)計也沒有絕對的完美方案,都是在不斷優(yōu)化的過程中尋找相對滿意的嘗試。
最后也拋給大家一個作業(yè),如果該案例進行最終視覺表現(xiàn),你會設(shè)計出怎樣的效果呢?
作者:黑馬家族
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請訪問:網(wǎng)站技術(shù)