这次项目就是对平安好学的首页图标进行改版。从前期的分析调研，到设计落地，再到最后的包装成品都进行了详细的阐述，希望对大家有所帮助。

1. 项目介绍

1.1 产品介绍

平安好学是一款为5-18岁青少儿提供英语、语文、数学、编程等多元化在线教学服务，致力于打造K12全学科在线教育平台。

1.2 项目背景

随着80后/90后父母教育意识消费能力的提升，00后/10后对互联网的天然熟悉，叠加2020年疫情加快在线教育的推广，k12家长及学生群体对在线教育的接受度正在快速增长。

1.3 产品痛点

目前同类教育产品的首页图标存在普遍问题；

1、同质化严重：目前线上教育行业发展迅猛，但在app图标界面上的差异化不明显；

2、品牌感不足：图标设计感不足，品牌基因渗透性不强。

首页图标区是页面核心功能，承载起流量分发、提高转化率的作用。相比纯文字选用视觉辨识度强的图标能更好的引导用户点击选择，同时具备一定趣味性，让用户更感兴趣和理解。

1.4 从产品设计“抓手“

1. 突出行业特点：通过用户画像和情绪板分析，让图标在高辨识度的基础上拥有自己的调性，避免同质化；

2. 增强品牌性：通过品牌元素提取形状或风格特点，逐点渗透形成独特的品牌传播。

2. 图标基因风格探索

基因风格的探索是为了建立一定的统一性和个性化，从竞品差异化分析、用户画像及情绪板推导三方面来确定本次金刚区图标重构的基因风格。

2.1 竞品差异化分析

选取了和平安好学定位接近的成熟竞品进行分析，例如学霸君1v1、英语趣配音、dada英语，分别对他们的金刚区图标构图风格、颜色配比、图标辨识度等方面进行分析，目的是寻找差异化并取其精华。

由分析可以看出

竞品相同点是：

1、图标配色的思路是采用品牌色及其衍生色，四色配比，高饱和，高明度；

2、在造型上采用具象手法的扁平造型和具有圆润童趣的大圆角。

差异点为：

1、背板使用与否；

2、造型差异及组合形式的变化。

所以，可以利用用户画像、情绪板结合产品属性推导产品的基因风格定位，在造型和一些细节质感上下功夫，使其更有趣味性和差异性，同时又不失辨识度，减少同质化现象，设计出符合产品功能气质的图标。

2.2 用户画像

用户画像的核心点是通过给目标用户贴高度精炼的特征标签。

根据中国科学院大数据显示，目前K12在线教育的消费主力军集中在一二线城市，消费群体主要是家长和学生，学生是主要使用者，家长是决策者，以购买课程为主。做为主要使用者的学生，他们普遍年轻，易接受新鲜事物，喜欢多彩化的事物，以及圆润亲切的风格。

2.3 情绪板推导

利用情绪板提炼品牌色，进一步确定设计细节，抓住目标用户群体的视觉偏好。

根据用户群体可归纳出平安好学的基础原生关键词为年轻活力、高效专业、轻松有趣。

由此进行图片搜索，提炼色彩，并结合色彩情绪，推导首页图标的颜色方向。

根据色彩情绪，可知蓝色、绿色、黄色、红色分别给人可靠、健康、快乐、热情的感觉，所以采用四色原则在上述中推导出的色彩中，选定了这4种颜色。

考虑到青少年喜欢多彩的颜色，并且顾及家长对平台专业性的考究，最终选择多色+偏高明度+高饱和度的组合，既具有一定趣味性，又不失专业性。

形状偏向直角的图标给人一种严肃、严谨、可靠的感觉，多用于偏理性的金融、男性主题类型的产品中；形状偏向圆角的图标则具有一定的亲和感圆润感，圆角越大这种感觉越明显。

平安好学的使用用户是学生，但是决策者是家长，所以不能单纯的直角或者圆角，而是需要综合考虑，既不能过于理性锐利，也不能过于低龄娱乐化。

再利用情绪板中的关键原生词推导出一些设计风格细节：具有一定厚度的圆润造型风格，给人可靠又活泼的感觉。

2.4 基因风格的确定

由以上分析可知，赋予平安好学的品牌人格为专业高效且轻松有趣。

可以得出重构平安好学首页图标的基因风格为：活泼不刺眼的多色色彩、几何化的点缀元素、具有一定厚度的具象微立体造型，图形圆润活泼可靠。

2.5 提炼品牌语言

秉持大圆角、几何化、微立体的基因风格原则，配上符合业务属性及色彩情绪的的颜色，提炼品牌语言，进行图标造型的绘制。

3. 图标造型探索

前面得出了图标基因风格后，需要的是具体的设计实施。

在新潮有态度主题的基础上，对线性图标、面形图标、插画图标三类图标形式进行风格探索的收集，并分析了每类图标的优缺点。

线形图标：点击感弱，视觉焦点分散；

面形图标：点击感强，图形识别度高；

插画图标：主体弱化，识别度差；

结合点击感、整体性和识别度，选择了面形图标风格进行接下来的尝试。

3.1 头脑风暴

针对孩子对童真世界的好奇和孩子的兴趣爱好方向，结合年轻活力、高效专业、轻松有趣的关键词，进行头脑风暴。

3.2 建立双图库及线稿绘制

根据头脑风暴的思路建立双图库，提炼语意形状，发散关键词，尽量选择符合用户实际认知的表意关键词。并且图形表达要切合业务特点，符合用户心理预期，减少用户的理解成本。

3.3 图标造型绘制

图标越多，用户记忆越困难，根据7加减2的原则，为保证图标呼吸感，所以图标一排一般数量为4-5。

多个图标设计的时候就需要保持他们的一致性，及后续创作的延用性，光有风格基因还是不够的，所以还得形成一套通用的视觉确保它们的统一性和复用性，以及一定的创新性。

3.4 视觉语言的沉淀与复用

整个视觉语言的形成过程为：

1、真实参照物为出发点；

2、提炼参照物元素；

3、将提炼元素进行重组，并增强辨识度及创新性；

4、结合品牌基因风格进行落地设计执行。

4. 多稿件对比

4.1 图标试错阶段

经过前面的不断分析，到现在只需要执行，去做就对了。在这过程中，试错是一种修正的方式，我们经历了试错阶段，不断调整，才能产出最优解。

4.2 多维度对比稿件

一个稿件的好与坏，就像综合评价一个人，需要从多元化的思维进行综合评定，不能一股脑简单的从好看与不好看进行评判。

对稿件进行评审，通过多维度对比，选定第3稿。

第3稿的识别度、配色点缀的饱和度以及造型美观度上都更胜一筹，且综合分高，所以选定第3稿作为我们的终稿。

5. 细节展示

为了更加统一与规范，在尺寸和留白上做了一定的控制。以8的倍数进行呼吸感的留白，并且以五等份的形式进行切图交付。

5.2 视觉与重心统一

在图标的整体设计中，遵循图标规范，利用图标盒子进行视觉大小及重心的统一，保持图标的透气性及容错性，避免图标切图的时候出现明显的切割痕迹。

大小一致：多数图标都是不规则形状，所以不能简单的统一物理尺寸，要保持视觉上的大小统一。面积越大，视觉感受就越大（如正方形），所以感受小的元素要适当放大。

重心一致：非中心对称的图形物理对齐时，视觉上会有偏离感。如播放图标，我们需要找到三角形的重心，而不是中心。

多个不同形状的图标，重心不在一条水平线上，需要微调保证平衡感。

5.3 技法表现形式

通过层叠手法，使图标有前后纵深的关系，让图标层次上更为丰富，增加质感，提升设计精细度，打破单纯的同质化扁平图标。同时在色彩上控制颜色的数量、明度及饱和度，保证光源材质表现手法的一致性。

基础造型颜色高饱和度，偏高明度，在保持相同明度和饱和度的基础上，使用邻近色相形成呈45度线性渐变，在颜色的视觉轻重上，保持上轻下重。

对中间层级的图形用内阴影增加一定的厚度质感，及呈45度的线性渐变填充进行光源统一，最后在加上一定的模糊来达到轻度渲染的效果。

最后的前景点缀用炫彩渐变撞色进行点缀，与竞品产生差异化，提高图标质感、精细度，烘托氛围，让用户产生共鸣。

在使用元素上，保证圆角统一及元素统一。

6. 图标展示

“形” “色”  “质”，统一与辨识。

从接到项目到包装产出，历时一个星期。利用闲暇时间不断沟通、修改与打磨，最终产出了这篇文章。

以上就是平安好学金刚区图标的全部思考及落地实施过程，是我们的一次总结，希望能对行业中的设计师们有一定的帮助和启发。

非常感谢大家耐心看完

如果对你有那么一些帮助与启发，请不要吝啬你的随手赞～笔芯～

Powered by Froala Editor