免费试听课程
干货等你来拿
姓名: 联系电话: 试听课程:
新闻动态
联系我们
信息详细您现在的位置:首页>>新闻动态>>信息详细
优秀的图标设计法则
上传时间:2016/11/15 18:59:55  浏览次数:872次

图标设计是整个视觉设计中一个最重要的视觉元素。一个图标的细节,样式和功能是由很多东西决定的。

总而言之,图标设计的指导原则涉及到以下五个部分:

  1. 理解问题所在

  2. 采用全局方法

  3. 越简单越美好

  4. 考虑环境因素

  5. 理解符号元素

理解问题所在

通常情况下,你的客户需要你为他定制出独一无二的图标。比如说,他需要我给一个文档设计一个“Error”的图标。

起初,他建议说在一个页面图标里放一个X来表示文档类型不支持,或者表示文章没有被下载成功。他脑海中的图标是这个样子的:


还不坏是吧?为了简单,我除去了一些元素,改成了:

但是,我也承认它还需要改进,因为它还不像是一个专门为文档加载错误设计的一个图标。

采用全局方法

我们需要整体考虑图标的设置,所以我们拿了几个其他的图标例子作为灵感。

“这个警告图标怎么样?”

我们思考着,因为它实际上已经在被大量使用了,人们可以轻易明白它的含义。

当我们想设计一个图标的时候,一定要考虑到同种类型的其他图标是如何设计的。否则,你很有可能使用的图形的寓意在其他图标上已经被大量使用了,表达的还是另一个意思,那么你的设计就会产生歧义。

越简单越美好

之后,我们想到在一个文档图标中画一个大三角形,像是这样:

但是,经验告诉我,它太复杂了。它的寓意不那么直接,人们也不能一眼看上去就明白是什么意思。

考虑环境因素

之后,我提出建议我们应该用一个大x包含在一个圆内的图标,像是这样:

但是这还是不可取的,因为这个图标传达的信息是危险。这个图标表达的含义太过了。

颜色和视觉量级是传递图像的一个重要的方式。比如,红色常常用语警告,而浅色比如灰色显得更加中性。如果你用中性色来表示,那么可以恰如其分的表达出图标含义。



再比如这个更直接一些:


下面这个例子来源于Chrome浏览器,完美的表达出了我需要的那个图标。轻微,准确,告诉用户某个地方出了错。这个图标除了白色线条的部分都是灰色,可以让用户明白问题的严重,但是又不至于过分到让人民产生惊恐的感觉。

最后一个图标表达的信息很简单,但是却传递了最准确的信息。

图标使用需要一点点好眼力,也要一点点设计的经验。如果你的图标寓意太模糊,或者使用千篇一律的视觉提示,那么不妨再好好思考上述说到的五点。

版权所有:石家庄盛初邦元商务信息咨询有限责任公司
邮箱:hbbeneter@sina.com 网址:http//:www.qingmeijy.com 网站备案编号:冀ICP备16001955号-3
石家庄清美教育(冀美校区) 咨询电话: 400-871-3966 0311-85522233
地址:河北省石家庄市建设北大街230号东海国际
清美简介    丨    新闻动态    丨    学员就业    丨    强大师资    丨    学员作品