图标在产品设计中有着非常重要的地位，它既能传达功能属性，也能传达品牌。而一套优质的图标风格的设计，能把文字含义通过清晰易懂的图形表达，可以降低用户阅读成本以及提升产品界面的美观度。

基于这点，针对马蜂窝最新版本10.2.2，秉承传递马蜂窝年轻化和娱乐化的调性，对其主图标区图标进行了概念版重构，我们在这里将图标设计的分析及设计过程分享出来，供大家参考。

一、旅游行业大环境分析

旅游行业是现代人生活娱乐方式的重要组成部分，旅游消费成大众“刚需”在线旅游app使用时间稳步提升，而线上旅游用户均为沿海地区和一二线城市等经济发达地区为主的年轻用户，该用户群体有一定的经济消费能力，每年有1到3次出省旅游消费。

二、重构主图标的初衷

我们马蜂窝最新版本首页主图标区进行了梳理，针对目前图标系统存在的问题，进行概念版设计：

 • 主图标表意混淆不清晰

 • 主、副图标风格差异大；副图标断线位置不一致，视觉引导不强

 • 融入品牌及用户特征少

 • 如何创造惊喜，打磨图标精致度

发现了这么多问题，该如何去解决呢？

1. 竞品图标设计分析并提炼

为了使我们的设计更符合旅游行业特性，我们参照并归纳总结了国内优秀的旅游产品，从中萃取灵感，并尝试将他们的细节融入到我们的设计中，提升用户在使用产品时最直观的心智感受。

 • 主流旅游图标特点：渐变、扁平拟物、破局、细节点缀、弥散投影、场景点缀。

 • 不足：携程/去哪儿/飞猪，同质化严重，金刚区风格不统一，三者中“去哪儿”相对比较工整许多；品牌融入欠缺； 风格不统一辨识度不强。

 • 借鉴：沿用其特色，加强品牌的融入，需强调的功能入口可做角标或者动效，吸引眼球。

2. 情绪板分析推导出符合产品及用户的色调

低色彩饱和度和亮度，及过于平缓的颜色性格已经不能勾起用户的视觉记忆，在分析了多家竞品的颜色的基础上，我们基于现有的品牌色，用高饱和度的微渐变增加视觉感及质感，以提升丰富、年轻、娱乐感，以符合目标用户群体的基调。

更加符合马蜂窝聚焦80、90后年轻受众群体的喜好， 使图标能成为界面上的点睛之笔， 为产品氛围更添一分活力。

三、图标设计过程梳理

图标的设计能保持简洁、快速识别、寓意鲜明、容易易记能可以正确地引导用户高效地体验。针对马蜂窝图标的问题点，针对性的优化，下面是我们的设计的整体思路：

1.  表意清晰（属于图标的基本设计原则）

解决问题点：主图标表意混淆不清晰

在项目设计之初，我们团队对图标表意进行了脑暴，词汇联想，并建立双图库分析，进行了草图多方案的实践及讨论，保证我们的图形是最适合于现在当前语境。

2.  设计风格多个方向尝试

解决问题点：主、副图标风格差异大；副图标断线位置不一致，视觉引导及品牌融入不强

为了使图标符合产品调性及用户基调，我们做了多个方向的尝试。

根据竞品及市面上的流行风格，进行了初稿设计；延续圆角基因，简化造型，表意明确，结合情绪板推导的色彩体系，强化图形识别度和设计理念传承。但图标精细度不够，与同类型app图标风格差异化不明显。

寻找高质感设计风格，突破块状图标同质化现象，在初稿的基础上进行了底板精细化细节设计，加入渐变+拟物风。但出来图标风格偏向低龄化，更适合儿童教育行业

3.  终稿设计细节阐述

更进一步在同质化中寻求突破，最终概念稿设计在表现上更注重用户情绪的共鸣，下面分4个方面进行阐述：

 • 对热爱自由的表达

主图标的设计运用底部蒙版遮罩，头部破局的设计技法，表现物体破局而出的视觉感受，表达旅游人群热爱自由，寻求突破的年轻人特征。

• 营造即可出发的动感

倾斜效果空间透视可以很好的表现动感，攻略和飞机票功能采用倾斜效果，酒店和火车票加入透视效果，营造出的视觉动感和用户使用APP寻找一场旅行是想即可出发的冲动引发共鸣。

• 愉悦感和惊喜感的营造

加入星星，云朵等点缀，和攻略中点缀从中间绽放的设计让图标传递愉悦感和惊喜感。

• 品牌融入

主图标底板沿用了马蜂窝logo的形状，主副均融入了品牌色，提高用户对品牌的感知度

4. 制定统一图标规范

规范每个图标的圆角大小，根据黄金比例来控制主副图标的大小比例，做到视觉统一

四、场景展示

再来看一下，App内的图标整体效果

五、写在最后

整个项目耗时大概半个多月，图标重构经过整个团队在设计前、中、后都达成共识并协作完成。

本文通过行业分析、改版的初衷及设计过程展示，使我们对产品的认知更近了一步，新的图形方案也打开了我们的视野，而本次图标的改造，仅仅是一个开始。

Powered by Froala Editor