組件化設計，就是設計模塊化，組件可復用。是以通用化的視角審視模塊設計，根據業務方需求支持多個產品的接入與使用。

在線教育領域內，題目是線上線下教學場景內校驗學習的一種基本方式，同時，題目可以存在于題庫內，題庫和組卷是承載題目的通常載體，而這兩個載體在各產品教學系統內有共有的需求，由于需求重合度較高，又具備高度的通用性。

所以，以組件的方式設計「題庫」和「組卷」這兩個模塊，通過多種角度去衡量都是有其存在價值的。多方考慮后，由教育部門EduOS團隊負責完成題型的重構、題庫的創建與管理、組卷的方式等模塊的組件化設計。同時在考慮可行性和基礎框架的基礎上，實現一個可在網易100 分、中國大學 MOOC 、云課堂 C/B 端使用的題庫及組卷。在資源共享的情況下，可以調用組件，可以復用代碼，也可以考慮通用模塊功能等。

這篇文章主要是以拋出問題，通過需求認同、共識 > 設計前期 > 項目問題及解決方法 > 理解與思考這4個部分進行逐條講述在這個過程中的實踐與思考。

一. 對組件化的認同、共識

是否認同組件化設計？

可能有些交互設計師本能上是抗拒組件化設計的，因為組件化的設計從某種角度上講可能會扼殺設計師對產品設計的創意。從交互視角看組件化設計，首先需要認同組件化設計。這里可以探討兩個問題。

1. 組件化設計能給產品或業務方帶來什么?

組件化設計帶來的是復用：設計的復用，開發的復用，用戶體驗的復用。復用可以提高效率，在產品迭代的過程中提高效率，在用戶體驗的使用上提高效率，避免用戶因產品同類功能的操作不一致而降低使用體驗，而且后期組件可以同步迭代更新。

2. 一般業務方應該會更重視產品內用戶場景性體驗設計，那組件化設計后會不會犧牲業務方產品的用戶體驗?

在組件設計初期，交互設計師也需要充分挖掘當下產品業務方盡可能多的需求，乃至未來潛在的業務需求，從需求的框架上抽象出組件模塊設計。但這里的組件設計并非僅做全局框架設計，組件的細節也是需要打磨的，而且組件化設計要凌駕于一定的交互規范基礎之上，避免后期設計的“濫用”。另外，在打磨細節時，尤其要注意系統的穩定性和可維護性，能保證后期系統經過若干迭代后還能維持一個運作良好的生態系統。

什么樣的需求或產品可以去做組件化設計？

目前組件化已經趨于普遍，單一功能的組件更常見，比如搜索組件、篩選器組件，也有較完整的功能模塊組件。每一個組件都是一個完整的產品，它們在業務產品內不斷扮演著再組合更多產品的角色。但并不是所有的功能都適合去做組件，組件本身不存在影響產品的好與壞，最重要的是在驅動組件化設計及升級之前，要以組件化思維的姿態，對項目現狀有比較清晰的評估和認知，全面審視需求方向，考慮解決方案，提煉全功能組件。

在衡量組件化設計這個問題上，也可以去嘗試探尋一些量化方法，當然也不局限于量化的數據，更重要的挖掘產品方及用戶的訴求。這就需要考驗組件發起者對產品需求的思維廣度與深度。

二. 設計前期

怎樣快速接收并消化組件化需求？

拿到需求后怎么著手去消化并分析需求，也就是我們設計前期應該做好哪些工作?從確定發起做題庫組卷模塊的組件到項目落地，我幾乎沒有富余的時間去深入了解需求。

簡單分析一下，首先組件化需求的特點是業務需求下沉，需求功能模塊化，模塊與模塊關聯性更強。組件化需求的終極目標是將需求實現成由n個box組合而成的功能，類似于樂高積木，雖然每個積木都是相互獨立的，但是可以靈活，可以多樣。同樣，組裝起來的組件模塊也是靈活多樣的，功能也是強大的，所包含的邏輯性也就更強。所以，面對組件化需求，根據其需求特點，總結了以下幾點快速接收消化需求的方法：

1. 需求思維模塊化，快速分解需求。組件與組件之間不應該存在環形依賴關系，所以大可以去快速分解需求。換種說法，就是將業務設計思維轉化為通用設計思維。

舉個簡單例子：題庫需求可能涉及到多種題型，比如單選題，多選題，填空題，組合題等。題型與題型之間會有相同屬性和不同屬性，那就需要將所有屬性拋開題型抽離出來，對相同屬性進行分析，相同屬性即可設計為同類組件，甚至也考慮可以使用同一組件。

2. 盡可能完整地走查和整理所有已有 & 潛在業務場景，并根據對需求稿的理解構建全局觀，全鏈路考慮解決方案。

3. 提升同理心，積累塑造自己的知識體系，拓寬自己的需求視野。

三. 項目問題與解決方法

在實際的設計與項目進展中，多多少少都會遇到很多問題。總結了以下幾個比較典型的問題及解決方法。同時這幾個問題也是做組件化需求尤其要注意的問題。

如何保證組件設計的一致性？

組件化交互設計最基本的一點是保證設計的一致性。在準備將某個功能模塊做成組件時，我們通常要考慮所做的設計夠不夠通用，能不能滿足接下來的需求?除了學習參考iOS，andriod和其他操作平臺的原生設計規范外，這里分享兩種簡單的方法：

1. 尊重用戶習慣。可以挑選現在比較成功的同類競品，將其產品框架結構及操作規范梳理一下，一般競品成功的原因不外乎兩個：一是給用戶帶來了使用價值，二是給產品方帶來了商業價值。既然給用戶帶來了使用價值，那這些產品的功能或操作體驗在某種意義上講應該是基本符合用戶心理預期的，這些成功競品的功能或操作規范也是和用戶的習慣相輔相成的，是有借鑒意義的。

2. 將需求最終呈現為交互框架時，可以嘗試自上而下對信息結構化歸類。比如歸類顆粒度為：操作屬性，信息展示屬性等等，而信息展示屬性又可以向下歸類為列表類，卡片類等等，這就可以回歸到我們常說的交互組件庫。比如下圖所示，題庫的管理與試卷庫的管理。題庫是對題目的管理，試卷庫是對單份試卷的管理，雖然是兩個不同的功能模塊，但確有著極相似的操作屬性與信息展示屬性。

如何保證設計方案的可行性？

在組件化交互設計上，保證設計方案可行性也是非常重要的。既然是整個功能或模塊去做組件化設計，那它的邏輯性相對來說也是較為復雜的，因為它融合了更多業務方產品的需求。而我們的目標就是需要將這些復雜的需求轉化為更簡單，更靈活的功能，滿足不同的需求。

在交互設計上，為了保證設計方案的可行性，首先要考慮整個設計的環路，無論是應用層，框架層，邏輯層都要 一 一 分析，然而真正在項目實踐中，時間很難允許我們去套用完整的研究方法論，只能靠經驗或自己習慣的設計方法快速產出最終目標。

這里推薦一種針對復雜項目特別實用的設計分析方法：通過基因分解，解構基因，再整合基因的方法，梳理結構、時間線、基因之間的關系去組織新的信息結構、并設定目標任務流程。這里的基因可以是需求，可以是模塊，可以是場景，也可以細致到項目流程中的每個環節。也可以通過(人)人物原型，(事)要解決的需求，(物)所在的當下場景去分析。分析到位后再整合到整個設計過程中。

以下通過EduOS所做的題庫組卷案例簡單分析幾個模塊：

1. 應用層。題庫組卷作為教學系統模塊，可以從教學后臺和用戶學習前臺兩個場景下梳理需求及流程。將每個場景下的時間節點與操作節點梳理出來，并整理兩個場景下的流程關聯關系。

2. 框架層。在組卷內，原本的組卷方式根據4種不同的組卷形態存在4種不同的設置方式，形式單一，不夠靈活。而題庫組卷的需求是希望做更靈活，更通用的組卷方式，而不局限于組卷的形態。所以明確了如下圖所示的需求設計方向。

另外，此次組卷我們新增了主客觀組合在一起的組合卷。所以需要分析新的組合卷比較以往的組卷形式，它們的區別以及各自的屬性分別是什么。

3. 邏輯層。再來分別分析一下題庫及組卷的業務流程及操作邏輯，結合其操作屬性構建完整的設計環路，并將其轉化為更直觀的流程圖。

4. 整合。最后將最終分析出來的有效基因進行整合，將整個環路整理出來，在這基礎上再來進行交互大框架的設計。另外，組件化需求一般是在已有功能的基礎上被提議的，產品策劃一般會對產品設計的方式定義為3種：復用，配置，定制。這3種方式同樣影響到交互設計方案。

在了解組件背景(需求大背景)、組件衍生需求場景、組件存在形式的時候，切記不要急于設計方案，即使擔任的是交互設計角色，最好也要了解組件如何接入產品、組件特性、業務方產品特性、接入影響范圍等等，了解這些對組件化的設計也是有很大幫助的。

EduOS項目從需求環節上就已經梳理出大部分邏輯層的內容，所以在設計過程中能比較快速的理解與分析這些環路。同時，整個過程經過產品，設計，開發，測試共同的努力下，經過多次方案的優化與設計完成了最終產品底層框架的搭建和功能設計。

如何避免異常情況的疏漏？

在組件化設計的過程中，不乏邏輯過于復雜導致需求調整或交互設計不全面的問題。這里推薦一種節點式的排除法，即將流程關鍵點梳理出來，通過這些關鍵點去處理異常情況。

即將用戶對應的操作時間點和影響因子 一 一 列出，連線分析可存在場景，并檢查這些場景是否都 一 一 處理。比如影響到學生答題中這個狀態下的異常因素就有這幾個：試卷發布，授權題目被取消，老師修改題目內容或分值，老師重新判分，答題限時已到，提交截止時間已到，URL進入試卷等等。

四. 理解與思考

以下幾點是在整個EduOS項目中對組件設計的幾點思考。

靈活高效+重易用性

在組件通用的基礎上，終極目標是靈活高效協作。同時，在項目進行中，可以針對某一項通用功能在短時間內嘗試多種設計方案，盡量考慮多種場景，簡化操作流程，重易用性。好的組件設計，會給產品帶來創新，帶來更好的體驗。

關聯性

做產品的組件化設計，要重視關聯性，包括功能與功能之間的關聯性，同時也包含前后臺用戶之間的關聯性。

業務兼容+可擴展性

做產品的組件化設計，要兼容業務，同時對于擴展性要求很高，所以要求產品及設計能夠在熟知業務的基礎上，有抽象建模的能力，能夠抽象出模塊與模塊之間的關系，有很好的產品前瞻性，這樣保證后臺產品架構上清晰靈活，擴展性強。同時，對平臺載體和性能的限制也要考慮到，設計上也要考慮數據系統維護及設計的延展性。

目前，整個教育產品部門的發展規劃模式上也會將部分需求抽象出一種公共能力，即抽象出若干組件去做，并將組件更好的服務于各產品線。

總之，做組件化交互設計，要做到：邏輯思路要清晰，交互設計要規范，產品結構要靈活。有些人會簡單的認為一個產品的后臺就是對一個產品前臺功能的配置，在此基礎上能夠滿足產品方和用戶使用產品的需求。但產品后臺正是體現了整個產品的運營思路和業務邏輯。

歡迎關注作者「網易UEDC」的微信公眾號：