10個(gè)優(yōu)秀的UI/UX設(shè)計(jì)技巧

2022-5-12    seo達(dá)人


一、利用手勢輔助實(shí)現(xiàn)快捷操作

利用手勢交互輔助隱藏式功能操作,可以在不改變當(dāng)前結(jié)構(gòu)的基礎(chǔ)上實(shí)現(xiàn)快捷操作,帶給用戶更加便捷化的體驗(yàn)。

夸克 APP 在訪問了多層級(jí)頁面之后,如果想要快速回到瀏覽器主頁,點(diǎn)擊返回按鈕一級(jí)一級(jí)返回過于繁瑣。通過底部導(dǎo)航欄向上進(jìn)行滑動(dòng),可以快速激活返回主頁的操作,手勢輔助實(shí)現(xiàn)自動(dòng)跳轉(zhuǎn)。該設(shè)計(jì)解決方案通過手勢輔助隱藏功能操作,提高了用戶對(duì)于產(chǎn)品的使用體驗(yàn)。

圖片

圖片

    

二、點(diǎn)贊設(shè)計(jì)的情感化探索

點(diǎn)贊在閱讀類場景中隨處可見,用于表達(dá)用戶對(duì)內(nèi)容的認(rèn)可度而產(chǎn)生的情感共鳴,通過點(diǎn)贊給予贊同。點(diǎn)贊設(shè)計(jì)的創(chuàng)新已逐步在探索,通過更加情感化的設(shè)計(jì)表達(dá)提高用戶體驗(yàn),借助手勢的變化呈現(xiàn)出更有趣味性的點(diǎn)贊設(shè)計(jì)。

今日頭條 APP 單擊點(diǎn)贊圖標(biāo)會(huì)隨機(jī)性彈出表情化符號(hào),多次點(diǎn)擊會(huì)持續(xù)彈出更為豐富密集的表情符號(hào),長按則會(huì)像模擬持續(xù)發(fā)射的特效,伴隨著音效和震動(dòng)帶來“視聽觸”等多重體驗(yàn)。點(diǎn)贊設(shè)計(jì)的情感化探索不僅帶給用戶多重感官體驗(yàn),也是用戶釋放閱讀壓力的一種情感共鳴。

圖片 
 

三、情感化的點(diǎn)贊文案設(shè)計(jì)

除了從點(diǎn)贊視覺感官層面進(jìn)行設(shè)計(jì)探索以外,眾多產(chǎn)品也在文案提示設(shè)計(jì)上面進(jìn)行情感化探索。

AcFun APP 在對(duì)話題等內(nèi)容點(diǎn)贊時(shí),會(huì)彈出溫馨的文案提示,每次點(diǎn)贊都會(huì)出現(xiàn)不同的文案。情感化的文案設(shè)計(jì)提高了話題互動(dòng)的活躍度,帶給用戶更好的社交互動(dòng)體驗(yàn)。

圖片 
 
 

四、突破常規(guī)的模式切換設(shè)計(jì)

設(shè)計(jì)都在探索差異化的感官表達(dá),如何突破常規(guī)至關(guān)重要。無論是在布局結(jié)構(gòu)層面還是元素情感化表達(dá)層面,設(shè)計(jì)師都在嘗試更有創(chuàng)新的表達(dá),帶給用戶不一樣的使用體驗(yàn)。

Wonder APP 在模式切換上做出了一個(gè)新穎的設(shè)計(jì)解決方案,通過環(huán)形卡片設(shè)計(jì)進(jìn)行模式切換,可以單擊和滑動(dòng)進(jìn)行切換。動(dòng)態(tài)的卡通形象增加了感官體驗(yàn),流暢的卡片切換也帶來了不錯(cuò)的操作體驗(yàn),是一個(gè)在布局層、視覺感官層、互動(dòng)層等方面的不錯(cuò)探索。

圖片

[優(yōu)化輸出圖像]

 

 

五、特色的簽到展示設(shè)計(jì)

簽到設(shè)計(jì)對(duì)于大家來說并不陌生,提高用戶簽到的參與度是大家都在不斷思考和探索的方向。

AcFun APP 將簽到設(shè)計(jì)成日歷展示形式,點(diǎn)擊簽到之后彈出,配合日歷運(yùn)勢的概念來設(shè)計(jì),提高用戶的簽到興趣。內(nèi)容卻不是正式的日歷運(yùn)勢相關(guān)內(nèi)容,配合趣味化的文案設(shè)計(jì),讓用戶會(huì)心一笑。視覺感和情感化文案設(shè)計(jì)的融入,提高了簽到設(shè)計(jì)的感官體驗(yàn),進(jìn)而提高用戶的參與度。

圖片 
 

六、自定義字號(hào)提高閱讀體驗(yàn)

通過公眾號(hào)等自媒體進(jìn)行閱讀已經(jīng)成為大家的習(xí)慣,不同公眾號(hào)編輯內(nèi)容都會(huì)有所不同,字體大小和行間距等沒有特定的規(guī)范。官方雖然會(huì)有默認(rèn)設(shè)置,但是無法兼顧不同的內(nèi)容需求。提高小編的編輯體驗(yàn)和滿足用戶的閱讀體驗(yàn),自定義的閱讀調(diào)整至關(guān)重要。

在公眾號(hào)閱讀文章時(shí),可以通過右上角的功能入口進(jìn)入“調(diào)整字體”。用戶可以根據(jù)自己的閱讀習(xí)慣設(shè)置字體大小,在標(biāo)準(zhǔn)和自定義大小之間切換,提高用戶的閱讀體驗(yàn)。

圖片 
 

七、自選色實(shí)現(xiàn)更靈活的個(gè)性換膚

個(gè)性化的皮膚主題在眾多產(chǎn)品中已經(jīng)運(yùn)用普遍,當(dāng)用戶體量增加之后,個(gè)性化的設(shè)置才能滿足不同用戶的體驗(yàn)需求。

酷我音樂 APP 在個(gè)性換膚模塊中,除了設(shè)置多個(gè)主題皮膚供選擇以外,用戶還可以通過自選色設(shè)置更加靈活的配色風(fēng)格??梢赃x擇更多推薦的配色風(fēng)格,也可以通過色環(huán)自己調(diào)節(jié)任意顏色,滿足不同用戶對(duì)于感官體驗(yàn)的需求。

圖片 
 

八、自定義圖滿足用戶的創(chuàng)作欲

對(duì)于一些追尋個(gè)性化較強(qiáng)的用戶,預(yù)裝的自定義設(shè)計(jì)已經(jīng)無法滿足他們的體驗(yàn)需求,激發(fā)用戶創(chuàng)作欲的設(shè)計(jì)迎面而來。

酷我音樂 APP 在個(gè)性換膚模塊中,用戶可以通過“自定義圖”實(shí)現(xiàn)更加個(gè)性化的皮膚。用戶可以選擇任意拍攝的照片,然后通過透明度和模糊度來調(diào)節(jié)照片效果,滿足自己對(duì)背景效果的要求。針對(duì)按鈕的顏色也提供了幾個(gè)配色選擇,用戶可以根據(jù)自己調(diào)節(jié)后的背景效果進(jìn)行搭配?;诟觽€(gè)性化的需求滿足用戶的創(chuàng)作欲,才能帶給用戶更加人性化的使用體驗(yàn)。

圖片 
 

九、關(guān)聯(lián)功能疊加設(shè)計(jì)提高使用率

為了提高功能的曝光度,直接展示在用戶的視野中是很多設(shè)計(jì)師的處理形式,但是卻增加了感官層面的視覺負(fù)擔(dān)。

幸識(shí) APP 把關(guān)聯(lián)功能進(jìn)行合并式的疊加設(shè)計(jì),不僅對(duì)視覺進(jìn)行降噪,由于屬于關(guān)聯(lián)性的操作,用戶更容易通過功能聯(lián)想進(jìn)行使用。當(dāng)用戶點(diǎn)擊觀看“時(shí)間戳”時(shí),底部功能會(huì)被替換為“發(fā)起”,發(fā)起時(shí)間戳和觀看本身就是一個(gè)流程的體驗(yàn)。當(dāng)我們遇到關(guān)聯(lián)性功能設(shè)計(jì)時(shí),不一定選擇各自展示,相互疊加或者切換式的交互設(shè)計(jì)也是不錯(cuò)的解決方案。

圖片 
 

十、趣味性爆滿的點(diǎn)贊設(shè)計(jì)

點(diǎn)贊是用戶情緒化表達(dá)的關(guān)鍵,表示對(duì)于內(nèi)容的認(rèn)可度和作者的支持度。普通的點(diǎn)贊設(shè)計(jì)已經(jīng)無法滿足一些情緒爆滿的用戶,更加趣味夸張的設(shè)計(jì)在逐步被探索。

微博 APP 針對(duì)點(diǎn)贊設(shè)計(jì)單擊時(shí),出現(xiàn)表情化的符號(hào)彈出,持續(xù)點(diǎn)擊或者長按點(diǎn)贊圖標(biāo)則會(huì)出現(xiàn)色彩豐富、表情符號(hào)四處爆發(fā)的視覺效果。一場趣味性爆滿的視覺盛宴,滿足用戶釋放情緒的最大化需求。

圖片

源圖像

 

小結(jié)

在用戶使用體驗(yàn)和感官體驗(yàn)層面探索了這些優(yōu)秀的案例,希望可以拋磚引玉,帶給大家更多啟發(fā)。發(fā)現(xiàn)設(shè)計(jì)背后的思路,總結(jié)設(shè)計(jì)表達(dá)的經(jīng)驗(yàn),運(yùn)用優(yōu)秀案例的技巧,提高我們的設(shè)計(jì)解決能力。

以上總結(jié)僅代表個(gè)人觀點(diǎn),如有不足歡迎大家留言補(bǔ)充,我們互相進(jìn)步。

 
原文地址:黑馬家族(公眾號(hào))

作者:黑馬青年
轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》10個(gè)優(yōu)秀的UI/UX設(shè)計(jì)技巧

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



分享本文至:

日歷

鏈接

個(gè)人資料

存檔