一、前言

設(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è)計出怎樣的效果呢？

作者：黑馬家族