湖南正致教育UI设计 图标设计千篇一律 设计师如何
今天和大家要说的是对icon图标设计的时候的一些思考方法。
icon的话题很大，我目前把话题设定在应用层面，讨论的是icon的实际应用层面
分两个部分来说，一个是app，另一个是web。
把关于icon的问题单独拿出来讨论，似乎很没有必要，在如今的大环境中，大多数人都在做着搬运工的工作，一张电影海报都尚能抄袭，何况一个小小的icon。
但我认为，在UI设计中，细节的部分恰恰占主要的位置，大到布局的呈现，小到一个微交互的思量，判断一个人在一个领域的专业程度，就看他有没有量化当中的细节，我们都知道这个字大了，那么是大多少？
我们都知道这里看着不舒服，那么有没有具体实际的解决方案？所以，我把icon拿出来讨论是很有必要的，因为我们是设计师，我们注重细节，我们的每个设计都需要有背后的逻辑支撑，这样才能站得住脚。
首先在app的应用层面。
在GUI中的icon如何显示原创性？
众所周知，在iconfont我们可以下载到很多类型的图标，甚至包括svg，ai的源文件，如此一来，有些人在做图的时候会直接下载源文件直接用，因为设置啊，消息啊，这类的图标大家已经形成了共识，不会有太大变化。那么，原创的意义在哪里？
在手机里显示的icon一般需要极简化，这也是为什么ui设计风格从拟物化到极简化的过程。，手机的显示屏有限，如果icon过于花哨，会影响用户的视觉视线，毕竟除了少数以美感为主app，大多数app还是以功能性为优先。
这里有一个问题，极简不等于毫无装饰的粗鄙化，除了统一线条粗细之外，我们还可以动一些小心思，让这个小东西变得更加精致，灵巧。
Icon原创的风格在哪里表现？
我举三个比较典型的例子。
色块叠加
首先这是要根据app的整理风格而定，比如虾米，它整体改版以后显得灵动轻巧，那么它理所当然的用线性icon来契合主题。线性图标也有它特别的地方，比如近drbbble上流行的用带透明度的色块叠加的风格就很有意思，用饱和度较高的色块去装点原本平板的线形icon。
微拟物化
而在ios11之后，有大批的app开始恢复部分拟物风格，为什么是部分呢，因为他们大多采用的不是传统拟物风，而是在扁平化的基础上做一些小阴影，小渐变，让应用简介而不单调，这种趋势越来越流行，我猜想是用户看腻了寡淡的扁平化，设计师也做腻了无趣的线形图标了吧。
渐变质感
渐变是一个神奇的手法，大多物体叠上渐变以后更加有层次感。想要渐变用的出神入化还得好好学习用色，我比较推荐在app中使用的不是那种看起来像的渐变，而是一个色系中的微渐变，这样的渐变会使icon看起来更加有质感，也具备层次感。
不过，风格这种东西不必纠结，就像时尚界的一句名言：时尚是一个轮回，我们要做的就是了解行业，跟紧趋势。
在web中的应用
上面我没有提到缺省页的设计，想放到web中一起来说。因为微博中icon的设计模式跟缺省页更加相似。
web也分三种类型，一种是后台设计，这种类型把视觉导引导的功能做好就可以；一种是功能类网站设计，这种类型icon跟app中差不多，以功能性为主，不需要夸张的装饰；后一种是类设计，这类以展示为主，就需要设计师具备较强的视觉设计能力了。
一般在banner中用的是插画，在下面介绍每个功能的时候，就需要用到装饰类型的icon。因为网页上的视觉范围很大，比app大很多，如果做的过于简单，就显得单调，画面不满，这时候就要发挥icon的装饰功能。
统一化
在web上的空间较大，把icon统一化很有比较，这里不是指线条粗细的统一，而是外形，用一个圆形或是方形统一起来，看起来更有秩序。
复杂化
在web上的设计，icon需要刻意的将它复杂化一些，用很多小icon来打造一个组合，更有表现力。
场景化
有些内容用场景化的表达方式更加有趣，可以把整个画面的故事性提高，用户阅读起来也绘声绘色。
湖南正致科技专注UI设计技术产学研，以创新的研发方式和完善的技术服务享誉业内。在线咨询Q Q：1558345601，电话：0731-85867638，长沙市岳麓区汽车西站西中心T2栋1503室
icon的话题很大，我目前把话题设定在应用层面，讨论的是icon的实际应用层面
分两个部分来说，一个是app，另一个是web。
把关于icon的问题单独拿出来讨论，似乎很没有必要，在如今的大环境中，大多数人都在做着搬运工的工作，一张电影海报都尚能抄袭，何况一个小小的icon。
但我认为，在UI设计中，细节的部分恰恰占主要的位置，大到布局的呈现，小到一个微交互的思量，判断一个人在一个领域的专业程度，就看他有没有量化当中的细节，我们都知道这个字大了，那么是大多少？
我们都知道这里看着不舒服，那么有没有具体实际的解决方案？所以，我把icon拿出来讨论是很有必要的，因为我们是设计师，我们注重细节，我们的每个设计都需要有背后的逻辑支撑，这样才能站得住脚。
首先在app的应用层面。
在GUI中的icon如何显示原创性？
众所周知，在iconfont我们可以下载到很多类型的图标，甚至包括svg，ai的源文件，如此一来，有些人在做图的时候会直接下载源文件直接用，因为设置啊，消息啊，这类的图标大家已经形成了共识，不会有太大变化。那么，原创的意义在哪里？
在手机里显示的icon一般需要极简化，这也是为什么ui设计风格从拟物化到极简化的过程。，手机的显示屏有限，如果icon过于花哨，会影响用户的视觉视线，毕竟除了少数以美感为主app，大多数app还是以功能性为优先。
这里有一个问题，极简不等于毫无装饰的粗鄙化，除了统一线条粗细之外，我们还可以动一些小心思，让这个小东西变得更加精致，灵巧。
Icon原创的风格在哪里表现？
我举三个比较典型的例子。
色块叠加
首先这是要根据app的整理风格而定，比如虾米，它整体改版以后显得灵动轻巧，那么它理所当然的用线性icon来契合主题。线性图标也有它特别的地方，比如近drbbble上流行的用带透明度的色块叠加的风格就很有意思，用饱和度较高的色块去装点原本平板的线形icon。
微拟物化
而在ios11之后，有大批的app开始恢复部分拟物风格，为什么是部分呢，因为他们大多采用的不是传统拟物风，而是在扁平化的基础上做一些小阴影，小渐变，让应用简介而不单调，这种趋势越来越流行，我猜想是用户看腻了寡淡的扁平化，设计师也做腻了无趣的线形图标了吧。
渐变质感
渐变是一个神奇的手法，大多物体叠上渐变以后更加有层次感。想要渐变用的出神入化还得好好学习用色，我比较推荐在app中使用的不是那种看起来像的渐变，而是一个色系中的微渐变，这样的渐变会使icon看起来更加有质感，也具备层次感。
不过，风格这种东西不必纠结，就像时尚界的一句名言：时尚是一个轮回，我们要做的就是了解行业，跟紧趋势。
在web中的应用
上面我没有提到缺省页的设计，想放到web中一起来说。因为微博中icon的设计模式跟缺省页更加相似。
web也分三种类型，一种是后台设计，这种类型把视觉导引导的功能做好就可以；一种是功能类网站设计，这种类型icon跟app中差不多，以功能性为主，不需要夸张的装饰；后一种是类设计，这类以展示为主，就需要设计师具备较强的视觉设计能力了。
一般在banner中用的是插画，在下面介绍每个功能的时候，就需要用到装饰类型的icon。因为网页上的视觉范围很大，比app大很多，如果做的过于简单，就显得单调，画面不满，这时候就要发挥icon的装饰功能。
统一化
在web上的空间较大，把icon统一化很有比较，这里不是指线条粗细的统一，而是外形，用一个圆形或是方形统一起来，看起来更有秩序。
复杂化
在web上的设计，icon需要刻意的将它复杂化一些，用很多小icon来打造一个组合，更有表现力。
场景化
有些内容用场景化的表达方式更加有趣，可以把整个画面的故事性提高，用户阅读起来也绘声绘色。
湖南正致科技专注UI设计技术产学研，以创新的研发方式和完善的技术服务享誉业内。在线咨询Q Q：1558345601，电话：0731-85867638，长沙市岳麓区汽车西站西中心T2栋1503室
