腾讯案例复盘！B 端教育产品的情感化设计（视觉篇）

项目布景

此项目是由咱们的合作伙伴-清华大学心思学系学习科学实验室执行主任宋教师和他的团队建议，与咱们腾讯云的小伙伴一同完结规划和开发的。宋教师的师资团队在教育培训职业已有多年的沉积，且在类东西化的教培线上产品授课经验丰富。宋教师团队以为：“现有的东西化产品并不能足够满足团队的教育需求和理念”。他们需求更赋有情感染的产品，差异于其它的在线东西化的教培产品。一起在教育进程中宋教师团队的中心痛点在于：怎么让学员有动力的学习下去。21 天中长期课程训练营，学员会经常出现无法坚持学习、学习动力不足、半途抛弃学习等问题，而这些也自然成为咱们需求去突破和处理的规划难点。

往期回忆：

1. 中心诉求：怎么让学员有动力学习？

解析问题：教师团队期望做出与市场上东西化产品有所差异的产品方针，更是一款具有情感染且具有东西特点的教培产品。依据这个方针和方向，咱们快速尝试了一版计划：让学习进展明晰可见—“学习地图”计划。

规划方针

情感染规划知识点：

快速迭代 1.0 学习地图，定位问题聚集规划方向。

1.0 版规划地图

咱们快速打造并模仿上线了 1.0 版学习地图，并和宋教师团队交流发现：如上图的信息模式更适合即时性运营类的信息传达，而在 21 天这样的学习训练营中，这样的视觉信息表达会有以下的问题：

1. 学习途径绵长且弯曲，让学习方针看起来很难完结；
2. 在绵长的途径上接二连三的关卡形成一种让用户遥不行及且容易半途就抛弃学习 ；
3. 节点的节奏过于单调让学习没有预期感、缺失成就感。

虽然秉持着发明轻松的学习环境和气氛的方针，咱们的规划还不能满足完结情感染的东西产品，所以咱们快速的定位问题并调整了咱们学习地图的规划思路。

1.0 版规划地图

2. 学习怎么才能是轻松又有动力的？

回答开始的问题，怎么让学习轻松有用又有持续性？分为以下几个维度：

• 缩短学习途径：让学习方针看起来轻松可执行。
• 拉近结尾方针：让原先看起来遥不行及的方针“触手可及”。
• 只聚集当时使命，弱化未完结的使命：协助学习者减负，学习者不需求重视将来的使命，只需求把精力聚集在当时的使命下，完结当时的量力而行的“小事”就能打卡成功。
• 扩大学习成就感：在21天的训练营，把学习分红：初、中、后期。在学习初期需求重视学习习惯的养成；在学习中期需求协助学习者在半途不要抛弃学习，鼓舞学习者，并将学习回报等可视化，像是累计的学习时间取得惊喜等；在学期后期扩大方针，凸显方针使命近在咫尺的感触，在最后学习结尾扩大学习的成就感。
• 扩大交际特点：腾讯的基因便是有交际特点的，所以将学习组团化，学习者之间相互鼓舞，让学习变得简略和高兴。

3. 从笼统的游戏化规划聚集要害规划点

轻松： 发明更轻松愉快的学习气氛。

首要需求拆解分解方针本身，聚集于当下要完结的事，而不是想着那个遥不行及的方针；其次，让进程可见，看见学习的进程视觉化的量化；最后，惊喜埋点，让学习是一件高兴的工作。

鼓励： 首要的考虑方向聚集在：添加互动，教师上课直播的送花 、标示（学习积极分子等）发明学员之间的互动，攀爬榜等。其次经过惊喜盲盒让学习也是能够高兴而且有成果的。

品牌化： 以此次的项目代表，不同的教育机构有自己的特点和教育理念的传达，也有大量的运营的需求。怎么协助合作伙伴或是客户更好的快速、明晰、准确的塑造其品牌和品牌识别度，也是咱们需求聚集的方向。

B 端规划： 作为 B 端的规划，期望后续面对类似需求的客户能够将规划元素组件化，量化复用的一起，满足用户定制化的需求，灵敏多变，协助产品快速的产出。

聚集规划要害点

差异化学习地图专项规划

1. 地图信息特点调整

节点： 将课程的节点扩大，且添加变量的特点，让每节课程的节点都“埋藏惊喜”。一起节点的规划分为根底节点和其它节点。其它节点包含：彩蛋节点、运营位节点等，让节点变成一个组件的一起具有了灵敏改动的特点。

节点组件

途径： 节点本身就能够组成隐形的途径，相对就压缩了学习途径，减轻学习者的学习担负。而且用空间感的“近大远小的”途径规划从视觉上“拉近”学习方针结尾。

角色融入： 将学习者角色带入，用了小人“跳一跳”的动态添加学习的趣味性。

动态跳一跳

故事线： 服务于售前，产品能够针对不同的客户和需求串连不同的故事线。在做初期提案时，咱们的故事线是：学习堆集水滴灌溉小树苗，在学习进程中小树苗慢慢生长变成大树，经过这样的视觉出现来表现学习的成就感。学习者在不同的节点会解锁带有树苗长大的惊喜“彩蛋”节点。作为 B 端的规划服务，不同的客户有不同的方针需求，但是依据这样的学习地图组件，后续能够替换不同的故事线，也能够依据客户需求灵敏定制学习地图。

2. 地图在界面上的的出现

结尾方针可见/聚集当时使命：首屏就能够看到结尾，并展示结尾第 21 节课程，减轻学习者的担负。在视觉上出现出：完结这个方针“看起来”也不是很困难的感触，让学习者感觉自己是能够凭借着努力去触达学习结尾的。所以学习者只需求聚集在当时需求完结的课程，而不需求考虑还未完结的课程。

地图的视觉出现

界面结构：

• 前景：不同的阶段感，扩大成就感。；
• 课程区域：（削减学习担负，聚集当时的使命；
• 前景区域：边走风景边会改动表现生长感，削减学习的厌倦感。

前、中、前景的结构规划：界面的结构分为：前景、中景、前景。前景区域：跟着学习者边“走”风景会改动，在前景处表现学习者的生长感，削减学习的厌倦。中景：课程区域，削减学习担负，聚集当时的使命。前景：弱化未来的课程，在学习后期阶段，扩大方针触手可及的感触，协助学习者坚持学习。

学习地图元素的组件灵敏改动：1.0 版别的学习地图规划重心放在视觉插画上，而忽略了服务于 B 端用户所需的快速组件化。依据现在的规划结构，能够有用的产出和预估规划的工作量，将其作为有情感沉积的半自界说组件。

怎么经过界面提高学习动力

最后小结：学习地图的规划是为了协助学习者减轻学习担负、协助学习者明确学习途径、凸显学习的生长感。灵敏的节点规划以及躲藏彩蛋增强了学习的动力，削减了学习的疲劳感。而在产品售卖层面，能够串联不同的故事线快速建立学习地图。

协助合作伙伴树立品牌

1. 客户提案

合作伙伴提出了要害词“生长”，为了更好地管理用户的预期，咱们做了以“生长”为中心的三个维度展开的规划提案。计划 A 为生长沐浴在阳关下的治愈型计划—向阳而生感触生长的力气。计划B为学习也能够很高兴——学习嘉年华。计划C为生长的经典绿色计划——生长是一种诗意的栖居。

3 个不同的提案

确认主题向阳而生

在与合作伙伴交流后选择了 A 计划向阳而生，产品也重新界说了故事主线。将故事主线界说为“登山看日出”所以依据新的故事主线咱们界说了首要的品牌元素及延伸运用。

2. 品牌规划元素的提取与使用

宋教师团队选择的“向阳而生”的计划，将规划元素的落点在于“阳光”的规划点上。

视觉元素提取

笼统并赋予视觉的语意 “在名师的指导下学习生长，犹如沐浴在温文自在的阳光中，高兴生长，高兴学习”，并参加了“学习”的元素笔记本，期望能够经过纸张表现学习进程中的“亲切感”。

首要规划元素

首要来分解首要的视觉规划点：阳光，提取阳光“温暖柔和”的特质。将阳光元素笼统出：磨砂模糊的阳光光晕、一束光线的色彩形状的组合。并将这些特质运用在界面规划中，如下图。

规划元素在界面上的使用

在质感上运用更多偏磨砂的效果，参加有代表性的笔记本元素作为底纹。在界面能够上看到，经过阳光光束杰出人名，重要的按钮及按钮状况也添加了阳光光晕的规划，在细节上潜移默化地出现教育与规划的理念。

规划元素在界面上的使用

3. 差异化：融入新的故事线：扩大学习成就感

融入新的故事线“登山看日出”。在产品中“学习地图”作为差异化的规划点的全进程展示，参看下图视频演示。

首次学习进程模仿

学习进展的视觉化出现分为三个不同阶段：

• 初期-学习新鲜期
• 中期-学习厌倦期
• 后期-学习冲刺期

咱们将 21 天的学习进程分红不同的阶段，并依据不同的用户心思改动视觉出现，前期和中期和后期会有显着的“视觉改动”，在最后成功的学习完结也会有一个典礼感的“学习途径”的层层叠加，凸显学习的成就感，此时也是用户对自己用心学习的最好回馈，将这一些心思状况都视觉化地出现在用户眼前。

阶段的视觉出现

学习地图组件分为：前景：学习进程改动的信息；中/前景：学习节点，学习节点包括根底节点和自界说节点，自界说节点能够依据产品和客户的需求更改节点的特点；前景：学习结束的典礼感展现。这一学习途径的视觉展现方式也能够很好的转化为规划组件，串联不同的故事线让学员去完结不同天数的线上学习。

学习地图组件

其它学习鼓励页面照应 “向阳而生”的故事线，咱们的规划还包含了其它的学习鼓励机制。例如：每次完结学习会取得一个“太阳”积分、学习攀爬榜的规划上，照应登山主题的视觉表达。

其他鼓励页面

规划标准与规划协同：为更好地进行教育的视觉协作，咱们将视觉标准分为：规划总体理念的概览、规划根底组件、规划特别组件、界面相关的详细规划内容、典型页面和人物封面标准等，保证内外部的规划输出标准，保持产品视觉基调完好准确。

规划标准

协同规划

欢迎重视作者微信大众号：「腾讯规划」