产品设计

    今日:16| 主题:16757
收藏本版 (1)
软件产品、PC、移动、网站、平台的开发、策划等内容。

[交互设计] 图标设计的三个小原则,你的UI设计师都知道么? ...

[复制链接]
夏青 发表于 2016-10-19 08:51:43
139 3

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
“随着扁平风格的出现……” 这些虚的我就不说了。在自己开始做图标练习之前,我对图标的概念仅仅是好看、简单,只要稍微练几下就可以学会了,而开始接触之后才知道,原来图标设计这么有讲究。
在练习的过程中,我看了很多国外设计师写的关于图标设计的一些文章,从基本的视觉元素到人的系统感知,也终于理解为什么如今的界面设计中,图标会占据如此大比例的原因了。
有人说:“人们对于抽象概念或艺术性强的图像的理解能力并不差。” 每个人的视觉感知能力都能轻易的理解一些图像所包含的意义,因此成熟的视觉感知是更有效的信息传递途径。
所以我总结了以下三个原则来谈谈图标设计需要注意的事项:

  • 可识别性
  • 视觉统一
  • 差异性
可识别性最新的 IOS 设计原则被人们概括为:大、黑、简。我也去看了些相关数据,在视觉的设计中,最受欢迎的颜色也确实是黑色,其次是白色。所以沿用到图标设计中,黑白图标也是在界面中最广泛被使用的。(除了那些概念设计)
为了让图标提升界面中信息的被理解性,很多设计师也会用黑白色去设计图标,原因有两个:

  • 一个是颜色会干扰用户的理解力;
  • 界面中颜色多了,会消耗用户寻找图标的时间;
因此颜色是识别性中需要注意的一点,为了提高用户的可识别性,我们的设计更应该遵循用户习惯。有一部分设计师的想象力非常丰富,这是设计师的一大优势,但是切忌将图标设计的过于个性,让用户难以理解。

图标设计的三个小原则,你的UI设计师都知道么?                                     ...-1 (图标设计,设计原则,界面设计,设计师,理解力)

Instagram 的设计就是就是比较典型的新风格界面,图标易于理解,且用黑色作为基调,识别性高,用户也易于理解,这也是为什么这些图标没有文字做解释的一个原因。
不过我个人建议在图标的设计中加入一点点自己的创意更能增加产品的趣味性,所以不要太压抑自己的天性。上面的说明是为了让大家在设计图标时要注意的一些细节。当然,如果是一些个性化图标,颜色也要突出。比如某些图标的颜色尽可能保持实体物质的相近色,这样也不会让用户在理解上有偏差。
在设计完这些图标后,设计师要做两个测试:一个是无背景测试,另一个是基于背景的图标测试。第一个意思是,把图标单独放在一个画布上,看看同事能不能知道这个图标的意思。另一个是将图标放在界面中,看同事(项目外的同事)是否能理解图标的含义。
视觉统一不同类型的图标有不同的特征,稍微一点变化,都会破坏整套图标的统一性。包括复杂度、形状、线条粗细等等。
我在临摹整套图标的过程中,很明显能看出原作者对于图标的把控性有多强,每处细节都调整的非常到位,以至于我在制作的过程中遇到不少麻烦。不过解决之后,自己在创意图标的时候就发现轻松不少。比如:

  • 整体风格的统一
  • 图标的大小控制
因为在设计的过程中发现这两个问题比较多,所以在这里单独拿出来说。
整体风格的统一:我这次设计是一套杯子的图标,为了统一风格我将所有线条的粗细都设置为 2 px,然后做了偏 MBE 风格的设计。为了能让所有杯子统一,我在杯子里加入了酒,所以整套图标也就成了装酒的各种瓶子和杯子。而点小气泡就是为了增加了一种趣味性且更统一。


图标设计的三个小原则,你的UI设计师都知道么?                                     ...-2 (图标设计,设计原则,界面设计,设计师,理解力)

图标大小的控制:前期在设计的过程中,我发现我的图标大小有波动,非常不统一,甚至是一个大一个小,所以我加了个限制,一来可以约束图标的尺寸尽量统一,二来可以显得更加规范。

12下一页
友荐云推荐




上一篇:写在开始奔四的这一年
下一篇:用好这4个设计建议,让你的轮播图点击率更高! ...
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

柔安 发表于 2016-10-19 23:52:07
楼下的接上
回复 支持 反对

使用道具 举报

花落落 发表于 2016-10-22 10:48:56
是爷们的娘们的都帮顶!大力支持
回复 支持 反对

使用道具 举报

旅行路 发表于 2016-10-30 05:32:33
路过。。。。
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2017 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表