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

2022-5-9    lanlanwork


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

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

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

圖片

圖片

    

二、點贊設(shè)計的情感化探索

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

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

圖片 
 

三、情感化的點贊文案設(shè)計

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

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

圖片 
 
 

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

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

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

圖片

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

 

 

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

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

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

圖片 
 

六、自定義字號提高閱讀體驗

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

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

圖片 
 

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

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

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

圖片 
 

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

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

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

圖片 
 

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

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

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

圖片 
 

十、趣味性爆滿的點贊設(shè)計

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

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

圖片

源圖像

 

小結(jié)

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

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

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

作者:黑馬青年

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》10個優(yōu)秀的UI/UX設(shè)計技巧

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

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

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

藍(lán)藍(lán)設(shè)計www.bouu.cn )是一家專注而深入的界面設(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è)計公司


分享本文至:

日歷

鏈接

個人資料

存檔