大廠問答！兩個常見的B端設計組件問題解答

本文源于讀者和粉絲的相關提問，以及我前段時間在做 Ant Design 設計與運營工作中的經驗沉淀和總結，希望對你有幫助。

中性色色值為什么要使用透明度？

有細心的用戶發現，在 Ant Design 的設計規范里，中性色色值可以按照透明度來設置，見下圖中性色色值表（百分數代表不透明度）：

平時大家似乎更喜歡使用 #333333、#666666 這種色值，那使用透明色有什么優勢呢？

我們知道，中性色主要被大量的應用在界面的文字部分，此外背景、邊框、分割線等場景中也非常常見。產品中性色的定義需要考慮白色背景以及有色背景的差異，同時結合 WCAG 2.0 標準。

現在 Ant Design 的色板中，透明色模式和實色模式都是有的。透明度模式可以做到背景色兼容。

如下圖示例，我們以顏色 gray-6 為例，這個顏色在實色模式的色值是 #BFBFBF，透明色模式的色值是 000000-25%。兩者在白色背景上的顏色完全相同，但是在灰色或其他顏色的背景上，卻有明顯差別：

因此在透明色模式下，以中性色為主的前景色，會與背景色有一個更明顯的色彩對比，對背景的兼容性也會更好，保證內容的可讀性。

Ant Design 提供了透明色和實色兩種顏色模式供用戶選擇，也會使組件更具通用性。

組件和設計師之間的關系是？

當下很多常見的、優秀的組件庫，都為設計和開發的工作提供了便利。

那么使用組件庫可以替代設計師么？組件和設計師之間的關系又是什么呢？我個人觀點如下：

1. 組件是「效率」工具

組件是工具，用來為設計師和開發提升工作效率。所有組件庫的初衷都不是要替代設計師，而是要提高整個團隊的工作效率。使用組件可以從兩個方面提效：

• 工作內容上：可以將不必要的、重復性勞動的時間節省出來
• 工作流程上：便于設計師與前端開發做交接和協作，節省溝通成本

2. 組件是「質量」保障

使用組件做設計稿，可以在一定程度上保證工作質量。組件規范了前端和設計師的工作方法，建立相對底層的系統，設定了設計和開發的質量底線。

基于組件規范設計和開發的產品更容易具備：

• 一致性：具備相對一致的表現樣式，設計風格和交互體驗上均可保持統一
• 可用性：對于用戶操作，可以保證最基本的可理解性和可操作性
• 審美性：符合基本審美標準，雖不會很亮眼，但也不會很難看

3. 設計師要「沉淀」業務組件

設計師可以嘗試沉淀有針對性的業務組件。很多業務領域有其獨特性，比如金融類組件和政務類的產品頁面列表內容就有很大區別。單一的元素組件在應用的過程中可以被再次組合和沉淀。

舉個例子，我之前在做業務需求設計時，相比于 AntD，其實更常用的是 TechUI —— 它是建立在 AntD 基礎上的、由我們螞蟻的設計師通過對業務需求的提煉、組合和封裝，做成的一套屬于螞蟻自己的「業務組件」。

再總結下二者的區別：

Ant Design：是所有人的，是通用的，是單一的原子級別的（比如一個輸入框）組件。

TechUI：是螞蟻自己的，是私有的，是組合的區塊級別的（比如一整個表單）組件，更具備螞蟻集團自己的業務屬性。

針對你公司不同業務類型，沉淀出不同種類的區塊級別的組件，這類組件使用起來也會更加得心應手、加倍提效。這也是 B 端設計師可以去學習和精進的一點。

4. 設計師要「洞察」業務訴求

使用組件可以讓設計師把節約出來的時間和精力放到更多有價值的工作上去。作為 Ant Design 的設計師之一，坦白的說，即使你的設計稿全部使用了 Ant Design 的組件搭建，最終的頁面效果也仍不完善，在用戶體驗上始終可以更進一步。

設計師應該更多去關注對用戶需求和業務邏輯的深入挖掘，不僅僅是在界面細節的表現手法上下功夫，還要學會站在全局，用系統性思維看待每一個項目，為整個產品的系統流程做優化，做更全面的產品體驗升級。

歡迎關注作者微信公眾號：「長弓小子」