网页设计 » 视觉设计 » K12教育 首页图标改版设计详解

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

发表于: 视觉设计. 评论
Sponsor

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

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

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

一、产品介绍

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

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

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

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

用户画像

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

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

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

竞品分析

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

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

K12行业共性:

1、通常由多色配比,色彩高饱和、高明度;

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

竞品优点:

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

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

改版创新点:

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

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

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

确定改版方向

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

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

K12教育 首页图标改版设计详解
三、图形基因探寻

情绪板推导

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

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

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

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

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

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

提炼品牌基因

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

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

四、设计执行

双图库运用

根据业务词汇进行头脑风暴,建立双图库。联想元素需简单名了,减少用户理解成本。 K12教育 首页图标改版设计详解

图标造型绘制

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

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

多稿件迭代

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

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

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

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

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

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

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

质感拆解

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

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

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

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

细节规范

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

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

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

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

多个不同形状的图标,重心不在一条水平线上,需要微调保证平衡感。
K12教育 首页图标改版设计详解

五、图标视觉展示

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

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

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

后记

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

希望这次分享,能够帮助大家在图标设计中,挖掘品牌基因和行业特征,打造具有差异化的图标。K12教育 首页图标改版设计详解

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

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

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

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:结交更多有才华的设计师?请加入UI设计QQ群,与50000名设计师交流设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }