赞助商
立即赞助

高手说我的图标不止好看,还有这4个作用!

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

「界存在个元素,都是有意义。」这是我进品设计时贯主张。

小到一个标点符号、一根分割线,大到一个图标、一张图片、一个字,都要有存在的由。

那在产品计中出镜率相当之高的图标,有哪些真真切切存在的价值呢?

下面的几点总结,我思考产品的视觉层面时关于图标的几考察点:

  • 装饰
  • 表意
  • 趣味
  • 品宣

一. 装饰

装饰,也可以称作修饰,指通过图标对页面行润色,使页面看去加饱满。同时,通过图标增加页面的层次感,使页面各部分内得以区分。

图标的装饰用在我看来是图标的基础用,绝大部分图标能到装饰的用。

我们经常会听到些描述视觉效形容词:「节奏感」、「层感」、「呼吸感」等等。

要使一个页面有节奏感、层次感,除了可通过「留白」、「分割线」、「分割」、「对」等手法,图标是一个的手。

下面个例:

高手说我的图标不止好看,还有这4个作用!

△ 知乎网页版

图知乎网页版的侧栏,灰色的图标,既起到了装饰的作用,又不会抢夺用户的注意力,使得用户的注意力可以聚焦阅读内本身。

高手说我的图标不止好看,还有这4个作用!

△ 东198

上图是东兴198的易首界面,通图标的「有无」、「强弱」,整个页面被分为三个部分。

顶部「买、卖、撤、持、查」是股票交易最常用操作,所以用了文性图标。既起到了装饰作用,表意明确、接,这也是很多股票类APP会用到图标风格,视觉上也能第时引起用户注意。

次使频率相对较低的功操作「股申购、资管产、港股通、国债逆购」了种颜色填充、体量感较小的方状图标。

而最底部的列表项功能则未使用图标,使得上面的其功能显开来。

整页面通过图标与布局的变换,松弛度,层次感强。用户单纯通过视觉引导就能很好的对各部分功能出区分。

「凡事度,过犹不及」

虽然图标的装饰作用可以让页面节奏感层次感,但切忌过度使用。

比页面中已经使用留白和分割等营造出整个页面的次感,么是否需要使用图标进行装饰就当两说。

如使用图标进装饰,如何使图标和装饰象(常是文内容)到最佳平衡,如何在起到装饰作用时不会干扰用户,是在进图标设计时要认考量的地方。

二. 表意

「表意」,在我看来是图标的二个功能,在「装饰」的基础上有所升华。直白来说,图标的表意现在对功能的释上。

互联网经过这几年快速发展,用户于些图标形成了些约定俗成认知。我们在进品设计时要做到心有数,使用时候切忌打破常规。

面是几个的图标:

高手说我的图标不止好看,还有这4个作用!

△ 的图标

对于这些在用户心智中形成固有模式的图标,使用的候可以在此基础上做变形、创新,但如果要破用户的习惯认知,一定要谨慎。

下面举几我人认表意性的比较好的例子:

高手说我的图标不止好看,还有这4个作用!

高手说我的图标不止好看,还有这4个作用!

△ QQ音

图QQ音乐的下载icon,将「下载」「金钱」相结合,一眼看去就知道「付费下载」,表意非常明确。

高手说我的图标不止好看,还有这4个作用!

高手说我的图标不止好看,还有这4个作用!

△ XMind Cloud

图xmind手机版的编辑页面以及底部的功能图标。作一款手机版的脑图软件,各种功能并不如社交类、电商类软件的功能常见,所以如何行功能图标的设就比较考验人了,且必须表意明确。我初次使用xmind手机APP的时候,看到这些图标就很喜欢,因它们表意非常直接明确,且图标并不复杂,简洁、明晰结合的很好。

试想一下,果把上图中的图标换成文字,底部的工具栏就显得非常拥挤,并且文字描述并不一定比图标来的准确。

三. 趣味

趣味,也以称愉悦,能带给人愉悦感受的图标以称得上很的图标。

如愉悦时有很好表意性,疑是个极棒图标了。话说回来,让困惑不解图标常情况下也是不能带愉悦感。

面看个例子,同样是QQ族:

高手说我的图标不止好看,还有这4个作用!

高手说我的图标不止好看,还有这4个作用!

高手说我的图标不止好看,还有这4个作用!

△ QQ

上三张图是QQ底部三个标签在选和未选状态下表现,可以说常可爱了。

注意消息icon和联系人icon,它们的眼睛,可是会的哟,跟着你的择而,很好玩。虽然态icon没有眼睛,但是图标的形态,是有倾向性的,当没有被中的时候,整个图标在形态上是倾向被中的图标的,这就很好玩了。

四. 品宣

宣,叫牌宣传。

互网发展这些年,市面上的产品真的多了,同质化也相当严重,做的好的产品无不想着增加家产品的曝光,增加用户对产品的忠诚度。品牌塑造,品牌调性,品牌宣传,品牌的价值越来越被各家企业所重。作为一款产品中出镜率相当高的图标,也成了品宣的一部。

这部分可以从以下两方面看:

  • 将图标和产品logo结,增加产品logo的曝光率。
  • 通过图标调性传达产品调性,用户智中塑造产品独的特点。

下面来个例:

高手说我的图标不止好看,还有这4个作用!

△ 饿了

高手说我的图标不止好看,还有这4个作用!

△ 火辣身

高手说我的图标不止好看,还有这4个作用!

△ 支付

高手说我的图标不止好看,还有这4个作用!

△ 淘

图中几款APP直接将产品的logo用了底部标签的图标。

高手说我的图标不止好看,还有这4个作用!

△ 饿了么

高手说我的图标不止好看,还有这4个作用!

△ 团外卖

高手说我的图标不止好看,还有这4个作用!

△ 团外卖

上图中,饿么点餐界面的购物篮子,美团外卖的加载样式和缺省页图标,将产品logo融到图标设计中,图标身的动效设计也很有意思,用户的每一次点餐或者加载是对品牌的宣传。

高手说我的图标不止好看,还有这4个作用!

△ 一个

高手说我的图标不止好看,还有这4个作用!

△ ENJOY

上图是我喜欢两款APP「个」和「ENJOY」,两款APPUI设计都很有格调,图标设计也很有意思,很符合品调性。

上是我对于图标设计的一些看法,希望对大有帮助。

欢迎关注作者的公众号:

高手说我的图标不止好看,还有这4个作用!

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

相关文章

@Daidai丶呆 :许久没发文(虽然距离上一篇文章不过 20 天时间),这阵子,我依旧把工作之余的所有时间都放回在了阅读上。18 ...
经验分享
@CDYdesign :每当提到设计方法论时,总难免会给人一种比较虚空偏理论,或者说比较难应用到设计实战中的感觉;但是这一次,经...
经验分享
让设计细节更高级的9个实用小技巧。 一、大小区分 通过调整文字和数字的大小关系,可以改变用户接收的信息,使得重点信息更加...
可读性
在《用户体验的要素》一本书中,Jesse James Garrett 将用户体验分为了五个层级,战略层,范围层,结构层,框架层,表现层。 ...
App设计
@Daidai丶呆 :随着互联网的发展,国内设计知识的沉淀是越来越深,许多设计师已经慢慢培养起新的设计理念,如「基于交互模式...
交互设计
58UXD:本文将结合一个真实案例,为大家讲述作者是如何通过自己总结出来的系统化的创意流程,产生具体的设计方案。 一提到设...
头脑风暴
很多人误解 UI设计师做的只是画图标和「填色」,也有一些刚入行 UI 的朋友,拿着原型图就开始做设计稿。其实 UI设计师也叫做...
App设计
Z Yuhan:如今人工智能领域相当火热,各行各业都在布局人工智能在各自领域的应用。对话式交互设计依附于语音识别,语音处理等...
对话式UI