工作經(jīng)驗(yàn)| B 端產(chǎn)品組件設(shè)計(jì)細(xì)節(jié)及經(jīng)驗(yàn)分享(七)
編輯導(dǎo)語(yǔ):設(shè)計(jì)系統(tǒng)對(duì)于B端產(chǎn)品組件設(shè)計(jì)來(lái)說(shuō)十分重要,本篇文章作者分享了有關(guān)B端產(chǎn)品組件設(shè)計(jì)細(xì)節(jié)方面的內(nèi)容以及分析了大廠(chǎng)做設(shè)計(jì)系統(tǒng)的原因,具體分析了其作用等,感興趣的一起來(lái)看一下吧。
本文源于讀者和粉絲的提問(wèn),以及我前段時(shí)間在做 Ant Design 設(shè)計(jì)與運(yùn)營(yíng)工作中的經(jīng)驗(yàn)沉淀和總結(jié),希望對(duì)你有幫助。
一、Q1 為什么大廠(chǎng)都要做設(shè)計(jì)系統(tǒng)
最近隨著TDesign、ArcoDesign 等設(shè)計(jì)系統(tǒng)陸續(xù)發(fā)布,經(jīng)常會(huì)有同學(xué)問(wèn)我這樣的問(wèn)題:
- 為什么這些設(shè)計(jì)系統(tǒng)感覺(jué)差異不大?大廠(chǎng)連這也要卷一卷?
- 設(shè)計(jì)系統(tǒng)雖然要注重普適性,但是不是也要有自己的品牌表達(dá)呢?
- 這些設(shè)計(jì)系統(tǒng)要怎么比較、分析和學(xué)習(xí)呢?
各大廠(chǎng)都有自己的設(shè)計(jì)系統(tǒng),你可能會(huì)覺(jué)得大廠(chǎng)們太卷了,簡(jiǎn)直就是神仙打架。但大廠(chǎng)的設(shè)計(jì)系統(tǒng)絕對(duì)不是為了“卷”而做。之所以要做,原因至少有這幾點(diǎn):
1. 業(yè)務(wù)多
大廠(chǎng)的業(yè)務(wù)和產(chǎn)品多且繁雜,業(yè)務(wù)中可復(fù)用的能力和經(jīng)驗(yàn)在長(zhǎng)時(shí)間的積累下也會(huì)越來(lái)越多。
沉淀下來(lái)的設(shè)計(jì)系統(tǒng)會(huì)對(duì)自己業(yè)務(wù)起到強(qiáng)有力支撐和提效作用。有沉淀且不缺少應(yīng)用場(chǎng)景,也可以保證設(shè)計(jì)系統(tǒng)有較高的使用頻率,促進(jìn)其良性發(fā)展。
2. 資源足
相對(duì)于小公司來(lái)說(shuō),大廠(chǎng)有更多的成本和資源可以用于做資產(chǎn)類(lèi)的沉淀、研究和輸出。大廠(chǎng)也理應(yīng)在相應(yīng)的領(lǐng)域多做探索和經(jīng)驗(yàn)積累,回饋用戶(hù)和市場(chǎng)的信任。
3. 權(quán)威高
大廠(chǎng)的設(shè)計(jì)水平相對(duì)來(lái)說(shuō)具備較強(qiáng)的穩(wěn)定性,輸出的質(zhì)量更有保證,可以發(fā)聲、傳播的渠道和方式也更多,也有實(shí)力在行業(yè)內(nèi)樹(shù)立起可靠、標(biāo)準(zhǔn)的規(guī)則話(huà)語(yǔ)權(quán)。
從以上幾點(diǎn)不難看出設(shè)計(jì)系統(tǒng)之于大廠(chǎng)來(lái)說(shuō),對(duì)于內(nèi)部可以賦能業(yè)務(wù)、降本提效;對(duì)于外部可以提升自己的話(huà)語(yǔ)權(quán),這其實(shí)是一個(gè)雙贏(yíng)的過(guò)程。
二、Q2 設(shè)計(jì)系統(tǒng)間的共性與個(gè)性
拋開(kāi)代碼層面不談,僅從設(shè)計(jì)師的使用場(chǎng)景出發(fā),用過(guò) Ant Design 和 Arco Design 的設(shè)計(jì)師大概會(huì)覺(jué)得二者并沒(méi)有什么差異 —— “這些設(shè)計(jì)系統(tǒng)好像都差不多哎?!?/p>
早些年 Ant Design 在設(shè)計(jì)系統(tǒng)領(lǐng)域已打過(guò)比較牢靠的框架基礎(chǔ),其他大廠(chǎng)進(jìn)行借鑒是很正常的事情,沒(méi)有必要重復(fù)造輪子。
因此這些設(shè)計(jì)系統(tǒng)最基礎(chǔ)的結(jié)構(gòu)和框架層面是大差不差的,看上去就好像都長(zhǎng)一個(gè)樣子。
但其實(shí)基于我們上一節(jié)說(shuō)到的原因,究其細(xì)節(jié),各家也都有各家的特點(diǎn)和看家本領(lǐng),在應(yīng)用和功能層面并不完全一致。
那作為設(shè)計(jì)師該如何對(duì)大廠(chǎng)們的設(shè)計(jì)系統(tǒng)做分析和學(xué)習(xí)呢?這里給大家提供幾個(gè)比較方法和學(xué)習(xí)思路,你可以嘗試從以下方面入手:
1. 功能場(chǎng)景
對(duì)于設(shè)計(jì)系統(tǒng)的功能和應(yīng)用場(chǎng)景做分析,包括但不限于以下內(nèi)容:
1)側(cè)重的用戶(hù)和場(chǎng)景
- 是以設(shè)計(jì)師為主、開(kāi)發(fā)為主還是兩者兼?zhèn)洌?/li>
- 是初級(jí)組件(基礎(chǔ)組件)還是高級(jí)組件(業(yè)務(wù)組件)二者區(qū)別可閱讀這里;
- 用于哪些特定的業(yè)務(wù)場(chǎng)景和領(lǐng)域等等。
2)側(cè)重 C 端還是 B 端
支付寶設(shè)計(jì)體系曾經(jīng)就有一套針對(duì) C 端的移動(dòng)端設(shè)計(jì)體系(不過(guò)也在和 AntD mini 版本進(jìn)行整合)。
3)側(cè)重國(guó)內(nèi)還是國(guó)外(國(guó)際化)
國(guó)內(nèi)大廠(chǎng)的設(shè)計(jì)系統(tǒng)很少考慮國(guó)際化應(yīng)用場(chǎng)景,只有個(gè)別會(huì)提及一些國(guó)際化的設(shè)計(jì)方法和思路。這一點(diǎn),國(guó)外的設(shè)計(jì)系統(tǒng)考慮得相對(duì)全面。
4) 獨(dú)特的功能應(yīng)用或外掛服務(wù)
各個(gè)設(shè)計(jì)系統(tǒng)在這一點(diǎn)上可謂百花齊放,比如 AntD 還可以與 AntV 的可視化圖表聯(lián)動(dòng);Arco Design 產(chǎn)出一套配色編輯器和圖標(biāo)平臺(tái)等功能。
2. 體驗(yàn)感受
這里既要看應(yīng)用設(shè)計(jì)系統(tǒng)做出的產(chǎn)品帶給用戶(hù)的體驗(yàn)和感受,也要看設(shè)計(jì)師和開(kāi)發(fā)在使用設(shè)計(jì)系統(tǒng)的過(guò)程中的體驗(yàn)感受。包括但不限于以下內(nèi)容:
- 設(shè)計(jì)整體基調(diào):包括設(shè)計(jì)系統(tǒng)的價(jià)值觀(guān)和設(shè)計(jì)原則等,奠定整個(gè)設(shè)計(jì)系統(tǒng)的基調(diào);
- 視覺(jué)語(yǔ)言特征:包括全局樣式、排版效果、動(dòng)效特征等,會(huì)使用戶(hù)產(chǎn)生最直觀(guān)的視覺(jué)感受;
- 交互體驗(yàn)特征:包括交互反饋和針對(duì)用戶(hù)操作的細(xì)節(jié)處理,決定用戶(hù)的使用過(guò)程是否流暢舒適;
- 系統(tǒng)品牌建設(shè):這點(diǎn)不僅僅是指設(shè)計(jì)系統(tǒng)中的組件的風(fēng)格與品牌特性,也包括閱讀和了解整個(gè)設(shè)計(jì)系統(tǒng)(網(wǎng)站、品牌運(yùn)營(yíng)與推廣等內(nèi)容)的體驗(yàn)。
3. 搭建方式
這指的是設(shè)計(jì)系統(tǒng)在搭建過(guò)程中的思路和工作方法,包括但不限于以下內(nèi)容:
- 觸達(dá)方式:指的是設(shè)計(jì)師和開(kāi)發(fā)使用設(shè)計(jì)系統(tǒng)的方式。大部分設(shè)計(jì)系統(tǒng)依賴(lài)官網(wǎng),提供 Figma 或 Sketch 兩種 Toolkits。也有一些獨(dú)特和有時(shí)效性的方式,比如 AntD 提供的 Sketch 插件 Kitchen;
- 協(xié)作機(jī)制:利用人脈資源,看看在這些設(shè)計(jì)系統(tǒng)中有沒(méi)有你的熟人可以約著聊聊,更好地了解背后的工作和搭建方式;
- 更新頻率:小迭代和大迭代的更新速率和通知方式等。
因?yàn)樵O(shè)計(jì)系統(tǒng)內(nèi)容繁雜,所以建議大家在分析之前,先思考做對(duì)比的目的和目標(biāo)。
不同的目的,對(duì)于以上三個(gè)方面比較的側(cè)重點(diǎn)也會(huì)不同。比如,如果你是在對(duì)已有組件庫(kù)進(jìn)行品牌升級(jí),就應(yīng)該對(duì)于設(shè)計(jì)整體基調(diào)和整體系統(tǒng)的品牌建設(shè)做更深入的調(diào)研和比較。
三、Q3 頁(yè)面級(jí)別的組件,到底有什么用
這是我收到的一個(gè)讀者朋友的提問(wèn):
“我看到一些公司在搭建頁(yè)面組件庫(kù),將一些產(chǎn)品通用的布局整合起來(lái)直接用。我們這樣做真的可以提高效率嗎?這樣做是否正確呢?”
相信很多朋友也都有類(lèi)似的疑問(wèn)。我曾經(jīng)在文章:「基礎(chǔ)組件」和「高級(jí)組件」的區(qū)別 一文中聊過(guò)沉淀業(yè)務(wù)組件的必要性。
頁(yè)面級(jí)組件與前兩者又有所不同,它的功能更為整體,但應(yīng)用的場(chǎng)景更為基礎(chǔ)。
我們首先需要明白,真正有效的組件,都是設(shè)計(jì)師和開(kāi)發(fā)共建的結(jié)果,其本質(zhì)功能就是降本提效和達(dá)到一致性。
頁(yè)面級(jí)組件的作用和意義有以下幾點(diǎn):
1. 框架穩(wěn)定
頁(yè)面級(jí)組件可以使產(chǎn)品在響應(yīng)式布局和整體框架上保持統(tǒng)一。簡(jiǎn)單來(lái)說(shuō),就是對(duì)于任何新增的頁(yè)面,都不會(huì)出現(xiàn)模塊所占的面積比例不一致、行間距不一致或表單寬度不一致等問(wèn)題。
2. 交互簡(jiǎn)明
一致的頁(yè)面框架,在用戶(hù)體驗(yàn)的層面上不會(huì)做過(guò)多變化,交互更加簡(jiǎn)單明了,符合用戶(hù)預(yù)期。也更有利于用戶(hù)將注意力集中在任務(wù)操作上。
3. 視覺(jué)統(tǒng)一
產(chǎn)品的視覺(jué)風(fēng)格在框架一致的基礎(chǔ)上,也更容易做到統(tǒng)一,在同產(chǎn)品中可以保持視覺(jué)風(fēng)格的穩(wěn)定;在不同產(chǎn)品線(xiàn)中也可以保持相對(duì)一致,更有利于傳遞公司 / 品牌心智。
4. 降本提效
不論設(shè)計(jì)師還是開(kāi)發(fā),在沉淀此類(lèi)組件之后,都可以快速?gòu)?0-1 搭建出符合及格線(xiàn)質(zhì)量的產(chǎn)品頁(yè)面。開(kāi)發(fā)對(duì)于設(shè)計(jì)稿的還原度會(huì)更高,節(jié)省的時(shí)間可以用于調(diào)整細(xì)節(jié)和優(yōu)化功能。
但并不是所有的頁(yè)面都值得被沉淀成頁(yè)面組件。頁(yè)面級(jí)組件是否真的能發(fā)揮出以上優(yōu)勢(shì),取決于你的業(yè)務(wù)特征,主要看以下幾個(gè)方面:
1)業(yè)務(wù)需求量大且為初期
業(yè)務(wù)對(duì)于設(shè)計(jì)和開(kāi)發(fā)的需求量很大,且需求的類(lèi)型相似,比如都是 B 端金融場(chǎng)景類(lèi)或都是 G 端政務(wù)服務(wù)類(lèi)。
尤其是項(xiàng)目處于0-1 的初期階段,對(duì)用戶(hù)體驗(yàn)沒(méi)有太多復(fù)雜需求,以實(shí)現(xiàn)基本功能為主要目標(biāo)。
2)功能和布局的特征明顯
業(yè)務(wù)中的功能模塊的特征和頁(yè)面布局的框架足夠明顯,且該類(lèi)型的頁(yè)面出現(xiàn)的頻率很高,如表單頁(yè)面、卡片選擇頁(yè)面。
3)業(yè)務(wù)的體驗(yàn)風(fēng)格要求統(tǒng)一
業(yè)務(wù)比較重視品牌一致性和用戶(hù)心智的養(yǎng)成。在交互體驗(yàn)和視覺(jué)風(fēng)格上,多個(gè)產(chǎn)品線(xiàn)的產(chǎn)品希望保持一致,不需要做過(guò)多個(gè)性化的交互或視覺(jué)上的處理。
4)合理的工具及應(yīng)用規(guī)范
對(duì)于頁(yè)面級(jí)組件來(lái)說(shuō),選擇好用的設(shè)計(jì)工具,并制定有效的組件使用規(guī)范尤為重要。頁(yè)面級(jí)組件在使用中一定會(huì)涉及到修改和補(bǔ)充,設(shè)計(jì)工具和規(guī)范可以幫助設(shè)計(jì)師在需要修改時(shí)快速做出局部修改和替換。
關(guān)于設(shè)計(jì)規(guī)范如何編寫(xiě),可以閱讀文章:如何編寫(xiě)設(shè)計(jì)規(guī)范?;關(guān)于設(shè)計(jì)規(guī)范如何有效的落地與執(zhí)行,可以閱讀文章:如何讓設(shè)計(jì)規(guī)范被有效執(zhí)行?
符合以上情況的業(yè)務(wù),就可以嘗試沉淀頁(yè)面布局和框架。但如果業(yè)務(wù)不具備以上特點(diǎn)而盲目沉淀,很有可能會(huì)為設(shè)計(jì)師帶來(lái)額外的工作量和無(wú)效的積累,也有可能會(huì)變成限制設(shè)計(jì)師能力和創(chuàng)造力的枷鎖。
可以說(shuō),沉淀頁(yè)面框架這個(gè)行為,本身沒(méi)有正確與否的評(píng)價(jià)標(biāo)準(zhǔn),關(guān)鍵是看它是否適合你的業(yè)務(wù)訴求、能否匹配你的工作方法。
畢竟,組件的本質(zhì)功能就是降本提效和達(dá)到一致性,不是為了設(shè)計(jì)組件而做組件。
作者:元堯;微信公眾號(hào):長(zhǎng)弓小子。
本文由@ 元堯 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來(lái)自 Unsplash,基于CC0協(xié)議。
- 目前還沒(méi)評(píng)論,等你發(fā)揮!