工作經(jīng)驗(yàn)｜ B 端產(chǎn)品組件設(shè)計(jì)細(xì)節(jié)及經(jīng)驗(yàn)分享

1、工作經(jīng)驗(yàn)| B端產(chǎn)品組件設(shè)計(jì)細(xì)節(jié)及經(jīng)驗(yàn)提供本文源于讀者和粉絲的提問,以及我前段時(shí)間在做Ant Design設(shè)計(jì)與運(yùn)營口 作中的經(jīng)驗(yàn)沉淀和總結(jié)，希望對(duì)你有幫助。一.Q1為什么大廠都要做設(shè)計(jì)系統(tǒng)最近隨著TDesign、ArcoDesign等設(shè)計(jì)系統(tǒng)陸續(xù)發(fā)布，經(jīng)常會(huì)有同學(xué)問我這樣的問題：為什么這些設(shè)計(jì)系統(tǒng)感覺差異不大？大廠連這也要卷一卷？設(shè)計(jì)系統(tǒng)雖然要注重普適性，但是不是也要有自己的品牌表達(dá)呢？這些設(shè)計(jì)系統(tǒng)要怎么比擬、分析和學(xué)習(xí)呢？各大廠都有自己的設(shè)計(jì)系統(tǒng)，你可能會(huì)覺得大廠們太卷了，簡直就是神仙打架。但大廠的設(shè)計(jì)系統(tǒng)絕對(duì)不是為了 卷”而做。之所以要做，原因至少有這幾點(diǎn)：.業(yè)務(wù)多大廠的業(yè)務(wù)和產(chǎn)品多且繁

2、雜，業(yè)務(wù)中可復(fù)用的能力和經(jīng)驗(yàn)在長時(shí)間的積累下也會(huì) 越來越多。沉淀下來的設(shè)計(jì)系統(tǒng)會(huì)對(duì)自己業(yè)務(wù)起到強(qiáng)有力支撐和提效作用。有沉淀且不缺少 應(yīng)用場景，也可以保證設(shè)計(jì)系統(tǒng)有較高的使用頻率，促進(jìn)其良性開展。.資源足相對(duì)于小公司來說,大廠有更多的本錢和資源可以用于做資產(chǎn)類的沉淀、研究? 口 輸出。大廠也理應(yīng)在相應(yīng)的領(lǐng)域多做探索和經(jīng)驗(yàn)積累，回饋用戶和市場的信任。.權(quán)威高大廠的設(shè)計(jì)水平相對(duì)來說具備較強(qiáng)的穩(wěn)定性，輸出的質(zhì)量更有保證，可以發(fā)聲、 傳播的渠道和方式也更多，也有實(shí)力在行業(yè)內(nèi)樹立起可靠、標(biāo)準(zhǔn)的規(guī)那么話語權(quán)。從以上幾點(diǎn)不難看出設(shè)計(jì)系統(tǒng)之于大廠來說，對(duì)于內(nèi)部可以賦能業(yè)務(wù)、降本提效; 對(duì)于外部可以提升自己的話語

3、權(quán)，這其實(shí)是一個(gè)雙贏的過程。二、Q2設(shè)計(jì)系統(tǒng)間的共性與個(gè)性拋開代碼層面不談，僅從設(shè)計(jì)師的使用場景出發(fā)，用過Ant Design和Arco Design的設(shè)計(jì)師大概會(huì)覺得二者并沒有什么差異這些設(shè)計(jì)系統(tǒng)好像都 差不多哎?！痹缧┠闍nt Design在設(shè)計(jì)系統(tǒng)領(lǐng)域已打過比擬牢靠的框架基礎(chǔ)，其他大廠進(jìn) 行借鑒是很正常的事情，沒有必要重復(fù)造輪子。因此這些設(shè)計(jì)系統(tǒng)最基礎(chǔ)的結(jié)構(gòu)和框架層面是大差不差的，看上去就好像都長一 個(gè)樣子。但其實(shí)基于我們上一節(jié)說到的原因，究其細(xì)節(jié)，各家也都有各家的特點(diǎn)和看家本 領(lǐng)，在應(yīng)用和功能層面并不完全一致。那作為設(shè)計(jì)師該如何對(duì)大廠們的設(shè)計(jì)系統(tǒng)做分析和學(xué)習(xí)呢？這里給大家提供幾 個(gè)比擬

4、方法和學(xué)習(xí)思路，你可以嘗試從以下方面入手：.功能場景對(duì)于設(shè)計(jì)系統(tǒng)的功能和應(yīng)用場景做分析，包括但不限于以下內(nèi)容：1）側(cè)重的用戶和場景是以設(shè)計(jì)師為主、開發(fā)為主還是兩者兼?zhèn)?；是初?jí)組件（基礎(chǔ)組件）還是高級(jí)組件（業(yè)務(wù)組件）二者區(qū)別可閱讀這里；用于哪些特定的業(yè)務(wù)場景和領(lǐng)域等等。）側(cè)重C端還是B端支付寶設(shè)計(jì)體系曾經(jīng)就有一套針對(duì)C端的移動(dòng)端設(shè)計(jì)體系（不過也在和AntD mini版本進(jìn)行整合）。3）側(cè)重國內(nèi)還是國外（國際化） 國內(nèi)大廠的設(shè)計(jì)系統(tǒng)很少考慮國際化應(yīng)用場景，只有個(gè)別會(huì)提及一些國際化的設(shè) 計(jì)方法和思路。這一點(diǎn)，國外的設(shè)計(jì)系統(tǒng)考慮得相對(duì)全面。4）獨(dú)特的功能應(yīng)用或外掛服務(wù)各個(gè)設(shè)計(jì)系統(tǒng)在這一點(diǎn)上可謂百花齊放

5、，比方AntD還可以與AntV的可視化 圖表聯(lián)動(dòng)；Arco Design產(chǎn)出一套配色編輯器和圖標(biāo)平臺(tái)等功能。.體驗(yàn)感受這里既要看應(yīng)用設(shè)計(jì)系統(tǒng)做出的產(chǎn)品帶給用戶的體驗(yàn)和感受，也要看設(shè)計(jì)師和開 發(fā)在使用設(shè)計(jì)系統(tǒng)的過程中的體驗(yàn)感受。包括但不限于以下內(nèi)容：設(shè)計(jì)整體基調(diào)：包括設(shè)計(jì)系統(tǒng)的價(jià)值觀和設(shè)計(jì)原那么等，奠定整個(gè)設(shè)計(jì)系統(tǒng)的基調(diào);視覺語言特征：包括全局樣式、排版效果、動(dòng)效特征等，會(huì)使用戶產(chǎn)生最直觀的視 覺感受；交互體驗(yàn)特征：包括交互反應(yīng)和針對(duì)用戶操作的細(xì)節(jié)處理，決定用戶的使用過程是 否流暢舒適；系統(tǒng)品牌建設(shè)：這點(diǎn)不僅僅是指設(shè)計(jì)系統(tǒng)中的組件的風(fēng)格與品牌特性，也包括閱讀 和了解整個(gè)設(shè)計(jì)系統(tǒng)（網(wǎng)站、品牌運(yùn)營與

6、推廣等內(nèi)容）的體驗(yàn)。.搭建方式這指的是設(shè)計(jì)系統(tǒng)在搭建過程中的思路和工作方法，包括但不限于以下內(nèi)容：觸達(dá)方式：指的是設(shè)計(jì)師和開發(fā)使用設(shè)計(jì)系統(tǒng)的方式。大局部設(shè)計(jì)系統(tǒng)依賴官網(wǎng)， 提供Figma或Sketch兩種Toolkits,也有一些獨(dú)特和有時(shí)效性的方式，比方 AntD 提供的 Sketch 插件 Kitchen ;協(xié)作機(jī)制：利用人脈資源，看看在這些設(shè)計(jì)系統(tǒng)中有沒有你的熟人可以約著聊聊， 更好地了解背后的工作和搭建方式；更新頻率：小迭代和大迭代的更新速率和通知方式等。因?yàn)樵O(shè)計(jì)系統(tǒng)內(nèi)容繁雜，所以建議大家在分析之前，先思考做比照的目的和目標(biāo)。不同的目的，對(duì)于以上三個(gè)方面比擬的側(cè)重點(diǎn)也會(huì)不同。比方，如果

7、你是在對(duì)已 有組件庫進(jìn)行品牌升級(jí)，就應(yīng)該對(duì)于設(shè)計(jì)整體基調(diào)和整體系統(tǒng)的品牌建設(shè)做更深 入的調(diào)研和比擬。三、Q3頁面級(jí)別的組件，到底有什么用這是我收到的一個(gè)讀者朋友的提問：我看到一些公司在搭建頁面組件庫，將一些產(chǎn)品通用的布局整合起來直接用。 我們這樣做真的可以提高效率嗎？這樣做是否正確呢？相信很多朋友也都有類似的疑問。我曾經(jīng)在文章：基礎(chǔ)組件和高級(jí)組件 的區(qū)別一文中聊過沉淀業(yè)務(wù)組件的必要性。頁面級(jí)組件與前兩者又有所不同，它的功能更為整體，但應(yīng)用的場景更為基礎(chǔ)。我們首先需要明白，真正有效的組件，都是設(shè)計(jì)師和開發(fā)共建的結(jié)果，其本質(zhì)功 能就是降本提效和到達(dá)一致性。頁面級(jí)組件的作用和意義有以下幾點(diǎn)：.框架穩(wěn)

8、定頁面級(jí)組件可以使產(chǎn)品在響應(yīng)式布局和整體框架上保持統(tǒng)一。簡單來說，就是對(duì) 于任何新增的頁面，都不會(huì)出現(xiàn)模塊所占的面積比例不一致、行間距不一致或表 單寬度不一致等問題。.交互簡明一致的頁面框架，在用戶體驗(yàn)的層面上不會(huì)做過多變化，交互更加簡單明了，符 合用戶預(yù)期。也更有利于用戶將注意力集中在任務(wù)操作上。.視覺統(tǒng)一產(chǎn)品的視覺風(fēng)格在框架一致的基礎(chǔ)上，也更容易做到統(tǒng)一，在同產(chǎn)品中可以保持 視覺風(fēng)格的穩(wěn)定;在不同產(chǎn)品線中也可以保持相對(duì)一致，更有利于傳遞公司/品 牌心智。.降本提效 不管設(shè)計(jì)師還是開發(fā)，在沉淀此類組件之后，都可以快速從0-1搭建出符合及 格線質(zhì)量的產(chǎn)品頁面。開發(fā)對(duì)于設(shè)計(jì)稿的還原度會(huì)更高，節(jié)省

9、的時(shí)間可以用于調(diào) 整細(xì)節(jié)和優(yōu)化功能。但并不是所有的頁面都值得被沉淀成頁面組件。頁面級(jí)組件是否真的能發(fā)揮出以 上優(yōu)勢，取決于你的業(yè)務(wù)特征,主要看以下幾個(gè)方面：1）業(yè)務(wù)需求量大且為初期業(yè)務(wù)對(duì)于設(shè)計(jì)和開發(fā)的需求量很大，且需求的類型相似，比方都是B端金融場 景類或都是G端政務(wù)服務(wù)類。尤其是工程處于的初期階段，對(duì)用戶體驗(yàn)沒有太多復(fù)雜需求，以實(shí)現(xiàn)基本 功能為主要目標(biāo)。2）功能和布局的特征明顯業(yè)務(wù)中的功能模塊的特征和頁面布局的框架足夠明顯，且該類型的頁面出現(xiàn)的頻 率很高，如表單頁面、卡片選擇頁面。3）業(yè)務(wù)的體驗(yàn)風(fēng)格要求統(tǒng)一業(yè)務(wù)比擬重視品牌一致性和用戶心智的養(yǎng)成。在交互體驗(yàn)和視覺風(fēng)格上，多個(gè)產(chǎn) 品線的產(chǎn)品希望保持一致，不需要做過多個(gè)性化的交互或視覺上的處理。4）合理的工具及應(yīng)用規(guī)范 對(duì)于頁面級(jí)組件來說，選擇好用的設(shè)計(jì)工具，并制定有效的組件使用規(guī)范尤為重 要。頁面級(jí)組件在使用中一定會(huì)涉及到修改和補(bǔ)充，設(shè)計(jì)工鄲口規(guī)范可以幫助設(shè) 計(jì)師在需要修改時(shí)快速做出局部修改和替換。關(guān)于設(shè)計(jì)規(guī)范如何編寫，可以閱讀文章：如何編寫設(shè)計(jì)規(guī)范？；關(guān)于設(shè)計(jì)規(guī)范如 何有效的落地與執(zhí)行,可以閱讀文章：如何讓設(shè)計(jì)規(guī)范被有9I行？符合以上情況的業(yè)務(wù)，就可以嘗試沉淀頁面布局和框架。但如果業(yè)務(wù)