教育产品-组件化视觉设计实践

此文已由作者张玲滢授权网易云社区发布。

欢迎访问网易云社区，了解更多网易技术产品运营经验。

John Heskett在 [设计价值创造]的理论中阐述设计师的价值创造大致可分为三个层级：1.设计师作为修饰者 2.设计师作为区分者 3. 设计师作为计划者。在现在节奏比较快的环境下，设计师们不仅仅需要完成业务需求的设计，同时也要思考设计的价值。我们需要在设计表现和资源投入中找到最佳的平衡点。在注重设计表现力的同时，逐渐加强我们对项目的协同与促进工作，而有时也需要我们用设计工程化的方式将自己从感性的设计理念中解放出来，通过设计来趋动整个产品更高效的发展。今年我主要做了云课堂企业版（后台为主）和教育产品组件化（EduOS）设计工作，在过程中积累了一些对于组件化设计的思考和心得，在此总结一下。

什么是组件化视觉设计？

随着教育产品部的逐渐壮大，包含了网易云课堂、企业版、中国大学MOOC、网易100分、极客少年，有很多模块的复用，导致重复设计重复开发，在互联网发展如此快速的现在，这种反复低效的工作方式促使大家开始思考组件化设计。什么是组件化设计？就是把产品需求场景化，视觉表达模块化，每个组件基于复用为目的，使其具备独立的完整性解决方案，通过标准的设计规范组合方式来构建整个方案，从而提升效率。

如何构建一套协同的视觉组件库？

组件小的可以只有一个按钮，大的可以是一个交互极其复杂的多步筛选项。复杂组件内再嵌入简单组件，也是很常见的事情。所以我们通常从中先提炼基础核心组合用法，能覆盖多数情况为原则，建立模版，提炼规范与扩展，设定标准。

组件化思维的精髓是独立、完整、自由组合。首先我从产品出发列了以下大纲：

［独立］，提取产品中的共同元素，区分变量和不变量。首先是整个网站的风格语言：字体和主题色，为整套的组件化设计定下了大的基调。这部分我们运用的是代码的形式，方便抽离，作为通用组件在运用到不同的产品中时可以调整字体大小、颜色、按钮圆角等。

［完整］，把每个元件当作一个独立产品来设计，考虑为空状态、极端情况、尺寸颜色变化，按钮除了标准的默认状态以外还有hover、按下、禁用状态，需要考虑提示、出错等，尽可能灵活适应各个产品。以下的元件则是相对抽离分类后常用组合模式的元件。

［自由组合］，在每个元件内部完整了之后，接下来就是组合了。统一组件、组件与非组件之间的组合方式，但并不是真的那么自由，我们要确定一些常用的组合方式。比如下图，结合了按钮、复选框、搜索、树选择、标签筛选等组件之间，页面的颜色、树选择与右侧内容的距离，输入框之间的距离……这些也都要有章法。

以上这些工作，沉淀下来，就成了设计规范。对于产品的一致性和与其他设计师交接工作是非常重要。组件化设计是一切的源头，如果我们设计部分的组件化工作做得不到位，自己定的规范自己不遵守，开发同学的组件化工作是无法进行的。目前我们以组件化设计的方式设计了「题库」和「组卷」这两个大模块，并运用到教育产品部多个产品线中还是很成功的。

组建化设计思维的运用

有了元件-组件，即可形成模版，所以通过对组件化设计的思考，我们对日常专题，推广banner制定了一系列的模版化设计。例如专题中运用到的课程卡片，可以从组件的三维分层出发，响应状态、行为状态、数据状态。

响应状态，包括尺寸大小，组件响应方案中突出尺寸的维度，元件的组合。

行为状态，就是在卡片中出现的信息层级，需要考虑背景层、组件与整体页面的关系，用户行为中产生的效果。

数据状态，比如卡片中我们可能出现的秒杀、拼团、开始、结束等状态。

CMS模版的组件化设计，将设计规范和设计表达到在线可视化选择方式，像搭积木一样，运营可以将拼装好的组件同步转化为专题搭建。

虽然前面说了这么多好处，但组件化不是一件轻松的工作。在项目初期的准备工作会增加一定工作量，但随时间推移会发挥出巨大的优势。我们设计师要做的，就是要维护好设计组件库。组件发生了任何设计修改，或者加入了新组件，都要及时反映在设计规范上并与开发协作，完善组件库。教育产品部也还在不断的完善和丰富组件化设计中......

免费体验云安全(易盾)内容安全、验证码等服务

更多网易技术、产品、运营经验分享请点击。

相关文章：
【推荐】 揭秘：网上抽奖系统如何防止刷奖