Icon设计的一些看法!

今天和大家要说的就是对icon设计的时候个人的一下看法思考。

icon的话题很大,我目前把话题设定在应用层面,讨论的是icon的实际应用层面,分两个部分来说,一个是app,另一个是web。

把关于icon的问题单独拿出来讨论,似乎很没有必要,在如今的大环境中,大多数人都在做着搬运工的工作,一张电影海报都尚能抄袭,何况一个小小的icon。

但我认为,在UI设计中,细节的部分恰恰占主要的位置,大到布局的呈现,小到一个微交互的思量,判断一个人在一个领域的专业程度,就看他有没有量化当中的细节,我们都知道这个字大了,那么是大多少?我们都知道这里看着不舒服,那么有没有具体实际的解决方案?所以,我把icon拿出来讨论是很有必要的,因为我们是设计师,我们注重细节,我们的每个设计都需要有背后的逻辑支撑,这样才能站得住脚。

首先在app的应用层面。

在GUI中的icon如何显示原创性?

众所周知,在iconfont我们可以下载到很多类型的图标,甚至包括svg,ai的源文件,如此一来,有些人在做图的时候会直接下载源文件直接用,因为设置啊,消息啊,这类的图标大家已经形成了共识,不会有太大变化。那么,原创的意义在哪里?

在手机里显示的icon一般需要极简化,这也是为什么ui设计风格从拟物化到极简化的过程。第一,手机的显示屏有限,如果icon过于花哨,会影响用户的视觉视线,毕竟除了少数以美感为主app,大多数app还是以功能性为优先。

这里有一个问题,极简不等于毫无装饰的粗鄙化,除了统一线条粗细之外,我们还可以动一些小心思,让这个小东西变得更加精致,灵巧。

我举三个比较典型的例子。

色块叠加

首先这是要根据app的整理风格而定,比如虾米,它整体改版以后显得灵动轻巧,那么它理所当然的用线性icon来契合主题。线性图标也有它特别的地方,比如最近drbbble上流行的用带透明度的色块叠加的风格就很有意思,用饱和度较高的色块去装点原本平板的线形icon。

Icon设计的一些看法!

微拟物化

而在ios11之后,有大批的app开始恢复部分拟物风格,为什么是部分呢,因为他们大多采用的不是传统拟物风,而是在扁平化的基础上做一些小阴影,小渐变,让应用简介而不单调,这种趋势越来越流行,我猜想是用户看腻了寡淡的扁平化,设计师也做腻了无趣的线形图标了吧。

渐变质感

渐变是一个神奇的手法,大多物体叠上渐变以后更加有层次感。想要渐变用的出神入化还得好好学习用色,我比较推荐在app中使用的不是那种看起来像特效的渐变,而是一个色系中的微渐变,这样的渐变会使icon看起来更加有质感,也具备层次感。

不过,风格这种东西不必纠结,就像时尚界的一句名言:时尚是一个轮回,我们要做的就是了解行业,跟紧趋势。

Icon设计的一些看法!

在web中的应用

上面我没有提到缺省页的设计,想放到web中一起来说。因为微博中icon的设计模式跟缺省页更加相似。web也分三种类型,一种是后台设计,这种类型把视觉导引导的功能做好就可以;一种是功能类网站设计,这种类型icon跟app中差不多,以功能性为主,不需要夸张的装饰;最后一种是官网类设计,这类官网以展示为主,就需要设计师具备较强的视觉设计能力了。

一般在banner中用的是插画,在下面介绍每个功能的时候,就需要用到装饰类型的icon。因为网页上的视觉范围很大,比app大很多,如果做的过于简单,就显得单调,画面不满,这时候就要发挥icon的装饰功能。

统一化

在web上的空间较大,把icon统一化很有比较,这里不是指线条粗细的统一,而是外形,用一个圆形或是方形统一起来,看起来更有秩序。

Icon设计的一些看法!

复杂化

在web上的设计,icon需要刻意的将它复杂化一些,用很多小icon来打造一个组合,更有表现力。

Icon设计的一些看法!

场景化

有些内容用场景化的表达方式更加有趣,可以把整个画面的故事性提高,用户阅读起来也绘声绘色。

Icon设计的一些看法!

喜欢更多设计教程资讯可以关注我!

也可以在下方留言,我会回复的!

文章转自网络,仅供学习交流。


分享到:


相關文章: