前言

麥當(dāng)勞是我們常見(jiàn)的全球大型跨國(guó)連鎖餐廳，每次在回家路上都會(huì)經(jīng)過(guò)幾家麥當(dāng)勞餐廳，但是通過(guò)觀(guān)察發(fā)現(xiàn)麥當(dāng)勞內(nèi)進(jìn)進(jìn)出出的工作人員普遍年紀(jì)都不大，甚至有些餐廳除了主管以外其他大多數(shù)人都是大學(xué)生兼職，于是便產(chǎn)生了一些思考：他們是怎么做到新的店職員只需要經(jīng)過(guò)簡(jiǎn)單的培訓(xùn)就直接工作以及怎么做到這么多門(mén)店口味統(tǒng)一。后續(xù)通過(guò)進(jìn)入內(nèi)部打探了一段時(shí)間后發(fā)現(xiàn)里面的食物基本都是通過(guò)使用半成品通過(guò)規(guī)定的烹飪時(shí)間和方式加工后就可以完成。這讓我想起了工作中常見(jiàn)的設(shè)計(jì)組件。

一、從麥當(dāng)勞的制作模式看基礎(chǔ)組件

就如同我們將準(zhǔn)備好的的組件放入頁(yè)面中就可以生成通用頁(yè)面一樣，麥當(dāng)勞通過(guò)提前準(zhǔn)備好的食物，通過(guò)在工廠(chǎng)預(yù)先制作成半成品后發(fā)放到各個(gè)門(mén)店中，店員們只需要按照設(shè)定好的參數(shù)將預(yù)制的半成品加工后就可以售出。這樣既能保證可以快速滿(mǎn)足顧客需求，提高餐廳效率，也能保證口味統(tǒng)一，質(zhì)量不會(huì)出錯(cuò)。這半成品就好比我們工作中的基礎(chǔ)組件。

基礎(chǔ)組件適用于所有業(yè)務(wù)場(chǎng)景，是一種被設(shè)計(jì)用于在多個(gè)項(xiàng)目中被重復(fù)使用的組件。這些組件是相對(duì)獨(dú)立的，可以被輕松地添加到不同的項(xiàng)目中，并且不需要進(jìn)行太多的自定義或修改。比如無(wú)論是 C 端還是 B 端，無(wú)論是金融還是電商都需要輸入框、單選等等這一類(lèi)底層組件，也就是基礎(chǔ)組件?；A(chǔ)組件的設(shè)計(jì)和開(kāi)發(fā)可以幫助提高工作效率，減少重復(fù)性的工作，同時(shí)也能夠保證在不同項(xiàng)目中組件的一致性和穩(wěn)定性。作為設(shè)計(jì)師只需要把這些組件簡(jiǎn)單的放在指定位置修改文案后就可以使用。通過(guò)推導(dǎo)可以得出基礎(chǔ)組件的特點(diǎn)如下：

1. 單一，不可再拆分：比如一個(gè)輸入框，一個(gè)開(kāi)關(guān)等。
2. 適用于所有業(yè)務(wù)場(chǎng)景：比如電商業(yè)務(wù)、金融業(yè)務(wù)等所有業(yè)務(wù)都可以使用。
3. 可保證設(shè)計(jì)質(zhì)量和效率：使用組件可以使設(shè)計(jì)稿統(tǒng)一，有利于提升設(shè)計(jì)和開(kāi)發(fā)的工作協(xié)同效率。

基礎(chǔ)組件可以幫助設(shè)計(jì)師們維護(hù)一致性和可用性。我們可以使用預(yù)先準(zhǔn)備好圖標(biāo)、按鈕、字體、顏色等元素快速完成項(xiàng)目，使用基礎(chǔ)組件可以節(jié)約時(shí)間，提高工作效率，并且可以重復(fù)使用，以便維護(hù)和更新界面，提高產(chǎn)品的可用性和用戶(hù)體驗(yàn)。

無(wú)論是預(yù)制菜或者是設(shè)計(jì)組件通常都用于 B 端產(chǎn)品中，這樣可以在保證質(zhì)量的同時(shí)提高工作效率，員工只需要通過(guò)簡(jiǎn)單學(xué)習(xí)就可以快速上手。但他們的缺陷也很明顯：放在任何場(chǎng)景都可以使用，無(wú)法滿(mǎn)足個(gè)性化業(yè)務(wù)的需求。

基礎(chǔ)組件可以直接借鑒已有的、成熟的開(kāi)源組件設(shè)計(jì)體系，減少重復(fù)勞作，比如說(shuō) Ant Design，Arco Design 等等開(kāi)源的組件庫(kù)，但也有可能出現(xiàn)無(wú)法滿(mǎn)足特有業(yè)務(wù)，所以這個(gè)時(shí)候就需要設(shè)計(jì)更有針對(duì)性的「業(yè)務(wù)組件」，更快的去完成業(yè)務(wù)需求。

二、從薯?xiàng)l吃法的創(chuàng)新看業(yè)務(wù)組件

「業(yè)務(wù)組件」也被叫做「高級(jí)組件」或者「區(qū)塊組件」，是一種具有復(fù)雜功能和可重用性的組件，可以在設(shè)計(jì)系統(tǒng)中多次使用。與基礎(chǔ)組件不同，高級(jí)組件不僅僅是單一的 UI 元素，而是由多個(gè) UI 元素和交互行為組成的集合體。這些組件通常具有更高的抽象級(jí)別，能夠滿(mǎn)足更具體的需求，能夠更好地反映設(shè)計(jì)系統(tǒng)中的設(shè)計(jì)原則和風(fēng)格，是一種相對(duì)來(lái)說(shuō)更具備業(yè)務(wù)屬性的組件。雖然 ant design 也有提供業(yè)務(wù)組件，但只是提供給開(kāi)發(fā)讓中后臺(tái)開(kāi)發(fā)變得更簡(jiǎn)單，作為設(shè)計(jì)師應(yīng)該根據(jù)業(yè)務(wù)進(jìn)行分析后進(jìn)行設(shè)計(jì)。

就拿薯?xiàng)l來(lái)舉例，薯?xiàng)l是很經(jīng)典的一個(gè)菜品，據(jù)麥當(dāng)勞官方資料，他們的薯?xiàng)l最早是在 20 世紀(jì) 50 年代開(kāi)始銷(xiāo)售的，所以這個(gè)食物已經(jīng)在市場(chǎng)上存在了很多年了。除了常見(jiàn)的薯?xiàng)l搭配番茄醬外，很多餐廳為了把薯?xiàng)l和自己的業(yè)務(wù)相結(jié)合，做出了一些創(chuàng)新，比如有些餐廳會(huì)將肉醬與薯?xiàng)l進(jìn)行結(jié)合；像麥當(dāng)勞一樣也曾推出過(guò)的油潑辣子味薯?xiàng)l、楊枝甘露風(fēng)味雪糕，通過(guò)將原有食材增加其他預(yù)置品進(jìn)行結(jié)合的方式以迎合市場(chǎng)的口味，這種結(jié)合可以理解為是為了滿(mǎn)足部分用戶(hù)的需求而組成的業(yè)務(wù)組件。

因此我們可以發(fā)現(xiàn)業(yè)務(wù)組件有以下的幾個(gè)特點(diǎn)：

1. 是復(fù)合型的區(qū)塊組件: 是基礎(chǔ)組件的合集，可以是一個(gè)表格，一個(gè)多功能卡片，一個(gè)下拉樣式等。
2. 適用于專(zhuān)業(yè)的業(yè)務(wù)場(chǎng)景: 具有強(qiáng)烈的業(yè)務(wù)屬性，更具有針對(duì)性，使用起來(lái)更高效。
3. 可保證業(yè)務(wù)完成的專(zhuān)業(yè)性和效率: 好的業(yè)務(wù)組件可以更好的賦能業(yè)務(wù)，更快的完成業(yè)務(wù)需求。

業(yè)務(wù)組件來(lái)源于業(yè)務(wù)，是設(shè)計(jì)師對(duì)具有業(yè)務(wù)特色且出現(xiàn)頻次高的組件進(jìn)行整理和沉淀。設(shè)計(jì)師需要根據(jù)業(yè)務(wù)中的實(shí)際應(yīng)用場(chǎng)景和需求，總結(jié)出更適合自己公司業(yè)務(wù)場(chǎng)景的業(yè)務(wù)組件庫(kù)。

三、工作中設(shè)計(jì)業(yè)務(wù)組件的案例

相比于基礎(chǔ)組件，高級(jí)組件因其獨(dú)特的業(yè)務(wù)屬性，以及與產(chǎn)品的強(qiáng)綁定關(guān)系，很難找到已有的組件庫(kù)進(jìn)行借鑒和應(yīng)用。最近在制作公司內(nèi)部的智能運(yùn)營(yíng)平臺(tái)產(chǎn)品的時(shí)候曾經(jīng)遇到過(guò)類(lèi)似的問(wèn)題，在用戶(hù)行為分析里篩選用戶(hù)事件時(shí)，用戶(hù)反饋下拉的體驗(yàn)感非常差，經(jīng)過(guò)溝通后了解到是因?yàn)椋浩胀ǖ南吕M件可能會(huì)因?yàn)閿?shù)據(jù)量過(guò)大導(dǎo)致用戶(hù)選擇某一選項(xiàng)需要花費(fèi)很長(zhǎng)時(shí)間才能完成選擇。

通過(guò)進(jìn)一步的使用后發(fā)現(xiàn)，只要是在分析內(nèi)涉及到篩選，都會(huì)出現(xiàn)類(lèi)似的問(wèn)題。對(duì)于"如何從大量的數(shù)據(jù)中進(jìn)行選擇"這個(gè)問(wèn)題，首先聯(lián)想到的就是"搜索"功能，可以在原有的樣式上提供搜索功能，以便用戶(hù)快速選擇。但是在提供了這個(gè)方案后，領(lǐng)導(dǎo)并不滿(mǎn)意，他們覺(jué)得: " 萬(wàn)一不記得具體屬性的名稱(chēng)該怎么辦，屬性這么多不能要求用戶(hù)都能記住吧。"

經(jīng)過(guò)思考后，我們將下拉內(nèi)容數(shù)據(jù)進(jìn)行整理。通過(guò)進(jìn)一步進(jìn)行溝通，了解到這里的語(yǔ)言邏輯為: 需要統(tǒng)計(jì) 「某個(gè)數(shù)據(jù)埋點(diǎn)」 的 「屬性值 」的數(shù)據(jù)，舉個(gè)對(duì)應(yīng)的例子就是：需要統(tǒng)計(jì) 「購(gòu)買(mǎi)商品」 的 「總?cè)藬?shù)」 的數(shù)據(jù)。同時(shí)根據(jù)了解，在進(jìn)行部署時(shí)，我們會(huì)將埋點(diǎn)分為全屬性、用戶(hù)屬性、事件屬性、設(shè)備屬性以及 app 屬性這五個(gè)屬性類(lèi)型，具體關(guān)系梳理成思維導(dǎo)圖展示如下：

再回到剛開(kāi)始的問(wèn)題: "如何從大量的數(shù)據(jù)中進(jìn)行選擇"，除了搜索以外，還可以通過(guò)提供篩選功能，讓用戶(hù)更快的找到自己想要的選項(xiàng)，于是我們?cè)谙吕x擇中不僅增加了搜索樣式，還將屬性進(jìn)行分組增加了篩選。

考慮到這個(gè)場(chǎng)景在內(nèi)部智能運(yùn)營(yíng)平臺(tái)產(chǎn)品經(jīng)常出現(xiàn)，于是也把它納入了業(yè)務(wù)組件中。

四、最后叨叨幾句

無(wú)論是通用組件還是業(yè)務(wù)組件，目的都是為了讓用戶(hù)體驗(yàn)起來(lái)更好，達(dá)到降本增效的目的。作為設(shè)計(jì)師，我們需要通過(guò)對(duì)業(yè)務(wù)需求和屬性的深入研究，將業(yè)務(wù)組件做的足夠?qū)I(yè)，也會(huì)從另一個(gè)維度對(duì)業(yè)務(wù)進(jìn)行補(bǔ)充和賦能，促進(jìn)產(chǎn)品質(zhì)量的提升。這也是 B 端設(shè)計(jì)師應(yīng)該提升的能力。

作者：兆日 UCD