設(shè)計(jì)實(shí)戰(zhàn)教育產(chǎn)品組件化交互設(shè)計(jì)的實(shí)踐與思考

網(wǎng)易UEDC – 王媛媛 ：組件化設(shè)計(jì)，就是設(shè)計(jì)模塊化，組件可復(fù)用。是以通用化的視角審視模塊設(shè)計(jì)，根據(jù)營(yíng)業(yè)方需求支持多個(gè)產(chǎn)品的接入與使用。

在線教育領(lǐng)域內(nèi)，標(biāo)題是線上線下教學(xué)場(chǎng)景內(nèi)校驗(yàn)學(xué)習(xí)的一種基本體例，同時(shí)，標(biāo)題可以存在于題庫(kù)內(nèi)，題庫(kù)和組卷是承載標(biāo)題的通常載體，而這兩個(gè)載體在各產(chǎn)品教學(xué)體系內(nèi)有共有的需求，因?yàn)樾枨笾睾隙容^高，又具備高度的通用性。

所以，以組件的體例設(shè)計(jì)「題庫(kù)」和「組卷」這兩個(gè)模塊，通過(guò)多種角度去衡量都是有其存在價(jià)值的。多方考慮后，由教育部門EduOS團(tuán)隊(duì)負(fù)責(zé)完成題型的重構(gòu)、題庫(kù)的創(chuàng)建與管理、組卷的體例等模塊的組件化設(shè)計(jì)。同時(shí)在考慮可行性和基礎(chǔ)框架的基礎(chǔ)上，實(shí)現(xiàn)一個(gè)可在網(wǎng)易100 分、中國(guó)大學(xué) MOOC 、云課堂 C/B 端使用的題庫(kù)及組卷。在資源共享的情況下，可以調(diào)用組件，可以復(fù)用代碼，也可以考慮通用模塊功能等。

這篇文章重要是以拋出題目，通過(guò)需求認(rèn)同、共識(shí) > 設(shè)計(jì)前期 > 項(xiàng)目題目及解決方法 > 理解與思考這4個(gè)部分進(jìn)行逐條講述在這個(gè)過(guò)程中的實(shí)踐與思考。

一. 對(duì)組件化的認(rèn)同、共識(shí)

是否認(rèn)同組件化設(shè)計(jì)？

可能有些交互設(shè)計(jì)師本能上是抗拒組件化設(shè)計(jì)的，由于組件化的設(shè)計(jì)從某種角度上講可能會(huì)扼殺設(shè)計(jì)師對(duì)產(chǎn)品設(shè)計(jì)的創(chuàng)意。從交互視角看組件化設(shè)計(jì)，首先必要認(rèn)同組件化設(shè)計(jì)。這里可以探究?jī)蓚€(gè)題目。

1. 組件化設(shè)計(jì)能給產(chǎn)品或營(yíng)業(yè)方帶來(lái)什么？

組件化設(shè)計(jì)帶來(lái)的是復(fù)用：設(shè)計(jì)的復(fù)用，開發(fā)的復(fù)用，用戶體驗(yàn)的復(fù)用。復(fù)用可以進(jìn)步服從，在產(chǎn)品迭代的過(guò)程中進(jìn)步服從，在用戶體驗(yàn)的使用上進(jìn)步服從，避免用戶因產(chǎn)品同類功能的操作不同等而降低使用體驗(yàn)，而且后期組件可以同步迭代更新。

2. 一樣平常營(yíng)業(yè)方應(yīng)該會(huì)更正視產(chǎn)品內(nèi)用戶場(chǎng)景性體驗(yàn)設(shè)計(jì)，那組件化設(shè)計(jì)后會(huì)不會(huì)捐軀營(yíng)業(yè)方產(chǎn)品的用戶體驗(yàn)？

在組件設(shè)計(jì)初期，交互設(shè)計(jì)師也必要充分發(fā)掘當(dāng)下產(chǎn)品營(yíng)業(yè)方盡可能多的需求，乃至將來(lái)潛在的營(yíng)業(yè)需求，從需求的框架上抽象出組件模塊設(shè)計(jì)。但這里的組件設(shè)計(jì)并非僅做全局框架設(shè)計(jì)，組件的細(xì)節(jié)也是必要打磨的，而且組件化設(shè)計(jì)要凌駕于肯定的交互規(guī)范基礎(chǔ)之上，避免后期設(shè)計(jì)的“濫用”。另外，在打磨細(xì)節(jié)時(shí)，尤其要細(xì)致體系的穩(wěn)固性和可維護(hù)性，能保證后期體系經(jīng)過(guò)若干迭代后還能維持一個(gè)運(yùn)作優(yōu)秀的生態(tài)體系。

什么樣的需求或產(chǎn)品可以去做組件化設(shè)計(jì)？

目前組件化已經(jīng)趨于普遍，單一功能的組件更常見，比如搜索組件、篩選器組件，也有較完備的功能模塊組件。每一個(gè)組件都是一個(gè)完備的產(chǎn)品，它們?cè)跔I(yíng)業(yè)產(chǎn)品內(nèi)賡續(xù)扮演著再組合更多產(chǎn)品的角色。但并不是所有的功能都適合去做組件，組件自己不存在影響產(chǎn)品的好與壞，最緊張的是在驅(qū)動(dòng)組件化設(shè)計(jì)及升級(jí)之前，要以組件化思維的姿態(tài)，對(duì)項(xiàng)目近況有比較清晰的評(píng)估和認(rèn)知，周全審視需求方向，考慮解決方案，提煉全功能組件。

在衡量組件化設(shè)計(jì)這個(gè)題目上，也可以去嘗試探尋一些量化方法，當(dāng)然也不局限于量化的數(shù)據(jù)，更緊張的發(fā)掘產(chǎn)品方及用戶的訴求。這就必要考驗(yàn)組件提議者對(duì)產(chǎn)品需求的思維廣度與深度。

二. 設(shè)計(jì)前期

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

拿到需求后怎么動(dòng)手去消化并分析需求，也就是我們?cè)O(shè)計(jì)前期應(yīng)該做好哪些工作？從確定提議做題庫(kù)組卷模塊的組件到項(xiàng)目落地，我?guī)缀鯖](méi)有富余的時(shí)間去深入了解需求。

簡(jiǎn)單分析一下，首先組件化需求的特點(diǎn)是營(yíng)業(yè)需求下沉，需求功能模塊化，模塊與模塊關(guān)聯(lián)性更強(qiáng)。組件化需求的終極目標(biāo)是將需求實(shí)現(xiàn)成由n個(gè)box組合而成的功能，類似于樂(lè)高積木，雖然每個(gè)積木都是相互自力的，但是可以天真，可以多樣。同樣，組裝起來(lái)的組件模塊也是天真多樣的，功能也是壯大的，所包含的邏輯性也就更強(qiáng)。所以，面對(duì)組件化需求，根據(jù)其需求特點(diǎn)，總結(jié)了以下幾點(diǎn)快速接收消化需求的方法：

1. 需求思維模塊化，快速分解需求。組件與組件之間不應(yīng)該存在環(huán)形依靠關(guān)系，所以大可以去快速分解需求。換種說(shuō)法，就是將營(yíng)業(yè)設(shè)計(jì)思維轉(zhuǎn)化為通用設(shè)計(jì)思維。

舉個(gè)簡(jiǎn)單例子：題庫(kù)需求可能涉及到多種題型，比如單選題，多選題，填空題，組合題等。題型與題型之間會(huì)有雷同屬性和不同屬性，那就必要將所有屬性拋開題型抽離出來(lái)，對(duì)雷同屬性進(jìn)行分析，雷同屬性即可設(shè)計(jì)為同類組件，甚至也考慮可以使用統(tǒng)一組件。

2. 盡可能完備地走查和整頓所有已有 & 潛在營(yíng)業(yè)場(chǎng)景，并根據(jù)對(duì)需求稿的理解構(gòu)建全局觀，全鏈路考慮解決方案。

3. 提拔同理心，積累塑造本身的知識(shí)系統(tǒng)，拓寬本身的需求視野。

三. 項(xiàng)目題目與解決方法

在現(xiàn)實(shí)的設(shè)計(jì)與項(xiàng)目進(jìn)展中，多多少少都會(huì)碰到許多題目?？偨Y(jié)了以下幾個(gè)比較典型的題目及解決方法。同時(shí)這幾個(gè)題目也是做組件化需求尤其要細(xì)致的題目。

如何保證組件設(shè)計(jì)的同等性？

組件化交互設(shè)計(jì)最基本的一點(diǎn)是保證設(shè)計(jì)的同等性。在預(yù)備將某個(gè)功能模塊做成組件時(shí)，我們通常要考慮所做的設(shè)計(jì)夠不夠通用，能不能知足接下來(lái)的需求？除了學(xué)習(xí)參考iOS，andriod和其他操作平臺(tái)的原生設(shè)計(jì)規(guī)范外，這里分享兩種簡(jiǎn)單的方法：

1. 尊重用戶風(fēng)俗?？梢藻噙x如今比較成功的同類競(jìng)品，將其產(chǎn)品框架結(jié)構(gòu)及操作規(guī)范梳理一下，一樣平常競(jìng)品成功的緣故原由不外乎兩個(gè)：一是給用戶帶來(lái)了使用價(jià)值，二是給產(chǎn)品方帶來(lái)了商業(yè)價(jià)值。既然給用戶帶來(lái)了使用價(jià)值，那這些產(chǎn)品的功能或操作體驗(yàn)在某種意義上講應(yīng)該是基本吻合用戶生理預(yù)期的，這些成功競(jìng)品的功能或操作規(guī)范也是和用戶的風(fēng)俗相輔相成的，是有借鑒意義的。

2. 將需求最終呈現(xiàn)為交互框架時(shí)，可以嘗試自上而下對(duì)信息結(jié)構(gòu)化歸類。比如歸類顆粒度為：操作屬性，信息展示屬性等等，而信息展示屬性又可以向下歸類為列表類，卡片類等等，這就可以回歸到我們常說(shuō)的交互組件庫(kù)。比如下圖所示，題庫(kù)的管理與試卷庫(kù)的管理。題庫(kù)是對(duì)標(biāo)題的管理，試卷庫(kù)是對(duì)單份試卷的管理，雖然是兩個(gè)不同的功能模塊，但確有著極相似的操作屬性與信息展示屬性。

如何保證設(shè)計(jì)方案的可行性？

在組件化交互設(shè)計(jì)上，保證設(shè)計(jì)方案可行性也是特別很是緊張的。既然是整個(gè)功能或模塊去做組件化設(shè)計(jì)，那它的邏輯性相對(duì)來(lái)說(shuō)也是較為復(fù)雜的，由于它融合了更多營(yíng)業(yè)方產(chǎn)品的需求。而我們的目標(biāo)就是必要將這些復(fù)雜的需求轉(zhuǎn)化為更簡(jiǎn)單，更天真的功能，知足不同的需求。

在交互設(shè)計(jì)上，為了保證設(shè)計(jì)方案的可行性，首先要考慮整個(gè)設(shè)計(jì)的環(huán)路，無(wú)論是應(yīng)用層，框架層，邏輯層都要 一 一 分析，然而真正在項(xiàng)目實(shí)踐中，時(shí)間很難許可我們?nèi)ヌ子猛陚涞难芯糠椒ㄕ?，只能靠?jīng)驗(yàn)或本身風(fēng)俗的設(shè)計(jì)方法快速產(chǎn)出最終目標(biāo)。

這里保舉一種針對(duì)復(fù)雜項(xiàng)目分外實(shí)用的設(shè)計(jì)分析方法：通過(guò)基因分解，解構(gòu)基因，再整合基因的方法，梳理結(jié)構(gòu)、時(shí)間線、基因之間的關(guān)系去組織新的信息結(jié)構(gòu)、并設(shè)定目標(biāo)義務(wù)流程。這里的基因可以是需求，可以是模塊，可以是場(chǎng)景，也可以過(guò)細(xì)到項(xiàng)目流程中的每個(gè)環(huán)節(jié)。也可以通過(guò)（人）人物原型，（事）要解決的需求，（物）所在的當(dāng)了局景去分析。分析到位后再整合到整個(gè)設(shè)計(jì)過(guò)程中。

以下通過(guò)EduOS所做的題庫(kù)組卷案例簡(jiǎn)單分析幾個(gè)模塊：

1. 應(yīng)用層。題庫(kù)組卷作為教學(xué)體系模塊，可以從教學(xué)后臺(tái)和用戶學(xué)習(xí)前臺(tái)兩個(gè)場(chǎng)景下梳理需求及流程。將每個(gè)場(chǎng)景下的時(shí)間節(jié)點(diǎn)與操作節(jié)點(diǎn)梳理出來(lái)，并整頓兩個(gè)場(chǎng)景下的流程關(guān)聯(lián)關(guān)系。

2. 框架層。在組卷內(nèi)，本來(lái)的組卷體例根據(jù)4種不同的組卷形態(tài)存在4種不同的設(shè)置體例，情勢(shì)單一，不夠天真。而題庫(kù)組卷的需求是盼望做更天真，更通用的組卷體例，而不局限于組卷的形態(tài)。所以明確了如下圖所示的需求設(shè)計(jì)方向。

另外，此次組卷我們新增了主客觀組合在一路的組合卷。所以必要分析新的組合卷比較以往的組卷情勢(shì)，它們的區(qū)別以及各自的屬性分別是什么。

3. 邏輯層。再來(lái)分別分析一下題庫(kù)及組卷的營(yíng)業(yè)流程及操作邏輯，結(jié)合其操作屬性構(gòu)建完備的設(shè)計(jì)環(huán)路，并將其轉(zhuǎn)化為更直觀的流程圖。

4. 整合。最后將最終分析出來(lái)的有用基因進(jìn)行整合，將整個(gè)環(huán)路整頓出來(lái)，在這基礎(chǔ)上再來(lái)進(jìn)行交互大框架的設(shè)計(jì)。另外，組件化需求一樣平常是在已有功能的基礎(chǔ)上被發(fā)起的，產(chǎn)品策同等般會(huì)對(duì)產(chǎn)品設(shè)計(jì)的體例定義為3種：復(fù)用，配置，定制。這3種體例同樣影響到交互設(shè)計(jì)方案。

在了解組件背景（需求大背景）、組件衍生需求場(chǎng)景、組件存在情勢(shì)的時(shí)候，切記不要急于設(shè)計(jì)方案，即使擔(dān)任的是交互設(shè)計(jì)角色，最好也要了解組件如何接入產(chǎn)品、組件特征、營(yíng)業(yè)方產(chǎn)品特征、接入影響范圍等等，了解這些對(duì)組件化的設(shè)計(jì)也是有很大幫助的。

EduOS項(xiàng)目從需求環(huán)節(jié)上就已經(jīng)梳理出大部分邏輯層的內(nèi)容，所以在設(shè)計(jì)過(guò)程中能比較快速的理解與分析這些環(huán)路。同時(shí)，整個(gè)過(guò)程經(jīng)過(guò)產(chǎn)品，設(shè)計(jì)，開發(fā)，測(cè)試共同的努力下，經(jīng)過(guò)多次方案的優(yōu)化與設(shè)計(jì)完成了最終產(chǎn)品底層框架的搭建和功能設(shè)計(jì)。

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

在組件化設(shè)計(jì)的過(guò)程中，不乏邏輯過(guò)于復(fù)雜導(dǎo)致需求調(diào)整或交互設(shè)計(jì)不周全的題目。這里保舉一種節(jié)點(diǎn)式的排除法，即將流程關(guān)鍵點(diǎn)梳理出來(lái)，通過(guò)這些關(guān)鍵點(diǎn)行止理非常情況。

即將用戶對(duì)應(yīng)的操作時(shí)間點(diǎn)和影響因子 一 一 列出，連線分析可存在場(chǎng)景，并檢查這些場(chǎng)景是否都 一 一 處理。比如影響到門生答題中這個(gè)狀況下的非常因素就有這幾個(gè)：試卷發(fā)布，授權(quán)標(biāo)題被取消，先生修改標(biāo)題內(nèi)容或分值，先生重新判分，答題限時(shí)已到，提交截止時(shí)間已到，URL進(jìn)入試卷等等。

四. 理解與思考

以下幾點(diǎn)是在整個(gè)EduOS項(xiàng)目中對(duì)組件設(shè)計(jì)的幾點(diǎn)思考。

天真高效+重易用性

在組件通用的基礎(chǔ)上，終極目標(biāo)是天真高效協(xié)作。同時(shí)，在項(xiàng)目進(jìn)行中，可以針對(duì)某一項(xiàng)通勤奮能在短時(shí)間內(nèi)嘗試多種設(shè)計(jì)方案，盡量考慮多種場(chǎng)景，簡(jiǎn)化操作流程，重易用性。好的組件設(shè)計(jì)，會(huì)給產(chǎn)品帶來(lái)創(chuàng)新，帶來(lái)更好的體驗(yàn)。

關(guān)聯(lián)性

做產(chǎn)品的組件化設(shè)計(jì)，要正視關(guān)聯(lián)性，包括功能與功能之間的關(guān)聯(lián)性，同時(shí)也包含前后臺(tái)用戶之間的關(guān)聯(lián)性。

營(yíng)業(yè)兼容+可擴(kuò)展性

做產(chǎn)品的組件化設(shè)計(jì)，要兼容營(yíng)業(yè)，同時(shí)對(duì)于擴(kuò)展性要求很高，所以要求產(chǎn)品及設(shè)計(jì)能夠在熟知營(yíng)業(yè)的基礎(chǔ)上，有抽象建模的能力，能夠抽象出模塊與模塊之間的關(guān)系，有很好的產(chǎn)品前瞻性，如許保證后臺(tái)產(chǎn)品架構(gòu)上清晰天真，擴(kuò)展性強(qiáng)。同時(shí)，對(duì)平臺(tái)載體和性能的限定也要考慮到，設(shè)計(jì)上也要考慮數(shù)據(jù)體系維護(hù)及設(shè)計(jì)的延展性。

目前，整個(gè)教育產(chǎn)品部門的發(fā)展規(guī)劃模式上也會(huì)將部分需求抽象出一種公共能力，即抽象出若干組件去做，并將組件更好的服務(wù)于各產(chǎn)品線。

總之，做組件化交互設(shè)計(jì)，要做到：邏輯思路要清晰，交互設(shè)計(jì)要規(guī)范，產(chǎn)品結(jié)構(gòu)要天真。有些人會(huì)簡(jiǎn)單的認(rèn)為一個(gè)產(chǎn)品的后臺(tái)就是對(duì)一個(gè)產(chǎn)品前臺(tái)功能的配置，在此基礎(chǔ)上能夠知足產(chǎn)品方和用戶使用產(chǎn)品的需求。但產(chǎn)品后臺(tái)正是表現(xiàn)了整個(gè)產(chǎn)品的運(yùn)營(yíng)思路和營(yíng)業(yè)邏輯。

迎接關(guān)注作者「網(wǎng)易UEDC」的微信公眾號(hào)：