所有分类
  • 所有分类
  • 未分类
扁平与线性iCON绘制指南——ARTUI用户体验设计学院

扁平与线性iCON绘制指南——ARTUI用户体验设计学院

iCON绘制是UI设计里必不可少的部分,它看似简单,但很多同学还是把握不好细节,本篇文章分享iCON绘制中常见的问题与解决方法。1.使用栅格界面上的icon...

iCON绘制是UI设计里必不可少的部分,它看似简单,但很多同学还是把握不好细节,本篇文章分享iCON绘制中常见的问题与解决方法。

1.使用栅格

界面上的icon一般都能近似成一个基本形式,比如各个方向的长方形、圆、三角形、正方形。如果你把他们进行模糊化处理,你会发现他们都是差不多大的一小团黑色,也就是说其“视觉重量”是基本一致的。

扁平与线性iCON绘制指南——ARTUI用户体验设计学院

把icon根据不同的形状放入栅格框架里面。举个例子,方形的icon就比三角和细长icon显得更紧密。

扁平与线性iCON绘制指南——ARTUI用户体验设计学院

扁平与线性iCON绘制指南——ARTUI用户体验设计学院

一个icon约紧密,他需要的空间就越少。一个icon的细节越多,我们再栅格框架中就应该给他更多的空间。

扁平与线性iCON绘制指南——ARTUI用户体验设计学院

扁平与线性iCON绘制指南——ARTUI用户体验设计学院注意不要让栅格限制你的创作,如果这个icon超出格子后的效果非常好,那就完全可以突破栅格的限制。

2.注意像素对齐

在非retina屏上,icon的线条一定要紧贴像素网格,不要出现小数点;线型icon建议线宽2px。

扁平与线性iCON绘制指南——ARTUI用户体验设计学院

扁平与线性iCON绘制指南——ARTUI用户体验设计学院

如果你使用1px,那线条只能在内部或外部,不能使用中心对齐。

扁平与线性iCON绘制指南——ARTUI用户体验设计学院

扁平与线性iCON绘制指南——ARTUI用户体验设计学院

使用居中的1px边框,使得图标会在100%的比例时模糊,不过如果你放大的话,它看起来很清晰。

扁平与线性iCON绘制指南——ARTUI用户体验设计学院

扁平与线性iCON绘制指南——ARTUI用户体验设计学院

依照格子来确定斜线的角度。尽量使用45°、30°、60°等常见角度,他们会比13.7°或者81°这样不常见的角度更清晰。

扁平与线性iCON绘制指南——ARTUI用户体验设计学院

3.把握细节程度

设计一组icon时,先从最复杂的开始做起。这样就可以控制图标的细节程度,保证所有icon的视觉重量相同。

扁平与线性iCON绘制指南——ARTUI用户体验设计学院

如果icon的细节程度各不相同,那细节更多的icon就会吸引用户的注意力,看起来也更“重”一些。

扁平与线性iCON绘制指南——ARTUI用户体验设计学院

4.控制最小间隔尺寸

在整套icon中,每个icon内部相邻元素之间的距离不应该太小。最好定义一个最小间隔尺寸,避免icon风格不同意。

扁平与线性iCON绘制指南——ARTUI用户体验设计学院

扁平与线性iCON绘制指南——ARTUI用户体验设计学院

对于线型icon来说,一个简单方法就是最小间隔大小与线宽保持一致。同时线条要清楚地分开或者相连,一定不要用那种似连非连的样式。

扁平与线性iCON绘制指南——ARTUI用户体验设计学院

扁平与线性iCON绘制指南——ARTUI用户体验设计学院

5.去除重复的部分

在整套icon中,每个icon内部相邻元素之间的距离不应该太小。最好定义一个最小间隔尺寸,避免icon风格不统一。

扁平与线性iCON绘制指南——ARTUI用户体验设计学院

邮件产品的中回复转发等就不用把邮件图形带入。

扁平与线性iCON绘制指南——ARTUI用户体验设计学院

6.保持风格的一致与协调

风格的一致会帮助用户理解icon意义、找出重要程度相似的icon。

扁平与线性iCON绘制指南——ARTUI用户体验设计学院

扁平与线性iCON绘制指南——ARTUI用户体验设计学院

面性icon同样适合这种规则。

扁平与线性iCON绘制指南——ARTUI用户体验设计学院

扁平与线性iCON绘制指南——ARTUI用户体验设计学院

扁平与线性iCON绘制指南——ARTUI用户体验设计学院

7.使用严格的尺寸系统

8列栅格和12列栅格是目前最灵活的设计尺寸系统。12可以被2、3、4、6整除,所以24*24pix和48*48pix是目前的标准icon尺寸。如果需要更大尺寸的icon可以直接放大使用。

扁平与线性iCON绘制指南——ARTUI用户体验设计学院

8.保持轮廓的清晰与锐利

8pix栅格和12列栅格是目前最灵活的设计尺寸系统。12可以被2、3、4、6整除,所以24*24pix和48*48pix是目前的标准icon尺寸。如果需要更大尺寸的icon可以直接放大使用。

扁平与线性iCON绘制指南——ARTUI用户体验设计学院

扁平与线性iCON绘制指南——ARTUI用户体验设计学院

扁平与线性iCON绘制指南——ARTUI用户体验设计学院

ARTUI 7月精品小班学员招募中

扁平与线性iCON绘制指南——ARTUI用户体验设计学院 名额有限扁平与线性iCON绘制指南——ARTUI用户体验设计学院

扁平与线性iCON绘制指南——ARTUI用户体验设计学院

开班信息

  • 开班时间:2018年7月下旬

  • 学习方向:UI设计/交互设计

  • 课程时长:3个月

  • 上课时间:每周一、三晚19:00~21:30 / 每周六全天9:30 ~ 18:00

(与上班一致的项目方式进行学习,中间时间需完成相应的作业和项目任务)

报名&咨询

扁平与线性iCON绘制指南——ARTUI用户体验设计学院

长按二维码添加【小U】微信咨询&报名

扁平与线性iCON绘制指南——ARTUI用户体验设计学院

原文始发于微信公众号(ARTUI用户体验设计中心):扁平与线性iCON绘制指南——ARTUI用户体验设计学院

原文链接:http://www.uiya.cn/9695.html,转载请注明出处。

0
分享海报

评论0

没有账号? 注册  忘记密码?