前言

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

更多組件知識科普：

一、從麥當勞的制作模式看基礎組件

就如同我們將準備好的的組件放入頁面中就可以生成通用頁面一樣，麥當勞通過提前準備好的食物，通過在工廠預先制作成半成品后發放到各個門店中，店員們只需要按照設定好的參數將預制的半成品加工后就可以售出。這樣既能保證可以快速滿足顧客需求，提高餐廳效率，也能保證口味統一，質量不會出錯。這半成品就好比我們工作中的基礎組件。

基礎組件適用于所有業務場景，是一種被設計用于在多個項目中被重復使用的組件。這些組件是相對獨立的，可以被輕松地添加到不同的項目中，并且不需要進行太多的自定義或修改。比如無論是 C 端還是 B 端，無論是金融還是電商都需要輸入框、單選等等這一類底層組件，也就是基礎組件。基礎組件的設計和開發可以幫助提高工作效率，減少重復性的工作，同時也能夠保證在不同項目中組件的一致性和穩定性。作為設計師只需要把這些組件簡單的放在指定位置修改文案后就可以使用。通過推導可以得出基礎組件的特點如下：

1. 單一，不可再拆分：比如一個輸入框，一個開關等。
2. 適用于所有業務場景：比如電商業務、金融業務等所有業務都可以使用。
3. 可保證設計質量和效率：使用組件可以使設計稿統一，有利于提升設計和開發的工作協同效率。

基礎組件可以幫助設計師們維護一致性和可用性。我們可以使用預先準備好圖標、按鈕、字體、顏色等元素快速完成項目，使用基礎組件可以節約時間，提高工作效率，并且可以重復使用，以便維護和更新界面，提高產品的可用性和用戶體驗。

無論是預制菜或者是設計組件通常都用于 B 端產品中，這樣可以在保證質量的同時提高工作效率，員工只需要通過簡單學習就可以快速上手。但他們的缺陷也很明顯：放在任何場景都可以使用，無法滿足個性化業務的需求。

基礎組件可以直接借鑒已有的、成熟的開源組件設計體系，減少重復勞作，比如說 Ant Design，Arco Design 等等開源的組件庫，但也有可能出現無法滿足特有業務，所以這個時候就需要設計更有針對性的「業務組件」，更快的去完成業務需求。

二、從薯條吃法的創新看業務組件

「業務組件」也被叫做「高級組件」或者「區塊組件」，是一種具有復雜功能和可重用性的組件，可以在設計系統中多次使用。與基礎組件不同，高級組件不僅僅是單一的 UI 元素，而是由多個 UI 元素和交互行為組成的集合體。這些組件通常具有更高的抽象級別，能夠滿足更具體的需求，能夠更好地反映設計系統中的設計原則和風格，是一種相對來說更具備業務屬性的組件。雖然 ant design 也有提供業務組件，但只是提供給開發讓中后臺開發變得更簡單，作為設計師應該根據業務進行分析后進行設計。

就拿薯條來舉例，薯條是很經典的一個菜品，據麥當勞官方資料，他們的薯條最早是在 20 世紀 50 年代開始銷售的，所以這個食物已經在市場上存在了很多年了。除了常見的薯條搭配番茄醬外，很多餐廳為了把薯條和自己的業務相結合，做出了一些創新，比如有些餐廳會將肉醬與薯條進行結合；像麥當勞一樣也曾推出過的油潑辣子味薯條、楊枝甘露風味雪糕，通過將原有食材增加其他預置品進行結合的方式以迎合市場的口味，這種結合可以理解為是為了滿足部分用戶的需求而組成的業務組件。

因此我們可以發現業務組件有以下的幾個特點：

1. 是復合型的區塊組件: 是基礎組件的合集，可以是一個表格，一個多功能卡片，一個下拉樣式等。
2. 適用于專業的業務場景: 具有強烈的業務屬性，更具有針對性，使用起來更高效。
3. 可保證業務完成的專業性和效率: 好的業務組件可以更好的賦能業務，更快的完成業務需求。

業務組件來源于業務，是設計師對具有業務特色且出現頻次高的組件進行整理和沉淀。設計師需要根據業務中的實際應用場景和需求，總結出更適合自己公司業務場景的業務組件庫。

三、工作中設計業務組件的案例

相比于基礎組件，高級組件因其獨特的業務屬性，以及與產品的強綁定關系，很難找到已有的組件庫進行借鑒和應用。最近在制作公司內部的智能運營平臺產品的時候曾經遇到過類似的問題，在用戶行為分析里篩選用戶事件時，用戶反饋下拉的體驗感非常差，經過溝通后了解到是因為：普通的下拉組件可能會因為數據量過大導致用戶選擇某一選項需要花費很長時間才能完成選擇。

通過進一步的使用后發現，只要是在分析內涉及到篩選，都會出現類似的問題。對于“如何從大量的數據中進行選擇”這個問題，首先聯想到的就是“搜索”功能，可以在原有的樣式上提供搜索功能，以便用戶快速選擇。但是在提供了這個方案后，領導并不滿意，他們覺得: " 萬一不記得具體屬性的名稱該怎么辦，屬性這么多不能要求用戶都能記住吧。"

經過思考后，我們將下拉內容數據進行整理。通過進一步進行溝通，了解到這里的語言邏輯為: 需要統計 「某個數據埋點」 的 「屬性值 」的數據，舉個對應的例子就是：需要統計 「購買商品」 的 「總人數」 的數據。同時根據了解，在進行部署時，我們會將埋點分為全屬性、用戶屬性、事件屬性、設備屬性以及 app 屬性這五個屬性類型，具體關系梳理成思維導圖展示如下：

再回到剛開始的問題: “如何從大量的數據中進行選擇”，除了搜索以外，還可以通過提供篩選功能，讓用戶更快的找到自己想要的選項，于是我們在下拉選擇中不僅增加了搜索樣式，還將屬性進行分組增加了篩選。

考慮到這個場景在內部智能運營平臺產品經常出現，于是也把它納入了業務組件中。

四、最后叨叨幾句

無論是通用組件還是業務組件，目的都是為了讓用戶體驗起來更好，達到降本增效的目的。作為設計師，我們需要通過對業務需求和屬性的深入研究，將業務組件做的足夠專業，也會從另一個維度對業務進行補充和賦能，促進產品質量的提升。這也是 B 端設計師應該提升的能力。

歡迎關注團隊微信公眾號：兆日 UCD