5個技巧做好UI設計視覺表現(xiàn)

個性化首頁定制

隨著用戶喜好的變化，自定義模式可以滿足各自不同的需求，網(wǎng)易云音樂推出了個性化首頁定制設計。用戶可以通過預設的默認模式、歌單模式、視頻模式進行選擇，為了方便用戶判斷定制后的效果，可以通過“功能說明”觀看預設后的樣式，直觀的展示提高用戶的判斷體驗。

自定義模式打破了千篇一律的設計，根據(jù)用戶的喜好呈現(xiàn)內容，提高了用戶粘性和使用體驗。

不一樣的場景代入感

微動效在產品設計中的運用已經(jīng)非常普及，特別是在圖標中的運用，既能提高圖標的關注度，也能體現(xiàn)圖標的差異化。就像一個掃一掃的功能圖標，加上簡單的動效呈現(xiàn)，提高了場景代入感。

將現(xiàn)實中的掃描動作運用到圖標動效的表達上面，既增加了該功能的關注度，也能讓主題表達更清晰。

首頁導航位置的合理運用

頂部導航欄通常是提示當前頁面的位置，對于首頁來說一般會設計搜索、品牌曝光、功能操作、當前位置提示等內容。也有一些直接展示 Banner 圖，隱藏導航的存在。

一些產品想要弱化活動 Banner 的空間占比，除了縮小 Banner 高度尺寸以外，最近也發(fā)現(xiàn)了一種新的設計解決方案。安居客將活動主題設計到導航位置，單擊和下拉刷新到一定程度都會喚起活動詳情。該設計解決方案不僅充分利用了導航位置，在達到曝光度的同時也不會過度占用首頁版面，合理的運用了有限的資源。

個人中心設計的場景變化

個人中心的設計對于很多產品來說都比較常規(guī)，隨著感官體驗的升級，個人中心設計的差異也有待深入思考。而場景化的情感表達是提高個人中心設計差異的方向之一，結合插畫和微動效的表達較為普遍。

自如的個人中心除了以場景插畫的形式來提升情感化體驗以外，晝夜變化采用了不同的插畫場景來表現(xiàn)，代入感非常到位。場景插畫還融合了微動效，微妙的變化提高了產品的精細化設計，增強了產品的體驗感。

多種模式滿足用戶不同喜好

不同用戶的操作習慣和感官標準各不相同，越來越多的產品為了滿足用戶的不同喜好，設計多種模式進行設置切換。最早的就是主題皮膚，逐步延展到更多的功能模塊中，比如音樂播放頁的布局設置。

MOO 音樂為用戶提供了以專輯封面和背景大圖來進行播放頁的模式設置，用戶可以根據(jù)自己的喜好進行設置。在進行 UI 設計的時候無法判斷用戶的唯1喜好，多種模式的自定義設置更能帶給用戶良好的體驗。