手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

如何利用動效 打造B端的用戶體驗

2024-3-12    前端達(dá)人

說到B端后臺產(chǎn)品,我們會想到業(yè)務(wù)復(fù)雜、信息龐大、用戶角色多、頁面層級深、使用門檻高等特征。這些特征讓后臺產(chǎn)品在設(shè)計時更強調(diào)“簡單直接”,無需多余的設(shè)計元素,相比之下,沒有C端產(chǎn)品有趣。而作為B端后臺設(shè)計師在工作中會面臨很多復(fù)雜場景的設(shè)計需求,有時候需求方未必能理解設(shè)計理念,會讓設(shè)計師陷入“頭禿”的狀態(tài)。 針對B端后臺產(chǎn)品某些體驗問題,我們可以借助動效的力量去解決。
下面將結(jié)合工作經(jīng)驗,以及線上文章,分享如何利用動效來提升B端后臺產(chǎn)品的體驗。
 
主要分為兩大塊:
如何利用動效  打造B端的用戶體驗
 
 
如何利用動效  打造B端的用戶體驗
 
 
使用動效不是為了炫技,而是輔助解決設(shè)計中發(fā)現(xiàn)的問題。我們要思考的是,眼下的問題結(jié)合動效能否達(dá)到1+1>2的解決效果。設(shè)計方案除了要得到需求方的認(rèn)可,還要有開發(fā)團(tuán)隊的支持。設(shè)計師做到從痛點中出發(fā),于可行處落地,才是有效的設(shè)計。那什么場景下的問題可以考慮結(jié)合動效呢?
 
1、信息量折疊收納
B端業(yè)務(wù)的復(fù)雜程度決定了產(chǎn)品的信息體量,這也考驗著設(shè)計師設(shè)計頁面時,能為用戶在有限的空間里獲取多少信息。舉個例子,用戶的辦公設(shè)備是小型筆記本,它的屏幕小,用戶一屏看到的內(nèi)容有限。這時需求方建議減少留白,壓縮空間,信息往上堆積,頁面最后會擁擠不堪。龐大的信息體量力求對用戶的吸收效率,也對設(shè)計造成困擾,針對這種情況我們可運用“折疊收納”法
 
應(yīng)用案例1: 按鈕折疊
如果一個頁面的按鈕太多,可“折疊”按鈕。以下面的科目樹為例,每個科目有若干個功能按鈕,如按鈕全部展示,不利于用戶聚焦重要信息。用戶必定是先看科目標(biāo)題,如有需要才對科目進(jìn)行操作,基于這個思路可把按鈕折疊起來,待用戶鼠標(biāo)懸浮至科目才出現(xiàn)按鈕。在恰當(dāng)?shù)膱鼍跋聦粹o折疊,有助于精簡頁面結(jié)構(gòu)。一個頁面按區(qū)域劃分功能區(qū)和信息區(qū),信息區(qū)被文案鋪滿了,可簡化功能區(qū)的表現(xiàn)形式。比如按鈕和解釋文案,可對解釋文案進(jìn)行收納,用戶鼠標(biāo)懸浮上去顯示。對于用戶來說,一個按鈕的含義只要使用一次便清楚。
如何利用動效  打造B端的用戶體驗
 
 
應(yīng)用案例2: 內(nèi)容折疊
B端后臺因信息量大有很多長頁面,這時可在用戶進(jìn)行頁面滾動瀏覽時,根據(jù)用戶滾動的內(nèi)容進(jìn)行折疊。如下的篩選項占據(jù)了頁面頭部一定的空間,用戶滑到結(jié)果列表內(nèi)容時,已選項固定在頂部精簡展示。
如何利用動效  打造B端的用戶體驗
 
 
小結(jié):通過“折疊收納法”優(yōu)化頁面布局,根據(jù)用戶的操作行為給予內(nèi)容變化,幫助用戶降低信息量過大帶來的閱讀疲勞,也讓設(shè)計師在有限的設(shè)計空間里“堆積”信息。
 
2、對路徑進(jìn)行引導(dǎo),及時給與用戶反饋,提高效率
B端產(chǎn)品會有極其復(fù)雜的功能,這些功能通常用步驟條來拆分,引導(dǎo)用戶分步完成。面對復(fù)雜功能。需求方希望
在頁面的各個位置添加用法提示文案。但用戶并不想閱讀一串串文字,這時可結(jié)合用戶的操作行為,及時響應(yīng)引導(dǎo)下一步操作。
 
應(yīng)用案例1:
操作響應(yīng)如下的這個頁面需要用戶把左邊的字段拖拽到右邊生成卡片。當(dāng)用戶拖拽時,給予動效反饋讓用戶感知字段拖拽方向。這種可視可感知的方式幫助用戶快速掌握用法,提升效率。
如何利用動效  打造B端的用戶體驗
 
 
應(yīng)用案例2:引導(dǎo)響應(yīng)
在工作中我們也許會接到類似的修改需求:“按鈕不夠突出,不夠大,要又大又突出”。你看完后心里想:“還不夠突出嗎,要這么大干什么呢?”這時沉住氣,分析修改的根本目的,它想要突出的目的是什么?
1、這個按鈕在整個頁面中承載極其重要的功能,視覺上用戶需立刻注意到2、點擊按鈕后的內(nèi)容十分重要,希望增強點擊欲。
當(dāng)用戶鼠標(biāo)懸浮至按鈕時,及時響應(yīng)引導(dǎo),一個箭頭既起到醒目作用,也引導(dǎo)著用戶去往下一步。
如何利用動效  打造B端的用戶體驗
 
 
小結(jié): B端后臺頁面信息繁雜,功能多。通過動效幫助用戶在使用過程中增強反饋和引導(dǎo),正確的引導(dǎo)能縮短用戶的操作路徑,提升效率。
 
3、增加情感化體驗
B端后臺產(chǎn)品大部分是給專業(yè)人員使用的,信息表單居多,頁面內(nèi)容相似,比較單調(diào)。加入適當(dāng)友好的情感化式效可以提升產(chǎn)品的趣味性,減少用戶使用的倦怠感。
應(yīng)用案例1: Loading動效
常規(guī)的Loading動效通常是一個圓在轉(zhuǎn)圈,當(dāng)用戶面對長時間加載時,一直盯著一個圈會產(chǎn)生焦慮感。情感化Loading動效可總結(jié)為兩類:
1、產(chǎn)品本身有一個IP形象,可圍繞IP進(jìn)行創(chuàng)作。例如“加薪貓”,加載的時候貓咪追著錢幣奔跑,增加了跑步流汗的細(xì)節(jié),提升它已經(jīng)在努力加載的形象感;
2、根據(jù)Loading的文案進(jìn)行拓展設(shè)計,提取文案元素,圖形場景化,分散用戶等待的焦慮。
如何利用動效  打造B端的用戶體驗
 
 
應(yīng)用案例2:化抽象為形象
有些B端產(chǎn)品的業(yè)務(wù)背景專業(yè)而又抽象,可借助動效的力量化繁為簡,化抽象為形象。以下面數(shù)據(jù)字典為例。用通過該字典進(jìn)行與業(yè)務(wù)相關(guān)的字段查詢。該頁結(jié)構(gòu)較簡單:搜索欄和熱詞入口。我結(jié)合模塊名稱,對特征進(jìn)行具體物化,在頁面加入字典和放大鏡元素。通過物化讓用戶快速感知該模塊的作用。類似的大入口頁面也可以運用3D效果,它能讓物化更加立體。
如何利用動效  打造B端的用戶體驗
 
 
如何利用動效  打造B端的用戶體驗
 
 
比較常用的動效設(shè)計工具有: Ae、Principle、ProtoPie。這里分享一下我在工作中常用的并能解決大部分問題的工具。
1、Principle:快速制成交互動效演示Demo
Principle是一款只能用于Mac OS系統(tǒng)的交互設(shè)計工具,它的操作界面跟Sketch類似,學(xué)習(xí)成本較低。它搭配Sketch使用,能對界面做轉(zhuǎn)場過渡動效和一些細(xì)節(jié)的交與動效。當(dāng)你想提出某個交互動效提案時,可用Princidle快速制成演示Demo,導(dǎo)出GIF或視頻給到需求方,讓他們快速明白你的想法及可行性后臺界面演示demo可直接選擇箭頭光標(biāo),呈現(xiàn)效果更貼合真實場景。
 
如何利用動效  打造B端的用戶體驗
 
 
2、After Effect: 適合各種場景下的動效制作
AE是絕大UI設(shè)計師必備的動效制作工具。它支持Mac OS和Windows系統(tǒng),其自身有著強大而豐富的特效庫?,F(xiàn)在也能通過AEUX插件,把Sketch里的圖層直接導(dǎo)入到AE使用。AE的功能大而全,日堂工作中多用干制作情感化需要的圖形動效,比如Loading、lcon點擊動效等等。
如何利用動效  打造B端的用戶體驗
 
 
小結(jié): 設(shè)計師需要學(xué)習(xí)和掌握的軟件很多,軟件更新迭代的速度也很快??蛇x擇能解決工作中絕大設(shè)計需求的軟件精學(xué),其余可在空閑時作為知識技能儲備來學(xué)習(xí)。
 
總結(jié)
做適合的動效為B端產(chǎn)品體驗賦能
當(dāng)你在設(shè)計一款從0-1或是重構(gòu)的B端后臺產(chǎn)品,你可重新定義設(shè)計風(fēng)格、規(guī)范控件。當(dāng)你是半途介入一款風(fēng)格規(guī)范都已相當(dāng)成熟的B端產(chǎn)品,通常遇到的問題較為繁瑣,可能是對一個按鈕、一個顏色、一句文案去精打細(xì)磨。這時設(shè)計師需提升產(chǎn)品全局觀,在設(shè)計過程中對遇到的問題層層剖析,洞悉設(shè)計的發(fā)力點,并在恰當(dāng)?shù)膱鼍跋戮o貼產(chǎn)品特性和業(yè)務(wù)需求,提出恰到好處的動效方案,以小點出發(fā),真正為產(chǎn)品的體驗賦能。

藍(lán)藍(lán)設(shè)計(m.88yangsc.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計B端界面設(shè)計、桌面端界面設(shè)計APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

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

銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計航天軍工軟件UI界面設(shè)計醫(yī)療行業(yè)軟件UI界面設(shè)計、教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)軟件vue開發(fā)



作者:CNLILY
鏈接:https://www.zcool.com.cn/article/ZMTYxMTI2OA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

分享本文至:

日歷

鏈接

個人資料

存檔