最新消息:文章中包含代码时,请遵守代码高亮规范!

在设计中制定统一的icon元素规范[原创]

UI设计 余, 浩冉 78浏览 0评论

在WEB和APP设计时,如果说两者都有且意义相似的一个元素,那肯定就是icon了。

icon是什么?icon,中文翻译为图标。是对象的图像表示,指用图形指代某些名词,是上世纪九十年代伴随IT 产业出现的一个技术词汇,原指计算机软件编程中为使人机界面更加易于操作和人性化而设计出的标识特定功能的图形标志;它与logo的区别是icon是功能识别图标,logo是身份识别图标。

在日常生活中,我们每天都在与icon打交道,例如:

电子设备图形界面

计算机中的桌面图标,手机界面中的应用启动图标,导航栏和工具栏图标,标签栏图标等 

产品表面

电脑开机键上的图标,USB接口图标,耳机插口图标,易碎物品包装上的易碎标识图标,向上图标等。

日常生活

公路上的交通指示图标,公共厕所的性别区分图标,商场、机场、火车站等公共环境中的电梯、安全出口图标等

然而在UI设计中,小小icon虽然看着简单,其实也是有着自己的规范,如果不遵守规范,那么绘制出的icon一定是不协调,不具有美感和准确的含义的。
如上图,就是一套比较完整的icon绘制图标,每个icon的含义明确,颜色统一,形状统一,应用在项目中时,可以完美的与项目协调存在。
对于icon的定义,不是要显眼,夺目,很炫,而是要准确的表达出要表达的含义,并且一组icon的要有统一性。所以icon在app中应该是很安静的存在,不应该喧宾夺主,有时候即使消失了,也不会让人发现。
也因此,icon在整体页面中通常都不太突出,所以这也限制了icon的表现手法,主流的绘制方法,一般有下三种:
同时由于icon在页面中经常成组出现,,彼此间的统一性也就显得尤为重要,什么是统一性?就是icon的表现形式,视觉大小,描边粗细,颜色是否都在一个中心上,如果不注意icon的统一性。那么绘制出的icon有可能就千姿百态:

所以我们在日常工作中,绘制icon,一定要注意整体的统一性,和项目本身的协调性,以达到icon的绘制符合整体规范

转载时请注明出处及相应链接,本文永久地址:https://blog.yayuanzi.com/24800.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者Leo的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!