恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
关于icon设计,我的一些思考
0.0°
2018-08-30 原创文章 经验/观点 举报 3784 18 21 3

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

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


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




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


首先在app的应用层面。


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


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


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


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


Icon原创的风格在哪里表现?


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


色块叠加

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

Image title微拟物化


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

右下角的这种风格



渐变质感

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

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

Image title



在web中的应用


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


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


统一化

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

Image title


复杂化

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

Image title


场景化

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

Image title


这篇文章是我对icon设计的一些零碎的思考,分享给大家。


更新:2018-08-30

收藏

18人已收藏

九小乐

UI设计师,设计是一种解决问题的方法

  • 9

    作品

  • 16

    粉丝

  • 2

    关注

  • 设计主风格如何确定
  • B端产品改版的思路
  • 从宏观的角度讨论Photoshop
  • 艺术的欣赏之道
相关标签
ui经验分享

    猜你喜欢

      2018-08-30 原创文章 经验/观点 举报 3784 18 21 3

      关于icon设计,我的一些思考

      0.0°

      你确定要举报关于icon设计,我的一些思考

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年08月30日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      21
      18
      3

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录