长沙

点击搜索

发布

湖南正致教育UI设计 图标设计千篇一律 设计师如何

区域:
长沙 > 岳麓 > 汽车西站
类别:
其他培训
地址:
地铁2号线望城坡站1b出口附近
今天和大家要说的是对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室
查看更多长沙职业培训信息

免责声明:此信息系发布者(UID:536003)自行发布,本站是服务平台,仅提供信息存储空间服务,该信息内容的真实性及合法性由该发布者完全负责。

© lieju.com 联系我们