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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
让我们聊一聊icon的那些事儿
0.0°
2021-02-19 原创文章 经验/观点 举报 2644 9 12 0

icon虽小,但是小小的icon里可是有大大的学问。如何用icon,如何巧用icon、如何用icon提升品牌形象这些都是学问,接下来我带领着大家一起探索icon的奥秘!

一、icon的种类

线性icon


线性icon可以让界面干净、简洁、冷静、高效、精致。能更好的和界面融为一体,最大限度地减少了对内容的视觉干扰。线性图标一般用于篇内容型app和一些文艺、精致、简洁类的app。


面性icon

面性icon的视觉占比最大,具有强烈的视觉冲击力,可以强化对用户的视觉引导,由于面性图标具有简洁、视觉冲击力强的特征非常适合用于富有激情的app!

拟物icon

拟物icon是通过模拟现实生活中,物体真实的光源以及材质特性来刻画出相对写实的icon。这种icon风格虽然在如今扁平化时代下不经常用,但是三十年河东三十年河西最近的微拟物风格或许会给拟物icon带来新的春天。

二、icon的用法

一、作为主视觉出现在画面中

icon可以在日常的首页Banner、启动页、引导页、等页面,做为主要的视觉元素形成新的风格和主题。

二、归纳信息内容

相同类别的内容可以通过icon进行区分,拿B站的分区页面为例相同类别的内容可以归纳为同一个类型,在用一个icon图文结合加以表示,让内容变得有井然有序的同时也增加了页面的设计感。大大提高了查找内容的效率,也让用户再重复使用功能的时候降低寻找时间 。

三、提升用户体验

在一些APP和网站的功能区域,可以通过icon+文字的形式让用户再重复使用功能的同时降低寻找时间。icon不仅让页面美观具有设计感,还提升了用户体验。

我们做一个实验,把支付宝金刚区icon全部删掉。如果每一次在找信用卡还款的功能的时候,都要先看信用卡还款这五个字,你大脑就会处理五个图形这样就会增加阅读负担,如果是通过读图的话,这样就很快速的辨识出来,因为人脑处理图片的速度是文字的六倍。但是这又引入了有个新的问题iocn是很具象的很难解释的,需要图文的结合。

支付宝金刚区的功能是重复率很高的功能,在第一次用到某个功能的时候,你需要看文字确认一下再点击icon进入功能,但是在第二次你使用这个功能的时候可以通过iocn很快速的找到你使用的功能。

四、大段文字或标题中提升设计感

在平时工作的时候,我们经常会遇见大段文字或者文字较多时。遇见这种情况我们可以提取文中较为重要的关词,把它具像化做成iocn 放在大段文字的前面。不仅可以把这些内容进行分隔还可以为页面增加设计感。

五、连接品牌提升品牌形象

icon是app设计中必不可少的基础元素,但是你会发现他们的图标设计都很雷同,有些甚至直接在图标上下载下来直接用就可以了。app的首页都是清一色的小房子,这样子做没有问题目的就是确保图标最基础的功能性,但是同质化太严重了。

每个app都有品牌形象,品牌本身就具有非常强烈鲜明的个性,代表了app与众不同的气质。其实我们完全可以把品牌和icon链接在一起,不仅可以打造差异化还可以让app内外形成了视觉联系,也二次传递品牌形象。

1、提取品牌图形

每个app都有品牌形象,品牌本身就具有非常强烈鲜明的个性,代表了app与众不同的气质。其实我们完全可以把品牌和icon链接在一起,例如支付宝首页tab栏的首页icon。摒弃了传统的用一小房子的icon而是采用链接品牌形象中文的变体“支”字来当作首页的icon。

2、提取设计语言

站酷的品牌图形很特别类似拟人化的一团火焰小人头部,因此可以看到站酷首页tab栏“我的”icon也使用了类似的拟人化火焰小人头部设计,他们就形成了在品牌上的某种视觉联系。

3、拆分品牌名称

MONO是一款高质量内容文化社区app,也是我之前用了很久的app还买过MONO的日历。它的tab栏直接将品牌名称的MONO,直接拆分成了四个图形。

4、提取品牌颜色

闲鱼的品牌颜色是黄色和深灰色,在tab的icon设计中就用到了黄色与深灰色带给用户轻快欢乐的感觉,与品牌调性非常一致。

5、提取产品气质

东家是一款传统手工艺人社交综合类app,这也是在我手机一直舍不得删的一款app产品。其产品有着古朴、典雅、温润、精致、文艺气息。它的首页tab栏icon融入了宋体汉子笔画的特性加以重塑,创造出来具有东方韵味的图标设计,也非常符合其产品本身的调性。

最后

icon是设计师的好帮手,巧用icon不仅可以让页面提升设计感、提升用户体验、归纳信息内容等还可以链接品牌提升品牌形象等。icon虽小但是其中的奥秘用法倒是不少, 或许还有很多奥秘有待我们发倔。希望小伙伴看了我对icon一些粗略的见解有所启发,把一些用法用到自己的设计设计中!

Powered by Froala Editor

更新:2021-02-19

收藏

9人已收藏

  • 5

    作品

  • 73

    粉丝

  • 15

    关注

  • UI中的那些配色技巧 ——下
  • UI中的那些配色技巧 ——上
  • 2020——2021作品集回顾
相关标签
设计ui

    猜你喜欢

      2021-02-19 原创文章 经验/观点 举报 2644 9 12 0

      让我们聊一聊icon的那些事儿

      0.0°

      你确定要举报让我们聊一聊icon的那些事儿

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2021年02月18日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      12
      9
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录