设计实战:教育产品组件化交互设计的实践与思考

网易UEDC – 王媛媛 :组件化设计,就是设计模块化,组件可复用。是以通用化的视角审视模块设计,根据业务方需求支持多个产品的接入与使用。

设计实战:教育产品组件化交互设计的实践与思考

网易UEDC – 王媛媛 :组件化设计,就是设计模块化,组件可复用。是以通用化的视角审视模块设计,根据业务方需求支持多个产品的接入与使用。

在线教育领域内,题目是线上线下教学场景内校验学习的一种基本方式,同时,题目可以存在于题库内,题库和组卷是承载题目的通常载体,而这两个载体在各产品教学系统内有共有的需求,由于需求重合度较高,又具备高度的通用性。

所以,以组件的方式设计「题库」「组卷」这两个模块,通过多种角度去衡量都是有其存在价值的。多方考虑后,由教育部门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」的微信公众号:

设计实战:教育产品组件化交互设计的实践与思考

「学习组件化设计,你还需要这些」

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

原创文章,作者:震天下,如若转载,请注明出处:https://www.iamue.com/34353/

(0)
震天下震天下
上一篇 2017-10-11
下一篇 2017-10-16

相关推荐

  • 【UXRen原创】杀死转化率的 4 大 UX 错误

    作者:Sean Ellis   译者:吆喝科技   本文编译自 Sean Ellis 所撰写的《UX mistakes that are killing your conversions 》 ,作为资深交互设计师, Sean Ellis 谈论 UX 在转换率优化的重要性。Sean Ellis 是 Qual…

    交互专题 2017-08-07
  • UED研究如何应用到产品设计中

      腾讯有互联网产品经理的黄埔军校之称。前段时间看腾讯CDC出版的《在你身边,为你设计》,颇有启发。特别摘录书中的《商业价值与用户价值的平衡》中讲UED的部分,看看腾讯是如何让产品责任人和企业高层接受UE…

    2015-07-23
  • Axure RP 8.0软件安装教程

    软件链接:Axure RP 8(32、64位)链接:https://pan.baidu.com/s/1pMubgLl密码:0nb1软件介绍Axure RP是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理。安装教程共享软件库1.点击历史信息,查看更多内容2.长按右...

    2018-03-04
  • 与经典艺术交互体验,迪士尼推出AR博物馆,“篡改”世界画作

    ——映维网——国际影响力VR信息数据平台文章相关引用及参考:vrscout怎样做到?用户能够通过移动设备扫描博物馆中的任何2D艺术品或者是书籍,然后实时更改颜色和色调。例如,你可以把《蒙娜丽莎》变成紫色的皮肤(映维网 2017年09月02日)迪士尼在2015年开发了一种可以通过实时纹理来创建彩色书籍的AR技术(一种捕获2D绘图来实时创建3D增强现实图像的过程)。自那以后,迪士尼将实时纹理技术发展成一个名为AR Museum的新AR应用程...

    2018-01-30
  • 用户体验设计师、UI 设计师和交互设计师有什么区别?

    首先,不同的公司对不同职位都有自己的理解和定位,名称相似的职位在不同的公司文化中通常职责不尽相同。比如 Google 会要求用户体验设计师有 “专家级的 XHTML,HTML,CSS 和 Javascript 能力” ,而这样的要求在其他公司并不常见。不过通常来说,这三个职位还是各自有一些大概的职责范围的。用户体验设计师用户使用你产品的每一秒钟,都是这 “体验” 的一部分。先不管 “用户体验” 能否被 “设计”,既然你尝试去改变或者影响...

    2018-03-11
  • UED 招聘,多个职位给你更多选择!

    14载,我们初心不变,依然要做行业最有力的的发声者。从一张纸到一串电波,媒介在变,我们的眼光始终如一大家都在说AI是未来,然而在这里,我们依然需要你无可代替的头脑。WE ARE HIRING这次招聘我们为什么要做这次公开招聘?信息爆炸,百家争鸣,越是瞬息万变,媒体的价值愈发凸显。我们不会随便说满意,而是希望在诸多嘈杂的背景声中,发出属于新时代建筑媒体人独到的观点,让关于建筑的解读,走进公众的视野;我们希望以全新的面貌去呈现UED对于中国...

    2018-03-05
  • 和用户谈一场甜蜜的恋爱:让产品吸引用户的3个方法

    今天我拿了一些美好设计的案例,跟大家分享,如何通过美学、诱惑和游戏等等手段来取悦用户,和用户谈一场甜蜜的恋爱。人们普遍倾向把认知放在情绪对立面。情绪被认为是热情、动物性和非理性的,而认知则是理性的。这真是无稽之谈! 情绪乃是认知不可分割的必要组成部分。 我们所做所想的每一件事都受到情绪的影响,尽管在很多情况下是潜意识的。与此同时,我们的情绪会改变我们的思考方式,也会一直指引我们做出恰当的言谈举止,引导我们趋利避害。深泽直人设计的这款CD播放机,外型与”换气扇”非常相像,只要将CD放进去,拉一下垂下来的绳子,就可以开始播放CD。这个过程就好像打开换气扇一样。即使明明知道这是台CD播放机,但因为脑海里总是想着换气扇的形象。当我们凝视这台CD播放机时,身体就会产生相应的反应。特别是脸颊附近的皮肤,感觉似乎格外细腻和敏锐,简直就像等待吹过的风一样等待着播放出来的音乐。

    2017-05-12
  • 交互设计七大定律

    除非有更好的选择,否则就遵从标准。——阿兰·库珀(交互设计之父)1、费茨定律(Fitts’ Law)使用指点设备到达一个目标的时间,与当前设备位置和目标位置的距离(D)和目标大小(S)有关。用数学公式表达为:时间 T = a + b log2(D/S+1)。T指的是:移动设备所需时长;S指的是:目标区域的面积大小。D指的是:设备起始位置和目标位置之间的距离;a、b指的是:经验参数,它们依赖于具体的指点设备的物理特性,以及操作人员和环境等...

    2018-02-03
  • 【汇总】2015年阿里巴巴交互设计师笔试题目

    经验分享之交互设计面试 从网上各种渠道扒下来有关2015年阿里巴巴交互设计师的笔试题目 按照各方面的信息初步确定一共是四题,基本上都是要码字 要交作品,要交简历(应该是第一题的公共问题) ps:出题应该是一套…

    交互设计 2015-08-19
  • 百度贴吧体验升级背后的故事,用户洞察与交互升级

    作者:百度UXC随着产品的发展和用户群体的演变,用户对产品的认知也在发生变化,当用户认知和产品形象发生偏差时,体验升级就势在必行了。而用户对产品的认知大概体现在视觉感受(品牌形象)和使用感受(交互操作)上。对此我们从用户出发寻找设计上的突破口。洞察用户让设计有的放矢视觉感受对于大多数人是一种难以言说的东西,难以通过简单的方式得到答案。面对这个问题,我们选择迎难而上,通过精巧的实验、可视化的方式来解决,邀请用户与设计师一起,参与到品牌升级...

    2018-01-30