10條UI設計視覺表現技巧-第2期

2021-11-2    seo達人



01.  內容與手勢的聯動設計 

交互手勢在移動端設計場景中至關重要,手勢的變化和內容的聯動關系,決定了是否可以獲得更高的用戶體驗。 比如抖音的短視頻播放設計中,進度條拖動過程中除了時間數字變化以外,數字的位置會隨著手勢的方向位移。聯動效果的設計感官體驗明顯,內容傳播的關注度更強。

圖片

抖音

 

02.  內容切換的場景模擬化設計 

以真實場景模擬設計表現,在 UI 設計中比較常用,帶給用戶更強的場景代入感。 比如千聊 App 首頁的免費聽直播欄目,直播預告的時間切換就像頻道調頻一樣,切換到自己感興趣的內容。自然流暢的動效滑動,兩條點綴的紅色線條,把頻道切換的場景代入感體現給用戶,帶來新穎的感官體驗。

圖片

千聊

 

03.  通過文字角標設計表達切換差異 

頂部內容的分類切換較為常見,特別是電商產品中。一般體現點擊和默認通常有字體大小區(qū)分、顏色深淺區(qū)分、下劃線區(qū)分、圖形裝飾區(qū)分等。 除此以外也有下劃線的變異用法,通過角標線段來體現差異。通常是右下角位置,伴隨著動效表達。比如京東 App 首頁,聯想到京東吉祥物,也有一種品牌呼應的感覺。

圖片

京東

 

04.  更貼近真實場景的設計引導 

通過設計還原真實場景,帶給用戶更強的代入感,從陌生轉換到熟悉的場景觸感。 高德地圖通過模擬真實的道路狀況,呈現出更加真實的行車引導,就像自己駕駛的車輛行走在手機屏幕上一樣。真實感的路況引導增加了駕駛的代入感,降低了復雜路口選錯方向的可能性,從視覺感上面也提高了感官體驗。

圖片

 

05.  人性化的城市點亮設計 

好的產品體驗,就是在無意間帶給用戶驚喜。在小長假期間,自駕游沿途經過不一樣的城市地點時,會彈出“歡迎到來”的點亮提示,第一次看到還有種驚喜感,算是一種旅行足跡的記錄。 在這個彈窗廣告滿天飛的互聯網環(huán)境中,能把這種驚喜帶給用戶才能抓住用戶的黏性,通過情感化的設計提升用戶對于產品的認可度。

圖片

 

06.  被人忽略的上滑交互探索 

大家經常使用下拉刷新這個功能,而且在該功能上的設計探索已經呈現出非常多的案例,而下滑到底部之后的設計探索卻被設計師所忽略。 在支付寶的首頁中,下滑到底部之后進行了新的設計探索。繼續(xù)上滑將會解鎖一項新玩法,以游戲化的設計帶給用戶新的探索體驗,也許這一嘗試將會帶來頁面底部新的挖掘點。這個新的挖掘點會像下拉刷新一樣,在底層功能需求的基礎上被深度開發(fā),呈現出更多營銷玩法。

圖片

 

07.  列表式設計中的左右滑動交互 

在列表式設計中,比較隱藏式的交互就是左滑和右滑,通常左滑刪除較為常見。而大部分的列表設計中都沒有探索過右滑交互,除非是右滑返回或者退出等操作。 在小宇宙 App 的訂閱欄目中,對于關注的內容列表左滑為刪除(不喜歡),右滑則是添加到播放列表中。充分運用了左右滑動的手勢交互,不僅操作便利也帶給用戶不一樣的使用體驗。

小宇宙

 

08.  通過展示形式增加內容的品質感 

同樣的東西放在不同的環(huán)境中,通過不一樣的展示形式,帶來的品質感也是相差甚遠。就像放進櫥窗的飾品或者展品,給人的品質感就會更高。 得物(毒)在購買欄目將精選推薦、福利專區(qū)、潮流榜單、補貼專區(qū)等內容,通過類似于玻璃罩的展示模型來呈現,不僅突出了視覺焦點,也帶給用戶一種品質感的認知。配合動效的運用,增強了該區(qū)域的關注度,是一種展示商品或者內容的不錯方式。

圖片

得物(毒)

 

09.  通過AR科技帶你感受虛擬試穿 

網絡購物存在的問題就是質量和匹配度等,得物(毒)通過AR科技帶你感受虛擬試穿,模擬真實場景中的體驗,打破了靜態(tài)選擇的弊端。技術的突破將會帶給用戶更便利的生活體驗,打破常規(guī)的固有模式才能帶給用戶更好的使用體驗。

圖片

 

10.  更直觀的設計帶來更人性化的體驗 

想要看一場電影,在選擇影片的時候為了讓用戶更直觀的了解影片內容,做出最快捷的選擇。淘票票將精彩片段作為背景層,影片展示作為前景層,點擊不同的影片背景層就會播放對應的精彩片段。直觀的設計帶給用戶更便利的選擇,減少了抵達目標的操作步驟。 從視覺形式感的角度使得畫面更豐富,空間感更強。相較于單調的平鋪式設計,帶給用戶更好的感官體驗和操作便利。

淘票票

 

小結 

從感官體驗的角度體驗產品,總結了在 UI設計視覺層面的解決方案,有助于提高 UI 設計師的視覺表現能力。對比相同功能的不同視覺表達,總結優(yōu)秀的設計呈現方案,希望這個欄目可以帶給你更多幫助!

 

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

作者:黑馬青年

轉載請注明:學UI網》10條UI設計視覺表現技巧-第2期

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

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

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

藍藍設計bouu.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務




分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://bouu.cn

存檔