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

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

往期回顧：

一、品牌基因點綴圖標(biāo)設(shè)計

圖標(biāo)設(shè)計的差異化在產(chǎn)品中尤為重要，設(shè)計師的圖標(biāo)設(shè)計能力也是非常重要的考驗之一，如何結(jié)合產(chǎn)品特征和品牌文化等因素強(qiáng)化圖標(biāo)設(shè)計，需要我們立足于品牌做更多探索。

最近在體驗優(yōu)酷 App 時，發(fā)現(xiàn)了一組結(jié)合品牌基因點綴圖標(biāo)設(shè)計的案例，很有啟發(fā)性。該組圖標(biāo)設(shè)計以線性方式表達(dá)，結(jié)合優(yōu)酷品牌基因圖形作為底層點綴，不僅強(qiáng)化了品牌感，也能讓單調(diào)的線性圖標(biāo)變得更有層次感。

二、場景式設(shè)計表達(dá)

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

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

三、不一樣的輪播結(jié)構(gòu)

輪播圖在產(chǎn)品中非常普遍，從創(chuàng)意角度、結(jié)構(gòu)差異化、輪播體驗度等方面都可以進(jìn)行設(shè)計發(fā)揮。

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

四、產(chǎn)品設(shè)計的外觀自定義

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

比如網(wǎng)易郵箱大師在個人中心添加了外觀偏好的設(shè)置，用戶可以根據(jù)自己的喜好設(shè)置應(yīng)用圖標(biāo)、深淺模式、皮膚主題等主要內(nèi)容，也可以切換語言和調(diào)節(jié)文字大小。自定義的外觀設(shè)計可以滿足更多用戶的審美需求，提升用戶對產(chǎn)品服務(wù)的好感度。

五、產(chǎn)品設(shè)計的 AI 趨勢

隨著 AI 趨勢的發(fā)展，眾多產(chǎn)品都在融入這個趨勢，都在自家功能訴求中添加 AI 的功能，產(chǎn)品設(shè)計也變得 AI 化。

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

六、懸浮影像強(qiáng)化內(nèi)容關(guān)注度

如何在不改變產(chǎn)品布局結(jié)構(gòu)的基礎(chǔ)上強(qiáng)化局部內(nèi)容的關(guān)注度呢？這個問題使得界面視覺表達(dá)花樣百出。

最近在體驗愛奇藝 App 時，發(fā)現(xiàn)了一個有意思的設(shè)計表達(dá)。利用懸浮影像強(qiáng)化了當(dāng)前內(nèi)容的關(guān)注度，幾秒后消失也不會過度干擾，像一片墨跡一樣的結(jié)構(gòu)也讓懸浮的內(nèi)容不會太突兀，更能融合在界面中，是一個值得學(xué)習(xí)的解決方案。

七、平衡結(jié)構(gòu)和延展功能

見縫插針式的設(shè)計是我們比較忌諱的，但是為了平衡結(jié)構(gòu)和延展功能也會往這個方向進(jìn)行探索，特別是在體量龐大的產(chǎn)品中。

前段時間京東外賣走熱，將外賣業(yè)務(wù)納入秒送欄目中，在導(dǎo)航欄右側(cè)添加了一個營銷入口，使其布局結(jié)構(gòu)左右平衡。延展的功能也將空白區(qū)域的價值發(fā)揮到極致，即平衡了結(jié)構(gòu)，又拓展了營銷接口。

八、收縮式設(shè)計提升視覺體驗感

根據(jù)當(dāng)前結(jié)構(gòu)的視覺表現(xiàn)靈活調(diào)整設(shè)計，不同的結(jié)構(gòu)采用不同的設(shè)計表達(dá)，這樣靈活的設(shè)計思維才能做出更有體驗感的產(chǎn)品。

在美圖秀秀設(shè)計室中，默認(rèn)展示的搜索框較短，可以給 Banner 圖的表達(dá)騰出空間，使其顯示效果更佳?；瑒咏缑婧笏阉骺驎诱归L度，讓導(dǎo)航欄的布局更加飽滿平衡。這種收縮式的設(shè)計不僅使得布局更靈活，也能給其它元素帶來更好的視覺體驗感。

九、對比式突出功能優(yōu)勢

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

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

十、通過圖標(biāo)設(shè)計形成版塊對比

在產(chǎn)品中版塊之間需要通過對比形成差異和層級感，形成對比的設(shè)計手法很多，本次探索的是通過圖標(biāo)設(shè)計的強(qiáng)弱影響版塊對比的方式。

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

小結(jié)

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

這10個案例中哪個最讓你眼前一亮？歡迎評論討論！