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

發(fā)現(xiàn)問題

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

頭部導航欄區(qū)域

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

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

最后，發(fā)布、搜索、功能圖標之間的間距沒有做規(guī)范設計，導致設計不夠嚴謹，視覺協(xié)調度和節(jié)奏感沒有呈現(xiàn)出來。

頂部分類導航區(qū)域

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

Banner 圖區(qū)域

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

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

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

作品（菜譜）區(qū)域

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

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

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

底部標簽欄

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

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

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

案例修改

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

頭部導航欄區(qū)域

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

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

頂部分類導航區(qū)域

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

Banner 圖區(qū)域

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

作品（菜譜）區(qū)域

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

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

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

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

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

底部標簽欄

將發(fā)布按鈕布局在中間位置，做突出形式，吸引用戶發(fā)布內容，豐富平臺的作品量和提高用戶參與度?？梢圆季衷跇藴实牡撞繕撕灆趦炔浚部梢宰鐾钩鲲@示，這里嘗試了兩個版本。

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

完成

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

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

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