隨著設(shè)計(jì)師技能水平的不斷提升，產(chǎn)品設(shè)計(jì)的質(zhì)量普遍得到了很大程度的提升，不過(guò)也會(huì)出現(xiàn)同質(zhì)化的現(xiàn)象。為了使得自己的設(shè)計(jì)更有差異化，設(shè)計(jì)師依然在風(fēng)格、特征和細(xì)節(jié)等方面不斷探索，也出現(xiàn)了很多在 UI 設(shè)計(jì)表達(dá)層面很有想法的案例。

今天黑馬哥也給大家精選幾個(gè)案例互相欣賞一下，希望可以給大家?guī)?lái)更多設(shè)計(jì)啟發(fā)。

一、業(yè)務(wù)特征化的卡片式設(shè)計(jì)

卡片式設(shè)計(jì)是近些年非常流行的 UI 趨勢(shì)，可以使得信息整合更高效，層級(jí)區(qū)分更明顯等。卡片的設(shè)計(jì)表達(dá)也非常豐富，無(wú)論是造型、配色、空間感等方面，都可以進(jìn)行不同的設(shè)計(jì)表達(dá)。

最近在體驗(yàn)閑魚 APP 時(shí)，其租房欄目的設(shè)計(jì)中，將租房的業(yè)務(wù)特征進(jìn)行圖形化設(shè)計(jì)，結(jié)合到卡片式的造型表達(dá)中。其設(shè)計(jì)表達(dá)不僅強(qiáng)化業(yè)務(wù)特征，房屋結(jié)構(gòu)的圖形化更能吸引用戶的關(guān)注度，特征符號(hào)的表達(dá)也更能強(qiáng)化用戶對(duì)產(chǎn)品的記憶度。

二、巧妙設(shè)計(jì)表達(dá)的個(gè)人中心

個(gè)人中心是產(chǎn)品中必不可少的存在，其設(shè)計(jì)案例層出不窮，也是最容易導(dǎo)致設(shè)計(jì)同質(zhì)化的模塊。不過(guò)依然有一些設(shè)計(jì)得很巧妙的案例，會(huì)在布局、配色、背景、動(dòng)效、交互等方面進(jìn)行設(shè)計(jì)發(fā)揮。

最近在嘀嗒出行 APP 中，發(fā)現(xiàn)其個(gè)人中心的設(shè)計(jì)布局非常巧妙，利用超橢圓結(jié)構(gòu)作為頭像，結(jié)合卡片左上角凹陷的位置，使得布局結(jié)構(gòu)更加飽滿。不僅突出頭像，也不會(huì)導(dǎo)致負(fù)空間過(guò)大，結(jié)構(gòu)變形得非常巧妙。

三、異形卡片與圖標(biāo)的多層結(jié)構(gòu)

卡片式設(shè)計(jì)的出現(xiàn)也是為了強(qiáng)化模塊的層級(jí)感，讓界面設(shè)計(jì)更有空間感。如何在卡片 Z 軸層上深入設(shè)計(jì)，是設(shè)計(jì)師重點(diǎn)探索的方向。

在閑魚 APP 的副業(yè)欄目中，發(fā)現(xiàn)一組異形卡片與圖標(biāo)結(jié)合得很有意思的設(shè)計(jì)。通過(guò)卡片一角的凹陷形成異形結(jié)構(gòu)，給圖標(biāo)提供布局位置，再利用背景卡片襯托層次感。使得整組卡片設(shè)計(jì)不僅層次更強(qiáng)，差異化的表達(dá)也更能吸引用戶的關(guān)注度。

四、APP 圖標(biāo)的應(yīng)景式設(shè)計(jì)

APP 圖標(biāo)的主題化設(shè)計(jì)非常普及，在一些重要的節(jié)日慶典或者主題活動(dòng)期間，都會(huì)通過(guò)應(yīng)景式設(shè)計(jì)表達(dá)氛圍，喚醒與用戶的情感共鳴。

餓了么 APP 圖標(biāo)在這個(gè)炎熱的季節(jié)換成了冰晶的造型，圖標(biāo)中還有上升的小氣泡，散發(fā)出絲絲涼意。這種應(yīng)景式的設(shè)計(jì)激活了用戶的體感記憶，增強(qiáng)了用戶對(duì)產(chǎn)品的體驗(yàn)好感度。

五、不一樣的系統(tǒng)通知開啟設(shè)計(jì)

隨著下載的應(yīng)用越來(lái)越多，各種消息的提示難免干擾自己，所以大部分情況下都會(huì)關(guān)閉系統(tǒng)通知。如何讓用戶開啟通知，也盡量不造成過(guò)度干擾，這個(gè)問(wèn)題值得深思。

在嘀嗒出行 APP 消息設(shè)置的設(shè)計(jì)中，關(guān)閉按鈕十分醒目，用戶可以觸發(fā)按鈕開啟系統(tǒng)通知。為了擔(dān)心用戶因?yàn)檫^(guò)度推送而關(guān)閉通知，特意設(shè)計(jì)了“一鍵免打擾”，以此來(lái)精簡(jiǎn)消息推送，避免消息推送過(guò)度而干擾用戶。站在用戶角度考慮的設(shè)計(jì)，才能增加用戶的選擇性。

六、通過(guò)動(dòng)效強(qiáng)化用戶信任度

建立用戶對(duì)產(chǎn)品的信任度是至關(guān)重要的，通過(guò)商品品質(zhì)、服務(wù)質(zhì)量、公信力等方式來(lái)建立信任度，如何將語(yǔ)言轉(zhuǎn)化為設(shè)計(jì)表達(dá)是設(shè)計(jì)師的發(fā)力方向。

在閑魚 APP 手機(jī)數(shù)碼欄目中，設(shè)計(jì)師通過(guò)動(dòng)效的方式表達(dá)商品從質(zhì)檢、包裝到物流的標(biāo)準(zhǔn)化流程，通過(guò)視覺化方式強(qiáng)化用戶的信任度。流暢的動(dòng)效相較于文字描述更有場(chǎng)景感，把復(fù)雜的流程簡(jiǎn)化為可視化的呈現(xiàn)，不僅便于理解，也能提升產(chǎn)品設(shè)計(jì)的感官度。

七、會(huì)員卡片的質(zhì)感強(qiáng)化

卡片式設(shè)計(jì)除了在造型上面探索以外，質(zhì)感和風(fēng)格的表達(dá)也是突出設(shè)計(jì)感的方式，往往細(xì)節(jié)的處理可以帶來(lái)意想不到的效果。

在小象優(yōu)品 APP PLUS 會(huì)員等級(jí)卡片設(shè)計(jì)中，不僅通過(guò)異形卡片結(jié)構(gòu)完美切換會(huì)員等級(jí)，也通過(guò)質(zhì)感的差異突出等級(jí)區(qū)分。卡片邊緣光影的處理也非常細(xì)節(jié)，使得卡片設(shè)計(jì)更加精致，也能更好的突出卡片與背景的空間層次感。

八、靈活變化的底部標(biāo)簽欄設(shè)計(jì)

底部標(biāo)簽欄在產(chǎn)品中是最普遍的存在，方便用戶進(jìn)行功能之間的頻繁切換。在設(shè)計(jì)表達(dá)層面發(fā)揮空間很大，不僅可以在造型特征上進(jìn)行設(shè)計(jì)，圖標(biāo)設(shè)計(jì)的表達(dá)方案也是層出不窮。

愛奇藝 APP 底部標(biāo)簽欄的“桃豆”功能以凸出的設(shè)計(jì)打破常規(guī)結(jié)構(gòu)，以此吸引用戶的關(guān)注度。當(dāng)點(diǎn)擊“免費(fèi)”欄目時(shí)，為了不影響視頻進(jìn)度條的表達(dá)，凸出的結(jié)構(gòu)會(huì)縮回常規(guī)版，伴隨著流暢的動(dòng)效過(guò)渡。靈活的結(jié)構(gòu)變化不僅避免干擾功能布局，也能通過(guò)動(dòng)態(tài)的變化強(qiáng)化用戶的關(guān)注度。

小結(jié)

避免產(chǎn)品同質(zhì)化的設(shè)計(jì)除了在 UI 風(fēng)格層面探索以外，一些細(xì)節(jié)的設(shè)計(jì)創(chuàng)新也能展示出自我特征，希望這些案例可以帶給大家一些啟發(fā)。文中描述屬于個(gè)人觀點(diǎn)，不足之處歡迎大家留言補(bǔ)充。

作者：黑馬青年