9 月份,马蜂窝客户端视觉升级完成,作为这次升级的重要分支,新版图标给了大家全新的感受,鲜明的设计风格脱颖而出。接下来就和大家聊聊这次图标是如何诞生的。
该项目由三个阶段组成:项目背景、设计目标、视觉探索,下面将详细介绍。
▲ 项目流程
项目背景
结合马蜂窝 V9 改版视觉升级和品牌透传的需要,优化品类图标。
现有问题
我们梳理了现有版本图标的问题,归纳为形状和颜色两个部分。
● 形状:体量不协调,点击感差;相似元素样式不统一;曲线转角规则不统一。
● 颜色:颜色与马蜂窝品牌调性不匹配;感光明度差异大;整体配色方案不协调。
基于此背景和问题,我们确定了这次图标改版的目标。
设计目标
本次图标改版希望在满足业务诉求和用户诉求的基础上,体现品牌感,深挖图形表达,主要拆分为以下两个部分。
● 业务表达:
包括业务诉求和用户诉求。业务诉求指能够有效的满足业务需求,实现商业目标 ;用户诉求指将业务诉求转化为用户服务,且符合用户使用场景的图形设计表达。
● 品牌特征:
突出马蜂窝这一品牌,同时还要结合马蜂窝独特的设计语言。
围绕设计目标,进行任务拆解,制定图形设计策略,探索具体表现形式。
▲ 设计目标
视觉探索
在视觉探索环节,围绕风格、形状、颜色三个维度,我们进行了设计方案的尝试。
▲ 视觉探索
风格
本次视觉升级希望能传达给用户 3 个核心点:(图形)新潮有态度、(内容)简洁舒适、(体验)轻松可信赖。在图形方面围绕「新潮有态度」的主题,我们进行了风格探索。
▲ 情绪版
图标形式:
在新潮有态度主题的基础上,我们分面形图标、线形图标、插画图标三类图标形式进行风格探索的收集,并分析了每类图标的优缺点。
▲ 图标样式
● 面形图标:点击感强,图形识别度高
● 线形图标:点击感弱,视觉焦点分散
● 插画图标:主体弱化,识别度差
结合点击感、整体性和识别度,选择了面形图标风格进行接下来的尝试。
品牌融入:
图形的表达需要很好的去诠释马蜂窝品牌的 DNA,基于对 logo 的结构,提取出三种基准图形(矩形、圆形、三角形)和微笑弧度,有规律的几何图形能够更好的传递轻松可信赖的操作体验。
▲ 品牌融入
在此基础上,我们也进行了多方案尝试:
▲ 方案尝试
最后,经过反复筛选及测试验证,选定了以曲线切割的视觉语言:通过缩小圆角度数加强微笑弧度对比,结合利落的曲线切割关系和有规律的倾斜角度,突出马蜂窝的品牌辨识度和图形识别度。
并对其进行深入的研讨和细节的描绘。
▲ 确定设计语言
形状
确定风格方向之后是图形设计阶段。
● 提炼语意形状: 发散关键词,尽量选择符合用户实际认知的表意关键词。并且图形表达要切合业务特点,符合用户心理预期。
▲ 语意尝试
▲ 语意和改版前尽量保持一致
● 统一体量: 在确定图标的基本形状后,尝试了图标的比例,结合舒适度、点击感,确定了图标比例,然后把所有的图标大小体量进行了统一。
● 倾斜角度: 规定了出现转角的倾斜角度为 15 度的倍数。
● 圆角: 根据倾斜角度和表意本身的关键特征的不同,圆角也分为 3 像素和 4 像素。
● 斐波那契数列: 结合斐波那契数列圆规范设计图形,可以一定程度的提高统一性和视觉美感。
● 统一设计元素: 减少不必要的基础样式,来保证图标整体的一致性。
▲ 统一设计元素
颜色
图标形状确定之后,就是颜色的部分。基础配色延续马蜂窝 V9 颜色色相,保持统一性。
确定了色相的范围之后, 我们以基础色为基准调整纯度,提高颜色饱和度,匹配品牌调性。(绿色特殊处理,调整色相和明度,提高颜色整洁度,保持整体配色协调性)
▲ 颜色调整
基础配色确定之后,是配色表现形式的选择,目前的几种主要的形式包括纯色、类似色渐变、邻近色渐变、纯度渐变这四种。根据这四种表现形式,我们分别做了尝试:
▲ 配色表现形式
纯度渐变,会因为纯度差值影响识别度。邻近色渐变个性比较强,不符合我们风格调性。所以最后选择了轻松自然的类似色渐变。
关于类似色的选取,我们是选感官明度高于当前基础配色的较亮的颜色作为类似色,然后确定光源角度,完成渐变色的设计。
▲ 最终效果
以上是马蜂窝 V9 品类图标的设计过程。
最后,重点来了!隆重介绍下参与图标设计的朋友们! 感谢他们的辛苦付出!(名字不分先后)
曹益睿、蔡蕾、贾祎明、梁力、廖泽平、马赢、孙正阳、王乐诗、赵莉虹、赵斯琴、卓柏含