国内最专业的IT技术学习网

UI设计

当前位置:主页 > UI设计 >

澳门银河官网网址: 图标自检手册

发布时间:2019/09/25标签:   学习方法      ICON图标      ICON教程    点击量:

原标题:澳门银河官网网址: 图标自检手册

澳门银河官网网址: 图标自检手册

这种错误,我觉得优秀的你,应该不会犯。但是有些时候在做一套拥有不同尺寸的图标时,我们必须要根据图标大小来调整描边粗细,使整体看起来统一和谐,大家一定要注意。

切记,识别性是图标最重要的价值,尤其是在没有文字说明的情况下,一定不要让用户产生困惑,不然你就是在消耗用户体验,而不是给用户体验赋能!

3.1饱满

很多时候我们做出来的图标不够精致,其中一个很大的原因就是不够饱满。

发现有些人以为它是目录页,有些人则根本不知道什么意思,这就属于在含义识别层出现了问题。

4.1 属性表达

属性表达就是图标的骨骼基调,比如圆角大小、线条粗细等,可以根据行业属于及用户人群来进行判断,比如商务行业和动漫行业就完全不同的属性,商务行业可以偏方正严肃一些,而动漫行业可以偏圆润一些(当然也不绝对,只要有因有果即可);再比如男性和女性,老人和小孩都有不同的属性表达。

2.6 正负形比例

正负空间比例很容被忽略,以前我也很少讲过,不过我觉得很实用,如下图,很明显白色所占比例不同,导致图标一致性就会有问题:

以上就是个人从识别、统一、耐看、风格、品牌5个维度来打造的自检框架,相比较上一篇会更加的全面体系。对于图标设计,一定要长期的积累,耐心的研究,我也还在不断研究的路上,借此机会整理分享,希望大家互相学习进步,加油!

明度特别接近的颜色不能用在一起,比如柠檬黄和白色,如果白色图标放在了柠檬黄的底色上,白色就很容易看不清楚,而且特别晃眼:

组合:就是每个图标会由至少两个元素组成。

5.2 图形

由于这个图标没有文案搭配使用,所以在含义识别上一定要重视,最后的方案就是采用一个详字来进行设计,既满足了识别,又满足了统一的形式:

澳门银河官网网址: 图标自检手册

澳门银河官网网址: 图标自检手册

1.识别

事物的价值在于它的用途是什么!

2.3 视觉大小

2.5 角度

有了这两个要素之后,就可以根据具体需求来进行创作设计了,下面两组图标就是这么来的:

不过直接看这篇也ok,这篇会更全面完整一些,大纲如下:

作者:菜心设计铺

这样我们就会看到所有的图标断线位置都大致出现在右下角的地方,最终效果如下:

但是这种方法还是有很大的风险,因为毕竟每个字母与功能本身的含义没什么联系,如果不是非常个性化的app,谨慎使用!

很大程度上提高了图标的统一性,并且在延展执行的时候节省了大量的思考时间(思考在哪里断)。

于是我对图标的结构进行了调整,尽可能的减少绿色部分,最后达到了下图这样的效果:

什么是透气?我们经常会说页面不够透气,没有呼吸感,其实无非就是留白做的不好,图标也是一样的,比如下面这组面形图形:

 3.耐看 

能够让图标耐看的因素有很多,以我目前的认知,主要有以下四点:

澳门银河官网网址: 图标自检手册

所以我们需要在透气的基础上再融入一些变化,比如前一阵子帮霖霖做的6个图标,其中有三个我觉得还可以,就是因为体现了这种有变化的透气感,不论是正形还是负形都有很大的变化(不过当时要的很急,只做了两个小时就给他了,不然还能更好些):

5.1颜色

颜色是最容易体现品牌感的元素,所以图标上经常会结合品牌色来进行设计:

原文地址:菜心设计铺(公众号)

2.统一

澳门银河官网网址: 图标自检手册

5.3形象

如果你的产品有品牌形象,那一定要把用起来,比如腾讯动漫的黑子,就可以进行结合使用:

澳门银河官网网址: 图标自检手册

1.2视觉识别

视觉识别与图标含义无关,主要是视觉层面阻碍用户识别的因素。

3.2 有变化的透气感

很多时候我们会发现自己的做的图标有些死板、发闷,其实很多时候就是透气感没做好。

澳门银河官网网址: 图标自检手册

识别性可以分为两个方面,一是含义识别,二是视觉识别。

澳门银河官网网址: 图标自检手册

这个因素既简单又使用,大家一定要熟练掌握。

但是对于断线的位置是否一定要规定其出现的角度,银河官网,我觉得不一定,也可以从其他角度考虑,但最终的目的还是让整体统一和谐,且延展性高。

另一个就是断线的距离,一定要做到统一,这个很容易被忽略:

所以千万不要小看前期的属性表达,它可以帮助你确定大的骨骼基调。

澳门银河官网网址: 图标自检手册

其实目的就是能够更加灵活的调整图标大小,使其在视觉重量上保持统一。

1.2.1 颜色因素

2.1 圆角大小

4.1 属性表达

1.1 含义识别

这就是对已有风格的一种提取及二次加工,也是我常用的一种图标设计方法,银河网上开户,希望能够帮助到大家。

再举一个角度其他方面的例子,在做下面这组图标的时候,最初没有考虑断线的规律:

澳门银河官网网址: 图标自检手册

澳门银河官网网址: 图标自检手册

版权信息Copyright © 银河官网 版权所有    ICP备案编号:鲁ICP备09013610号