多起村干部被灭门案,需要反思了!

高铁打人者身份被曝光,人脉资源碾压普通人!却遇到了硬茬

OPPO芯片业务解散不一定是坏事

明确了!任期届满后,他不再寻求连任!

去泰国看了一场“成人秀”,画面尴尬到让人窒息.....

生成图片,分享到微信朋友圈

自由微信安卓APP发布,立即下载! | 提交文章网址
查看原文

别光抄了,图标设计这样做更专业!

夺命脚 UI范 2022-04-24



@夺命脚 
https://www.zcool.com.cn/article/ZMTIyMjg1Mg==.html

---------------------------------------------------------



  ↓看新鲜内容提升审美 · 升职加薪↓  



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



1.icon的种类


线性icon


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


面性icon


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


拟物icon


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


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



2.icon的用法


作为主视觉出现在画面中


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


归纳信息内容

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


提升用户体验


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


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


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


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


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


连接品牌提升品牌形象


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


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


提取品牌图形


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


提取设计语言


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


拆分品牌名称


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


提取品牌颜色


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


提取产品气质


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


最后


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





------------------------------------------------

 · 推荐阅读·

这个作品集包装神器,不用你就真的out了。
这样做设计,你离总监就不远了。
30秒·教你打造美爆了渐变配色。
因为拥有了它,大厂给我发了录取通知书。
这个神器,实用又走心,太牛了!
凭什么韩国的设计,那么强?



  ↓ 汇聚全国优秀设计师共同关注 ↓  

点个在看,升职加薪↓↓

文章有问题?点此查看未经处理的缓存