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