赞助商
立即赞助

图标如何一稿过?来看京东的实战案例!

UI设计3年前 (2021)更新 流光
2.6K 0 0

我们在画图标的候,往往会忽略掉一个重要的问题:缺失品牌。也就是说,这个图标和的实际品牌、业并没有什系,它仅仅足了可辨识这个温饱需求。

图标缺失品感,会导致质化问题,这些图标放在任意个品上都可以用。

对于产品,记忆点的缺失导致用户看完后对于我们的业务、品牌不会产任何深刻的印象。对于我们设师,图标业务的断层则很易让我们陷入反复改稿的被动局面,并且设话语权也越越小。

那么,有没有么系统、易于解的方法来我们的图标具备牌感?

当有。

下来的这个图标三步品牌化是一直在用的法,而且屡不爽,基本用了这个方法,需求方基本一稿过~

文章案例选用了接京东物流国物流项目。时有个着陆页需求,需要在首屏下优势板块绘制六个图标,分应平台六大优势。接下来,我将详细讲解如何运用这个图标三步品化法绘制与品息息相关图标。

融入品牌符号

品符号从广义上来讲也是形状。

比如天猫近的十一购节,便用一猫作这次促的品牌符,通过每固时间节点的品牌形象建立智。

图标如何一稿过?来看京东的实战案例!

再比如之的腾讯综《演员请就》,它的品牌符就不同矩形色块的叠加组合形态。

图标如何一稿过?来看京东的实战案例!

通过承载的不同信息可以扩展不同的类型,比如下面的固态层、图片层文字层就分别承载了内、图片文字。

图标如何一稿过?来看京东的实战案例!

Google18于material design中新增了一整块章节阐述图形语言。

图标如何一稿过?来看京东的实战案例!

google原话:形状可以引导注意力,让用户易于识别组件,识别状态品牌语言传达。

图标如何一稿过?来看京东的实战案例!

也就,形状并非我们以往认知中的作用,品牌同样可以借形状加强效应。

最典的就是谷歌自的google play。你可看到google play被炼的角形符号被作为外轮廓延展到来有相的务icon,显著强了牌记忆点。

图标如何一稿过?来看京东的实战案例!

再如国的蚂蚁财富,是通过炼logo中的箭头符号,将延展到个优势图标当中,一样得传达了蚂蚁财富的牌表达。

图标如何一稿过?来看京东的实战案例!

,基于务目标及行特征,我们将倒角这个符号作为我们这次项目的牌符号。

图标如何一稿过?来看京东的实战案例!

至于为么择这个形状,要考虑到了稳定性(角形自身的稳定性、象征专线的稳定可靠)、保障性(倒角被于保障承诺类的徽章标志)、隐喻物流(由飞机和定位的图标变形而来)和者的战略合作(开锣、中国制和京东)。

注入品牌颜色

第二步相对而言就较简单了,过考虑到颜色在各个场景及状态到通性,这里需要基于原本的牌色额外同明的颜色。

里我简单扩展出淡和深,为避免页面冷加暖为点缀以提升温度。

图标如何一稿过?来看京东的实战案例!

结合行业特征

将图标与务紧密结合,够与他竞拉开差异,这是个相对简单但是很容易效果的牌的方法。

具的操办法就是:首先根据所给文案脑爆出图标所对应的关键词,根据所在行业的特征筛选关键词,或者进行二次联想及转化。

下面通过此项目中的三个图标案例来简讲述下计过程,仅为大家提供下思路:

1. 第一个图标

运营所给文案如下:

图标如何一稿过?来看京东的实战案例!

这段文案思就是,由于和清关行作,因此让的业更有保障性,货物可以按送户中。

这里我开始脑爆出了雨伞、锁和盾这三个形象,并传统用了盾符号传保障性。

这种任何行业平台都可通用的形象,并不能关联我们这流类的平台。

后面联想到到我们跨境、外贸的行特征,将“雨伞”这个形象变形转为降落伞,来代替盾牌符号。

一来,降落伞外形似伞,相当是货物的护伞一样现”障“的感受, 另外,种”空运“式的表达也额外传递出按时递的概念,很得现出典型的”跨境物流“的行业特征。

图标如何一稿过?来看京东的实战案例!

2. 第二个图标

营给案如:

图标如何一稿过?来看京东的实战案例!

同样,一开始我着眼于”跟踪“”实时“”轨迹“这些键词,脑暴定位、雷达之类的事物。

但是结合我们行业特征的,其有空间去更贴切到业务身。

的业线包含了个站点——美国(主站)和马来西亚。供应商发货后,货物的轨迹必然是反映在界地图中,从起点至终点得布。

此我用了地球仪映射全球,以定位来映射裹收货地,以延展到定位icon虚线映射轨迹。这样出图标,不仅仅是指代了文案意思,时表出应业特征,和业务紧密贴合。

图标如何一稿过?来看京东的实战案例!

3. 第三个图标

文案如下:

图标如何一稿过?来看京东的实战案例!

一开始,传统得想了一个钟图标来代表。但是仔细想想,这个钟图标仅能代表”效“的征,而不能传达”快“的受。如何更好得传达“快”?

发散思维,我联想到交运输工具,飞、轮船、箭等等,最终我选取了飞这类跨境物流专线主要使用运输工具,它所带来快捷相比轮船更加深入心,又不像箭那样脱离现实。

图标如何一稿过?来看京东的实战案例!

然并所有图标定需要去结合业特征,其余三个图标暂未想到更适合元素,所以依然选用了常见形象来传概念。我们不需要完全硬坳这个法,是身为设计师,我们依然需要掌控我们项目,充分发挥自己创造力来赋予品更多power。

后,我所图标加入了非线性动画。一方面陆页注入了活力,增加用户愉悦度,另一方面通过动态的表达引导用户好理解平台优势,比如球仪通过加入轨迹的修剪动画以及的弹跳动画,动得传达流轨迹全程踪的这概念。相比原本的静态图标不好理解了?

图标如何一稿过?来看京东的实战案例!

重的,动画的加入也贴合了我们流行业“运动”的特征~

篇幅原因,画的制作今天先略过,后面可另抽时间单独个程来。当然,来自于你们的在看或转发~~(手斜眼)

小结

我们每次接手一个需求时,都要想想,这个设计可在哪些地方和我们的务、牌进行联?而是每次都好像在做一个全独立于务外的项目,这很容易你陷入反复改稿的被面,而且话语权越来越小。

总之,品牌思是需要设计师外关注的!~

最后,再来回顾一下这个图标三步品牌化这个方法!

第步,融入品符号;第步,注入品颜色;第三步,结合业特征。

但愿今日份的分享对所帮!

期见。

欢迎关注者微信众号:「转行人的设计笔」

图标如何一稿过?来看京东的实战案例!

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

文件名 文件大小 提取码 下载来源 iconfont 图标库 6M 2333 点此复制   登录下载 今天还是一篇非常干货的原创文章...
图标技巧
很多平台的设计风格都是偏可爱类型的,尤其是用户年龄段比较低的,比如动漫类的,校园类的等等。 就在前不久,我刚刚悟出了...
可爱图标
橙子的橙子:记得刚开始学美术的时候,都是从临摹开始的,等到一定的阶段才开始写生,照着实物画。这个过程根据个人能力有长...
ui设计
对于移动端APP 而言,图标始终还是最重要的「门面」,它直接关联着产品的品牌价值,图标是否具备良好的可用性,将会直接影响...
App图标
文章结合过往案例讲述如何通过设计要点和方法有效系统地进行界面图标设计。 作者: KongZhen@腾讯视频TVD
ICON
有时候觉得做的图标有点奇怪,但又不知道哪里奇怪,今天就来分析两个原理,看看有谁中招了! 亲密性 排版有四大原则,其中有...
ui设计
@途家UED :如何把控图标设计的风格,在什么场景该如何应用,本篇文章就为大家解决这些问题。 什么是图标 图标的功能分类 ...
入门
在《从零开始画图标系列:超全面的基础知识》中我们知道了,工具图标的三种设计类型,以及对应的不同风格。本篇文章,内容主...
图标设计