美文网首页UI设计
如何创建统一风格的图标集

如何创建统一风格的图标集

作者: Judicy | 来源:发表于2016-10-02 19:49 被阅读1182次

    本文为自译文章,原文地址

    设计一个漂亮的图标很容易,但是想要设计一个图标集并不是那么容易。要让这些图标看起来是统一并且是精美的。

    为什么要让图标看起来统一呢?

    图标就像是反映真实物体的图形符号,当它们组合成图标集的时候,每个图标是具有其自己独特的含义。用图标跟互联网上的人沟通就好像用语言跟真实世界的伙伴沟通一样。

    在一个图标集中使用不同的风格就好像在一个句子中用了好多种语言---就算人们理解了这句话的意思,也不会太在意这句话。图标统一风格将发挥很大的作用。

    创建统一风格的图标集是个很大的挑战,下面是根据我的经验给出的6条建议:

    1. 坚持一个风格

    听起来很简单,对不对?但这是让图标精美和一致的最重要的一点。在还没有决定用哪种风格的时候,不要开始设计图标。

    图标很多款式和风格变化,最常见的有:线性图标填充图标扁平图标拟物图标手绘涂鸦图标等。

    一旦确定了图标的风格,在这个图标集里的图标都要是这种风格的。一个不同风格的图标会看起来很显眼吸引人,但这并不是一种好的方式,破坏了统一性和美感,以及整个图标集的价值。

    看看下面这个例子,地图图标很显眼,设计师在给图标上色的时候犯了一个错误,其他图标都是线性的,而地图图标是被填充的。


    enter image description hereenter image description here

    主要的问题是到底要选择哪一种风格?这里有很多因素要考虑进去。这是个很大的问题,在我的下一篇文章中会阐释。

    2. 保持同样的细节

    这跟上面提到的坚持同一个风格是不一样的。

    每一种风格的图标也有它自身的特点。比如说,我们可以画出各种各样的线性图标。所以保持同样的细节也很重要。图标要展示更多细节还是极简风格?描边要粗一些还是细一些?或者混合粗细描边?那么对于圆角呢:圆角还是尖角?圆角的尺寸有多大?拐角连接的地方要圆形还是直接连?

    给图标打造细节的时候要考虑清楚,制作图标集的从始至终都要坚持同样的细节。

    3.合适的尺寸

    同一个图标集中的图标是保持同样的尺寸。

    图标不只要在同样尺寸的辅助线框里,而是应该看起来大小相等。想象同样尺寸的两个图形--圆和正方形,正方形会看起来更大一些,因为它包含了更大的面积。为了让它们看起来一样大,应该做一些改变,比如说,适当的缩小正方形。

    4.使用网格

    精美的图标集往往都是在设计的时候使用网格。只是不要过度使用网格,如果图标并没有那么精准的贴合网格,就不要再纠结了。好的图标集使用网格,但是太严格的去遵守反而会越弄越糟。

    5.使用同样的元素

    这个很简单:如果在上一个图标中使用了16px的圆形,那么在另外一个图标中,直接拷贝过来使用。毫无疑问,在同一个图标集中使用同样的元素会让它看起来更统一,拷贝元素会节省大量的时间。

    6.使用同样的配色

    虽然这个没必要说,但我还是要说一下,应该使用同样的配色。选择颜色,加入到色卡中,然后尽量只是用色卡中的几个颜色。

    最后,在统一图标的时候也要保证识别性

    图标应该传递出正确的含义,图标的可识别性会让它看起来更加精美和实用。

    制作统一的图标集比看起来难的多。注意最小的细节,一遍又一遍的检查调整。记住这些建议,赶快在实际设计中试试吧。

    相关文章

      网友评论

        本文标题:如何创建统一风格的图标集

        本文链接:https://www.haomeiwen.com/subject/sjmdyttx.html