UI专栏  撰稿: Jing(微信公众号:IQS开发者社区)

图标icon可能是过往整个界面设计中最容易被低估但又是最重要的元素之一。它们几乎无处不在,一个优秀的图标设计可以是独特的,同时为项目增砖添瓦。

现在就让我们一起回顾一下2019年图标设计中出现的新动向和新热点吧!

1. 图标外形直观化

当我们浏览任何一家程序应用商店时,应该经常能够看到一些我们常见的图标标识,比如代表邮件应用的信封图标、代表工作安全应用的门锁图标等。

这类图标通过直观的外形设计能为用户提供一个快速的可视信息,简洁明了的告诉用户应用程序的功能,帮助用户知道他们应该做什么,应该如何与设计交互。

所以设计师在尝试设计属于自己风格的图标时,也越来越注意透过对图标直观化的设计展示来简单快速的表达其特定含义。

2. 高饱和、高明度的色彩

高饱和、高明度色彩的运用已渗透在设计的各个方面,图标也不例外,明亮的色彩是吸引用户眼球的有效方式。

色彩的运用随着图标设计趋势也在发生着变化,从黑白线条图标到具备现实外观的全彩图标再到现在流行的扁平、渐变、色彩明艳的图标。从目前流行趋势来看,设计师更多偏向选取饱和度及明度都较高的黄色、蓝色、绿色或是紫色,有时一个图标甚至会结合其中几种色彩进行调和搭配。

3. 圆形图标

圆是最和谐的形状之一。说到图标设计,无论是比较偏写实的球体图标还是扁平化的圆形图标,在设计图标范围内都是相当受欢迎的。

圆形对图标设计的部分影响可能来源于谷歌或是苹果这样的行业代表,他们提出的一些指导原则和材料设计使这些圆形按钮非常适合在手机上进行点击,同理,由于图标可触摸和可点击的概率也非常高,所以这样的理念也逐渐影响并适用于图标设计。

不过在创建圆形图标时,需要考虑图标不同的运用场景及尺寸,保证图标设计的内容在小尺寸场景下也同样能被用户注意和理解。

4. 线性图标

线条风格的图标似乎是永不过时的潮流,其主要原因就在于这个图标样式可以运用在任何场景下。也正是因为它的通用性,目前许多流行的、可下载的图标设计里面依旧会包含线条样式的设计。

以上图这组线条风的图标为例,不仅能形象的表达出图标的含义,而且也不会受到场景尺寸的影响。

5. 简单元素的表达

和2019年的其他设计趋势一样,追求简约也是图标设计的一部分。将原来繁复写实的图标简化为用线或是面组成的图标,从而提高用户的观感度。

例如上图设计的食物图标,每个图标运用简单的块面形状将食物的整体形象表达出来,并在每个图标中设计出圆形留白区域融入到整体形象中。用户在浏览过程中不仅可以快速明了图标的含义而且这样的设计在用户看来也是非常巧妙的。

6. 渐变图标

目前渐变色的运用也已成为2019年主导图标设计的趋势之一。从简单的线条渐变(如上面的例子)到渐变背景上的全渐变着色图标都非常受到设计师的欢迎。这可能就是在图标中使用渐变的吸引力所在——渐变方法多种多样,不仅可以丰富图标色彩,还能增加图标的可观看性。

7. 单色图标

在一些小尺寸图标的设计中,设计师在色彩方面则多采取了与原来追求写实效果相反的取色方式,尽量使用简单基本的色彩来处理这些小元素图标。这样的取色方式可以让这些小元素避免由于承载过多的色彩而导致空间过满和细节丢失,同时也避免了给用户在浏览过程中的视觉压力。

8. 应用程序图标

图标越来越受欢迎的原因之一是我们已经在为几乎所有的东西设计图标。像从应用程序图标到应用程序风格的favicons或desktop图标,这种风格的图标实际上也是无处不在了。

应用程序风格的图标拥有自己独特的风格。具体包括:

△外形普遍为方形

△边角处理为圆角

△有色背景(通常是一种颜色)

△图标内通常设计简单明了的形状

△图标与背景色的对比度大

△通常省略文本

9. 粗线条图标样式

不仅是线条样式的图标很流行,粗线条的图标也越来越受到设计师及用户的喜爱。这类风格的图标通常可单独进行使用,颜色也多选择为黑白两色或与背景色对比度较大的色彩。

10. 扁平图标

尽管随着图标设计趋势的不断变化,但是扁平化的图标依然是主流的设计样式。

主要在于平面化的展现形式简洁明了,不会给用户造成负担,同时这种扁平化的外观可以很容易与其他风格相结合。例如上文我们提到的线性图标几乎都采用了扁平化的风格。

11. emoji图标

表情符号现在作为一种特有的网络语言,已经越来越被大众接受并使用。所以,现在很多图标设计也开始采用了这种表情风格的视觉交流方式。这些图标可以通过一个人物或者动物的头部形状,来提高用户在浏览过程中的辨识度以及趣味性。

例如,上图这些受《星球大战》启发的表情符号就是一个很好的例子,告诉你如何从图标设计中获得乐趣。

图标作为一个不可或缺的设计元素,从应用程序图标到网站标志,再到用于logo或贯穿整个设计项目的细节,其重要性不言而喻。通过回顾2019年的图标趋势不难发现那些基本的设计规则依然有效,具体总结如下:

△创建网格

△善用几何图形

△色彩搭配

△保持一致性

△预留最小尺寸

△避免过多装饰

相信通过将以上基本规则与潮流趋势结合起来,你也可以创造一个属于自己风格的图标。

注:原文地址https://designshack.net/,Jing编译,转载请注明来自IQS开发者社区。

2019年ICON设计趋势总回顾相关推荐

  1. 2019年网页设计趋势前瞻,先睹为快!

    追随最新的网页设计趋势,紧跟设计潮流是设计师们必做的功课之一.快速更迭的网页设计趋势和网页开发技术对2019年的网页设计趋势来说必将产生直接的影响. 回顾2018年的网页设计趋势,不难看出许多设计趋势 ...

  2. 2019年网页设计趋势前瞻,先睹为快

    追随最新的网页设计趋势,紧跟设计潮流是设计师们必做的功课之一.快速更迭的网页设计趋势和网页开发技术对2019年的网页设计趋势来说必将产生直接的影响. 回顾2018年的网页设计趋势,不难看出许多设计趋势 ...

  3. [译] 2019 年的 9 大设计趋势

    原文地址:The 9 big design trends of 2019 原文作者:Mark Wilson 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m- 译者: ...

  4. 回顾2017系列篇(二):移动端APP设计趋势

    2019独角兽企业重金招聘Python工程师标准>>> 移动端APP在2017年经历了诸多的变化, 人工智能.聊天式的界面.响应式设计.虚拟现实(VR)和增强现实(AR)让设计师不断 ...

  5. Behance 大神推荐2019 年所有设计领域的最新趋势!

    昨天国内设计界发生了一则重大新闻! 相信大家应该都听说了吧 Behance挂了··· 继续Pinteres之后 在一个设计师不用上班的周六 我的电脑默默打不开Behance了 也就是说大陆地区的ip地 ...

  6. [好文精选] Behance 2019 设计趋势

    ​​本文翻译自 Behance 的年度推荐好文 2019 Design Trends Guide, 作者 Milo 整理了 2018 下半年的 Behance 上的知名作品,包含了 UI.动效.插画. ...

  7. 2019年,这5个UI设计趋势正在流行!

    2019年,这5个UI设计趋势正在流行! 互联网更新迭代迅速,尤其是随着5G时代的到来,技术的变革给各行各业都带来了新的改变和挑战.作为和互联网息息相关的UI设计行业,在5G时代下也会出现一些新的改变 ...

  8. 2018年这些UI设计趋势正在流行,跟上必拿高薪!

    数字设计领域和时尚圈是一样的,总会有各种各样的趋势让人眼花缭乱.无论是用户界面的视觉元素,还是用户体验的细节,总有许多值得说道的新玩法和新方向.就目前来看,UI设计的大趋势是更加大胆新颖的视觉设计,通 ...

  9. 20个2013年最值得关注的网页设计趋势

    在过去的一年中,我们都看到了网页设计趋势在日益增长.或许有些朋友还记得我早些时候的一些文章关于网页设计,有兴趣的可以点击来查看,现在我们可以看到其中许多想法已经实现了,甚至有些采用了一些更高层次的新奇 ...

最新文章

  1. Error:Unable to resolve target android-19
  2. python编写数学公式大全_python - 用python编写数学公式 - 堆栈内存溢出
  3. Spring管理Bean的生命周期
  4. 一段从TXT导入excel的py脚本
  5. STL 之reverse,reverse_copy,rotate,rotate_copy
  6. #3771. Triple 生成函数 + FFT + 容斥
  7. 仿百度地图全景小球旋转
  8. Taro框架中开发H5使用微信分享
  9. 北京十大律师事务所(排名涉及刑事、拆迁婚姻)
  10. 【Faster R-CNN论文精度系列】原文精析
  11. C语言数据的表现形式及其运算
  12. layui生产管理系统_分享两款Java Spring框架的开源MES制造执行系统
  13. 关于a标签点击Focus状态下背景颜色区域不够的问题
  14. WiFi手机可以连接,电脑上也能连接,可以微信聊天,但是不能浏览器上网怎么解决?
  15. vs2013运行c语言出现:无法查找或打开 PDB 文件问题解决
  16. 回归(Regression )
  17. 天蝎座双鱼座 之 谈情说爱
  18. Android登陆界面设计demo
  19. CF1397E Monster Invaders(思维+dp)
  20. 看了狗屁不通文章生成器,我想起自己写过个人信息生成器

热门文章

  1. QT界面:tabWidget选项卡使用小结
  2. 北工大数字逻辑期末大作业
  3. 中国联通在宽带市场无力反击,衰退或将加剧
  4. 【转贴】红学争鸣及学术自由
  5. 什么是基线(Baseline)
  6. 记录解决grpc message exceeds maximum size 4194304 限制问题
  7. 亚马逊开店是不是很复杂?
  8. 艾普瑞T319定时器使用说明
  9. ehcache 冲突_解决Ehcache缓存警告问题
  10. 转载:512e 和 4kn的解读