推薦閱讀

一、前言

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

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

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

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

三、案例修改分析

開始分析修改思路之前看一下前后的對(duì)比吧！

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

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

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

2. 分類強(qiáng)化符號(hào)太普通

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

3. Banner 布局思考

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

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

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

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

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

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

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

7. 新增頭像的思考

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

8. 完成

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

四、小結(jié)

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

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

歡迎關(guān)注作者的微信公眾號(hào)：「黑馬家族」