1、中性色色值為什么要使用透明度？
有細(xì)心的用戶發(fā)現(xiàn)，在 Ant Design 的設(shè)計(jì)規(guī)范里，中性色色值可以按照透明度來(lái)設(shè)置，見下圖中性色色值表（百分?jǐn)?shù)代表不透明度）：
平時(shí)大家似乎更喜歡使用 #333333、#666666 這種色值，那使用透明色有什么優(yōu)勢(shì)呢？
我們知道，中性色主要被大量的應(yīng)用在界面的文字部分，此外背景、邊框、分割線等場(chǎng)景中也非常常見。產(chǎn)品中性色的定義需要考慮白色背景以及有色背景的差異，同時(shí)結(jié)合 WCAG 2.0 標(biāo)準(zhǔn)。
現(xiàn)在 Ant Design 的色板中，透明色模式和實(shí)色模式都是有的。透明度模式可以做到背景色兼容。
如下圖示例，我們以顏色 gray-6 為例，這個(gè)顏色在實(shí)色模式的色值是 #BFBFBF，透明色模式的色值是 000000-25%。兩者在白色背景上的顏色完全相同，但是在灰色或其他顏色的背景上，卻有明顯差別：
因此在透明色模式下，以中性色為主的前景色，會(huì)與背景色有一個(gè)更明顯的色彩對(duì)比，對(duì)背景的兼容性也會(huì)更好，保證內(nèi)容的可讀性。
Ant Design 提供了透明色和實(shí)色兩種顏色模式供用戶選擇，也會(huì)使組件更具通用性。
2、組件和設(shè)計(jì)師之間的關(guān)系是？
當(dāng)下很多常見的、優(yōu)秀的組件庫(kù)，都為設(shè)計(jì)和開發(fā)的工作提供了便利。
那么使用組件庫(kù)可以替代設(shè)計(jì)師么？組件和設(shè)計(jì)師之間的關(guān)系又是什么呢？我個(gè)人觀點(diǎn)如下：
1 . 組件是「效率」工具
組件是工具，用來(lái)為設(shè)計(jì)師和開發(fā)提升工作效率。所有組件庫(kù)的初衷都不是要替代設(shè)計(jì)師，而是要提高整個(gè)團(tuán)隊(duì)的工作效率。使用組件可以從兩個(gè)方面提效：
（1）工作內(nèi)容上：可以將不必要的、重復(fù)性勞動(dòng)的時(shí)間節(jié)省出來(lái)
（2）工作流程上：便于設(shè)計(jì)師與前端開發(fā)做交接和協(xié)作，節(jié)省溝通成本
2 . 組件是「質(zhì)量」保障
使用組件做設(shè)計(jì)稿，可以在一定程度上保證工作質(zhì)量。組件規(guī)范了前端和設(shè)計(jì)師的工作方法，建立相對(duì)底層的系統(tǒng)，設(shè)定了設(shè)計(jì)和開發(fā)的質(zhì)量底線。
基于組件規(guī)范設(shè)計(jì)和開發(fā)的產(chǎn)品更容易具備：
（1）一致性：具備相對(duì)一致的表現(xiàn)樣式，設(shè)計(jì)風(fēng)格和交互體驗(yàn)上均可保持統(tǒng)一
（2）可用性：對(duì)于用戶操作，可以保證最基本的可理解性和可操作性
（3）審美性：符合基本審美標(biāo)準(zhǔn)，雖不會(huì)很亮眼，但也不會(huì)很難看
3 . 設(shè)計(jì)師要「沉淀」業(yè)務(wù)組件
設(shè)計(jì)師可以嘗試沉淀有針對(duì)性的業(yè)務(wù)組件。很多業(yè)務(wù)領(lǐng)域有其獨(dú)特性，比如金融類組件和政務(wù)類的產(chǎn)品頁(yè)面列表內(nèi)容就有很大區(qū)別。單一的元素組件在應(yīng)用的過程中可以被再次組合和沉淀。
舉個(gè)例子，我之前在做業(yè)務(wù)需求設(shè)計(jì)時(shí)，相比于 AntD，其實(shí)更常用的是 TechUI —— 它是建立在 AntD 基礎(chǔ)上的、由我們螞蟻的設(shè)計(jì)師通過對(duì)業(yè)務(wù)需求的提煉、組合和封裝，做成的一套屬于螞蟻?zhàn)约旱摹緲I(yè)務(wù)組件】。
再總結(jié)下二者的區(qū)別：
– Ant Design：是所有人的，是通用的，是單一的原子級(jí)別的（比如一個(gè)輸入框）組件。
– TechUI：是螞蟻?zhàn)约旱模撬接械模墙M合的區(qū)塊級(jí)別的（比如一整個(gè)表單）組件，更具備螞蟻集團(tuán)自己的業(yè)務(wù)屬性。
針對(duì)你公司不同業(yè)務(wù)類型，沉淀出不同種類的區(qū)塊級(jí)別的組件，這類組件使用起來(lái)也會(huì)更加得心應(yīng)手、加倍提效。這也是 B 端設(shè)計(jì)師可以去學(xué)習(xí)和精進(jìn)的一點(diǎn)。
4 . 設(shè)計(jì)師要「洞察」業(yè)務(wù)訴求
使用組件可以讓設(shè)計(jì)師把節(jié)約出來(lái)的時(shí)間和精力放到更多有價(jià)值的工作上去。作為 Ant Design 的設(shè)計(jì)師之一，坦白的說，即使你的設(shè)計(jì)稿全部使用了 Ant Design 的組件搭建，最終的頁(yè)面效果也仍不完善，在用戶體驗(yàn)上始終可以更進(jìn)一步。
設(shè)計(jì)師應(yīng)該更多去關(guān)注對(duì)用戶需求和業(yè)務(wù)邏輯的深入挖掘，不僅僅是在界面細(xì)節(jié)的表現(xiàn)手法上下功夫，還要學(xué)會(huì)站在全局，用系統(tǒng)性思維看待每一個(gè)項(xiàng)目，為整個(gè)產(chǎn)品的系統(tǒng)流程做優(yōu)化，做更全面的產(chǎn)品體驗(yàn)升級(jí)。
原文鏈接：長(zhǎng)弓小子（公眾號(hào)）
作者：元堯
轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》工作經(jīng)驗(yàn)｜ B 端產(chǎn)品組件設(shè)計(jì)細(xì)節(jié)及經(jīng)驗(yàn)分享（一）
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.izc.net.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)