K12教育 首页图标改版设计详解

Sponsor

前言：如今设计同质化现象越来越普遍，在这个跟风盛行的趋势下。我们应如何避免设计同质化，设计即具有自己的特点、又能很好的展现产品的app图标？我们以K12教育产品为例，今天的案例是“平安好学”教育App首页图标，我们将从前期分析、中期基因探寻，后期设计执行3方面，从0到1的进行思路讲解和经验分享。

一、产品介绍

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

2020年疫情加快在线教育的发展，k12家长及学生群体对在线教育的接受度正在快速增长。

二、设计机会点
首页图标起到流量分发、促进转化率的作用。图标辨识度越高，用户进入二级页面速度越快；图标趣味性越强，用户记忆越深刻。但是在这2点上，原版图标还有提升空间。

用户画像

中国科学院大数据显示，目前K12在线教育消费主力集中在一二线城市。5到18岁学生作为主要使用者，具有年轻、亲和力强、喜欢多彩化的事物等特点。

竞品分析

选取成熟竞品进行分析，对其图标构成、颜色、辨识度等多方面进行分析。

目的是寻找优点以及教育行业共性，并取其精华。

K12行业共性：

1、通常由多色配比，色彩高饱和、高明度；

2、在造型上，采用扁平和大圆角风格。

竞品优点：

1、可考虑加角标凸显重点板块；

2、运用大面积品牌色体现品牌感。

改版创新点：

在提取品牌造型特征，在图形上更有品牌基因，且保持风格高度统一。

确定改版方向

1. 突出儿童教育行业特征：通过对行业、用户画像和竞品分析，让图标在具有行业高辨识度，且符合对应人群的审美偏好；

2. 增强品牌性：通过品牌元素提取形状特点，形成独特的品牌基因，避免同质化。

三、图形基因探寻

情绪板推导

从用户、业务、体验三个纬度，得出平安好学的原生关键词为：年轻活力、高效简洁、轻松有趣。

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

进一步色彩分析，选用红、蓝、绿、黄色，分别给人热情、可靠、健康、快乐的感觉。

提炼品牌基因

另外，根据品牌LOGO提取品牌基因图形，结合情绪板推导，将意向风格转化为具象的图形，作为基础设计语言。

四、设计执行

双图库运用

根据业务词汇进行头脑风暴，建立双图库。联想元素需简单名了，减少用户理解成本。

图标造型绘制

根据双图库及推导出的基础图形，进行图标设计，以听听为例：

多稿件迭代

我们从多纬度进行方案评估。进行团队讨论后，进行二次迭代。

在第一稿基础上，针对3个纬度进行修改：

1、加强识别性。用Aa代替a，更能联想到单词；绘本馆用动物绘本来体现。

2、加强统一感。全部图标保持略微的立体感，让人联想到儿童积木的感觉。

3、加强设计细节。增加渐变、投影等轻质感，调整色彩搭配。

质感拆解

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

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

细节规范

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

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

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

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

五、图标视觉展示

后记

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

希望这次分享，能够帮助大家在图标设计中，挖掘品牌基因和行业特征，打造具有差异化的图标。

案例分析提供的是思路，设计中应多结合自己的产品特点去分析。

作者 | 蟹设计Club
来源 | 站酷 (zcool.com.cn/u/22100142)

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。