组件设计意味着模块化设计和可重用组件。它从通用的角度检查模块设计，并根据业务方的需求支持多种产品的访问和使用。
在线教育领域，问题是线上线下教学场景下检查学习的一种基本方式。同时，试题可以存在于题库中，题库是试题的通常载体。这两种载体在各种产品教学体系中有共同的需求，由于重合度高，通用性强。
因此，通过组件的方式设计“题库”和“生成试卷”两个模块，从各个角度来看都有其存在的价值。经过多方考虑，教育系EduOS团队负责模块的组件设计，如问题的重构、题库的创建和管理、试卷生成方式等。同时，在考虑可行性和基本框架的基础上，可以在网易100、中大MOOC、云课堂的C/B端使用一个题库和试卷。在资源共享的情况下，可以调用组件，可以重用代码，也可以考虑通用模块的功能。
本文主要通过抛出问题、达成共识>前期设计>项目问题及解决方案>理解与思考四个部分来逐一谈这个过程中的实践与思考。
组件化的认识和共识
你同意组件设计吗？
可能有些交互设计师会本能地抵制组件设计，因为从某种角度来说，组件设计可能会扼杀设计师在产品设计中的创造力。从交互的角度看组件设计，首先要认同组件设计。这里可以讨论两个问题。
1.组件设计能给产品或商务方带来什么？
组件设计带来重用:设计重用，开发重用，用户体验重用。复用可以提高效率:在产品迭代的过程中，可以提高用户体验的使用效率，避免因产品相似功能操作不一致导致用户体验降低。而且，后面的组件可以同步迭代更新。
2.一般业务端应该更注重产品中用户场景体验的设计。组件化设计后会牺牲业务端产品的用户体验吗？
在组件设计的初始阶段，交互设计师还需要尽可能充分挖掘当前产品业务方的需求，甚至未来潜在的业务需求，从需求的框架中抽象出组件模块设计。但是这里的组件设计不仅仅是全局的框架设计，组件的细节也需要打磨。此外，组件设计应该优先于某些交互规范，以避免后期设计的“滥用”。另外，在打磨细节的时候，要特别注意系统的稳定性和可维护性，这样可以保证系统在多次迭代之后，仍然能够保持一个运转良好的生态系统。
什么样的需求或产品可以设计成组件？
目前组件化已经很普遍，单一功能的组件比较常见，比如搜索组件、过滤组件、相对完整的功能模块组件等。每个组件都是一个完整的产品，它们不断地扮演着在业务产品中组合更多产品的角色。但是，并不是所有的功能都适合做组件，组件本身并不影响产品的好坏。最重要的是以组件思维的态度对项目现状有一个清晰的评估和认知，全面审视需求方向，考虑解决方案，细化全功能组件，才能驱动组件设计和升级。
在衡量组件设计的问题上，也可以尝试探索一些量化的方法，当然不局限于量化的数据，更重要的是挖掘产品方和用户的诉求。这需要考验组件发起者对产品需求的思考广度和深度。
设计早期
如何快速接收和消化组件需求？
拿到需求后，如何消化分析，也就是设计前期应该怎么做？从确定题库试卷生成模块的组件到项目落地，我几乎没有多余的时间去深入了解需求。
简单分析一下，第一，组件化需求的特点是业务需求下沉，需求功能模块化，模块间关联性更强。组件化需求的最终目的是将需求实现成由N个盒子组成的功能，类似于乐高积木。虽然每个构建块都是相互独立的，但它可以是灵活多样的。同样，组装的组件模块灵活多样，功能强大，逻辑性更强。因此，面对组件化的需求，根据其需求特点，总结出以下几种快速接收和消化需求的方法:
1.需求思维模块化，需求快速分解。组件之间不应该有循环依赖，所以您可以快速分解需求。换句话说，就是将商业设计思维转化为通用设计思维。
举个简单的栗子:题库的需求可能涉及多种题型，如单项选择题、多项选择题、填充空题、组合题等。题型和题型之间会有相同的属性和不同的属性，所以需要把所有的属性从题型中分离出来，对相同的属性进行分析。相同的属性可以设计成相似的组件，甚至可以考虑使用相同的组件。
2.尽可能完整地梳理所有现有的潜在的业务场景，并根据对需求草案的理解构建整体视图，在整个环节考虑解决方案。
3.提高同理心，积累和塑造自己的知识体系，拓宽需求视野。
项目问题和解决方案
在实际的设计和项目进展中，或多或少会出现很多问题。总结了以下典型问题及解决方法。同时，这些问题也是制定组件需求时应该特别注意的问题。
如何保证组件设计的一致性？
组件交互设计最基本的一点就是保证设计的一致性。在准备将一个功能模块做成一个组件时，我们通常要考虑设计是否具有足够的通用性，以满足以下要求。除了学习参考ios、andriod等操作平台的原生设计规范，这里有两个简单的方法:
1.尊重用户习惯。可以选择现在比较成功的同类竞品，梳理一下它们的产品框架结构和操作规范。竞品成功的原因一般有两个:一是给用户带来使用价值，二是给产品方带来商业价值。既然给用户带来了使用价值，那么这些产品的功能或操作体验在某种意义上应该基本符合用户的心理预期。这些成功竞品的功能或操作规范，也是与用户习惯互补的，有借鉴意义。
2.当需求最终以交互框架的形式呈现时，您可以尝试自顶向下对信息结构进行分类。比如分类粒度为:操作属性、信息展示属性等。，信息显示属性可以分为列表类、卡片类等。，可以回到我们常说的交互组件库。例如，如下图所示，题库和试卷库的管理。题库是对问题的管理，试卷库是对单份试卷的管理。虽然是两个不同的功能模块，但是确实有非常相似的操作属性和信息显示属性。
如何保证设计方案的可行性？
在组件交互设计中，保证设计方案的可行性也非常重要。由于整个功能或模块是作为一个组件来设计的，其逻辑相对复杂，因为集成了更多业务产品的需求。我们的目标是将这些复杂的需求转化为更简单、更灵活的功能，以满足不同的需求。
在交互设计中，为了保证设计方案的可行性，首先要考虑整个设计循环，从应用层、框架层、逻辑层三个层面进行分析。然而，在真正的项目实践中，时间很难允许我们应用完整的研究方法论，我们只能凭借经验或自己使用的设计方法快速产生最终目标。
这里推荐一种实用的复杂项目设计分析方法:通过基因分解、基因解构、基因整合，梳理结构、时间轴、基因之间的关系，组织一个新的信息结构，设定一个目标任务流。这里的基因可以是需求，可以是模块，可以是场景，可以是项目过程中每个环节的细节。也可以通过人物原型、需要解决的需求、当下场景来分析。分析到位后，会融入到整个设计过程中。
下面通过EduOS做的题库生成试卷的案例，对以下模块进行简单分析:
1.应用层。试题库作为教学系统的一个模块，可以从教学的后台和用户学习的前台梳理出需求和流程。梳理每个场景中的时间节点和操作节点，梳理两个场景之间的流程关系。
2.框架层。在试卷生成内部，原有的试卷生成方式根据四种不同的试卷生成形式有四种不同的设置，单一且不灵活。但是题库组卷的需求是为了使组卷方式更加灵活通用，不局限于组卷形式。因此定义了如下图所示的需求设计方向。
另外，这次增加了一张主客观相结合的组合纸。所以需要分析新的组合体和以前的组合体有什么区别，各自的属性是什么。
3.逻辑层。然后分别对题库和试卷的业务流程和操作逻辑进行分析，以其操作属性构建一个完整的设计回路，并将其变成更直观的流程图。
4.整合。最后将最终分析出的有效基因进行整合，整理出整个循环。在此基础上，设计了交互框架。此外，组件需求一般是在现有功能的基础上提出的，产品规划一般定义了产品设计的三种方式:重用、配置和定制。这三种方式也影响着交互设计方案。
当你了解了背景，衍生需求场景，组件的现有形式，切记不要急于设计解决方案。即使你是做交互设计的角色，也最好了解组件是如何连接到产品的，组件特性，业务方的产品特性，连接影响的范围等等。了解这些对基于组件的设计也会有很大的帮助。
EduOS项目从需求中梳理出了逻辑层的大部分内容，因此可以在设计过程中快速理解和分析这些循环。同时，通过产品、设计、开发、测试的共同努力，全程经过多次优化设计方案，完成了最终产品底层框架的搭建和功能设计。
如何避免异常情况的遗漏？
在组件设计过程中，存在许多逻辑过于复杂的问题，导致需求调整或交互设计不完整。这里推荐一种基于节点的排除方法，即梳理流程的关键点，通过这些关键点来处理异常情况。
也就是说，当用户对应的操作时间点和影响因素被一一列出后，连接分析中可能会有场景，检查这些场景是否都被同样对待。比如这种状态下影响学生答题的异常因素有几个:试卷发布、授权题取消、老师修改题目内容或分数、老师重新给题目打分、答题时间到了、提交截止时间到了、网址进入试卷等等。
理解和思考
以下是对整个EduOS项目中组件设计的一些思考。
灵活、高效且易于使用
在通用组件的基础上，最终目标是灵活高效的协作。同时，在项目过程中，可以在短时间内对一个通用功能尝试多种设计方案，尽量考虑多种场景，简化操作流程，强调易用性。好的组件设计会给产品带来创新和更好的体验。
关联
在把一个产品设计成组件的时候，要注意关联性，包括功能之间的关联性，以及前后用户之间的关联性。
业务兼容性和可扩展性
产品的组件设计要与业务兼容，对可扩展性要求高。因此，要求产品和设计在熟悉业务的基础上，具备抽象建模的能力，抽象模块之间的关系，具有良好的产品预见性，以保证后端产品架构清晰灵活，可扩展性强。同时，还应考虑平台载体和性能的限制，设计中还应考虑数据系统维护和设计可扩展性。
目前整个教育产品部的发展规划模式，也会把一些需求抽象成一种公共能力，即抽象出若干组件来做，更好地服务于各个产品线。
总之，做基于组件的交互设计，要有清晰的逻辑思维，规范的交互设计，灵活的产品结构。有些人会简单的认为产品的后端就是产品前端功能的配置，在此基础上满足产品端和用户使用产品的需求。但是产品的背景反映的是整个产品的运营思路和业务逻辑。
完整良性的运营后台是一个产品健康发展的重要保障。当然，关于某个模块的组件设计，并不是一篇一千字的文章就能把它的整个生命周期解释清楚的。所以在这里，我只和大家分享在组件设计过程中总结的设计方法和后台组件设计的理解与思考，仅供大家交流~
作者:王园园，网易教育产品交互设计师，15年毕业于华中科技大学。他对设计又爱又怕。
本文来自人人都是产品经理的合作媒体@网易UEDC，作者@王园园。
题目来自PEPEPELS，基于CC0协议。
免责声明：本平台仅供信息发布交流之途，请谨慎判断信息真伪。如遇虚假诈骗信息，请立即举报
举报
