【UI图标】轻松设计系统图标小技巧

许多知名大品牌支付宝,谷歌,京东,网易云等等他们都有一套属于自己特有风格的系统图标。一般都是根据产品定位,同时集合当下主流的趋势去做图标风格定义,最终得出图标使用线的还是面的、还是卡通、色彩重叠或者还是弥撒渐变的?

图标风格定义三大原则:

A.符合产品调性

B.极致简约

C.符合流行趋势

今天我们通过实际案例讲解如何设计具有独特气质的系统图标风格。我们在同一套图标的基础上通过变换不同的设计手法来变化图标风格,真真的都是图标设计干货啊,废话不多说下边直接开始吧。

第一步:打开ps软件

第二步 图标网格

新建一个800*800px的画布,按快捷键 Ctrl+” 键调出刚才设定的辅助线。现在每个方格是44*44px。

第三步:

设计我们自己的网格图标,并且注意每个部分之间的角度。一般都是15°,30°,45°,90°等依次类推,这样子可以使整个一套图标规范又好看。

其实,它俗称“美学统一”

图标最关键的在于视觉符号一致性,线条粗细一致,内外倒角一致,图标倾斜角度方向遵循一定的设计规则,使用几何造型并贴紧网格设计,保证在最小尺寸都清晰可见。

第四步:注意细节,我们首先设计一组“风格设计1 ”

首先我们先运用布尔运算做一个套方正的图标,线条为4px,图标边角都采用直角的设计方式,给人方正硬朗的感觉。我们把这个图标风格作为基础造型下边我们将在这个图标风格上进行不断地变化打造出各种不一样的设计风格。

第四步:接下来我们在第一组的基础上,调整设计出第二组“风格设计2”

我们在风格1的基础上优化尖角为圆角图标。圆角大小设计定为4px,瞬间图标的感觉就变得圆亲切了很多。这种风格也就是市面上最常用到的系统图标设计风格。

第五步:于是乎,铛铛~~~我们设计第三组“风格设计3”又诞生了。

在风格散的基础上我们加粗线条为3px的视觉风格,由于线条粗细的调整整套图标的感觉已经比较粗壮有力,给人非常可靠稳定的感觉。

第六步:于是我们继续在第三组的基础上继续添加元素~我们设计第三组“风格设计4”又诞生了。

当然我们也可以尝试在图标内部填充色块,并且给它一定的内部错位的设计营造高光的感觉。这种形式用于点击选中的效果非常好,闲鱼APP的菜单图标选中效果就采用了这样的设计风格。

图标演变过程是一个设计思考过程,我们可以通过不断的尝试,寻找一些创意点,今天我们选择一组图标进行实例演变,还有很多图标风格没有说到,我们也可以再去尝试挖掘更有创意的icon设计风格。以上就是今天讲解的内容,希望能对大家有所帮助。

制作实例教程非常的占用时间和精力,希望大家多多的点赞和评论互动,你们的热情就是我最大的动力。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 野丹丹(译)于叽叽(编辑) 经过我长期的软磨硬泡,终于跟美女视觉设计师野丹丹同学约到了一篇优质翻译稿。原文由全球著...
    于叽叽阅读 1,504评论 6 40
  • 类似Iconfinder的图标和矢量图形市场,为网页和印刷设计者提供了丰富的实惠可用的矢量图标资源。 我们会对每一...
    Kemr阅读 2,743评论 1 30
  • 图标是UI设计师必会技能之一,而一个好的icon是怎么设计出来的呢? 今天我们来给大家一个图标设计的全面知识汇总:...
    简单如12阅读 2,521评论 0 13
  • 这篇文章讨论了图标设计准则的6个步骤。这6个步骤遵循了图标设计的基础,包括一致性、易识别和清晰。高效图标设计的原则...
    Nicebook阅读 2,270评论 0 3
  • 冷色系给人以静心,沉稳,稳重及品质感的感觉,结合明亮的色系选择, 让用户可以感受到稳重有轻快,愉悦舒适,积极客观的...
    表情会阅读 926评论 0 2