远智教育APP的设计语言

「远智教育APP」是远智倾力打造的,为中国用户提供集学习打卡和上进习惯养成于一体的成长型教育平台。

远智教育APP的设计语言

随着远智教育APP内容设计和质量日趋成熟,我们也希望把关于APP设计这块的心路历程以及未来规划做一个阶段性沉淀,把远智教育的品牌核心价值传递给大家。

远智教育想给用户传递上进的价值观,督促用户养成终身学习的上进习惯,以此帮助每一个人更上进。作为一个平台,远智教育APP设计过程中综合考虑了很多因素,比如维护成本、开发成本、用户体验等,所以对使用的每一个颜色、字号、字号属性、元素间距、图形都非常慎重,在设计的过程中会更多追求简洁清晰和规范。

这是平台属性使然,也是为了让产品有更强的适用性和包容性,从而更耐看、更便于管理。

目前APP还在不断地升级优化迭代,但无规矩不成方圆,总还有一些规范需要遵循,使得APP以符合公司文化特点的方式去生长发展。

项目背景

社会的发展越来越快,终身学习的呼声越来越高,且2020年的疫情也打乱了很多人的计划,让很多事情变得尤为艰难。

越是人人自危的时刻,远智越是明白自己的责任。帮助更多的人增强自身竞争力,让更多的人实现自己人生的可能性,是远智义不容辞的责任和义务。

即便没有2020年的困境,上进也已经成为人们倡导的一种生活方式,所以打造一款既能让人们进行学习打卡获得实际效益,又能养成上进习惯与一群志同道合的人互相进步的产品刻不容缓。

用户诉求

根据前期的用户调研,我们发现目标用户期待的诉求包括:

① 在更真实的学习环境中以更灵活的上课方式进行学习打卡;

② 能督促自己养成上进习惯;

③ 能与一群志同道合的同学参与具有上进氛围的社团活动;

④ 能在更集中的任务处理中心处理任务;

⑤ 能了解到最新的有关学历提升的相关资讯。

远智教育APP的设计语言

产品目标

远智教育的产品目标是综合打造一个集学习和上进习惯养成于一体的学习社交平台:

① 以学习上课为主要功能点,让用户学习打卡顺利获得毕业证书;

② 通过读书打卡、跑步打卡活动督促用户养成上进习惯,获得上进证书;

③ 利用丰富的社团活动玩法和直播方式,串联陌生用户群体,提升用户之间的凝聚力。

远智教育APP的设计语言

设计目标

设计的总体任务既要聚焦用户行为层面,也要结合品牌文化特点。糅合用户诉求、产品目标和品牌文化,对各类需求进行体验重塑和整合。

明确了远智教育APP的产品定位及未来愿景后,我们把设计目标分为三个阶段:

第一阶段设计:以功能为核心进行设计,快速搭建功能服务,让用户能够正常使用学习打卡及任务处理功能。

第二阶段设计:在解决温饱问题后,逐步提升内容质量和用户体验,以设计为核心,提升App的愉悦感和品牌感。

第三阶段设计:丰富App玩法,提升App的惊喜感,让用户产生粘性,提高留存率。

远智教育APP的设计语言

产品用户类型

18-50岁青中年人;

有学历提升需求的人群;

对生活有追求, 督促自己养成上进习惯终身学习的人。

远智教育APP设计语言

根据用户特性的研究,聚焦产品核心价值,通过脑暴等形式选择有特点的维度,结合用户体验与品牌属性将其视觉化。

一、分析产品特性

产品关键词:「上进」

基础原生关键词:「持续成长、品质、友好、易懂」

远智教育APP的设计语言

拓展衍生关键词:

远智教育APP的设计语言

衍生关键词映射:

远智教育APP的设计语言

二、提取产品视觉风格

生成情绪版后,结合衍生关键词的分析结果,进行视觉风格的提取,主要包括:图形、色彩、字体、图标风格。

1. 图形提取:

  • 简洁:视觉为产品功能服务,不做多余的设计,圆角矩形的卡片式设计,让人易懂,打造亲和感;
  • 校园:添加学生学籍所在学校的建筑物元素,具象化校园感觉,为用户营造真实校园氛围,营造归属感;
  • 亲切:利用恰当的圆角和柔和的配色,体现产品的温度与友好;
  • 层次感:适度的阴影,有效利用Z轴视觉,增强设计空间感和层次感。

远智教育APP的设计语言

远智教育APP的设计语言

2. 品牌色彩提取:

① 确定APP主色调:

色彩是感性且有情绪的,不同波长的光通过人的眼睛传到大脑,会引起人们不同的心理感受。且色彩在界面设计中的使用应同时具有品牌识别性及界面设计功能性。

即设计的过程中不仅要考虑到品牌层面的表达,还要能有效进行信息传达、动作指引、交互反馈、强化和凸显某一个元素。

一般情况下,公司的产品是利用公司的品牌色作为主色调进行设计的,因为品牌色是表现公司文化、产品特性最直观的视觉元素之一。

但有时基于用户体验的考虑,会面临品牌色无法直接使用的问题。这种情况下就需要对品牌色进行衍生,把品牌衍生色作为旗下某类产品的主色调。

比如,远智上进红的饱和度过高的特点虽然能瞬间抓取人的注意力,但无法直视太久。经过讨论我们决定采用远智上进红的衍生色作为APP的主色调:

远智教育APP的设计语言

② 建立以App主色调为基础的基准黑色彩体系:

远智教育APP的设计语言

远智教育APP的设计语言

③ 提取辅助色彩体系:

一个产品不可能单由一个颜色构成,我们不仅需要品牌色来传递品牌价值,还需要辅助色来组成我们产品体系的颜色搭配,利用辅助色中和品牌色,根据不同的业务需求,结合不同的场景来呈现最佳视觉效果,实现不同功能点的视觉呈现的同时,减少用户对于主色的视觉疲劳。

在这里,我们强调任何颜色的选取和使用应该是有意义的。在进行辅助色的衍生过程中,我们选取了类似色、互补色、对比色三种辅助色系:

远智教育APP的设计语言

④ 较正辅助色:

可以从上图看到,尽管保持了相同的饱和度和明度,色相的不同传递着不同的情绪,从而在视觉上营造了不一样的感官体验。推衍出来的衍生颜色总体偏平淡一些,在表达功能性需求时,不能很有效地吸引到用户的注意,所以我们需要校正辅助色。

远智教育APP的设计语言

⑤ 建立调色板:

确定好主色和辅助色后,需要建立调色板,通过颜色层级的变化,对产品交互层面作出改变。利用 Tints and Shades 系统获得同色系的调色板:

远智教育APP的设计语言

3.字体提取:

设计稿中使用的是苹方字体,实际开发中使用的是系统字体,但在一些特殊场景中数字使用的是可商用的数字字体,以增强数字的表现力。

在设计的过程中,会使用不同的字号和属性拉开字体层级梯度,增强内容的识别性,但又需要相对克制,避免出现过多种类的字阶导致维护成本和沟通成本大的问题。

远智教育APP的设计语言

4.图标设计:

APP中的功能图标设计为线性icon,圆角设计增加亲和感。金刚区图标使用微渐变衍生色彩,增加图标识别度。

远智教育APP的设计语言

5.启动页设计:

随着APP内容的不断丰富,我们希望启动页能不局限于传统静态品牌页展示方式,希望能囊括更丰富的内容,然后以更灵动的方式表达APP的属性,从而让启动页更有活力、更有故事性。

远智教育APP集学习打卡和上进习惯养成于一体,上进习惯包括读书打卡和跑步打卡,以此为切入点展开并引导故事走向,向用户阐述这个APP包含了哪些属性,大概是一个什么样的APP,让用户快速对APP产生一个大致的认知。

远智教育APP的设计语言

三、APP内产品使用场景

远智教育APP的设计语言

远智教育APP的设计语言

诚然,远智教育APP成长到现在还有很多不完善需要优化的地方,但一切正在往好的方向发展。

在未来,我们将更用心地为大家诠释远智的上进价值观,不负期望。

业界动态

浅谈可视化图表设计

2020-9-24 16:26:23

业界动态

从实验设计和统计两方面,讲解如何做好AB测试?

2020-9-24 17:09:14

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索