美文网首页图标
关于线性Icon的经验总结

关于线性Icon的经验总结

作者: Charles_UI | 来源:发表于2017-01-10 21:17 被阅读379次

到目前为止,设计Icon大约有一年半了,另外我不喜欢分享那些比较抽象的规章制度,只想和大家分享一下自己一点儿学习思路和经验。当初开始设计一些线性icon的时候,主要是吸取别人的经验来获得一些灵感,例如:Justas Galaburda、Matt Yow、 Rocky Roark、 Adam Whitcroft 和 Ryan Putnam等这些人,他们给我留下来非常宝贵的经验。

当时还在一个与燃气锅炉相关的公司担任平面设计师以及插画师,在那里我极力的发挥自己的聪明才智,有一次我需要设计一个小的宣传册子,在页面中我希望能很明显的显示与画报相关的想法,下面是我的一些尝试:

刚开始时,我的想法只是像其他的设计师都会这样做的时候:少即是多,有些有丰富的细节,但是这还是不够,线条太多,另外在平面印刷中似乎没有多大的关系,觉得还有很多有待完善的空间。

第二次尝试是来到现在的老板 Roy & Co所在的公司,有人询问我能否创造一些独特的、大胆新颖与品牌相关的icon,我其实在以前就考虑过这么做:少即是多,干净简洁。这是我当时的一个设计理念。

创建的这一套icon,整体风格是非常美观以及蛮有趣的,它们彼此之间都有特点,有保持整体上风格一致性。相对于如今千篇一律的icon,我相信之前比较少有人这样做。

在那之后有人问我在网站的有些地方能够根据不同的环境需要有几个不同尺寸的icon,另外它们依然保持干净的、简洁明快的、有时尚感。于是我设定了一个“30px测试”的模式。

这个模式是比较简单的,就是将icon放置在(30X30)px的边框之内,以确保这些icon在缩放到比较小的情况下,依然被有效的使用。然后就设计了很多icon(有门票、开关、dj等),并将已经画好的icon放到这个长宽30px的矩形中,就这一点帮助了我很多,相信很多的设计师都在这么做吧!

对于与品牌相关的icon,就是创建一套类似的主题icon,在 Roy & Co的要求下为公司创建了这4个icon,主要用在大型的媒体宣传和平面上以及网站上,我也将自己所有能用到的知识技能用到了这个项目上,我自己在这个阶段的总结就是:少即是多、保持一致性、简洁、明快、有时尚感、坚持一两个视觉焦点。

后来发现依然还有很大的改善空间,它们需要更多的细节,但是又不要太多,又希望强调和复杂的作用。希望能使得公司的形象有所提升,但又不会显得那么的“强势”。我决定要打破之前的规则,因为必须添加更多的细节。于是,经过深思熟虑和设计思考,这里是最后设计的版本。

最后要强调的是,在PS中设计好一个icon之后,千万不要栅格化,一定要保存为矢量的或者是智能对象。这将会保持icon在不同的应用场景中的清晰和可识别性。

经历了这些阶段的学习,我已经学会了一个线性icon需要具备的基本要求:干净、简洁,不要想的太复杂,学会根据场景灵活应变,不断的思考它们的改善空间,这个思路很关键。

目前阶段自己也还没有形成自己的风格,只能在独自摸索中前进,但是最基本的就是不断提高自己在软件上的技能。

在三月份我做了一套专门为较小场景中用到的icon,在最大范围内保持着简洁,以及看起来非常人性化并易于理解的。这里是网址:http://sliceui.com/minimalistic-icons

另外在六月份的一家澳大利亚的服务器商需要设计一些icon,对于新鲜的场景新的icon这又将会是一些挑战,努力的探索不同的设计影响。

作者:Matt Cooper

https://medium.com/@MatthewCooperUK/line-icon-design-what-ive-learnt-so-far-2a2b06733338#.d3jry1lmk

相关文章

  • 关于线性Icon的经验总结

    到目前为止,设计Icon大约有一年半了,另外我不喜欢分享那些比较抽象的规章制度,只想和大家分享一下自己一点儿学习思...

  • 晚自习

    1、运用sketch画了四个线性icon,练习布尔运算。 2、研究了一套ui kit关于fashion的 3、深入...

  • D1 单色线性icon

    图标分析 元素使用:大部分图标为单元素;而添加和删除的图标之间单一元素无法区分则使用了双元素,但容易造成表达拖沓,...

  • 【Icon】线性图标避坑指南

    工作中我们会接触很多图标的绘制,时下流行的不外乎也就是:线性图标、面性图标和线面结合图标; 初学者可能接触的最多也...

  • 关于Icon、launchImage

    Icon-Small@2x.png 58 58Icon-Small@3x.png 8787Icon-40@2x...

  • UI提供的icon文件如何引用到项目

    关于UI提供的icon文件如何引用到vue+elementui项目中 一、找到UI提供的icon文件  找到包含下...

  • D3 双色线性icon

    图标分析 元素使用:单元素。 图标风格:粗线描边,线条比一般图标粗1~2px。 线的形式:连线 倒角设计:一致性轻...

  • D6 线性+单色填充icon

    图标分析 元素使用:单元素与双元素(时钟、问题和帮助)。 图标风格:描边+单色填充+部分浅色高光(图二) 描边形式...

  • D4 渐变线性icon

    图标分析 元素使用:单元素。 图标风格:粗线渐变描边。 线的形式:断点+连线 倒角设计:大圆角,图标圆润偏卡通。 ...

  • 线性回归

    线性回归是机器学习中最基础最简单的回归算法了,现在关于线性回归的原理做一个总结。 关于线性的概念,其实在高中就有了...

网友评论

    本文标题:关于线性Icon的经验总结

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