作业帮学习机上线啦!这是一款集多种「AI学习工具」和海量「作业帮自研学习内容」的智能学习机,能够帮助 K12 中小学生有效进行学习薄弱点诊断,制定个性化学习计划,帮助学生高效学习。
学习机内置丰富的智能工具,又满足多维学习场景,因此设计策略要紧紧围绕「用户场景」及独具的「科技气质」来制定。
下面我就带大家看看我们制定了哪些设计关键词及策略,来提升用户的学习体验。

作业帮学习平板应用众多,我们按照功能分类结合用户场景和设计关键词一一对应,将众多应用分为 SAB 三个大类。
第一类是工具属性强的 S 级卖点功能,如AI精准学、1对1诊断规划、指尖查词、学科 lanucher 页等主打「智能科技感」;
第二类是强学习体验的场景的 A 级学练界面,如趣味古诗、背单词、口算、试卷练习等主打「学习趣味感」;
第三类是作为基础支撑的系统级 B 级界面,如系统设置、消息中心、应用商店、计算器/相机等系统基础应用,主打简洁清爽的「视觉品质感」。
SAB 三类场景给用户传达不同的感受,加上产品定位的科技属性,因此我们制定出四大设计关键词:「科技」「专业」「愉悦」「品质」,在不同场景中灵活运用不同的设计策略组合,来构建不同的场景感受。
▽具体如下图所示:

不同视觉感受的构建离不开六大类设计要素的组合:图形、颜色、字体、构成、质感、动效。在不同的场景中,综合运用「形色字构质动」的参数组合,可以构建不同场景需要的视觉感受。
S 类界面:如 Launcher 和智能工具类界面通过「光感渐变」来体现科技感;
A类听说读写等学习界面:通过「弹性动态」「微拟物质感」「活泼音效」等策略增强学习趣味感;
B 类基础系统界面:通过「间距留白」「跳突率」「一致性」等构建品质感。那么下来我们再详细看看各个场景下的设计思路和拆解。

整体策略:磨砂玻璃质感+透气光感结合,打造通透而富有光感的高级科技感,增强视觉生命活力。用光感元素来强化质感表现,用质感来统一拉齐风格,用图形元素凸显个性。
质感运用:重视光(多彩、面、弥散环境光)的使用,抓住关键词「能量」「光滑」「玻璃质感」「柔和」「透气」等,来强化每个元素的科技质感。
AI学习页面
图形运用:照顾到三年级起步的用户我们将原来科技感的强直角、概括、极简等较为严肃的「硬科技」属性,增加了「圆润的角度」「简约 3D」,保留科技属性强的六边形、机器感、空间感等元素,来构建适合目标用户的科技感受。
构成规律:保留规律重复,纵深空间感的特点,来建立科技的规律感;“
色彩选择:保留科技里面的冷色,蓝色,单色的基础上,增强亮度,层次感,丰富色彩层次和更适合青少年的「阳光科技感」;
IP植入:通过构建人形亲和力强的「小帮学姐」IP 形象,头戴作业帮百分标识且科技感十足的头盔配饰,贯穿各个场景进行陪伴学习,让用户感到温暖和有信任感。
小帮IP形象
效果:轻松透气而有能量感的科技感构建,帮助用户能够在第一眼感知智能学习平板的「科技」属性。
整体策略:不同的学科采用不同元素来进行主题表达。比如语文采用国风与现代审美的融合、彰显文化底蕴,理科运用更多数字符号元素,英语则试图构建魔法世界的感觉。让用户在理科学习和文科学习中,跟随主题变换学习心情。而不同的学科之间,色调,质感,布局上需要有内在的一致性,这样才能做到「和而不同」,多世界但有内在一致性。
图形运用:语文学科中运用卷轴、窗花、古松、便签等元素加强古风意境美,英语学科加入魔法帽、星球、鹅毛笔等元素,构建奇幻世界感,理科元素运用函数图、电路图、尺规、引力波等元素,加强科学元素,让学科元素融入界面,体现「一学科一世界」的设计理念。
质感构成:质感上保持科技感受的同时,文字的容器载体上加入更多类纸效果,模拟真实物理感受。
字体选择:衬线字体和非衬线字体和配合运用,凸显更多学习和文化气息。
效果:巧用学科元素构建不同主题的场景,帮助用户获得更强的沉浸感,也找到不同学科的学习乐趣。

语文学科
整体策略:学习是一件需要激励和愉悦的事情,让用户感受到愉悦感是我们追求的设计目标。如何构建愉悦感强的体验,我们进行了目标拆解:通过给予更即时的反馈,结合勋章、鼓励、正能量、活泼、弹性、多彩、激励表情等关键要素的融入,来达成充满活力感和趣味感的激励体验。
图形运用:结合 IP 融入,更多使用勋章、撒花、星星、微笑、点赞等能量感强的元素,在每次任务完成后适时出现,构建好的「峰值体验」。
动效/音效运用:「弹性」「活跃」「动态感」等设计要点,在动画的曲率设定中不断调整,达到柔和而有力量的表达,再结合趣味声音,最终营造好的愉悦感受。
效果:激励动画融入各个关键学习节点中,利用动效和音效的结合增强用户的内驱力和荣耀感,最终帮助用户持续学习,激发学习兴趣。
整体策略:品质感的构建离不开高级感,精致感和视觉一致性强的设计策略运用,通过大间距、层次清晰、布局简洁、细节丰富来贯穿始终。并同时考虑「护眼性」「易阅读」和「操作便捷」等实用特性,构建一个基础品质扎实的学习系统。开箱体验场景:开机后我们专门设置了精致的开机动画,来吸引用户有好的探索欲,也降低开机的等待焦虑感。
长时锁屏画面场景:锁屏画面采用绿色植物(护眼)+学习主题凸显类纸屏的特点,结合趣味性和护眼功能,并在画面中融入各个学科元素,在锁屏和进入正式使用界面的连接更亲密。
锁屏壁纸
长时间阅读场景:沉浸阅读场景是最用户用学习平板停留时间最长的场景,所以需要考虑尽量用护眼豆绿色和大留白的排版原则,营造轻量化的视觉感受让用户轻松无压力。
英语学习页面
在几十个系统图标的设计中,我们精雕每一个图标的细节,用颜色和图形进行学科归类,让用户更容易区分不同类别的图标属性,使用更得心应手。整体的平板在各个细节上都有考究,简洁一致的图标,运用「峰值体验原则」到各个场景的设计中,让用户首次使用时体会到物有所值感。
我的应用icon
护眼中心和诊断规划及设置类功能页面

综合以上,本次的设计策略制定是贴身为「产品功能」和「用户场景」来服务,最终在效果上希望达到:
希望用户在使用过程中能有好的体验和学习感受,就是这次设计之旅最大的期望和收获。