2026-5-13 清陽 移動端UI設(shè)計文章及欣賞
又到了分享界面改版優(yōu)化的時候了，這次是近期C端學(xué)員做的體育場館預(yù)約平臺，主要用于在線預(yù)約羽毛球、網(wǎng)球、籃球等場館。
下面是目前的設(shè)計圖例：
學(xué)員作業(yè)
還是老規(guī)矩，我們從原設(shè)計的問題入手，然后逐步完成對它的改版優(yōu)化。
問題分析：
問題的分析從不同維度入手，這里分享個最簡單的分析方式，先從基礎(chǔ)樣式分析，再分析組件設(shè)計。
基礎(chǔ)樣式包含規(guī)范、字體、色彩、圖片四個要素的分析，而組件設(shè)計則是檢查樣式的合理性為主。
首先基礎(chǔ)樣式的規(guī)范應(yīng)用上，頂部狀態(tài)欄和底部指示器、導(dǎo)航是沒有太大問題的，所以我們可以直接進(jìn)入下一個環(huán)節(jié)。
在字體應(yīng)用上，問題就多起來了，主要還是特殊標(biāo)題使用太多，且廣告中的標(biāo)題也和下方 UI 元素標(biāo)題沒有拉開差距，看起來就很別扭。而且大粗黑字體使用過多，使得信息權(quán)重被分散掉，沒有對比性。
有問題的部分截圖
在色彩層面，藍(lán)色雖然是主色，但是使用過于頻繁，且其它色彩的應(yīng)用數(shù)量也過多，畫面充斥了讓人眼花繚亂的色彩，尤其色彩多的情況下圖片色彩也豐富，外加一系列漸變色塊，讓場面變得更“錯綜復(fù)雜”。
使用的色彩過多
最后圖片應(yīng)用上，主要問題出在廣告圖里，圖例和文字排版看起來很有年代感，加上瓷片區(qū)內(nèi)的素材用圖，和整體主體的關(guān)聯(lián)性并不好。這里著重強(qiáng)調(diào)， 3D 擬人類圖片素材的使用最好局限在特定運(yùn)營活動物料里，不要作為正式的 UI 元素進(jìn)行引用，怎么做效果都不會好。
接著分析組件樣式，因為這次案例框架很簡單，我們不用太多考慮組件排序依據(jù)還是產(chǎn)品問題，只需要每個組件孤立出來分析即可。
1 .首頁頂部組件
主要問題就是廣告圖的設(shè)計，不符合當(dāng)前應(yīng)用的設(shè)計標(biāo)準(zhǔn)，字體用圖排版都很簡單。
2.快速入口組件
快速入口上下兩排權(quán)重完全不同，雖然有大小的差異但依舊對比不夠強(qiáng)烈，且色彩使用混亂。
3.瓷片區(qū)應(yīng)用
兩個頁面都有瓷片區(qū)，布局過于接近，且沒有實質(zhì)性的內(nèi)容全是裝飾素材，非常影響點(diǎn)擊欲望和觀感。
4.常去場館卡片
屬于問題相對較小的模塊，但標(biāo)簽的應(yīng)用色彩不合理，而且標(biāo)題也露不全，實際空間利用率沒有必要的低。
5.列表卡片
列表卡片的主要問題還是和主色按鈕有關(guān)，過于強(qiáng)調(diào)按鈕的同時又要突出其它信息元素，就讓卡片看起來非常聒噪，信息之間是會起沖突的。
6.底部導(dǎo)航
底部導(dǎo)航設(shè)計過于普通，且一般選項選中凸起只適合在首頁選項中使用。中間添加按鈕的尺寸過小，和兩側(cè)選項看起來不對齊，重心偏移。
以上就是對問題的簡單總結(jié)，實際上改版就是圍繞這些問題做出調(diào)整，你先分析得出問題，才能聚焦到具體設(shè)計的過程和細(xì)節(jié)。
基礎(chǔ)規(guī)范是整體，而我們設(shè)計過程中大多從細(xì)節(jié)出發(fā)，所以我們對優(yōu)化的內(nèi)容解釋就要反過來從組件開始。
1.頂部模塊設(shè)計
首先調(diào)整頂部模塊的設(shè)計，優(yōu)化圖例，使用比較突出的字體標(biāo)題和更有沖擊力的配圖，符合運(yùn)動類應(yīng)用的主基調(diào)。同時因為之前主色用太多，這次頂部直接不加主色類背景。
2.快速入口的設(shè)計
快速入口設(shè)計上使用兩種圖標(biāo)體系，上方用偏扁平插畫型的風(fēng)格（素材示意），下方用面性圖標(biāo)風(fēng)格，弱化它們的權(quán)重。同時第二個頁面的快速入口使用攝影圖型圖標(biāo)，避免一直出現(xiàn)不同風(fēng)格的圖標(biāo)。
3.瓷片區(qū)設(shè)計
瓷片區(qū)做大就需要有內(nèi)容展示，但這些主體值得展示的內(nèi)容并不是太多且需要那么大空間，所以縮小尺寸不會讓設(shè)計那么難處理，也讓畫面更精致一點(diǎn)。
4.其它模塊設(shè)計
因為首頁上方已經(jīng)有很花哨的模塊了，所以常去場館就不應(yīng)該再花哨下去，可以務(wù)實點(diǎn)的設(shè)計，不再用復(fù)雜的外邊框套娃。
第二個頁面其它模塊相對簡單，拼團(tuán)功能又重要所以可以突出它用包邊型的組件設(shè)計。
5.列表模塊設(shè)計
兩個頁面下方的列表模塊，都移除原來主色的按鈕，只保留關(guān)鍵信息，讓卡片視覺看起來更簡約和諧一點(diǎn)。
6.底部導(dǎo)航欄設(shè)計
放大中間的按鈕，同時優(yōu)化第一個選項選中的設(shè)計，可以更突出（時間夠就做LOGO進(jìn)去了）更強(qiáng)調(diào)選中。
完成這些處理以后，最后合并起來可以整體再調(diào)整一番進(jìn)行最終輸出。我們可以看看下面改版前后的對比，你們可以自己感受是否有差異：
這是純視覺方向的優(yōu)化，在新手階段，不要過度去使用色彩和字體，實現(xiàn)樣式的落差要通過組件樣式和圖片、素材應(yīng)用的差異來塑造。
轉(zhuǎn)載：優(yōu)設(shè)
蘭亭妙微（藍(lán)藍(lán)設(shè)計）www.aknz.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。
藍(lán)藍(lán)設(shè)計的小編 http://www.aknz.cn