下面通過發現問題和案例修改來進行分析（案例來源于黑馬家族內部學員的初次作業）。

發現問題

好了，看完修改前后的對比之后，我們開始進一步分析，從上到下一起來看一下吧！

頭部導航欄區域

功能層面來說，發布既然運用高亮的處理，證明該功能是相對比較重要的，放在手勢盲區操作體驗不是很友好。

右側的兩個功能圖標距離太近，點擊過程中容易造成誤操作，兩個圖標的視覺不平衡，不能以高度來定標準，要看整體的面積占比。

最后，發布、搜索、功能圖標之間的間距沒有做規范設計，導致設計不夠嚴謹，視覺協調度和節奏感沒有呈現出來。

頂部分類導航區域

這個部分問題不是很大，類別之間的間距可以適當增加，如果是可以左右滑動的，末尾最好再新增一個，把可滑動的樣式體現出來。

Banner 圖區域

輪播 Banner 圖采用通欄的處理，會將整個界面一分為三（頭部區域、Banner 區域、作品區域），如果界面邊距較大的時候，這樣處理不是很理想，會使得整個界面不夠連貫。

輪播點的處理不建議使用灰色來表現，不僅區分不明顯，配色上面也顯得不夠干凈整潔。

Banner 圖本身的質量也是需要注意的，站在輸出作品的角度來說，圖片的質量會影響整個作品的氣質。而且這個圖沒有任何主題，設計的真實感無法得到體現。

作品（菜譜）區域

整個界面篇幅較大的區域就是推薦的各類菜譜，第一眼看過去，是不是圖片顯得沒有食欲啦！針對美食類作品，只有食物本身的食欲感才能吸引用戶去點擊學習。

菜譜名稱、作者信息、收藏與收藏數的顯示親密關系處理不合適，關聯性被分斷了。

間距留白沒有掌握好數字關系，顯得比較擁擠。直角的封面圖顯得有些生硬，親和力不是很強。

底部標簽欄

底部標簽欄最主要的就是圖標設計，圖標設計的規范性需要注重一下。比如針對線性圖標來說，描邊粗細的統一、圓角值的統一和風格的統一等需要重點對待。

其次就是點擊狀態和默認狀態的區分，圖標利用顏色深淺進行區分也是可以的，文字區域的區分也需要進行深淺的對比。

以上便是針對這個界面發現的一些在 UI 層面的問題，接下來我們一起針對這些問題進行修改。

案例修改

針對羅列出來的問題，下面進行一些修改，設計屬于主觀表達，僅代表黑馬哥自己的想法。不足的地方歡迎大家留言指正，互相進步。

頭部導航欄區域

為了方便用戶發布內容，我將發布按鈕移出導航欄，放置在底部標簽欄。將右側的兩個功能圖標拆分為左右兩側布局，優化了間距和布局細節。

功能圖標繪制上面三條橫線做了長短變化，顯得更靈動。整體圖標的高度要比通知圖標的小一點，以此來平衡它們之間的面積差異。

頂部分類導航區域

這個部分優化了文字之間的間距，然后通過字體大小和顏色深淺來區分點擊和默認狀態的差別，將短線裝飾改為弧線，弧線作為符號基因運用到底部標簽欄的圖標設計中，這里是作為視覺符號的延續。

Banner 圖區域

輪播 Banner 圖本身沒有做，本期案例只是 UI 層面的修改。優化了 Banner 圖的比例，采用 8:3 的比例進行計算，取 4 整除的高度數值。輪播點的設計通常有數字、小圓點、小短線、進度形式等，這里采用進度形式來表達。

作品（菜譜）區域

這個部分調整比較大，從內容到布局結構都做了調整。首先將固定尺寸的封面圖改為寬度固定高度自定義的瀑布流設計，滿足用戶的不同拍攝需求，對圖片設置了圓角處理，增強親和力。

將標題、作者信息、收藏數據統計等信息進行整合，集中布局展示，增加內容之間的親密關系。新增了標簽，由于菜譜種類較多，通過標簽更容易搜索到同類菜譜。

收藏圖標加數字來體現之前的文字表達形式，用戶更容易理解，采用愛心圖標既能表示喜歡也能帶有收藏的作用，點擊欲更強。

單行標題適配為最多兩行顯示，方便用戶為自己的菜譜名稱增加修飾詞。這里需要考慮最大值的情況，設計的時候需要體現出超出最大值的設計樣式。

最后就是選擇了拍攝質量更好的圖片來填充，作為作品輸出來說，配圖的質量還是至關重要的。來看一下這個部分的最終效果，對比一下就可以感受出前后視覺感的差異。

底部標簽欄

將發布按鈕布局在中間位置，做突出形式，吸引用戶發布內容，豐富平臺的作品量和提高用戶參與度?？梢圆季衷跇藴实牡撞繕撕灆趦炔?，也可以做凸出顯示，這里嘗試了兩個版本。

優化了圖標設計，統一了描邊值和圓角值，用小弧線作為視覺符號進行點綴。點擊狀態換成面性圖標，區分更加明顯，顯得也更為成熟穩重。文字需要體現當前狀態和默認狀態的差異，這里使用品牌色來區分，也可以使用深淺不同的灰色來體現。

完成

通過對發現的問題進行調整之后，完成了最終的設計案例優化。這個案例比較簡單，通過案例想要說明的點是：無論簡單還是復雜，都要考慮好每一個細節的深入，也要對每一個元素的設計有自己的設計想法。每一個界面都要體現出設計規范、設計質量和自己的設計態度，只有作品成熟才能說服別人，獲得認可。

本次案例修改的大體流程是：分析問題所在、組織優化思路、調整內容結構、設計高保真原型、填充內容完成最終 UI 稿。

最后，感謝大家的閱讀學習，希望對大家能有一定的幫助，后續將會繼續帶來更多案例的修改分析，我們互相進步。