提交需求
賽事與廣告咨詢合作,請(qǐng)?zhí)顚懶枨蟊韱危覀儠?huì)在第一時(shí)間與您聯(lián)系!
隨著設(shè)計(jì)師技能水平的不斷提升,產(chǎn)品設(shè)計(jì)的質(zhì)量普遍得到了很大程度的提升,不過也會(huì)出現(xiàn)同質(zhì)化的現(xiàn)象。為了使得自己的設(shè)計(jì)更有差異化,設(shè)計(jì)師依然在風(fēng)格、特征和細(xì)節(jié)等方面不斷探索,也出現(xiàn)了很多在 UI 設(shè)計(jì)表達(dá)層面很有想法的案例。
今天黑馬哥也給大家精選幾個(gè)案例互相欣賞一下,希望可以給大家?guī)砀嘣O(shè)計(jì)啟發(fā)。
體驗(yàn)?zāi)夸?/span>
一、業(yè)務(wù)特征化的卡片式設(shè)計(jì)
二、巧妙設(shè)計(jì)表達(dá)的個(gè)人中心
三、異形卡片與圖標(biāo)的多層結(jié)構(gòu)
四、APP 圖標(biāo)的應(yīng)景式設(shè)計(jì)
五、不一樣的系統(tǒng)通知開啟設(shè)計(jì)
六、通過動(dòng)效強(qiáng)化用戶信任度
七、會(huì)員卡片的質(zhì)感強(qiáng)化
八、靈活變化的底部標(biāo)簽欄設(shè)計(jì)
一、業(yè)務(wù)特征化的卡片式設(shè)計(jì)
卡片式設(shè)計(jì)是近些年非常流行的 UI 趨勢,可以使得信息整合更高效,層級(jí)區(qū)分更明顯等??ㄆ脑O(shè)計(jì)表達(dá)也非常豐富,無論是造型、配色、空間感等方面,都可以進(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ì)化的模塊。不過依然有一些設(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ù)空間過大,結(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ì)。通過卡片一角的凹陷形成異形結(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ì)通過應(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)用越來越多,各種消息的提示難免干擾自己,所以大部分情況下都會(huì)關(guān)閉系統(tǒng)通知。如何讓用戶開啟通知,也盡量不造成過度干擾,這個(gè)問題值得深思。
在嘀嗒出行 APP 消息設(shè)置的設(shè)計(jì)中,關(guān)閉按鈕十分醒目,用戶可以觸發(fā)按鈕開啟系統(tǒng)通知。為了擔(dān)心用戶因?yàn)檫^度推送而關(guān)閉通知,特意設(shè)計(jì)了“一鍵免打擾”,以此來精簡消息推送,避免消息推送過度而干擾用戶。站在用戶角度考慮的設(shè)計(jì),才能增加用戶的選擇性。
六、通過動(dòng)效強(qiáng)化用戶信任度
建立用戶對(duì)產(chǎn)品的信任度是至關(guān)重要的,通過商品品質(zhì)、服務(wù)質(zhì)量、公信力等方式來建立信任度,如何將語言轉(zhuǎn)化為設(shè)計(jì)表達(dá)是設(shè)計(jì)師的發(fā)力方向。
在閑魚 APP 手機(jī)數(shù)碼欄目中,設(shè)計(jì)師通過動(dòng)效的方式表達(dá)商品從質(zhì)檢、包裝到物流的標(biāo)準(zhǔn)化流程,以此感官的方式強(qiáng)化用戶的信任度。流暢的動(dòng)效相較于文字描述更有場景感,把復(fù)雜的流程簡化為可視化的呈現(xiàn),不僅便于理解,也能提升產(chǎn)品設(shè)計(jì)的感官度。
七、會(huì)員卡片的質(zhì)感強(qiáng)化
卡片式設(shè)計(jì)除了在造型上面探索以外,質(zhì)感和風(fēng)格的表達(dá)也是突出設(shè)計(jì)感的方式,往往細(xì)節(jié)的處理可以帶來意想不到的效果。
在小象優(yōu)品 APP PLUS 會(huì)員等級(jí)卡片設(shè)計(jì)中,不僅通過異形卡片結(jié)構(gòu)完美切換會(huì)員等級(jí),也通過質(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)效過度。靈活的結(jié)構(gòu)變化不僅避免干擾功能布局,也能通過動(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ǔ)充。
本文由 @黑馬青年 原創(chuàng)發(fā)布。未經(jīng)許可,禁止轉(zhuǎn)載。
Powered by Froala Editor
微信公眾號(hào):我是黑馬青年
密碼登錄
大牛,別默默的看了,快登錄幫我點(diǎn)評(píng)一下吧!:)
登錄 立即注冊(cè)