編輯導(dǎo)語：受大環(huán)境影響，生活方式也隨之改變，很多需求場景也從線下轉(zhuǎn)到線上。本文作者分析了B端視覺趨勢的相關(guān)內(nèi)容，從3D、數(shù)據(jù)可視化、極光漸變、情感化設(shè)計、微動效等方面的內(nèi)容展開分析，感興趣的一起來看一下，希望對你有幫助。

近年來疫情肆虐全球，出行不便及“無接觸”生活方式一定程度上影響了我們的習(xí)慣，劉畊宏引發(fā)的線上“全民健身”潮爆紅可見一斑，B端企業(yè)的很多需求場景也逐步從線下轉(zhuǎn)到線上，封鎖與隔離使得我們在數(shù)字世界的時間變得更長了。

基于過去一年團隊小伙伴日常工作的經(jīng)驗，我們對B端產(chǎn)品設(shè)計風(fēng)格做了探索與分析，本文是我們總結(jié)的關(guān)于B端產(chǎn)品的設(shè)計風(fēng)格走勢。

希望通過這次總結(jié)能更好地和設(shè)計師朋友們一起學(xué)習(xí)成長，同時希望能讓B端的項目組成員更好地認知到B端產(chǎn)品的趨勢，在方向和目標上達成一致共識。

一、3D

傳統(tǒng)單一的2D設(shè)計是否已經(jīng)給你造成審美疲勞了？

3D化的視覺風(fēng)格雖早已到來，但在B端市場上的表現(xiàn)依舊十分克制。

近年來，硬件設(shè)備的升級為3D設(shè)計提供了堅實的后盾，5G的普及也讓3D設(shè)計效果更輕而易舉地融入生活。

特點：

1. 立體真實：與2D 相比，3D化圖形能夠表現(xiàn)更為逼真的立體效果。
2. 形態(tài)豐富：3D可以表現(xiàn)更豐富、更復(fù)雜的形態(tài)，展示更多細節(jié)，也可以實現(xiàn)一定互動性。

從以上兩點來說，3D的表現(xiàn)更接近我們的感知，更具有視覺沖擊力。

在B端金融產(chǎn)品設(shè)計中，3D元素可用于Web端首頁、App端引導(dǎo)頁等需要體現(xiàn)較強視覺沖擊力的地方，以提升頁面的高級感。

3D化的圖標在工作臺、運營工具箱等頁面中也大放異彩。另外，可視化大屏的設(shè)計也在往3D方向延展。

在項目中，我們把3D動畫應(yīng)用在App引導(dǎo)頁中，突破了傳統(tǒng)金融B端產(chǎn)品的視覺風(fēng)格，給用戶帶來視覺沖擊，同時讓用戶更加聚焦產(chǎn)品的賣點。

未來，運營落地頁、運營彈窗等場景也會廣泛地應(yīng)用3D元素。從協(xié)同工作、提高效率及統(tǒng)一設(shè)計步伐的角度出發(fā)，建立3D組件庫也是我們必須且重要的任務(wù)之一。

二、數(shù)據(jù)可視化

處理數(shù)據(jù)一直以來都是B端產(chǎn)品的核心任務(wù)，在這個內(nèi)卷越來越嚴重的年代，數(shù)據(jù)可視化的任務(wù)變得愈發(fā)艱巨。

原始數(shù)據(jù)是抽象的、復(fù)雜的、枯燥的、專業(yè)的、不直觀的，那怎么樣能夠讓用戶快速獲取關(guān)鍵數(shù)據(jù)以做下一步?jīng)Q策呢？

數(shù)據(jù)的可視化的設(shè)計可以讓用戶聚焦于關(guān)鍵信息，改善用戶的工作效率，從而改變企業(yè)的運作效率。

基于數(shù)據(jù)可視化的需求來看，其優(yōu)勢是顯而易見的，可降低用戶在產(chǎn)品使用中的三大成本：

1. 降低識別成本：圖形圖像化的視覺語言可以使人本能地放下對數(shù)據(jù)的心理壓力，讓用戶更為輕松的理解。
2. 降低分析成本：數(shù)據(jù)與數(shù)據(jù)之間的關(guān)聯(lián)通過直觀的圖形表達，可降低分析其潛在關(guān)系的難度。
3. 降低溝通成本：圖解方式所承載的信息更為豐富，形式更深入人心，在人與人之間溝通中的認同感也更高。

(素材來自網(wǎng)絡(luò))

在B端金融產(chǎn)品設(shè)計中，數(shù)據(jù)可視化多見于PC 后臺的數(shù)據(jù)概覽、數(shù)據(jù)可視化大屏、后臺實時監(jiān)控、移動端后臺統(tǒng)計等。

未來在項目中，我們也計劃在理財產(chǎn)品介紹、資產(chǎn)視圖等場景中進行數(shù)據(jù)可視化探索與運用。

三、極光漸變

在滿足了B端產(chǎn)品設(shè)計底層需求的前提下，作為用戶你是否希望在使用產(chǎn)品時的感官體驗進一步提升呢？

無論對于設(shè)計師還是用戶而言，我們都希望產(chǎn)品既能保持功能層級的有序性，也能在視覺層面上加強通透性和質(zhì)感。

因此，過于強烈的漸變不再是趨勢，低調(diào)溫和、清新愉悅的視覺風(fēng)格逐漸流行?？紤]到B端用戶恰巧也需要這樣輕松、溫和的視覺環(huán)境，“極光漸變”就再適合不過了。

特點：

• 通透清新：輕量漸變多會選擇明度高、飽和度低的鄰近色，因此能很好地表達“呼吸感”。
• 輕量柔和：極光漸變與微漸變是同根同源的，其特點為漸變色彩鄰近，幅度輕柔，融合感和細膩感較強。
• 豐富層次：相比純色，極光風(fēng)格的柔和漸變背景在層次塑造上更有優(yōu)勢。

(素材來自網(wǎng)絡(luò))

在B端金融產(chǎn)品設(shè)計中，主要應(yīng)用于移動端的頁面或卡片背景強化，如導(dǎo)航欄、個人中心、彈窗、搜索框、標簽等；也可以運用在部分按鈕和質(zhì)感類圖標設(shè)計中，豐富頁面元素的色彩、強化光影變化。

四、情感化設(shè)計

在你的印象中，傳統(tǒng) B 端產(chǎn)品是不是比較枯燥、呆板呢？

原研哉曾提過一個理念：讓感官被重新發(fā)現(xiàn)。“設(shè)計師先不要急著畫草圖，而是先想想使用者的感受”。

其實，B端產(chǎn)品也在慢慢改變，使用B端產(chǎn)品的你也是一個富有感情的“人”，因此B端產(chǎn)品的設(shè)計不僅要理解用戶的使用習(xí)慣，更要考慮用戶的情緒感受和體驗。

有效的情感化設(shè)計有以下特點：

• 正向激勵：維持用戶的期待感、強化信任和愉悅感、提升驚喜和自豪感。
• 緩解負面：減少疑惑和焦慮、緩和用戶在使用過程中的受挫感。
• 有效引導(dǎo)：好的情感化設(shè)計，可以有效引導(dǎo)用戶的行為，讓用戶少走彎路。

在B端金融產(chǎn)品設(shè)計中，情感化設(shè)計可以體現(xiàn)在IP吉祥物在頁面中的應(yīng)用，如報錯、缺省頁中的輕松趣味性插圖，并結(jié)合富有人情味的文案增添溫度調(diào)節(jié)氛圍；平安數(shù)字口袋App已廣泛使用IP形象數(shù)小寶以強化產(chǎn)品的親和力，在缺省頁、流程引導(dǎo)中加入更多的情感化設(shè)計。

另外，輕量的社交如為團隊成員送上生日祝福、感謝信、互相添加成員印象等也是情感化設(shè)計的表達方式。

五、微動效

在用戶體驗設(shè)計中微交互變得日益重要，而絲滑的動效設(shè)計正是微交互的靈魂所在，即使只是微小的視覺提示或反饋，都是讓產(chǎn)品易于使用的關(guān)鍵。

在枯燥繁雜的B端頁面中，微動效已成為“頁面氛圍組”的實力擔當。

在頁面中，微動效從三個層面發(fā)揮影響力：

1. 提高連貫性：讓界面元素在業(yè)務(wù)流程中順暢地轉(zhuǎn)變與過渡，將用戶操作導(dǎo)向期望的任務(wù)結(jié)果，指導(dǎo)其進行復(fù)雜的操作。
2. 連接場景：在轉(zhuǎn)換場景的過程中扮演潤滑劑的角色，闡明場景之間的位置、層級與空間的關(guān)系。
3. 視覺吸引：聚焦用戶視線，將其注意力放在重要的事情上，從而起到信息傳達、提升識別度的作用，也帶給使用者感觀的享受。

在B端金融產(chǎn)品設(shè)計中，微動效適用于點擊反饋、加載等待、導(dǎo)航欄交互、重要功能入口、頁面背景氛圍營造等等。

當前在實際項目中微動效主要運用于頁面或組件加載等待、第三方過渡跳轉(zhuǎn)等場景，而頁面轉(zhuǎn)場等細節(jié)處則運用較少，后期會從這些細節(jié)方面入手使產(chǎn)品整體流暢度更高。

六、視頻應(yīng)用到B端產(chǎn)品中

伴隨著5G技術(shù)的全面普及、短視頻快速興起，用戶內(nèi)容消費呈碎片化、多元化，因此視頻化的內(nèi)容逐漸被用戶所喜愛。

特點：

1. 感受直觀：與圖文形式相比，視頻化類容感受會更直觀、更易于理解。
2. 易于閱讀：從展現(xiàn)形式來說，視頻比起文字和圖片更具先天優(yōu)勢，視頻化的內(nèi)容會更易于用戶閱讀和記憶。

在B端金融產(chǎn)品設(shè)計中，除了幫助用戶的操作手冊可以做成視頻，一些功能指引或介紹也可以做成短視頻形式，首次進入App端的引導(dǎo)頁可做成炫酷的視頻自動播放以代替靜態(tài)頁面，另外營銷類的H5也可以穿插一些視頻。

當前在Web端項目中新手指南已實現(xiàn)全部視頻化展示，App端也都已經(jīng)通過視頻的展示方式來介紹貸款、理財、票據(jù)產(chǎn)品，未來將會應(yīng)用到更多場景中。

七、小結(jié)

每年的設(shè)計趨勢似乎總有相似的地方，2022年則是在滿足B端用戶的美學(xué)需求的前提，更側(cè)重內(nèi)容和情感表達，并隨不同設(shè)備載體、新的技術(shù)而變化，為用戶提供最大程度的豐富體驗。

B端產(chǎn)品在使用體驗和視覺感受這兩個方面和C端產(chǎn)品接近，也就是我們最近經(jīng)常提到的“B端C化”的概念。

不過從設(shè)計師視角來看，不管是B端還是C端的設(shè)計趨勢，最終目的都是為了解決業(yè)務(wù)場景中遇到的問題，使用對象都是人，都應(yīng)該站在“人性”的角度考慮問題。

同時設(shè)計趨勢一直處于快速變化中，隨著時間的推移，未來還將迎來更多新技術(shù)。

作為設(shè)計師的我們，不管哪種趨勢受歡迎，最重要的是要找準自己熱衷和擅長的方向，學(xué)習(xí)并合理地運用到工作中，以產(chǎn)生最大的設(shè)計價值。

作者：WOWdesign，研究設(shè)計價值最大化，涉及用戶體驗、品牌體驗、空間體驗。

本文由 @WOWdesign 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于 CC0 協(xié)議。