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

3 評論 9773 瀏覽 77 收藏 18 分鐘

組件化設(shè)計,就是設(shè)計模塊化,組件可復(fù)用。是以通用化的視角審視模塊設(shè)計,根據(jù)業(yè)務(wù)方需求支持多個產(chǎn)品的接入與使用。

在線教育領(lǐng)域內(nèi),題目是線上線下教學(xué)場景內(nèi)校驗學(xué)習(xí)的一種基本方式,同時,題目可以存在于題庫內(nèi),題庫和組卷是承載題目的通常載體,而這兩個載體在各產(chǎn)品教學(xué)系統(tǒng)內(nèi)有共有的需求,由于需求重合度較高,又具備高度的通用性。

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

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

對組件化的認同、共識

是否認同組件化設(shè)計?

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

1.?組件化設(shè)計能給產(chǎn)品或業(yè)務(wù)方帶來什么?

組件化設(shè)計帶來的是復(fù)用:設(shè)計的復(fù)用,開發(fā)的復(fù)用,用戶體驗的復(fù)用。復(fù)用可以提高效率:在產(chǎn)品迭代的過程中提高效率,在用戶體驗的使用上提高效率,避免用戶因產(chǎn)品同類功能的操作不一致而降低使用體驗,而且后期組件可以同步迭代更新。

2.?一般業(yè)務(wù)方應(yīng)該會更重視產(chǎn)品內(nèi)用戶場景性體驗設(shè)計,那組件化設(shè)計后會不會犧牲業(yè)務(wù)方產(chǎn)品的用戶體驗?

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

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

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

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

設(shè)計前期

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

拿到需求后怎么著手去消化并分析需求,也就是我們設(shè)計前期應(yīng)該做好哪些工作?從確定發(fā)起做題庫組卷模塊的組件到項目落地,我?guī)缀鯖]有富余的時間去深入了解需求。

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

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

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

2.?盡可能完整地走查和整理所有已有 & 潛在業(yè)務(wù)場景,并根據(jù)對需求稿的理解構(gòu)建全局觀,全鏈路考慮解決方案。

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

項目問題與解決方法

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

如何保證組件設(shè)計的一致性?

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

1.?尊重用戶習(xí)慣??梢蕴暨x現(xiàn)在比較成功的同類競品,將其產(chǎn)品框架結(jié)構(gòu)及操作規(guī)范梳理一下,一般競品成功的原因不外乎兩個:一是給用戶帶來了使用價值,二是給產(chǎn)品方帶來了商業(yè)價值。既然給用戶帶來了使用價值,那這些產(chǎn)品的功能或操作體驗在某種意義上講應(yīng)該是基本符合用戶心理預(yù)期的,這些成功競品的功能或操作規(guī)范也是和用戶的習(xí)慣相輔相成的,是有借鑒意義的。

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

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

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

在交互設(shè)計上,為了保證設(shè)計方案的可行性,首先要考慮整個設(shè)計的環(huán)路,無論是應(yīng)用層,框架層,邏輯層都要 一 一 分析,然而真正在項目實踐中,時間很難允許我們?nèi)ヌ子猛暾难芯糠椒ㄕ摚荒芸拷?jīng)驗或自己習(xí)慣的設(shè)計方法快速產(chǎn)出最終目標(biāo)。

這里推薦一種針對復(fù)雜項目特別實用的設(shè)計分析方法:通過基因分解,解構(gòu)基因,再整合基因的方法,梳理結(jié)構(gòu)、時間線、基因之間的關(guān)系去組織新的信息結(jié)構(gòu)、并設(shè)定目標(biāo)任務(wù)流程。這里的基因可以是需求,可以是模塊,可以是場景,也可以細致到項目流程中的每個環(huán)節(jié)。也可以通過(人)人物原型,(事)要解決的需求,(物)所在的當(dāng)下場景去分析。分析到位后再整合到整個設(shè)計過程中。

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

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

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

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

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

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

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

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

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

在組件化設(shè)計的過程中,不乏邏輯過于復(fù)雜導(dǎo)致需求調(diào)整或交互設(shè)計不全面的問題~這里推薦一種節(jié)點式的排除法,即將流程關(guān)鍵點梳理出來,通過這些關(guān)鍵點去處理異常情況。

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

理解與思考

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

靈活高效 重易用性

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

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

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

業(yè)務(wù)兼容,可擴展性

做產(chǎn)品的組件化設(shè)計,要兼容業(yè)務(wù),同時對于擴展性要求很高,所以要求產(chǎn)品及設(shè)計能夠在熟知業(yè)務(wù)的基礎(chǔ)上,有抽象建模的能力,能夠抽象出模塊與模塊之間的關(guān)系,有很好的產(chǎn)品前瞻性,這樣保證后臺產(chǎn)品架構(gòu)上清晰靈活,擴展性強。同時,對平臺載體和性能的限制也要考慮到,設(shè)計上也要考慮數(shù)據(jù)系統(tǒng)維護及設(shè)計的延展性。

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

總之,做組件化交互設(shè)計,要做到:邏輯思路要清晰,交互設(shè)計要規(guī)范,產(chǎn)品結(jié)構(gòu)要靈活。有些人會簡單的認為一個產(chǎn)品的后臺就是對一個產(chǎn)品前臺功能的配置,在此基礎(chǔ)上能夠滿足產(chǎn)品方和用戶使用產(chǎn)品的需求。但產(chǎn)品后臺正是體現(xiàn)了整個產(chǎn)品的運營思路和業(yè)務(wù)邏輯。

一個完整的,良性運營的后臺是對一個產(chǎn)品健康發(fā)展的重要保障。當(dāng)然,關(guān)于某個模塊的組件化設(shè)計,決計不是一篇千字不到的文章就可以將其整個生命周期闡述清楚的,因此,這里只跟大家交流一下在組件化設(shè)計過程中總結(jié)出來的設(shè)計方法和對后臺組件化設(shè)計的理解與思考,僅供大家交流~

 

作者: 王媛媛,網(wǎng)易教育產(chǎn)品交互設(shè)計師,15年畢業(yè)于華中科技大學(xué),熱愛設(shè)計,敬畏設(shè)計。

本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@網(wǎng)易UEDC,作者@王媛媛

題圖來自 Pexels,基于 CC0 協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 這也屬于交互設(shè)計嗎???

    回復(fù)
  2. 請問有什么好的題庫和組卷網(wǎng)站和方式推薦嗎?

    來自北京 回復(fù)