联系我们 face+ 关于 服务 案例
首页 案例 服务 关于 face+

图标ui设计注意事项大揭秘,让你避免设计踩雷

Time: 2020-01-20


图标的ui设计是非常具有专业性和技巧性的,所以,很多人在刚接触图标的ui设计时会不知道应该如何下手设计,下面我们跟随小编一起来了解一下图标ui设计的相关资料吧。


图标ui设计之循序渐进地设计图标

  ui设计流程是最重要的事情,所有的设计工作在绘制流程在图标绘制之前,就已经开始了。

  1、了解你要创建的图标的含义。明白不同图标的使用场景,不同的图标分别代表着什么,了解哪些图标需要使用隐喻,哪些图标使用现实世界中真实的形象。

  2、梳理出图标正确的隐喻,脑暴出可能的符号和形象。记住图标的含义和形象之间的关联,以最佳的形式呈现图标,直指本质。借助词典和单词集来获取图标相关的概念的关键词,同义词和定义。简化和抽象你的想法,你会找到一个抽象概念「翻译」出来的对象。

  3、不要拘泥于现在当前的任务和状态,尽量进行彻底的调研,尽可能地搜集相关参考资料。可能有人已经为这一主题设计了很不错的图标版本,可以参考已有的设计,获取灵感。

  4、确定图标的样式。图标应该是扁平的,线性的,Material Design,是用符号还是借助手绘来呈现。有的 UI界面有很清晰的要求,比如 iOS 平台和 Material Design,如果 UI 有非常清晰固定的设计风格,那么图标的设计需要尽量贴近。

  5、按照选定的方式来呈现设计,看看它最终呈现是否正确。保持整体设计的一致性。

  6、注意图标要矢量化,连基本的草图都应该是矢量化的。

  7、在 UI 布局中测试图标的设计。

1-1.png

(图片来自网络)


  图标ui设计之注意事项

  其中最重要的是下面的注意事项清单,它们能够确保我们不同的人在不同的时期不同状态下,设计出来的图标能够协调到一个主题、一个系统当中。如果你也要设计图标的话,可以将下面的清单打印出来,贴在自己的桌子旁边作为参考。

  1、 像素完美。让图标踩在每个像素点上,确保清晰不模糊。

  2、 视觉重量。用斜视的方法来感知图标,看看成套的图标是否都具有相同的大小。斜视、调整、再看、再调整,直至均匀理想。为了保持总体视觉重量的一致性,我们会使用「完美的圆形和正方形」来和所有的新图标进行对比。

  3、 几何图形。尽量使用简单坚实的几何形状来绘制所有必要的线条,它们会让你的图标显得更加牢固可靠,具有吸引力和说服力。

  4、 清晰简洁。删除所有无法传达图标概念的细节,避免让图标显得沉重而复杂。

  5、 足够的空间。确保图标内每个细节和元素都有足够的空间,不会显得过于拥挤或者空旷。

  6、 对比度。在黑色和白色的背景上检查图标的全部细节,看看是否其中的每种颜色都是可见的,以及元素之间的对比是否足够。

  7、 视觉统一。检查线条的粗细重量,边角的大小,配色方案,细节层次和设计元素在整个合集中是否是不变且一致的。

  8、 图层排序。确保图标中图层顺序清晰而规整。这是一种良好的习惯和专业的精神。


1.jpg

(图片来自网络)


  对于所有ui设计来说图标ui设计都是非常重要的,因为好的图标设计可以让客户更直观的了解按钮所蕴含的含义,以便用户更高效的操作。


合作咨询

上海(总部)

上海市浦东新区郭守敬路498号22号楼
021-61057328
service@faceui.com

办公地址地图

北京

北京市东城区后永康17号A座
010-64015620
service@faceui.com

办公地址地图

成都

四川省成都市锦江区东大街牛王庙段100号
028-62790929
service@faceui.com

办公地址地图
首页 | 案例 | 服务 | 关于 | face+ | 智见

Copyright © 2009-2022 FaceUI design. All rights reserved


沪ICP备13044459号-5

上海办公地点地图
北京办公地点地图
深圳办公地点地图
在微信中搜索faceui
或保存二维码在微信中打开