2023-4-6 博博
設(shè)計做到極致注重的就是對于細(xì)節(jié)的把控力,大廠的設(shè)計師之所以比較優(yōu)秀,就是他們具備很好的細(xì)節(jié)把控力。想要提高產(chǎn)品設(shè)計的能力,發(fā)現(xiàn)設(shè)計細(xì)節(jié)和思考設(shè)計深入的能力至關(guān)重要。
最近在體驗產(chǎn)品的時候,發(fā)現(xiàn)了一些設(shè)計細(xì)節(jié)做得比較好的優(yōu)秀案例,分享給大家學(xué)習(xí)一下。
分享目錄
一、Banner 輪播轉(zhuǎn)場的品牌化
二、情感化的彈窗設(shè)計
三、最小化顯示提高空間利用率
四、動態(tài)化的設(shè)置引導(dǎo)
五、沉浸式的活動氛圍設(shè)計
六、人性化的提示設(shè)置
七、動態(tài)感知的溫度設(shè)計
八、無處不在的廣告位開發(fā)
九、主題化的圖標(biāo)設(shè)計
十、新穎的卡片式設(shè)計
一、Banner 輪播轉(zhuǎn)場的品牌化
立足于品牌做設(shè)計,才能強(qiáng)化自身產(chǎn)品的差異化。如何在更多設(shè)計場景中融入品牌基因,是設(shè)計師需要深入思考的關(guān)鍵。
最近在使用騰訊視頻 APP 時,發(fā)現(xiàn)首頁 Banner 圖在輪播的轉(zhuǎn)場過程中,以品牌 LOGO 造型作為轉(zhuǎn)場過度。一個小小的細(xì)節(jié)強(qiáng)化了用戶對于品牌的記憶度,也體現(xiàn)出專屬的設(shè)計差異。
二、情感化的彈窗設(shè)計
通過彈窗設(shè)計可以提高用戶操作效率,也是傳播信息(活動/廣告)最直觀的形式。但是體驗多了用戶便會開始排斥,提高彈窗的情感化設(shè)計變得尤為重要,降低用戶的排斥感才能提高彈窗的作用。
很多娛樂影視等 APP 都會有“青少年模式”彈窗提示,抖音將彈窗視覺表達(dá)融入了精美的國風(fēng)插畫。也通過針對性的內(nèi)容作為設(shè)置的引導(dǎo),提高了用戶對“青少年模式”的深入理解,增強(qiáng)了體驗的積極性。
插畫的形式在彈窗設(shè)計中表現(xiàn)比較突出,比如嘀嗒出行 APP 將“推送通知”的彈窗設(shè)計運用插畫增強(qiáng)情感化表達(dá)。相較于生硬的表達(dá)方式用戶更能接受,通過營銷的文案引導(dǎo)用戶授權(quán),提高了產(chǎn)品的感官體驗。
三、最小化顯示提高空間利用率
對于工具型產(chǎn)品不同用戶的操作焦點不同,更多定制化的體驗才能提高用戶的操作效率。
釘釘 APP 在協(xié)作欄目中,默認(rèn)展示的各類工具可以進(jìn)行收起,實現(xiàn)最小化顯示。用戶可以根據(jù)使用習(xí)慣和操作方式選擇收起/展開,提高了當(dāng)前空間的利用率,自定義的功能設(shè)計可以提高用戶的操作體驗。
四、動態(tài)化的設(shè)置引導(dǎo)
為了提高用戶隱私權(quán)益,手機(jī)系統(tǒng)針對產(chǎn)品調(diào)用權(quán)限進(jìn)行了阻力設(shè)計,需要用戶的授權(quán)操作。提高用戶的各類功能授權(quán)就需要設(shè)計師探索,降低用戶的排斥感和提高授權(quán)的利好政策才能獲得授權(quán)。
抖音在引導(dǎo)用戶開啟通知權(quán)限的設(shè)計中,采用了動態(tài)畫面的表達(dá)來強(qiáng)調(diào)開啟通知的利好政策,以此來攻破用戶的心理防備。相較于生硬的彈窗提示,動態(tài)的表達(dá)和引導(dǎo)性的文案更能拉近與用戶的距離感。
五、沉浸式的活動氛圍設(shè)計
沉浸式的體驗可以帶給用戶更好的場景感,提高用戶的參與度。在活動的設(shè)計中,不斷向游戲化和沉浸式方向加強(qiáng)體驗,提高活動的趣味性和強(qiáng)化用戶參與的積極性。
騰訊視頻在情人節(jié)的互動活動設(shè)計中,就將搶紅包的活動融入到當(dāng)前的界面中,紅包雨鋪滿整個屏幕,以趣味性的形式滿足用戶心理。不隔斷與界面之間的聯(lián)系,降低活動對用戶的干擾,進(jìn)而提高活動氛圍感和參與度。
六、人性化的提示設(shè)置
短視頻近些年改變了大家的生活方式和娛樂形式,也有用戶容易過度依賴進(jìn)而影響休息質(zhì)量。
抖音作為短視頻領(lǐng)域的頭部產(chǎn)品之一,在增強(qiáng)用戶體驗的同時也要起到良性的引導(dǎo)作用。當(dāng)用戶刷短視頻一定時間后會彈窗提示休息,而提示時間用戶可以根據(jù)自己的實際情況進(jìn)行設(shè)置,靈活的設(shè)置可以讓用戶合理分配時間。健康使用的引導(dǎo)可以讓用戶感受到產(chǎn)品的溫度,提高用戶體驗的認(rèn)可度。
七、動態(tài)感知的溫度設(shè)計
天氣預(yù)報是用戶關(guān)注度較高的信息,對于溫度的感知可以讓我們出行更容易把控。在產(chǎn)品中顯示天氣情況也是一種情感化的升級,可以帶給用戶更有溫度的體驗。
利用餓了么 APP 點餐之后,首頁會顯示配送情況和當(dāng)前的天氣溫度,背景以動態(tài)的天氣畫面增強(qiáng)視覺感知。也希望用戶可以根據(jù)天氣情況對外賣員多一份理解,加強(qiáng)人與人之間的寬容心,帶給用戶更強(qiáng)的情感化體驗。
最近在使用愛奇藝 APP 時,發(fā)現(xiàn)左上角的品牌位置也結(jié)合了天氣情況,結(jié)合頂部視覺區(qū)域的流體漸變,新增的天氣預(yù)報和品牌 LOGO 完美的通過動效過度。整個設(shè)計表達(dá)流暢自然,感官體驗也是非常值得學(xué)習(xí)的。
八、無處不在的廣告位開發(fā)
廣告是眾多產(chǎn)品實現(xiàn)流量變現(xiàn)的方式之一,廣告位的開發(fā)也是見縫插針,如何在僅有的空間增加更多廣告位,產(chǎn)品設(shè)計師也在不斷探索。
最近在使用騰訊視頻 APP 時,進(jìn)入到個人中心時會默認(rèn)有個下拉廣告。這個見縫插針的廣告位新增,對于設(shè)計師來說讓我感受到了廣告的無處不在,不過對于用戶來說是否會心生排斥感得通過數(shù)據(jù)去驗證。但是作為產(chǎn)品設(shè)計師這也是一個啟發(fā),將有限的空間進(jìn)行深度開發(fā),還不會影響已有的結(jié)構(gòu)布局,這也是一個啟發(fā)性的案例。
九、主題化的圖標(biāo)設(shè)計
圖標(biāo)是產(chǎn)品中不可或缺的存在,圖標(biāo)設(shè)計的研究也是設(shè)計師需要重點對待的技能范圍。精美的圖標(biāo)不僅可以提高產(chǎn)品的感官體驗,也能吸引用戶的關(guān)注度,進(jìn)而提高業(yè)務(wù)模塊的點擊欲。
最近在使用順豐速運小程序時,寄快遞欄目的各業(yè)務(wù)入口圖標(biāo)設(shè)計非常引人注目,結(jié)合主題化的圖標(biāo)設(shè)計突出了活動傳播力度。對于工具型產(chǎn)品而言,強(qiáng)化氛圍感可以打破用戶原有的認(rèn)知,不僅可以突出活動主題,也能強(qiáng)化用戶對產(chǎn)品的視覺感知。
十、新穎的卡片式設(shè)計
卡片式設(shè)計已經(jīng)流行好幾年了,目前依然是非常普及的 UI 設(shè)計趨勢之一。如何進(jìn)一步強(qiáng)化卡片式設(shè)計的創(chuàng)新度,我們需要不斷的嘗試和總結(jié)。
嘩哩嘩哩 APP 的創(chuàng)作中心設(shè)計也許是一個不錯的啟發(fā),卡片內(nèi)部右上角的視覺強(qiáng)化使得原本普通的表達(dá)變得更有視覺感。突出的設(shè)計也成功的吸引了 UP 主的注意力,強(qiáng)化了該入口的點擊欲。這樣的設(shè)計表達(dá)在保留卡片式設(shè)計的基礎(chǔ)上,也是一種新穎的視覺表現(xiàn),可以作為突出業(yè)務(wù)入口的表現(xiàn)方式進(jìn)行探索。
作者:黑馬青年 來源:站酷網(wǎng)
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加微信ban_lanlan,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。
分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( www.miumiuwan.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司。
藍(lán)藍(lán)設(shè)計的小編 http://www.miumiuwan.com