將B端設計C化，組件庫建立與通用樣式

Sponsor

B端設計的文章和資料參考，缺少系統性的說明，這是我總結第四篇。本文主要闡述——組件庫建立、B端C化、通用樣式！可交流查缺。

一、引言

隨著互聯網的飛速發展，B端（Business to Business）設計在現代商業世界中扮演著愈發重要的角色。B端設計主要關注的是企業與企業之間的交互體驗，以提升商業效率為核心目標。本文將深入探討B端設計的基礎理念，通用樣式，并舉例闡述B端C化（在常用組件庫基礎上進行多樣化設計）。我將盡量詳盡而精煉地進行闡述。希望可以幫助各位設計師更好的建立個人組件庫，也作為我個人的總結學習。

再次：本文為樣式篇的開端，所以會把組件庫的概念和B端C化集合進本篇描述?？梢岳斫鉃椋航M件庫建立&B端C化——通用樣式

二、B端設計的基礎理念

B端設計的基本理念主要包括以下幾個方面：

以業務為中心：B端設計的核心是為企業提供解決方案，因此設計始終以業務需求和目標為出發點。設計師需要深入了解企業的業務流程和需求，并以此為基礎進行設計。

用戶體驗與業務目標平衡：雖然B端設計以業務為中心，但用戶體驗同樣重要。設計師需要在滿足業務需求的同時，保證產品的易用性和用戶滿意度。良好的用戶體驗有助于提高用戶的工作效率和滿意度，從而促進業務目標的達成。

簡潔高效：B端產品通常面向企業用戶，他們對產品的效率和簡潔性有更高的要求。因此，B端設計應注重簡潔高效的界面設計，避免不必要的復雜度和冗余功能。

可定制性：每個企業的業務需求和流程都可能有所不同，因此B端設計需要具備一定的可定制性。設計師需要提供靈活的設計方案和組件，以滿足不同企業的個性化需求。

數據驅動決策：B端設計需要注重數據的收集和分析，以數據為依據進行設計決策。通過數據分析，設計師可以了解用戶的需求和行為，從而優化產品設計和用戶體驗。

安全性和穩定性：由于B端產品通常涉及到企業的核心數據和業務，因此安全性和穩定性是B端設計的關鍵要素。設計師需要在設計方案中充分考慮安全性和穩定性因素，確保產品能夠在各種場景下穩定運行。

三、B端產品的設計過程

初始化階段：這個階段主要是確定產品設計的目標和方向，包括了解市場需求、分析競爭對手、明確產品定位等。在這個階段，設計師需要深入了解B端用戶的需求和痛點，為后續的設計提供依據。

方案設計階段：在這個階段，設計師會根據初始化階段的結果，進行產品方案的設計。這包括產品功能的規劃、界面的設計、交互邏輯的制定等。設計師需要在這個階段中，將用戶需求轉化為具體的產品設計方案。

原型驗證階段：在這個階段，設計師會制作出產品原型，通過用戶測試和反饋，驗證產品設計的合理性和可行性。這個階段的目的是發現問題并進行優化，確保產品設計能夠滿足用戶的真實需求。

迭代優化階段：在經過原型驗證后，設計師會根據用戶反饋和測試結果，對產品設計進行迭代優化。這個階段是一個不斷循環的過程，設計師需要持續改進產品設計，直到滿足用戶的期望和需求。

上線運營階段：在這個階段，產品設計已經基本完成，開始進入上線運營階段。設計師需要在這個階段中，持續跟蹤產品的運營情況，發現問題并及時進行優化，確保產品能夠順利運營并滿足用戶需求。

四、B端C化的必要性

B端產品界面設計多樣化且樣式更加偏向于C端產品的必要性主要體現在以下幾個方面：

提升用戶體驗：B端產品的用戶通常是企業或組織，與C端產品的用戶相比，他們對產品的使用頻率和依賴性可能更高。因此，B端產品的界面設計多樣化且樣式更加偏向于C端產品，可以提升用戶體驗，增加用戶對產品的好感度和黏性，從而提高用戶的工作效率和滿意度。

適應市場需求：隨著企業級市場的競爭加劇，B端產品也需要不斷適應市場需求的變化。界面設計多樣化且樣式更加偏向于C端產品，可以使B端產品更加符合現代審美和流行趨勢，從而吸引更多的用戶和市場份額。促進品牌認知度：B端產品的品牌認知度對于企業級市場的競爭至關重要。通過界面設計多樣化且樣式更加偏向于C端產品，可以使B端產品的品牌形象更加鮮明、個性化，從而增強品牌認知度和競爭力。

增加產品差異性：在B端市場中，產品同質化現象比較嚴重，很多產品的功能和性能都相似。通過界面設計多樣化且樣式更加偏向于C端產品，可以增加產品的差異性，使產品在市場中脫穎而出，從而吸引更多的用戶。

總之，B端產品界面設計多樣化且樣式更加偏向于C端產品，可以提升用戶體驗、適應市場需求、促進品牌認知度和增加產品差異性，對于B端產品的市場競爭力和成功至關重要。

五、B端C化的過程

B端C化的過程主要包括以下幾個步驟：
需求分析：首先，需要對企業的業務需求進行深入分析。這包括了解企業的業務模式、目標用戶、市場趨勢等，以確定B端C化的必要性和可行性。

用戶體驗研究：在B端C化的過程中，用戶體驗是至關重要的。因此，需要進行用戶體驗研究，了解目標用戶的需求、習慣和痛點。這可以通過用戶訪談、問卷調查、用戶觀察等方法來實現。

產品設計：基于需求分析和用戶體驗研究的結果，開始進行產品設計。這包括確定產品的功能、界面、交互等。在設計過程中，需要將C端的設計理念融入到B端產品中，使其更加符合目標用戶的需求和期望。

技術開發：根據產品設計，進行技術開發。這包括前端和后端的開發，以及與其他系統的集成。在開發過程中，需要注重產品的性能、穩定性和安全性。

測試與優化：完成開發后，進行產品的測試。這包括功能測試、性能測試、安全測試等。根據測試結果，對產品進行優化和改進，確保其滿足需求和用戶體驗。

上線與推廣：經過測試和優化后，產品可以上線。在上線后，需要進行推廣，吸引目標用戶。這可以通過線上廣告、社交媒體、合作伙伴等渠道來實現。

持續迭代：隨著市場和用戶需求的變化，產品需要持續迭代。這包括收集用戶反饋、分析數據、優化產品等。通過持續迭代，確保產品始終保持競爭力和吸引力。

六、常用組件庫分析

6.1Arco.Design 組件庫

1.設計語言與風格

現代化：Acro.Design遵循現代設計原則，注重簡潔、清晰的設計風格，為用戶提供直觀的操作體驗。

一致性：Acro.Design也強調設計的一致性，通過統一的設計語言，確保界面的一致性和連貫性。

2. 組件種類與特性

豐富且實用：Acro.Design提供60+以上的高質量組件，涵蓋了基礎布局、數據展示、表單、導航等多個方面，滿足開發者多樣化的需求。

靈活配置：組件提供了靈活的配置選項，可以根據項目需求進行個性化設置，實現組件的多樣化展示和交互。

3. 技術特性

跨框架支持：Acro.Design不僅支持React，還提供了Vue等主流框架的支持，讓更多開發者能夠方便地使用該組件庫。

性能優化：組件庫注重性能優化，通過合理的代碼組織和加載策略，確保組件加載迅速，不對應用性能造成負擔。

4. 定制與擴展性

樣式定制：Acro.Design允許開發者自定義組件的樣式，可以通過覆蓋默認樣式或添加自定義樣式，實現組件的視覺定制。

組件擴展：組件庫提供了擴展機制，開發者可以基于現有組件進行二次開發，擴展組件功能，滿足特定業務需求。

5. 社區支持與生態

活躍社區：Acro.Design也擁有一個活躍的開發者社區，開發者可以在社區中交流經驗、解決問題，并共同推動組件庫的發展。

持續更新：組件庫保持持續的更新和迭代，不斷引入新的組件和特性，與時俱進地滿足開發者的需求。

6. 國際化與可訪問性

國際化支持：Acro.Design也提供了國際化支持，可以幫助開發者輕松實現多語言界面的開發。

可訪問性考慮：在組件設計中，Acro.Design同樣注重可訪問性，采用合適的顏色對比和無障礙交互設計，確保所有用戶都能夠順暢使用產品。

總結

6.2Element UI 組件庫

Element UI組件庫是一套基于Vue.js框架的組件庫

1. 組件豐富度?Element UI 提供了非常豐富的組件，包括布局、導航、數據錄入、數據展示等多方面的組件。這些組件可以滿足大部分Web應用的開發需求。

2. 設計風格?Element UI的設計風格偏向簡潔大氣，注重用戶體驗。色彩運用得當，使界面看起來清晰明了，提升了用戶的使用體驗。

3. 易用性?Element UI的組件都是基于Vue.js開發的，與Vue.js的集成非常好，開發者可以很容易地在Vue.js項目中使用Element UI。同時，Element UI的API設計簡潔明了，易于理解和學習。

4. 定制性?Element UI支持一定程度的定制，開發者可以通過修改樣式、配置參數等方式來定制組件的外觀和行為，使其更符合項目的需求。

5. 文檔和社區支持?Element UI有完善的文檔和活躍的社區，為開發者提供了良好的學習資源和支持。無論是新手還是老手，都可以從Element UI的文檔和社區中獲得幫助。

6. 性能?Element UI注重性能優化，其組件在保證功能豐富和易用性的同時，也具有良好的性能表現。即使在復雜的應用場景中，也能保持流暢的用戶體驗。

7. 國際化?Element UI支持國際化，可以為不同語言環境的用戶提供相應的界面展示，滿足全球化的需求。

總結

6.3Ant Desigan 組件庫

1. 設計語言與風格

統一性：Ant Design基于阿里巴巴的設計語言，確保了設計的統一性和一致性。這種一致性有助于團隊協作，并減少設計師和開發者之間的溝通成本。

簡潔與直觀：該設計語言注重簡潔性和直觀性，確保用戶能夠迅速理解界面，高效地完成操作。

2. 組件種類與功能

豐富性：Ant Design提供了大量的組件，包括基礎布局、表單、數據展示、導航等，幾乎覆蓋了所有常見的UI需求。

高度可配置：這些組件都是高度可配置的，開發者可以根據具體需求調整顏色、大小、行為等，確保組件與業務場景完美匹配。

3. 技術特性

基于React：Ant Design是基于React開發的，這意味著它充分利用了React的生態系統和特性，如組件化、狀態管理等。

TypeScript支持：Ant Design使用TypeScript開發，為開發者提供了強大的類型檢查和自動補全功能，提高了開發效率和代碼質量。

4. 定制與擴展

主題定制：Ant Design允許開發者進行深入的主題定制，從色彩到邊距，每一個細節都可以根據品牌需求進行調整。

組件擴展：除了提供的默認組件，Ant Design還提供了一套清晰的擴展機制，開發者可以基于現有組件創建自己的組件，滿足特定需求。

5. 社區與生態

活躍的社區：Ant Design背后有一個龐大的開發者社區，這意味著無論遇到任何問題，都能快速找到解決方案或得到社區的支持。

豐富的插件與擴展：社區中還有大量的第三方插件和擴展，進一步豐富了Ant Design的功能和應用范圍。

6. 國際化與可訪問性

多語言支持：Ant Design內置了多語言支持，可以輕松實現產品的國際化。

可訪問性：在組件設計中，Ant Design也考慮到了可訪問性，確保產品對所有用戶都是友好的。

總結

6.4如何選用適合自己產品的組件庫？

首先需要對對B端組件庫“Ant Design組件庫”、“acro.Design組件庫”和“Element UI組件庫”進行對比分析

以下是對這三個B端組件庫的對比分析，從設計、功能、易用性、定制性、社區支持等角度進行評估。

1. 設計

Ant Design組件庫：基于阿里巴巴的設計語言，注重統一性和高質量的設計規范。設計風格偏向成熟、大氣。

arco.Design組件庫：追求現代化設計，注重簡潔、清晰的設計風格，強調設計的一致性和連貫性。

Element UI組件庫：設計風格簡潔大氣，色彩運用得當，注重用戶體驗。

2. 功能

Ant Design組件庫：提供豐富的組件，覆蓋各種復雜場景的需求，成熟且廣泛應用。

arco.Design組件庫：提供60+以上的高質量組件，滿足多樣化的需求，同時保持組件的輕量級。

Element UI組件庫：也提供豐富的組件供開發者使用，滿足大部分Web應用的開發需求。

3. 易用性

Ant Design組件庫：雖然提供了豐富的組件和文檔，但對于初學者來說，仍存在一定的學習曲線。

arco.Design組件庫：API設計簡潔明了，易于理解和學習，開發者可以更容易地上手。

Element UI組件庫：與Vue.js集成良好，API設計簡潔，易于在Vue.js項目中使用。

4. 定制性

Ant Design組件庫：允許深入的定制，可以根據企業需求進行個性化定制。

arco.Design組件庫：也支持定制，開發者可以自定義組件的樣式，并基于現有組件進行二次開發。

Element UI組件庫：支持一定程度的定制，開發者可以通過修改樣式、配置參數等方式來定制組件。

5. 社區支持

Ant Design組件庫：擁有龐大的開發者社區，提供豐富的插件和擴展，遇到問題時容易得到社區的支持。

arco.Design組件庫：也有活躍的社區，但相對于Ant Design來說，規模稍小。

Element UI組件庫：同樣有完善的文檔和活躍的社區，為開發者提供良好的學習資源和支持。

總結

例：公司新平臺的設計我會在acro.design組件庫的基礎上去搭建，然后進行擴展完善組件。但公司另外一款B端產品由于開發團隊使用技術以及平臺用戶、誕生時長等會去使用Element UI組件庫。

6.5如何使用

UI設計師使用組件庫一般包括以下步驟：

1.了解組件庫：首先，UI設計師需要了解組件庫中包含哪些組件，以及每個組件的功能和特性。這可以幫助設計師更好地應用組件庫中的組件，提高工作效率。

2.選擇合適的組件：在設計過程中，UI設計師需要根據設計需求，從組件庫中選擇合適的組件。例如，如果需要設計一個按鈕，設計師可以從組件庫中選擇相應的按鈕組件。

3.定制化設計：雖然組件庫中的組件具有一定的通用性，但在實際設計中，設計師可能需要對組件進行一定的定制化設計，以滿足具體的設計需求。例如，調整組件的顏色、大小、樣式等。

4.組合使用組件：在設計復雜的界面時，UI設計師可能需要組合使用多個組件。設計師需要了解組件之間的搭配關系，確保組件的組合能夠呈現出和諧、統一的設計風格。

5.更新和維護組件庫：隨著設計的不斷迭代和進步，UI設計師可能需要對組件庫進行更新和維護。例如，添加新的組件、優化現有組件的功能和性能等。這有助于保持組件庫的活力和可持續性。

6.6組件庫地址

arcoo.Design組件庫

??https://arco.design/react/components/button

Ant Design組件庫

??https://ant-design.antgroup.com/components/button-cn

Element UI組件庫

??https://element.eleme.cn/#/zh-CN

七、B端設計組件庫中的基礎樣式有哪些？如何進行設計呢？

7.1B端設計組件庫中的基礎樣式（以Arco.design為例）

1.顏色

在B端組件庫中，顏色是傳達品牌信息、引導用戶注意力和提升界面美觀度的關鍵元素?；A顏色樣式通常包括主色調、輔助色調和中性色調。主色調通常代表品牌的核心識別，輔助色調用于強調和區分，而中性色調則用于提供背景和平衡。好的顏色設計能在視覺上提供愉悅的體驗，同時也能加強品牌識別和用戶操作引導。

2.字體

字體在B端組件庫中扮演著傳遞信息和增強品牌氣質的角色?；A字體樣式通常包括標題字體和正文字體，以及不同的字體大小和粗細。字體的選擇應注重易讀性和辨識度，確保在各種設備和屏幕尺寸下都能清晰展示。同時，字體的風格和氣質應與品牌形象相符合，無論是現代、簡約還是專業、嚴肅，都應通過字體得到體現。

3.陰影

陰影在B端組件庫中是用來表現界面元素層次感和立體感的重要手段?；A陰影樣式通常包括不同類型的陰影效果，如下拉陰影、浮起陰影等。通過巧妙運用陰影，可以清晰地展示出界面元素的層級關系，引導用戶的視覺焦點，并增強界面的立體感和深度。但需要注意的是，陰影的使用應當適度，過多的陰影效果可能會導致界面顯得混亂。

4.光標

光標在B端組件庫中是用戶與界面交互的關鍵指示器?；A光標樣式通常包括默認光標、指向光標和點擊光標等。光標的設計應注重可見性和直觀性，以便用戶能準確理解其指向和操作對象。例如，指向光標通常用于提示用戶可點擊的元素，而點擊光標則用于確認用戶的點擊操作。通過優化光標設計，可以有效提升用戶界面的交互體驗。

7.2基礎樣式設計要點

1.一致性：?在B端產品設計中，保持一致性至關重要。對于基礎樣式，設計理念首先強調的是在整個產品中保持統一。例如，顏色的選擇應在整個產品中保持一致，字體的選擇也應統一，以確保用戶在使用產品時能獲得一致的體驗。

2.可讀性和易用性：?字體和顏色的選擇應確保文本的可讀性，無論是在明亮的陽光下還是在昏暗的環境中，都應保證用戶可以輕松地閱讀文本。此外，光標和陰影的設計也應考慮到易用性，例如，光標的設計應明顯可見，陰影的應用可以幫助用戶更好地理解界面元素的層次。

3.情感與品牌識別：?顏色和字體的選擇也應反映出品牌的形象和情感。例如，一些顏色可以傳達出積極、活力的感覺，而另一些顏色可能傳達出專業、穩重的感覺。字體也有類似的情感屬性。因此，這些基礎樣式的設計應選擇符合品牌形象和情感的元素。

4.可用性和可訪問性：?這些基礎樣式的設計還需要考慮到可用性和可訪問性。例如，對于色盲用戶，顏色的選擇應考慮到他們的視覺需求。字體的大小和間距也應考慮到視障用戶的需求。光標和陰影的設計可以幫助用戶更好地理解和操作界面。

5.簡潔與高效：?在設計中，簡潔是高效的關鍵。過于復雜的顏色、字體、陰影和光標設計可能會分散用戶的注意力，影響用戶體驗。因此，設計理念強調簡潔、高效的設計，以最直觀、最簡潔的方式傳達信息和引導用戶操作。

總結

7.3如何進行B端基礎樣式的設計？

1.顏色設計

確定主色調和輔助色調：選擇與品牌形象相符的主色調，并為其配以一到兩種輔助色調，用于突出重點或區分元素。

考慮對比與可讀性：確保前景色與背景色有足夠的對比度，以保證文本和圖像在所有情境下都易于閱讀。

使用色彩心理學：了解不同顏色所傳達的情感和氛圍，并據此進行選擇。例如，藍色通常代表專業和信任，而綠色可能代表環?；蚪】?/p>

2.字體設計

選擇易讀字體：優先選擇清晰、簡潔且易于閱讀的字體，尤其是用于正文的字體。

設定層次結構：通過字體大小、粗細和顏色來設定信息的層次結構，使用戶能快速了解內容的重要性。

保持一致性：在整套設計中，盡量保持字體種類和樣式的統一，以避免界面顯得混亂。

3.陰影設計

確定陰影方向：決定陰影的方向和強度，通常陰影應與光源方向一致。

適度運用：避免過度使用陰影，以免界面顯得混亂。陰影主要應用于提升元素的立體感和層次感。

考慮性能：復雜的陰影效果可能會影響應用的性能，因此在設計時要權衡美觀與性能。

4.光標設計

明確指示：光標應明確指示可操作元素，如鏈接、按鈕等，使用戶知道哪里可以點擊或交互。

動畫與反饋：加入合適的動畫和反饋，如點擊效果或懸停狀態，以增強用戶交互體驗。

考慮不同設備：對于不同的輸入設備（如鼠標、觸控屏等），光標的設計應有所調整，以確保在各種情境下都能良好運作。

八、B端組件庫進行擴展和定制的方法

1.了解組件庫的擴展機制：首先，需要深入了解所選組件庫的擴展機制。不同的組件庫可能有不同的擴展方式，因此要先熟悉組件庫提供的擴展接口和規范。

2.定制樣式：組件庫的樣式通常是可以通過覆蓋默認樣式來進行定制的。你可以根據自己的品牌規范和設計要求，調整組件的顏色、字體、邊框等樣式。

3.擴展組件功能：如果組件庫提供的組件無法滿足特定需求，你可以通過編程方式擴展組件的功能?？梢酝ㄟ^添加自定義屬性、事件或行為，來擴展組件的交互和邏輯。

4.自定義組件：除了擴展現有組件，你還可以創建自定義組件。根據組件庫的規范和API，可以編寫符合自己業務需求的自定義組件，并將其集成到組件庫中。

5.使用組件庫的插件系統：一些組件庫提供了插件系統，可以通過編寫插件來擴展組件庫的功能。插件通?？梢杂脕硖砑尤止δ?、修改組件行為或集成第三方庫。

6.貢獻給社區：如果你進行的定制和擴展是通用的，并且對其他開發者也有價值，可以考慮將其貢獻給組件庫的社區。這樣可以促進組件庫的發展，并造福更多開發者。

這是一個常見的表單類型的頁面。

一個組件往往可以擴展出來很多，我們可以在日常工作中不斷的去補充調整

九、建立屬于自己產品的組件庫

1.明確需求和目標：首先，明確你建立組件庫的需求和目標?？紤]你的產品特點、設計風格、開發技術棧等因素，確保組件庫能夠滿足你的產品需求。

2.設計規范和原則：制定組件庫的設計規范和原則，以確保組件的一致性和統一性。包括顏色、字體、布局、間距等方面的規范，以及組件的行為和交互原則。

3.組件規劃和分類：根據產品的需求和常用場景，規劃并分類組件。例如，導航、表單、數據展示、布局等常見組件，并確保它們能夠覆蓋你的產品的大部分需求。

4.設計和開發組件：按照規范和原則，設計和開發每個組件。設計師可以提供組件的視覺設計和交互原型，開發人員則實現組件的代碼和功能。確保組件的可復用性、可定制性和可擴展性。

5.文檔和示例：為每個組件提供清晰的文檔和示例。文檔應該包括組件的使用方法、屬性配置、事件處理等信息，示例則展示組件的實際效果和用法。

6.測試和優化：在組件開發完成后，進行全面的測試，包括功能測試、兼容性測試、性能測試等。根據測試結果，優化和改進組件，確保它們的質量和穩定性。

7.反饋和持續改進：建立反饋機制，收集使用組件的開發人員和設計人員的反饋意見。根據反饋，持續改進和優化組件庫，以滿足不斷變化的需求和技術發展。

8.版本管理和發布：使用版本管理工具，管理組件庫的版本更新和發布。清晰記錄每個版本的變更和改進，以便開發人員根據需要選擇合適的版本。

十、結論

B端設計是現代商業世界不可或缺的一部分。通過理解B端設計的基礎理念，通用樣式，以及C化的重要性和應用，我們可以更好地設計和使用B端產品，提高企業的工作效率和競爭力。雖然B端設計的C化帶來了一些挑戰，但只要我們采取正確的解決方案，就能克服這些挑戰，為企業提供更優秀、更貼合需求的B端產品。

作者：張陽光
來源：站酷 （zcool.com.cn/u/22917927）

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。