本文授權轉自：黑馬青年（ID： heimauiux）

正文

大家經常會遇到這樣的問題，為啥同樣的需求我卻沒有別人做得好呢！或者自己的作品總感覺沒有別人的好看，到底是哪個環節出了問題呢？

設計能力的提升離不開動手能力和設計感知能力，如果你的執行力沒問題，那就要努力提高眼界，多體驗、多分析、多總結。為了提高大家的眼界，我們也會定期分享一些優秀的設計案例，希望可以和大家一起進步。

體驗目錄

一、品牌基因點綴圖標設計

二、場景式設計表達

三、不一樣的輪播結構

四、產品設計的外觀自定義

五、產品設計的 AI 趨勢

六、懸浮影像強化內容關注度

七、平衡結構和延展功能

八、收縮式設計提升視覺體驗感

九、對比式突出功能優勢

十、通過圖標設計形成版塊對比

一、品牌基因點綴圖標設計

圖標設計的差異化在產品中尤為重要，設計師的圖標設計能力也是非常重要的考驗之一，如何結合產品特征和品牌文化等因素強化圖標設計，需要我們立足于品牌做更多探索。

最近在體驗優酷 App 時，發現了一組結合品牌基因點綴圖標設計的案例，很有啟發性。該組圖標設計以線性方式表達，結合優酷品牌基因圖形作為底層點綴，不僅強化了品牌感，也能讓單調的線性圖標變得更有層次感。

二、場景式設計表達

把線下的場景還原到線上的體驗中，可以讓用戶體驗更有代入感，無論是體驗度還原還是場景式的設計表達，都能以此提升用戶體驗度。

愛奇藝 App 在云包場欄目的設計中，將影院的觀影場景還原到界面中，讓用戶感受到身臨其境的體驗。通過場景式的設計還原，使得功能表達更加直觀，無論是操作體驗還是感官體驗都能呈現出不錯的效果。

三、不一樣的輪播結構

輪播圖在產品中非常普遍，從創意角度、結構差異化、輪播體驗度等方面都可以進行設計發揮。

最近在體驗優酷 App 時，淘好片“正在熱播”欄目中，針對影片的推薦采用橫向輪播的交互方式，輪播圖以豎版封面圖的結構進行漸層疊加。單擊或者滑動交互都很流暢，樣式表達區別于常規結構，更能吸引用戶的關注度。

四、產品設計的外觀自定義

產品外觀設計大部分情況都是統一的，這也使得無法滿足所有用戶的喜好，為了打破這個局限性，產品設計師也在外觀的設置中提出了自定義的解決方案。

比如網易郵箱大師在個人中心添加了外觀偏好的設置，用戶可以根據自己的喜好設置應用圖標、深淺模式、皮膚主題等主要內容，也可以切換語言和調節文字大小。自定義的外觀設計可以滿足更多用戶的審美需求，提升用戶對產品服務的好感度。

五、產品設計的AI趨勢

隨著AI趨勢的發展，眾多產品都在融入這個趨勢，都在自家功能訴求中添加AI的功能，產品設計也變得AI化。

通過AI強化搜索體驗是最為普及的，比如愛奇藝在底部標簽欄的重要位置添加了AI機器人桃豆（測試版）。通過與桃豆對話，可以讓你對影片的搜索體驗更佳，不僅只是搜索結果的呈現，更有簡短的分析輔助你做出判斷，讓你的選擇變得更有方向感。

六、懸浮影像強化內容關注度

如何在不改變產品布局結構的基礎上強化局部內容的關注度呢？這個問題使得界面視覺表達花樣百出。

最近在體驗愛奇藝 App 時，發現了一個有意思的設計表達。利用懸浮影像強化了當前內容的關注度，幾秒后消失也不會過度干擾，像一片墨跡一樣的結構也讓懸浮的內容不會太突兀，更能融合在界面中，是一個值得學習的解決方案。

七、平衡結構和延展功能

見縫插針式的設計是我們比較忌諱的，但是為了平衡結構和延展功能也會往這個方向進行探索，特別是在體量龐大的產品中。

前段時間京東外賣走熱，將外賣業務納入秒送欄目中，在導航欄右側添加了一個營銷入口，使其布局結構左右平衡。延展的功能也將空白區域的價值發揮到極致，即平衡了結構，又拓展了營銷接口。

八、收縮式設計提升視覺體驗感

根據當前結構的視覺表現靈活調整設計，不同的結構采用不同的設計表達，這樣靈活的設計思維才能做出更有體驗感的產品。

在美圖秀秀設計室中，默認展示的搜索框較短，可以給 Banner 圖的表達騰出空間，使其顯示效果更佳。滑動界面后搜索框會延展長度，讓導航欄的布局更加飽滿平衡。這種收縮式的設計不僅使得布局更靈活，也能給其它元素帶來更好的視覺體驗感。

九、對比式突出功能優勢

通過前后對比可以突出變化過程，吸引用戶感受功能或者服務帶來的優勢，這種對比式的設計你覺得可以用到哪個場景呢？

在 Photoshop Express App 的引導頁設計中，我發現了這個對比式的設計表達，通過拖動滑塊可以感受前后圖片的變化，以此突出工具的優勢。相較于展示形式的引導頁設計而言，這種可交互的互動性設計體驗度更高。

十、通過圖標設計形成版塊對比

在產品中版塊之間需要通過對比形成差異和層級感，形成對比的設計手法很多，本次探索的是通過圖標設計的強弱影響版塊對比的方式。

在智行火車票個人中心欄目中，周邊服務版塊的圖標采用高明度低飽和度的處理方式，通過配色弱化了視覺張力，與其它版塊形成視覺上的強弱對比。也能讓整個界面的圖標設計形成層次對比，對于一些需要弱化的版塊來說，這是一個不錯的設計思路。

小結

本次分享的體驗總結到此結束，希望可以帶給大家一些設計啟發，以優秀的案例為原型，輔助我們輸出更優秀的設計解決方案。文中描述屬于個人觀點，僅作為參考，不足之處歡迎大家留言補充。

在科技浪潮奔涌向前的當下，人工智能正深刻重塑我們的生活與工作。人機之間的關系，也從簡單交互邁向深度協作。想知道如何在這一趨勢下把握體驗設計的新方向嗎？2025 年 10 月將在北京舉辦的 IXDC 國際體驗設計大會聚焦 “人機共生：人工智能時代人機協作新范式” ，作為全球領先的用戶體驗創新盛會，它將匯聚前沿理念與實踐。一起來關注這場盛會，探索人機協作的無限可能。

文章轉載：黑馬青年，版權歸原作者所有

原文鏈接：https://mp.weixin.qq.com/s/1iKP4DtfLyXZVNrJcAeB3g

版權聲明：“IXDC”所推送的文章，除非確實無法確認，我們都會注明作者和來源，本公眾號對轉載、分享的內容、陳述、觀點判斷保持中立，不對所包含內容的準確性、可靠性或完善性提供任何明或暗示的保證，僅供讀者參考。部分文章推送時未能與原作者取得聯系，若涉及內容或作品等版權問題，煩請原作者聯系我們，給出內容所在的網址并提供相關證明資料，我們會核查后立即更正或者刪除有關內容！本公眾號不承擔任何責任，并擁有對此聲明的最終解釋權。

聯系微信：18802086168

聯系電話：18802086168

編排 | 羅家玉

終審 | 蘇 菁

點這里，學習更多設計知識！