亚洲aav,久久99精品久久久久久久不卡 ,国产一区二区三区在线观看精品

首頁

142024-10

做UI設計，為什么你總是沒有思路？

當我第一次踏足UI設計這一行業的時候，我認為，UI設計的終極目標就是打造最完美的用戶體驗，當時的我對很多“體驗不夠完美”的產品嗤之以鼻，覺得為什么這個地方的設計是這樣的，改成這樣或者那樣，豈不是更加友好。然而，在一次又一次的工作中，這些實戰的商業項目不斷地刷新了我的認知，讓我對UI設計這一崗位又有了更多更深的理解。

評論(0) 瀏覽(645)

052024-9

清晰展現關鍵信息，助力高效決策——數據圖表

鶴鶴

合理使用數據圖表可以幫助用戶更好地理解復雜的數據，提高用戶體驗和數據的可讀性。選擇合適的圖表類型并遵循最佳設計實踐是確保圖表有效傳達信息的關鍵。

數據圖表是一種非常重要的可視化工具，它能夠

幫助用戶更直觀地理解和分析數據。

借助于圖形化的手段，清晰、快捷有效的傳達與溝通信息。從用戶的角度，數據可視化可以讓用戶快速抓住要點信息，讓關鍵的數據點從人類的眼睛快速通往心靈深處。數據可視化一般會具備以下幾個特點：準確性、創新性、簡潔性。

作者：Miao_C
鏈接：https://www.zcool.com.cn/article/ZMTYzMjk4NA==.html
來源：站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

藍藍設計(m.73404.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan。

關鍵詞：UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數據可視化設計公司、用戶體驗公司、高端網站設計公司、銀行金融軟件 UI界面設計、能源及監控軟件 UI界面設計、氣象行業 UI界面設計、軌道交通界面設計、地理信息系統 GIS UI界面設計、航天軍工軟件 UI界面設計、醫療行業軟件 UI界面設計、教育行業軟件 UI界面設計、企業信息化UI界面設計、軟件qt開發、軟件wpf開發、軟件vue開發

評論(0) 瀏覽(629)

122024-7

C端和B端UI設計價值有何差異

鶴鶴

你是否曾好奇，為什么C端設計師的作品總是那么酷炫吸睛，而B端設計師的界面卻顯得相對低調內斂？這兩者之間，難道真的存在一條不可逾越的鴻溝，讓C端設計師對B端設計師產生偏見？

C端設計，追求的是極致的用戶體驗和視覺震撼，每一個細節都力求完美，讓人一眼就能被吸引。

而B端設計，更注重的是功能的完善和信息的清晰，它或許沒有華麗的外觀，但每一個功能、每一個布局都經過深思熟慮，確保用戶能夠高效、準確地完成工作。

今天，讓我們一起走進設計圈，深度剖析C端與B端設計師在設計價值上的差異與碰撞！看看這兩大陣營的設計師們是如何在各自的領域中發光發熱，又是如何相互借鑒、共同進步的！

PART 1

——————

UI設計師的價值在哪里？

UI（用戶界面）設計師在現代數字產品和服務中的角色至關重要，他們的工作直接影響著用戶體驗和產品的成功。UI設計師的價值主要體現在以下幾個方面：

1、用戶價值：

· UI設計師創建直觀且吸引人的界面，使用戶能夠輕松、高效地完成任務。

· 優秀的UI設計確保用戶界面響應迅速，操作流暢，減少用戶困惑和挫敗感。

· 設計師通過深入了解用戶需求和行為，優化用戶體驗，提高用戶滿意度和忠誠度。

2、商業價值：

· 優質的設計有助于提高產品的市場競爭力，吸引并留住用戶，從而增加銷售額和市場份額。

· 通過減少用戶流失率和增加用戶參與度，UI設計可以降低獲客成本，提高轉化率。

· 設計師的工作還涉及優化工作流程，提高內部效率，減少開發時間和成本。

3、項目價值：

· UI設計師在項目中扮演協調者的角色，確保視覺設計與產品目標、技術限制和用戶需求保持一致。

· 他們促進跨團隊合作，包括與產品經理、工程師、市場營銷人員等協作，以實現共同的項目目標。

4、品牌價值：

· UI設計師通過一致的設計語言和視覺風格來塑造和強化品牌形象。

· 他們確保所有數字產品和服務傳達出品牌的一致性和專業性，增強品牌的識別度和信譽。

5、創新價值：

· UI設計師推動設計趨勢和技術的應用，創造新穎的交互模式和視覺效果，提升產品的新穎性和吸引力。

· 他們探索新的設計解決方案，以適應不斷變化的技術環境和用戶期望。

6、溝通價值：

· UI設計師能夠清晰地向非設計背景的團隊成員解釋設計決策，確保所有人都對設計目標有共同的理解。

· 良好的溝通技巧有助于解決沖突，促進項目的順利進行。

綜上所述，UI設計師不僅提升了產品的外觀和感覺，更重要的是，他們通過設計促進了用戶與產品的有效互動，為企業創造了顯著的價值。

PART 2

——————

B端和C端的差異

什么是B端？什么是C端？

B端是business ，To B 全稱“To Business”，即面向企業用戶服務，在B端產品的設計中要符合商業組織的戰略要求，能滿足企業需求的產品，為企業服務，提升效率、降低成本等。例如：OA系統、FIR系統、財務系統、監控運維系統等。

C端是customer，To C 全稱“To Consumer”，即面向大眾消費者進行服務，主要為了滿足大眾的生活、娛樂、交流、出行、購物等等一些生活常見需求而產生的產品會承擔引流和轉化的任務。例如：滴滴、微信、小紅書、微博等。

以KPI考核系統和淘寶應用為例，我們可以更直觀地看到B端和C端設計價值的實際應用。

KPI考核系統

：提供清晰的績效衡量標準，幫助組織對齊戰略目標與日常運營，通過量化指標促進員工表現的優化，同時支持管理層作出基于數據的決策，增強資源分配的效率和效果。

這類后臺產品嚴格意義都屬于B端產品。還有最常見的后臺產品就是微信公眾平臺、京東云、阿里云等內部的ERP系統了。

B端產品設計的重心在于提升企業的生產力和競爭力，強調功能的全面性、數據的安全性和系統的穩定性，通過持續的技術支持和服務，幫助企業實現業務目標。

淘寶：

通過精細化的界面設計和智能化的推薦算法，為用戶提供了豐富多樣的商品選擇和個性化的購物體驗，成為了中國電商領域的領軍企業。

C端產品設計的核心是圍繞用戶需求和體驗展開，追求與用戶的深度連接，通過不斷創新和優化，提供既實用又愉悅的使用體驗。C端產品也有著充足的競品可以進行對比分析，前行的相對平順。

· B端重視功能輕體驗：

設計師應深入了解企業的業務流程和需求，與企業用戶保持緊密溝通。在設計過程中注重功能性和實用性的平衡，避免過度追求美觀而忽略實際需求。

· C端重視體驗輕功能：

設計師應關注用戶的心理和行為特點，從用戶的角度出發進行設計。注重用戶體驗和情感共鳴的營造，讓用戶在使用過程中感受到愉悅和滿足。

無論是B端還是C端設計，設計師都應注重細節和品質的追求。通過不斷學習和實踐，提升自己的設計能力和專業素養，為用戶帶來更好的體驗和價值。

PART 3

——————

B端與C端的設計價值差異

1、目標用戶群體：

· B端設計主要面向企業或組織中的專業用戶，如企業員工、管理層或特定業務領域的專家。這些用戶通常具有明確的業務目標和流程需求。

· C端設計則主要面向個人消費者，他們的需求更加多樣化和個性化，關注產品的易用性、美觀性和情感連接。

2、設計重點：

· B端設計更注重效率、功能和業務流程的整合。設計師需要深入了解企業的業務邏輯和用戶需求，確保產品能夠滿足企業的核心業務需求，提高工作效率。

· C端設計則更注重用戶體驗、情感連接和品牌形象。設計師需要關注用戶的情感需求和心理體驗，通過設計元素和交互方式激發用戶的積極情感，同時強化品牌形象和認知。

3、復雜性：

· B端產品往往涉及復雜的業務流程和大量的數據交互，設計師需要處理更多的界面元素和交互邏輯，確保產品在功能性和易用性之間達到平衡。

· C端產品則相對簡單，更注重直觀性和易用性。設計師需要確保用戶能夠輕松上手，快速完成目標操作。

4、個性化與定制化：

· B端設計通常需要考慮企業的定制化需求，根據企業的業務特點和流程進行個性化設計。設計師需要與企業保持密切溝通，確保設計方案能夠滿足企業的實際需求。

· C端設計雖然也注重個性化，但更多是通過提供多種選擇或自定義選項來滿足用戶的個性化需求。設計師需要關注用戶的偏好和習慣，提供符合用戶期望的設計方案。

5、設計迭代與更新：

· B端產品通常需要根據企業的反饋和市場需求進行頻繁的迭代和更新。設計師需要密切關注業務變化和用戶反饋，及時調整設計方案以滿足企業的需求。

· C端產品的迭代和更新則相對較慢，更多是基于市場趨勢和用戶需求進行逐步優化和改進。設計師需要關注市場變化和用戶需求的變化，持續優化設計方案以提升用戶體驗。

6、商業價值：

· B端設計的商業價值主要體現在提高企業的工作效率、降低運營成本、增強業務競爭力等方面。設計師需要通過設計創新幫助企業實現業務目標，提升企業的商業價值。

· C端設計的商業價值則主要體現在提升用戶體驗、增強品牌認知度、促進銷售等方面。設計師需要通過設計創新吸引和留住用戶，促進產品的銷售和品牌的發展。

PART 4

——————

B端和C端設計價值的衡量方法

1、商業屬性：

· 銷售額：通過統計產品的銷售額來衡量產品的市場占有率和收入增長率。

· 新客戶數與續費率：新客戶數反映了產品的市場吸引力，而續費率則反映了客戶忠誠度。

· 客戶流失率：客戶流失率越低，說明產品設計在保持客戶方面越成功。

2、工具屬性：

· 用戶活躍度：通過統計產品的日活、周活、月活等數據來衡量用戶活躍度。

· 功能使用頻次與滲透率：統計功能的使用頻次和滲透率，以了解用戶對功能的接受度和使用習慣。

· 穩定性和可靠性：通過統計產品的故障率、響應時間、修復時間等數據來衡量產品的穩定性和可靠性。

3、產品競爭力：

· 功能對比：對比產品與同類產品的功能點、功能優勢、功能創新等，以衡量產品的差異化和競爭力。

· 核心數據指標對比：對比產品與同類產品的核心數據指標，如審批效率、審批質量、審批成本等，以衡量產品在業務上的優勢和價值。

4、用戶滿意度：

· 用戶反饋：收集和分析用戶的反饋、評價、建議等，以衡量用戶對產品的滿意度。

· 用戶留存率、轉化率與推薦率：計算和分析用戶的留存率、轉化率、推薦率等數據，以衡量用戶對產品的忠誠度和推廣度。

1、用戶體驗：

· 可用性：評估產品是否易于使用、是否符合用戶習慣、是否能夠快速完成目標。

· 滿意度：通過用戶反饋、評價等方式了解用戶對產品的滿意度。

· 忠誠度：通過用戶留存率、復購率等指標衡量用戶對產品的忠誠度。

2、功能吸引力：

· 功能使用率：統計各功能的使用率，以了解用戶對功能的偏好和需求。

· 功能創新：評估產品功能是否創新、是否具有市場競爭力。

3、市場表現：

· 下載量與注冊量：通過統計產品的下載量和注冊量來衡量產品的市場吸引力。

· 活躍用戶數與用戶粘性：統計產品的活躍用戶數以及用戶的使用時長和頻率，以衡量用戶粘性和活躍度。

4、商業收益：

· 付費轉化率：對于收費產品，統計付費用戶的轉化率以衡量產品的盈利能力。

· 廣告收入：對于依賴廣告收入的產品，統計廣告點擊率和廣告收入以衡量產品的商業價值。

綜上所述，B端和C端設計價值的衡量方法都關注于產品的商業屬性、工具屬性（或用戶體驗）、產品競爭力以及用戶滿意度等方面。但在具體執行時，兩者在側重點和具體指標上可能存在差異。

PART 5

——————

如何提升B端C端產品的設計價值

1、用戶體驗：

· 可用性：評估產品是否易于使用、是否符合用戶習慣、是否能夠快速完成目標。

· 滿意度：通過用戶反饋、評價等方式了解用戶對產品的滿意度。

· 忠誠度：通過用戶留存率、復購率等指標衡量用戶對產品的忠誠度。

2、功能吸引力：

· 功能使用率：統計各功能的使用率，以了解用戶對功能的偏好和需求。

· 功能創新：評估產品功能是否創新、是否具有市場競爭力。

3、市場表現：

· 下載量與注冊量：通過統計產品的下載量和注冊量來衡量產品的市場吸引力。

· 活躍用戶數與用戶粘性：統計產品的活躍用戶數以及用戶的使用時長和頻率，以衡量用戶粘性和活躍度。

4、商業收益：

· 付費轉化率：對于收費產品，統計付費用戶的轉化率以衡量產品的盈利能力。

· 廣告收入：對于依賴廣告收入的產品，統計廣告點擊率和廣告收入以衡量產品的商業價值。

1、把握用戶需求與痛點：

· 用戶調研：通過用戶調研了解用戶的真實需求和痛點。

· 數據分析：利用數據分析工具挖掘用戶的行為模式和使用習慣。

2、提升用戶體驗：

· 設計創新：采用時尚、有創意的設計風格，提升產品的吸引力。

· 交互優化：優化產品的交互設計，使其更加符合用戶的使用習慣和心理預期。

3、提供個性化與社交化服務：

· 個性化推薦：基于用戶的行為和偏好提供個性化的推薦服務，提供用戶可定制的個性化內容和服務。

· 社交化服務：在產品中融入社交功能，增強用戶的互動性和參與感，提升產品粘性和用戶忠誠度。

4、注重產品易用性：

· 簡潔明了：確保產品的功能和操作流程簡潔明了，降低用戶的學習成本。

· 快速響應：優化產品的響應速度，確保用戶在使用產品時能夠得到快速、準確的反饋。

綜上所述，提升B端和C端產品的設計價值需要深入理解目標用戶、使用場景、產品功能以及業務需求等多個方面。通過不斷優化產品的功能、界面、交互以及服務等方面，提升用戶的使用體驗和滿意度，從而增加產品的競爭力和市場價值。

PART 6

——————

了解B端C端差異于設計工作的指導意義

1、明確設計目標：

· B端設計：設計目標通常與提高工作效率、優化業務流程、增強企業競爭力等相關。因此，設計師需要深入了解企業的業務需求和流程，確保設計能夠為企業用戶帶來實際的價值。

· C端設計：設計目標通常與提升用戶體驗、滿足個性化需求、增強用戶粘性等相關。設計師需要關注用戶的情感需求和使用習慣，通過設計吸引用戶并保持用戶的活躍度。

2、選擇適當的設計風格：

· B端設計：通常采用專業、簡潔的設計風格，注重信息的清晰度和界面的整潔度。設計師需要避免過于花哨的設計，確保用戶能夠高效地完成工作任務。

· C端設計：可以采用更加時尚、有創意的設計風格，注重色彩的搭配和動畫效果，以吸引用戶的注意力并提升用戶的情感體驗。

3、注重用戶研究：

· B端設計：需要深入了解企業用戶的業務需求和工作流程，與用戶進行深入的交流和溝通，以確保設計能夠滿足用戶的實際需求。

· C端設計：同樣需要關注用戶的研究，但更多地關注用戶的個人喜好、使用習慣和情感需求，以便設計出更符合用戶期望的產品。

4、優化交互體驗：

· B端設計：需要注重界面的清晰度和功能的易用性，確保用戶能夠快速地找到所需的功能并完成工作任務。同時，設計師還需要考慮如何減少用戶的操作步驟和降低學習成本。

· C端設計：同樣需要優化交互體驗，但更多地關注用戶在使用過程中的情感體驗和娛樂性。設計師可以通過有趣的動畫效果、個性化的提示等方式來提升用戶的滿意度和忠誠度。

5、考慮盈利模式：

· B端設計：在設計過程中需要考慮產品的盈利模式，確保設計能夠為企業帶來實際的經濟利益。設計師可以通過提供增值服務、定制服務等方式來增加產品的附加值。

· C端設計：雖然不直接涉及盈利模式的設計，但設計師需要關注如何通過設計吸引用戶并保持用戶的活躍度，從而為企業的盈利創造有利條件。

6、注重行業特性

：

· B端設計：具有明顯的行業特性，設計師需要深入了解所服務行業的業務特點、競爭態勢等，以便設計出更符合行業特點的產品。

· C端設計：雖然不直接受行業特性的限制，但設計師也需要關注不同用戶群體的需求和偏好，以便設計出更具普適性的產品。

PART 7

——————

B端開源組件分享

設計B端后臺，必須搞清楚這些組件~

如果組件庫服務的是 B 端或者中后臺系統，那其實有很多可參考的開源組件框架：Ant Design、ElemetUI、Layui 等，注意不同的框架用到的前端技術不一樣，兼容的瀏覽器版本也不一樣，這要根據你們技術情況做選擇。如果覺得開源框架的風格和你們的產品不統一，那就需要二次設計和開發封裝。

推薦幾個官方組件庫：

餓了么官方組件庫：https://element.eleme.cn/#/zh-CN/component/installation

螞蟻金服官方組件庫：https://ant.design/docs/spec/introduce-cn

layui 官方組件庫：https://www.layui.com/admin/std/dist/views/

阿里官方組件庫：https://fusion.design/component/doc/102

iviewui官方組件庫：https://www.iviewui.com/components/menu

做之前大家一定要去多去查看這些大廠做的已成型的開源組件庫，然后再結合工作業務特色做出自己公司特有的定制化組件庫。有了組件庫之后，再接到緊急需求，我們就可以做到事半功倍的效果。先去分析頁面的構成，然后花費 80% 的時間去設計需求中 20% 的頁面，剩下的通用型頁面就可以直接用組件庫堆出來了。

作者：ppone_
鏈接：https://www.zcool.com.cn/article/ZMTYyNTQ1Ng==.html
來源：站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

評論(0) 瀏覽(921)

082024-7

國外電商產品如何通過UI設計提高轉化率

濤濤

今天給大家帶來一篇干貨滿滿的譯文，雖然國外的產品不一定符合國內的用戶與環境，但是有些觀點確實讓我受益匪淺，來看看吧

評論(0) 瀏覽(980)

052024-7

教你電商APP商品詳情頁設計套路！UI／UE必須懂的營銷設計思維！

濤濤

認識、信任、戀愛、結婚——商品詳情頁轉化四部曲！

評論(0) 瀏覽(1300)

042024-3

簡潔之美，細節成就卓越：打造極致移動端彈窗體驗

博博

細節成就卓越，從精致彈窗設計開始。

在移動端應用的世界里，彈窗不僅是信息傳遞的橋梁，也是用戶體驗的微妙觸點。一個精心設計的彈窗能夠在正確的時刻捕捉用戶的注意力，以一種既美觀又功能性強的方式提供必要信息或引導用戶操作。從視覺清晰度到操作簡便性，再到出現的時機和頻率，每一個細節都關乎著用戶對應用的整體感受和滿意度。讓我們一起探索如何通過細致入微的設計思考，打造既符合業務目標又讓用戶感到愉快的移動端彈窗，提升體驗，創造細節之美。

作者：Miao_C
來源：站酷

藍藍設計(m.73404.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。

關鍵詞：UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數據可視化設計公司、用戶體驗公司、高端網站設計公司

銀行金融軟件 UI界面設計、能源及監控軟件 UI界面設計、氣象行業 UI界面設計、軌道交通界面設計、地理信息系統 GIS UI界面設計、航天軍工軟件 UI界面設計、醫療行業軟件 UI界面設計、教育行業軟件 UI界面設計、企業信息化UI界面設計、軟件qt開發、軟件wpf開發、軟件vue開發

評論(0) 瀏覽(1153)

042024-3

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

博博

說到B端后臺產品，我們會想到業務復雜、信息龐大、用戶角色多、頁面層級深、使用門檻高等特征。這些特征讓后臺產品在設計時更強調“簡單直接”，無需多余的設計元素，相比之下，沒有C端產品有趣。而作為B端后臺設計師在工作中會面臨很多復雜場景的設計需求，有時候需求方未必能理解設計理念，會讓設計師陷入“頭禿”的狀態。針對B端后臺產品某些體驗問題，我們可以借助動效的力量去解決。

下面將結合工作經驗，以及線上文章，分享如何利用動效來提升B端后臺產品的體驗。

主要分為兩大塊：

使用動效不是為了炫技，而是輔助解決設計中發現的問題。我們要思考的是，眼下的問題結合動效能否達到1+1>2的解決效果。設計方案除了要得到需求方的認可，還要有開發團隊的支持。設計師做到從痛點中出發，于可行處落地，才是有效的設計。那什么場景下的問題可以考慮結合動效呢?

1、信息量折疊收納

B端業務的復雜程度決定了產品的信息體量，這也考驗著設計師設計頁面時，能為用戶在有限的空間里獲取多少信息。舉個例子，用戶的辦公設備是小型筆記本，它的屏幕小，用戶一屏看到的內容有限。這時需求方建議減少留白，壓縮空間，信息往上堆積，頁面最后會擁擠不堪。龐大的信息體量力求對用戶的吸收效率，也對設計造成困擾，針對這種情況我們可運用“折疊收納”法

應用案例1: 按鈕折疊

如果一個頁面的按鈕太多，可“折疊”按鈕。以下面的科目樹為例，每個科目有若干個功能按鈕，如按鈕全部展示，不利于用戶聚焦重要信息。用戶必定是先看科目標題，如有需要才對科目進行操作，基于這個思路可把按鈕折疊起來，待用戶鼠標懸浮至科目才出現按鈕。在恰當的場景下將按鈕折疊，有助于精簡頁面結構。一個頁面按區域劃分功能區和信息區，信息區被文案鋪滿了，可簡化功能區的表現形式。比如按鈕和解釋文案，可對解釋文案進行收納，用戶鼠標懸浮上去顯示。對于用戶來說，一個按鈕的含義只要使用一次便清楚。

應用案例2: 內容折疊

B端后臺因信息量大有很多長頁面，這時可在用戶進行頁面滾動瀏覽時，根據用戶滾動的內容進行折疊。如下的篩選項占據了頁面頭部一定的空間，用戶滑到結果列表內容時，已選項固定在頂部精簡展示。

小結:通過“折疊收納法”優化頁面布局，根據用戶的操作行為給予內容變化，幫助用戶降低信息量過大帶來的閱讀疲勞，也讓設計師在有限的設計空間里“堆積”信息。

2、對路徑進行引導，及時給與用戶反饋，提高效率

B端產品會有極其復雜的功能，這些功能通常用步驟條來拆分，引導用戶分步完成。面對復雜功能。需求方希望

在頁面的各個位置添加用法提示文案。但用戶并不想閱讀一串串文字，這時可結合用戶的操作行為，及時響應引導下一步操作。

應用案例1:

操作響應如下的這個頁面需要用戶把左邊的字段拖拽到右邊生成卡片。當用戶拖拽時，給予動效反饋讓用戶感知字段拖拽方向。這種可視可感知的方式幫助用戶快速掌握用法，提升效率。

應用案例2:引導響應

在工作中我們也許會接到類似的修改需求:“按鈕不夠突出，不夠大，要又大又突出”。你看完后心里想:“還不夠突出嗎，要這么大干什么呢?”這時沉住氣，分析修改的根本目的，它想要突出的目的是什么?

1、這個按鈕在整個頁面中承載極其重要的功能，視覺上用戶需立刻注意到2、點擊按鈕后的內容十分重要，希望增強點擊欲。

當用戶鼠標懸浮至按鈕時，及時響應引導，一個箭頭既起到醒目作用，也引導著用戶去往下一步。

小結: B端后臺頁面信息繁雜，功能多。通過動效幫助用戶在使用過程中增強反饋和引導，正確的引導能縮短用戶的操作路徑，提升效率。

3、增加情感化體驗

B端后臺產品大部分是給專業人員使用的，信息表單居多，頁面內容相似，比較單調。加入適當友好的情感化式效可以提升產品的趣味性，減少用戶使用的倦怠感。

應用案例1: Loading動效

常規的Loading動效通常是一個圓在轉圈，當用戶面對長時間加載時，一直盯著一個圈會產生焦慮感。情感化Loading動效可總結為兩類:

1、產品本身有一個IP形象，可圍繞IP進行創作。例如“加薪貓”，加載的時候貓咪追著錢幣奔跑，增加了跑步流汗的細節，提升它已經在努力加載的形象感;

2、根據Loading的文案進行拓展設計，提取文案元素，圖形場景化，分散用戶等待的焦慮。

應用案例2:化抽象為形象

有些B端產品的業務背景專業而又抽象，可借助動效的力量化繁為簡，化抽象為形象。以下面數據字典為例。用通過該字典進行與業務相關的字段查詢。該頁結構較簡單:搜索欄和熱詞入口。我結合模塊名稱，對特征進行具體物化，在頁面加入字典和放大鏡元素。通過物化讓用戶快速感知該模塊的作用。類似的大入口頁面也可以運用3D效果，它能讓物化更加立體。

比較常用的動效設計工具有: Ae、Principle、ProtoPie。這里分享一下我在工作中常用的并能解決大部分問題的工具。

1、Principle:快速制成交互動效演示Demo

Principle是一款只能用于Mac OS系統的交互設計工具，它的操作界面跟Sketch類似，學習成本較低。它搭配Sketch使用，能對界面做轉場過渡動效和一些細節的交與動效。當你想提出某個交互動效提案時，可用Princidle快速制成演示Demo，導出GIF或視頻給到需求方，讓他們快速明白你的想法及可行性后臺界面演示demo可直接選擇箭頭光標，呈現效果更貼合真實場景。

2、After Effect: 適合各種場景下的動效制作

AE是絕大UI設計師必備的動效制作工具。它支持Mac OS和Windows系統，其自身有著強大而豐富的特效庫?，F在也能通過AEUX插件，把Sketch里的圖層直接導入到AE使用。AE的功能大而全，日堂工作中多用干制作情感化需要的圖形動效，比如Loading、lcon點擊動效等等。

小結: 設計師需要學習和掌握的軟件很多，軟件更新迭代的速度也很快。可選擇能解決工作中絕大設計需求的軟件精學，其余可在空閑時作為知識技能儲備來學習。

總結

做適合的動效為B端產品體驗賦能

當你在設計一款從0-1或是重構的B端后臺產品，你可重新定義設計風格、規范控件。當你是半途介入一款風格規范都已相當成熟的B端產品，通常遇到的問題較為繁瑣，可能是對一個按鈕、一個顏色、一句文案去精打細磨。這時設計師需提升產品全局觀，在設計過程中對遇到的問題層層剖析，洞悉設計的發力點，并在恰當的場景下緊貼產品特性和業務需求，提出恰到好處的動效方案，以小點出發，真正為產品的體驗賦能。

作者：CNLILY
來源：站酷

評論(0) 瀏覽(1139)

042024-3

用視覺策略助力產品客戶價值傳達

博博

視覺策略：場景圖形化

我們知道對于 PaaS 類產品而言，產品的客戶價值傳遞是非常重要的，它決定著產品的增長獲客、銷售收入等。然而視覺設計師有時候會對所能提供的價值而感到方法有限，在完成了基本的頁面布局、層級、組件的構建之外還能做些什么幫助產品傳遞客戶價值。我們嘗試為大家介紹一個設計方法“場景圖形化設計”。

場景圖形化設計是什么？

其實場景圖形化的概念非常簡單，它的核心點在于一方面將我們希望傳達給用戶的信息進行情境或情節的場景化構建，另一方面則是將構建好的場景通過圖形化的方式進行視覺表達。那么為什么它可以幫助我們進行客戶價值的傳遞？我們先簡要的分析下它的原理。

場景圖形化的原理

一般情況下我們認為用戶產生某個行為背后的原理是，用戶接受一個情境的刺激，然后會根據已有的認知經驗去產生一個主觀的期望效果，并產生與之對應的行為，行為產生的結果反饋又會成為認知經驗，從而對下次行為產生影響。

用戶行為原理

而場景圖形化就是在情境刺激這個階段，通過將業務概念場景化或者情境化，然后用圖形的方式去表達場景或情境來增強客戶受到的感知，影響他的主觀認知，從而更好的促進后續的行為。因為人類是視覺動物，圖像對我們的吸引力是遠大于文字的，將復雜、艱深的業務概念通過圖形的形式表達出來，相比單純的文字描述有著巨大的優勢。

圖形化設計優勢

場景圖形化的項目實踐

在了解到場景圖形化的含義和原理之后，我們接著來看在（小程序平臺）這個 PaaS 產品里我們是如何運用這個方法的。

1.業務場景圖形化，傳遞產品客戶價值

其實在 B 端的視覺設計中圖形化的表達方式已經屢見不鮮。但是在 PaaS 產品中，我們認為左側這種常見的抽象化的表達形式其實并不適合，它雖然能夠滿足本能層和反思層的設計表現，但是在降低業務理解門檻這個需求上并不能提供足夠的幫助，或者可以說情境刺激的強度不夠。

象化的圖形設計方式在于把抽象的、看不見的事物通過提取、轉化等形式變得看的見、容易理解。這顯然更加符合我們希望增強情境刺激的效果，當然抽象化的表達方式在營造氛圍和表達一些同樣的抽象概念時也有自身優勢，綜合來看我們決定以具象化為主、抽象化為輔的形式來進行核心情境的圖形化表達。

以（小程序平臺）控制臺概覽頁為例，在這個場景里我們希望客戶能夠快速地了解并體驗小程序平臺的兩個核心價值點，于是我們把這兩個價值點梳理成了兩個場景，那么相對應的我們就需要將這兩個場景進行圖形化。

首先我們需要拆解文案中的描述，將文案轉化為一個情境描述，這也需要交互設計師配合在文案設計階段，就采用相同的設計方法首先將文案場景化。當然如果是一個非場景化的文案，我們也可以試著將它情境化。

接下來，我們根據轉述好的情境來構建整個畫面元素，在這里我們將畫面分為了主體區和背景區，來表達重點的標題和次重點的正文。在實際操作中也可以根據現實情況來靈活調整。

完成圖形的構建后，在質感選擇上因為希望映射現實世界，所以我們放棄在質感上過多修飾，使用了一些寫實的金屬、塑料、玻璃質感來營造整個場景氛圍。

最后運用相同的設計方法完成這個場景的圖形化構建。

以上的思路就是一個典型的場景圖形化的設計方法。從圍繞文案的拆解來構建圖形元素，到映射現實實體的質感表達我們的目的都在于讓場景變得更加生動更加可理解易理解，從而最大限度的對客戶進行情境刺激。秉承這個思路，我們在產品的整個用戶路徑中，對于關鍵場景都采用了這種圖形化的表達方式。

2.品牌傳遞融入場景，構建品牌認知

接下來從品牌維度來看，品牌價值是客戶價值在品牌側的體現，品牌價值的構建對客戶價值傳遞有極大的幫助。我們希望客戶在理解到產品的客戶價值后，可以進一步的記憶它。針對這個維度，我們的想法是在場景圖形化在搭建中融入和露出品牌，同時貫穿整個用戶路徑，一方面潛移默化完成品牌認知構建，另一方面增強客戶價值的記憶。