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

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

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

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

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

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

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

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

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

Banner 圖區(qū)域

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

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

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

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

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

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

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

底部標(biāo)簽欄

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

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

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

案例修改

針對(duì)羅列出來(lái)的問(wè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)繪制上面三條橫線做了長(zhǎng)短變化，顯得更靈動(dòng)。整體圖標(biāo)的高度要比通知圖標(biāo)的小一點(diǎn)，以此來(lái)平衡它們之間的面積差異。

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

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

Banner 圖區(qū)域

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

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

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

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

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

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

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

底部標(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)一了描邊值和圓角值，用小弧線作為視覺(jué)符號(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)的差異，這里使用品牌色來(lái)區(qū)分，也可以使用深淺不同的灰色來(lái)體現(xiàn)。

完成

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

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

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