火星网校
教育产品组件化交互设计实践与思考
发布时间：2024-08-17 11:02:49 浏览量：120次
教育产品组件化交互设计实践与思考分享
组件化设计，就是设计模块化，组件可复用。是以通用化的视角审视模块设计，根据业务方需求支持多个产品的接入与使用。
在线教育领域内，题目是线上线下教学场景内校验学习的一种基本方式，同时，题目可以存在于题库内，题库和组卷是承载题目的通常载体，而这两个载体在各产品教学系统内有共有的需求，由于需求重合度较高，又具备高度的通用性。
因此，以组件的方式设计“题库”和“组卷”这两个模块，通过多种角度去衡量都是有其存在价值的。在教育部门EduOS团队的努力下，题型的重构、题库的创建与管理、组卷的方式等模块进行了组件化设计，实现了一个可在网易100 分、中国大学 MOOC 、云课堂 C/B 端使用的题库及组卷。在资源共享的情况下，可以调用组件，复用代码，考虑通用模块功能等。
认同组件化的重要性
为何认同组件化设计？
组件化设计带来的是复用：设计的复用，开发的复用，用户体验的复用。通过复用，可以提高效率，避免用户体验的不一致，保证后期组件的同步迭代更新。
在组件化设计后要兼顾产品的用户体验，以业务方和用户场景性为重点，确保设计不牺牲产品的用户体验。
适合做组件化设计的需求或产品有哪些？
目前单一功能的组件化已经趋于普遍，但并不是所有的功能都适合做组件化。重要的是对项目现状进行评估，审视需求方向，提炼全功能组件，满足不同需求。
设计前期工作
如何快速接收并消化组件化需求？
在处理组件化需求时，需要快速分解需求，整理业务场景，构建全局观，全面考虑解决方案。在快速消化需求的同时，需考虑需求的模块化与通用设计思维。
项目问题与解决方法
在设计与项目进展中会遇到许多问题，需要保证设计的一致性，方案的可行性，避免异常情况的疏漏。
如何保证组件设计的一致性？
保证设计的一致性是组件化设计的基本点，需要尊重用户习惯，归类信息结构，确保设计满足需求，并避免异常情况的疏漏。
如何保证设计方案的可行性？
在组件化设计上要保证设计方案的可行性，需要分析设计的环路，整合基因并设置目标任务流程。消化需求并考虑项目实践，快速产出设计方案。
如何避免异常情况的疏漏？
采用节点式排除法，将关键点梳理出来处理异常情况，确保流程无遗漏。处理异常因素，保证设计的完整性。
理解与思考
在整个EduOS项目中，对组件设计的思考着重在灵活高效、关联性、业务兼容和可扩展性。经验和设计方法的结合最终完成了最终产品底层框架的搭建和功能设计。
灵活高效 重易用性
在设计中着重灵活高效，重视易用性，尽量考虑多种场景，简化操作流程，为产品带来创新和更好体验。
关联性
重视功能与功能之间的关联性，同时也包含前后台用户之间的关联性，确保功能整体性。
业务兼容，可扩展性
保证设计的业务兼容性，同时要求产品能够有很好的前瞻性，保证产品架构灵活和扩展性强。将组件更好的服务于各产品线。
在组件化设计过程中要注意逻辑思路的清晰，规范交互设计，保证产品结构的灵活性。组件化设计是产品健康发展的重要保障。
作者： 王媛媛，毕业于华中科技大学，热爱设计，敬畏设计。
本文来源：人人都是产品经理@网易UEDC
题图来源：Pexels
热门课程推荐
热门资讯
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
7. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
8. 史上最全，平面设计UI设计必备的77个国内外素材、设计资源网站
ui设计社区,大神太多了。3、behance: https://www.behance.net/ ,著名设计... 对于品牌设计师来说,除了图案素材收集之外,还有一个很重要的,就是设计故...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
10. 武汉UI设计培训班费用怎么样？想学UI设计要多少钱？
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
最新文章
