当前位置:首页 > 壁挂炉 > 文章正文

B端教诲产品的情感化设计

编辑:[db:作者] 时间:2024-08-25 04:04:58

上期和大家分享了B端教诲产品的情绪化设计(交互篇),本日便讲讲我们是如何让工具化教培类产品更具有“温度”,同时又知足B端产品多样、规范化设计的。

B端教诲产品的情感化设计

一、项目背景

此项目是由我们的互助伙伴-清华大学生理学系学习科学实验室实行主任宋老师和他的团队发起,与我们腾讯云的小伙伴一起完成设计和开拓的。
宋老师的师资团队在教诲培训行业已有多年的沉淀,且在类工具化的教培线上产品授课履历丰富。

宋老师团队认为:“现有的工具化产品并不能足够知足团队的传授教化需求和理念”。
他们须要更富有情绪化的产品,差异于其它的在线工具化的教培产品。

同时在传授教化过程中宋老师团队的核心痛点在于:如何让学员有动力地学习下去。
21天中长期课程演习营,学员会常常涌现无法坚持学习、学习动力不敷、中途放弃学习等问题,而这些也自然成为我们须要去打破和解决的设计难点。

1. 核心诉求:如何让学员有动力学习?

解析问题:老师团队希望做出与市场上工具化产品有所差异的产品目标,更是一款具有情绪化且具有工具属性的教培产品。
根据这个目标和方向,我们快速考试测验了一版方案:让学习进度清晰可见—“学习舆图”方案。

设计目标

快速迭代1.0 学习舆图,定位问题聚焦设计方向。

1.0版设计舆图

我们快速打造并仿照上线了1.0版学习舆图,并和宋老师团队沟通创造:如上图的信息模式更适宜即时性运营类的信息传达,而在21天这样的学习演习营中,这样的视觉信息表达会有以下的问题:

学习路径漫长且弯曲,让学习目标看起来很难完成;在漫长的路径上连续不断的关卡造成一种让用户遥不可及且随意马虎中途就放弃学习;节点的节奏过于单调让学习没有预期感、缺失落造诣感。

虽然秉持着创造轻松的学习环境和气氛的目标,我们的设计还不能知足实现情绪化的工具产品,以是我们快速的定位问题并调度了我们学习舆图的设计思路。

1.0版设计舆图

2. 学习如何才能是轻松又有动力的?

回答最初的问题,如何让学习轻松有效又有持续性?分为以下几个维度:

1)缩短学习路径— 让学习目标看起来轻松可实行。

2)拉近终点目标— 让原来看起来遥不可及的目标“触手可及”。

3)只聚焦当前任务 弱化未完成的任务—帮助学习者减负,学习者不须要关注将来的任务,只须要把精力聚焦在当前的任务下,完成当前的力所能及的“小事”就能打卡成功。

4)放大学习造诣感— 在21天的演习营,把学习分成:初、中、后期。
在学习初期须要关注学习习气的养成;在学习中期须要帮助学习者在中途不要放弃学习,鼓励学习者,并将学习回报等可视化,像是累计的学习韶光得到惊喜等;在学期后期放大目标,凸显目标任务近在咫尺的感想熏染,在末了学习终点放大学习的造诣感。

5)放大社交属性— 腾讯的基因便是有社交属性的,以是将学习组团化,学习者之间相互鼓励,让学习变得大略和快乐。

3. 从笼统的游戏化设计聚焦关键设计点

1)轻松

创造更轻松愉快的学习氛围。
首先须要拆解分解目标本身,聚焦于当下要完成的事,而不是想着那个遥不可及的目标;其次,让过程可见,瞥见学习的过程视觉化的量化;末了,惊喜埋点,让学习是一件快乐的事情。

2)勉励

紧张的思考方向聚焦在:增加互动,老师上课直播的送花 、标示(学习积极分子等)创造学员之间的互动,攀登榜等。
其次通过惊喜盲盒让学习也是可以愉快并且有成果的。

3)品牌化

以这次的项目代表,不同的教诲机构有自己的属性和教诲理念的传达,也有大量的运营的需求。
如何帮助互助伙伴或是客户更好的快速、清晰、准确的塑造其品牌和品牌识别度,也是我们须要聚焦的方向。

4)B端设计

作为B真个设计,希望后续面对类似需求的客户可以将设计元素组件化,量化复用的同时,知足用户定制化的需求,灵巧多变,帮助产品快速的产出。

聚焦设计关键点

二、差异化学习舆图专项设计1. 舆图信息属性调度

1)节点

将课程的节点放大,且增加变量的属性,让每节课程的节点都“埋藏惊喜”。
同时节点的设计分为根本节点和其它节点。
其它节点包含:彩蛋节点、运营位节点等,让节点变成一个组件的同时具备了灵巧变革的属性。

节点组件

2)路径

节点自身就可以组成隐形的路径,相对就压缩了学习路径,减轻学习者的学习包袱。
并且用空间感的“近大远小的”路径设计从视觉上“拉近”学习目标终点。

3)角色融入

将学习者角色带入,用了小人“跳一跳”的动态增加学习的意见意义性。

动态跳一跳

4)故事线

做事于售前,产品可以针对不同的客户和需求串连不同的故事线。

在做初期提案时,我们的故事线是:学习积累水点灌溉小树苗,在学习过程中小树苗逐步发展变成大树,通过这样的视觉呈现来表示学习的造诣感。
学习者在不同的节点会解锁带有树苗终年夜的惊喜“彩蛋”节点。

作为B真个设计做事,不同的客户有不同的目标需求,但是基于这样的学习舆图组件,后续可以改换不同的故事线,也可以根据客户需求灵巧定制学习舆图。

2. 舆图在界面上的的呈现

1)终点目标可见/聚焦当前任务

首屏就可以看到终点,并展示终点第21节课程,减轻学习者的包袱。
在视觉上呈现出:完成这个目标“看起来”也不是很困难的感想熏染,让学习者觉得自己是可以凭借着努力去触达学习终点的。
以是学习者只须要聚焦在当前须要完成的课程,而不须要考虑还未完成的课程。

舆图的视觉呈现

2)界面构造

远景:不同的阶段感,放大造诣感。
课程区域:(减少学习包袱,聚焦当前的任务。
前景区域:边走风景边会变革表示发展感,减少学习的倦怠感。

3)前、中、远景的构造设计

界面的构造分为:前景、中景、远景。

前景区域:随着学习者边“走”风景会变革,在前景处表示学习者的发展感,减少学习的倦怠。
中景:课程区域,减少学习包袱,聚焦当前的任务。
远景:弱化未来的课程,在学习后期阶段,放大目标触手可及的感想熏染,帮助学习者坚持学习。

4)学习舆图元素的组件灵巧变革

1.0版本的学习舆图设计重心放在视觉插画上,而忽略了做事于B端用户所需的快速组件化。
基于现在的设计构造,可以有效的产出和预估设计的事情量,将其作为有情绪沉淀的半自定义组件。

如何通过界面提升学习动力

5)末了小结

学习舆图的设计是为了帮助学习者减轻学习包袱、帮助学习者明确学习路径、凸显学习的发展感。
灵巧的节点设计以及隐蔽彩蛋增强了学习的动力,减少了学习的疲倦感。
而在产品售卖层面,可以串联不同的故事线快速搭建学习舆图。

三、帮助互助伙伴树立品牌1. 客户提案

互助伙伴提出了关键词“发展”,为了更好地管理用户的预期,我们做了以“发展”为核心的三个维度展开的设计提案。
方案A为发展沐浴在阳关下的治愈型方案—旭日而生感想熏染发展的力量。
方案B为学习也可以很快乐—学习嘉年华。
方案C为发展的经典绿色方案—发展是一种诗意的栖居。

3个不同的提案

确定主题旭日而生

在与互助伙伴沟通后选择了A方案旭日而生,产品也重新定义了故本家儿线。
将故本家儿线定义为“登山看日出”以是根据新的故本家儿线我们定义了紧张的品牌元素及延伸利用。

2. 品牌设计元素的提取与运用

宋老师团队选择的“旭日而生”的方案,将设计元素的落点在于“阳光”的设计点上。

视觉元素提取抽象并授予视觉的语意“在名师的辅导下学习发展,犹如沐浴在温和清闲的阳光中,快乐发展,快乐学习”,并加入了“学习”的元素—条记本,希望可以通过纸张表示学习过程中的“亲切感”。

紧张设计元素首先来分解紧张的视觉设计点-阳光,提取阳光“温暖柔和”的特质。
将阳光元素抽象出:磨砂模糊的阳光光晕、一束光芒的色彩形状的组合。
并将这些特质利用在界面设计中,如下图。

设计元素在界面上的运用在质感上利用更多偏磨砂的效果,加入有代表性的条记本元素作为底纹。
在界面可以上看到,通过阳光光束突出人名,主要的按钮及按钮状态也增加了阳光光晕的设计,在细节上潜移默化地呈现传授教化与设计的理念。

设计元素在界面上的运用

3. 差异化:融入新的故事线—放大学习造诣感

融入新的故事线“登山看日出”。
在产品中“学习舆图”作为差异化的设计点的全过程展示,参看下图视频演示。

首次学习过程仿照学习进度的视觉化呈现分为三个不同阶段:

我们将21天的学习进程分身分歧的阶段,并根据不同的用户生理改变视觉呈现,前期和中期和后期会有明显的“视觉改变”,在末了成功的学习完成也会有一个仪式感的“学习路径”的层层叠加,凸显学习的造诣感,此时也是用户对自己存心学习的最好回馈,将这一些生理状态都视觉化地呈现在用户面前。

阶段的视觉呈现学习舆图组件分为:

前景:学习过程变革的信息;中/远景:学习节点,学习节点包括根本节点和自定义节点,自定义节点可以根据产品和客户的须要变动节点的属性;远景:学习结束的仪式感展现。
这一学习路径的视觉展现形式也可以很好地转化为设计组件,串联不同的故事线让学员去完身分歧天数的线长进修。

学习舆图组件

1)其它学习勉励页面

呼应“旭日而生”的故事线,我们的设计还包含了其它的学习勉励机制。
例如:每次完成学习会得到一个“太阳”积分、学习攀登榜的设计上,呼应登山主题的视觉表达。

其他勉励页面

2)设计规范与设计协同

为感更好地进行教诲的视觉协作,我们将视觉规范分为:设计总体理念的概览、设计根本组件、设计分外组件、界面干系的详细设计内容、范例页面和人物封面规范等,担保内外部的设计输出规范,保持产品视觉基调完全准确。

设计规范

协同设计

作者:kimiko,来自腾讯云设计中央

推举关注"大众年夜众号 “腾讯设计”( 微信ID:TencentDesign ),第一韶光获取腾讯官方的设计方法论

本文由 @腾讯设计 原创发布于大家都是产品经理,未经容许,禁止转载

题图来自Unsplash,基于CC0协议

本站所发布的文字与图片素材为非商业目的改编或整理,版权归原作者所有,如侵权或涉及违法,请联系我们删除,如需转载请保留原文地址:http://www.baanla.com/bgl/112286.html

XML地图 | 自定链接

Copyright 2005-20203 www.baidu.com 版权所有 | 琼ICP备2023011765号-4 | 统计代码

声明:本站所有内容均只可用于学习参考,信息与图片素材来源于互联网,如内容侵权与违规,请与本站联系,将在三个工作日内处理,联系邮箱:123456789@qq.com