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

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

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

頭部導(dǎo)航欄區(qū)域

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

右側(cè)的兩個(gè)功能圖標(biāo)距離太近，點(diǎn)擊過程中容易造成誤操作，兩個(gè)圖標(biāo)的視覺不平衡，不能以高度來定標(biāo)準(zhǔn)，要看整體的面積占比。

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

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

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

Banner 圖區(qū)域

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

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

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

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

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

菜譜名稱、作者信息、收藏與收藏?cái)?shù)的顯示親密關(guān)系處理不合適，關(guān)聯(lián)性被分?jǐn)嗔恕?/span>

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

底部標(biāo)簽欄

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

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

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

案例修改

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

頭部導(dǎo)航欄區(qū)域

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

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

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

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

Banner 圖區(qū)域

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

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

這個(gè)部分調(diào)整比較大，從內(nèi)容到布局結(jié)構(gòu)都做了調(diào)整。首先將固定尺寸的封面圖改為寬度固定高度自定義的瀑布流設(shè)計(jì)，滿足用戶的不同拍攝需求，對圖片設(shè)置了圓角處理，增強(qiáng)親和力。

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

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

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

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

底部標(biāo)簽欄

將發(fā)布按鈕布局在中間位置，做突出形式，吸引用戶發(fā)布內(nèi)容，豐富平臺(tái)的作品量和提高用戶參與度?？梢圆季衷跇?biāo)準(zhǔn)的底部標(biāo)簽欄內(nèi)部，也可以做凸出顯示，這里嘗試了兩個(gè)版本。

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

完成

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

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

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