K12教育产品设计视觉语言定义

一、产品本质和用户诉求

01、从产品本质到视觉呈现

定义一套成熟的设计语言要先从洞悉产品本质出发。在了解业务核心的基础上思考并定义K12教育产品的视觉呈现方式，才能使该理念有理有据且能够在后续的设计迭代中被延续。

02、学生/家长/学校的用户诉求

注重少儿学习产品性质所决定的“趣味性”的核心诉求，同时关注核心消费群体“机构”、“家长”对产品内容权威性及包装“高品质感”的潜在诉求。

03、核心用户定量分析

由于目学生群体年龄跨度大，为使3-15岁少儿都能获得更好的用户体验，设计语言需要满足“趣味化”而非“低龄化”的高包容性需求。

二、视觉语言规范

01、视觉语言

风格明亮、纯净鲜明、充满趣味的视觉语言是少儿产品的视觉设计基础。以“游太空、看世界”为世界观，将该主题下的视觉元素贯穿于各界面中，使整个产品主题鲜明、调性统一。以渐变色彩、插图质感及微动画的运用提升产品品质感。

02、色彩体系

主界面以渐变蓝/白为基调，衬托内容资源，提供给孩子沉着冷静、沉浸细思的学习氛围。橙黄、红色作为强调色用以突出关键信息，增强孩子的敏思行为与判断。

03、界面布局

UI界面的布局空间基于动态、体系化的角度展开。在设计过程中建立适配的概念，根据具体情况判断系统是否需要进行适配，以及哪些区块需要考虑动态布局。

从前端视角、平面构图视角以及交互视角对于手机端及平板端设计不同的适配方案，确定页面边距及控件高度，将内容区域进行动态缩放。界面布局上的一致性和韵律感可能减少沟通与理解的成本。

04、字体家族

优秀的字体系统首先是要选择合适的字体家族。字体家族中优先使用系统默认的界面字体，来确保在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性。

此外，数字字体单独设置为Roboto_Bold Condensed，粗窄体既可横向空间又能凸显内容。

05、字阶

考虑到学生用户的视力健康，我们基于最佳阅读距离（30-35 cm）以及最佳阅读角度（0.3）对字阶进行定义，将正文字号控制在14-16px，以保证在常用显示屏上的阅读体验。而在沉浸式学习场景下，使用更大的16-20px，确保学生的做题效率最佳。

06、字体颜色

文本颜色如果和背景颜色太接近就会难以阅读。考虑到少儿用户群体的需求，参考 WCAG 的标准，将正文文本、标题和背景色之间保持在了 7:1 以上的 AAA 级对比度。

07、图标设计

一致的笔画权重是保持整个图标系统视觉统一的关键，因此图标的线条需要统一宽度。

一致的角度半径也是保持整个图标系统视觉统一的重要元素。图标设计中，外轮廓线统一为圆角，同时笔画的终端也为圆角。

在icon 的形状比较复杂紧凑的情况下，可通过调整线条的粗细或圆角的大小等微妙的变化来增加图标的易读性。

图标的颜色需要与搭配文案的色值保持一致（表示状态的除外）。使用渐变色彩可增加图标的细节感。

系统图标有单色（中性色）和双色（主色+辅助色）两种。为保持界面的整体和谐感，主色的面积不超过整个 icon 的 40%。

08、插图设计

具有场景感的插图，颜色定义为“主色蓝+灰绿色”的搭配规律，色调淡雅、细节到位，作为缺省页配图不会喧宾夺主。

09、人物形象

设计带有情景感的卡通人物来贯穿产品的主线和支线，使用户能够获得共鸣，增加产品吸引力。

三、产品界面展示

01、主界面

对内容框架做整体梳理后，将视觉语言运用到不同模块的界面中。

为孩子提供线上线下混合式学习体验，在视觉和交互上突出最新的学习任务，并且保证每个课程任务的易读性及趣味性。

02、学习场景

简单清晰的操作控件在视觉上沿用产品主色调及设计风格，保持体验一致性，同时传达给用户生动的设计以带来乐趣，同时鼓励用户探索发现。

四、总结与展望

K12教育，是现今社会备受瞩目的焦点之一，我们的使命不仅限于英语教育，而是立足于更宽广的视野：培养世界公民、未来领袖。

因此我们更多的从提升孩子的学习力、创造力的角度出发，将设计领域的最新趋势结合业务需求不断反思，从而升级产品设计；以当下流行的视觉语言打造出生动有趣、寓教于乐的学习场景，陪伴孩子们快乐学习和成长。