作為UI設計師來說，產品體驗日記是我們日常習慣中不可或缺的一部分。除了探索新功能、新穎的交互形式、產品設計思維以外，UI視覺層的設計處理技巧也是學習和總結的重要環節。本欄目將會定期為大家分享在UI設計層面的案例分析，希望可以拋磚引玉，帶給大家在設計處理技巧上的經驗總結。

01.  磨砂玻璃式的金剛區圖標設計 
    輕質感在 UI 設計場景中的運用近些年比較明顯，以磨砂效果為代表的無論是在圖標設計還是界面表現上面都較為常見，特別是在金剛區的圖標設計上面。
    喜馬拉雅 App 首頁金剛區圖標結合磨砂效果呈現，材質感和舒適度都較為突出。實現難度也比較小，通過 Sketch 軟件的背景模糊很容易實現。突出業務以微動效的形式表達，這也是較為常見的差異化設計解決方案之一。
02.  多種模式滿足用戶不同喜好 
    不同用戶的操作習慣和感官標準各不相同，越來越多的產品為了滿足用戶的不同喜好，設計多種模式進行設置切換。最早的就是主題皮膚，逐步延展到更多的功能模塊中，比如音樂播放頁的布局設置。
    MOO 音樂為用戶提供了以專輯封面和背景大圖來進行播放頁的模式設置，用戶可以根據自己的喜好進行設置。在進行 UI 設計的時候無法判斷用戶的唯一喜好，多種模式的自定義設置更能帶給用戶良好的體驗。
03.  獨一無二的個性化首頁定制 
    隨著用戶喜好的變化，自定義模式可以滿足各自不同的需求，網易云音樂推出了獨一無二的個性化首頁定制設計。用戶可以通過預設的默認模式、歌單模式、視頻模式進行選擇，為了方便用戶判斷定制后的效果，可以通過“功能說明”觀看預設后的樣式，直觀的展示提高用戶的判斷體驗。
    自定義模式打破了千篇一律的設計，根據用戶的喜好呈現內容，提高了用戶粘性和使用體驗。
04.  App Banner 呈現的裸眼 3D 效果 
    移動端的設計已經越來越成熟，設計師都在尋找新的發力點，不斷向細分的功能探索更好的設計體驗，而 Banner 設計也是研究的方向之一。
    突然有一天在使用自如 App 的時候發現了這個隱藏的“彩蛋”，模擬裸眼 3D 效果的呈現方式在 Banner 上面，是一次全新的嘗試。通過借助移動設備上的傳感器等將 2D 影像轉化為景深效果，以呈現出不用 3D 眼鏡就可看到的 3D 效果。
05.  簡單的動效不一樣的場景代入感 
    微動效在產品設計中的運用已經非常普及，特別是在圖標中的運用，既能提高圖標的關注度，也能體現圖標的差異化。就像一個掃一掃的功能圖標，加上簡單的動效呈現，提高了場景代入感。
    將現實中的掃描動作運用到圖標動效的表達上面，既增加了該功能的關注度，也能讓主題表達更清晰。

06.  視頻引導關注度更強 
    引導頁是 UI 設計中較為普遍的存在，而動效的引導和視頻形式的引導相較于靜態圖文形式來說，更能吸引用戶的關注度。特別是隨著 C4D 等三維軟件的普及，結合立體感和動效形式形成視頻引導，也是一種全新的體驗。
07.  底部手勢區的充分運用 
    對于移動端來說，隨著大屏手機的普及，手勢操作舒適區的研究至關重要。底部操作范圍算是手勢的最佳區域之一，充分的利用好有利的位置進行更多功能的設計，提高功能的曝光度。
    將一些重點功能通過懸浮層的形式設計在底部，隨著交互的變化進行隱藏和顯示，也是一種非常不錯的設計解決方案。比如平安口袋銀行將我的余額、積分兌換、簽到、抽獎、領取紅包等設計在底部標簽欄之上，通過懸浮層的形式呈現，讓這些原本隱藏的功能得到了曝光，增加了用戶的關注度。
08.  首頁導航位置的合理運用 
    頂部導航欄通常是提示當前頁面的位置，對于首頁來說一般會設計搜索、品牌曝光、功能操作、當前位置提示等內容。也有一些直接展示 Banner 圖，隱藏導航的存在。
    一些產品想要弱化活動 Banner 的空間占比，除了縮小 Banner 高度尺寸以外，最近也發現了一種新的設計解決方案。安居客將活動主題設計到導航位置，單擊和下拉刷新到一定程度都會喚起活動詳情。該設計解決方案不僅充分利用了導航位置，在達到曝光度的同時也不會過度占用首頁版面，合理的運用了有限的資源。
09.  背景的變化讓等級區分更直觀 
    很多產品都會涉及到會員中心和會員等級區分，不同的等級如何在設計上面體現出差異，除了圖標的區分以外，背景的差異也是一個設計方向。
    自如通過不同漸變色的過度來體現會員等級的差異，在滑動預覽的時候 UI 界面也會隨著色彩的過度發生變化，視覺效果非常突出。色彩的變化過度自然，動效的轉場伴隨著內容的更換，直觀的體現了會員等級的權益區分。
10.  個人中心設計的場景變化 
    個人中心的設計對于很多產品來說都比較常規，隨著感官體驗的升級，個人中心設計的差異也有待深入思考。而場景化的情感表達是提高個人中心設計差異的方向之一，結合插畫和微動效的表達較為普遍。
    自如的個人中心除了以場景插畫的形式來提升情感化體驗以外，晝夜變化采用了不同的插畫場景來表現，代入感非常到位。場景插畫還融合了微動效，微妙的變化提高了產品的精細化設計，增強了產品的體驗感。

    本文由培訓無憂網長沙牛耳教育課程顧問老師整理發布，希望能夠對想參加長沙UI設計培訓的學生有所幫助。更多課程信息可關注培訓無憂網UI設計培訓或添加老師微信：15033336050

      注：尊重原創文章,轉載請注明出處和鏈接 http://m.hebeijilong.cn/news-id-5868.html 違者必究！部分文章來源于網絡由培訓無憂網編輯部人員整理發布,內容真實性請自行核實或聯系我們，了解更多相關資訊請關注UI設計頻道查看更多，了解相關專業課程信息您可在線咨詢也可免費申請試課。關注官方微信了解更多：150 3333 6050