推薦閱讀

一、前言

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

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

二、產品設計之高保真原型

我們在完成產品視覺層之前，需要先把高保真原型畫出來，這樣才能更好地梳理層級關系和功能結構。所以今天的案例是在高保真原型的基礎上修改，重點梳理層級關系和布局結構。

三、案例修改分析

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

1. 導航欄布局和功能調整

需求中位置是定位產生的，也可以手動設置，這里缺少功能指引的設計。調整到右側便于操作，結構平衡度層面也會更穩一些。

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

2. 分類強化符號太普通

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

3. Banner 布局思考

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

4. 金剛區交互調整

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

5. 卡片式設計調整為瓷片區

由于金剛區是圖標加文字組合，精選練習也采用同類型表達顯得重復。采用瓷片區的形式不僅樣式表達更加豐富，也能根據權重突出主次層級感。在視覺時選擇的風格范圍也比較多，還能結合微動效進行發揮，設計的延展性更高。

6. 卡片列表設計調整

布局需要顯得飽滿且有主次層級感，之前的布局顯得比較分散，也缺少視覺表現的延展性。優化后結構更穩重，封面設計也能提高內容的關注度，吸引用戶進行選擇。

7. 新增頭像的思考

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

8. 完成

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

四、小結

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

最后也拋給大家一個作業，如果該案例進行最終視覺表現，你會設計出怎樣的效果呢？

歡迎關注作者的微信公眾號：「黑馬家族」