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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
UI设计中扁平图标绘制的终极指南
0.0°
2018-05-08 自译外文 经验/观点 原作者: Slava Shestopalov 举报 7112 207 387 11

Image title




1.使用栅格


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

Image title

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

Image title

Image title

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

Image title

Image title

注意不要让栅格限制你的创作,如果这个icon超出格子后的效果非常好,那就完全可以突破栅格的限制。

 


2.注意像素对齐


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

Image title

Image title

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

Image title

Image title

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

Image title

Image title

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

Image title




3.  把握细节程度


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

Image title

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

Image title


 


4.控制最小间隔尺寸


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

Image title

Image title

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

Image title

Image title


 


5.去除重复的部分


在一套icon里,你可能设计出很多重复的细节。但一定要舍弃这些重复的部分,突出每个图标中特色的点。这就像数学中的分数一样,视觉杂质越少,用户理解的就越清楚。

Image title

如果用户已经知道他们正在用什么样的软件,那就就不需要一再重复地告诉他们。比如说在邮箱app里,icon即使去掉“邮件”这个元素,用户依然知道自己是在收发邮件。

Image title

这个规则对于其他装饰性元素也适用,比如一些围绕在icon周围的框架、背景等。这些装饰可能没有帮助用户理解icon,甚至在妨碍理解icon。

 




6.制定并保持一个明确的风格


不要在一套图标里混合多种风格。风格的一致会帮助用户理解icon意义、找出重要程度相似的icon。

Image title

Image title

线型或者填充性icon也适用这个原则。如果你把这两种风格的icon混合着用,用户可能会认为不同风格的icon代表不同的重要程度或者状态。当然,除非你就是打算这么做的。举例来说,填充型icon代表一些关键指令,线型则是其他指令。

Image title

Image title

在页面中有两种类型的icon也是可以的,线型icon用来标识不可用或者默认状态,填充型icon代表已选状态。

Image title





7.使用icon的标准设计尺寸系统


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


Image title





8.保持轮廓的干净和准确


完美本身并不是目标。没人会为了一条像素清晰的点去一个一个检查像素。但icon清晰度会影响最终产品给用户的感受,所以时刻提醒自己icon中是不是有多余的锚点?以及icon中的锚点是不是准确的点在像素点上?

Image title

不知道你是否遇到过“8.999px”和“100.001px”这种烦人的尺寸。如果绘制过程中,锚点点的非常准确,那么icon的线条就会很“锋利”,平滑,你也不会遇到各种稀奇孤寡的问题。

Image title





9.规范化的SVG格式输出


许多设计工具比如Sketch,在生成SVGs文件是会产生许多不必要的东西—多余的图层、纯颜色层、蒙版等等。看这个例子:在Sketch里,看起来没什么问题,但是...

Image title

在其他编辑器(AI之类)里打开这个SVG文件。你会看到许多空图层、不知道哪来的分组、蒙版等等。这些多余的东西在开发人员使用SVG的时候就会导致许多问题。

Image title

你可以删掉这些没用的东西,然后再保存。

Image title

你可以看到,之前从Sketch导出的SVG和清理过的SVG在你的电脑里看起来是不一样的。

Image title


如果你想到其他的建议请直接留言,我们可以一起完善这份指南。但如果上述中有些规则会影响到你重要的设计理念,那么不要被这些规则完全束缚,发挥创意吧。





Image title

本文已获得作者授权-授权截图




译者:@不器

校对:@熊猫小生

作者:Slava Shestopalov  

原文地址:https://medium.muz.li/icon-set-3b4fc87dc6b5

版权由原作者所有,转载请注明~~~

Image title


微信公众号:熊猫设计院(MUXDesign)

更新:2018-05-08

收藏

207人已收藏

熊猫小生

微信公众号:熊猫设计院(MUXDesign)

  • 25

    作品

  • 1153

    粉丝

  • 114

    关注

  • 以UED团队为例,浅谈团队管理那些事儿
  • 想要做好用户调研,你要学会这九种定量用户研究的方法
  • 为用户界面选择合适的配色方案:浅色还是深色?
  • 还只知道“A/B测试”?是时候了解一下“多变量测试”了

    猜你喜欢

      2018-05-08 自译外文 经验/观点 原作者: Slava Shestopalov 举报 7112 207 387 11

      UI设计中扁平图标绘制的终极指南

      0.0°

      你确定要举报UI设计中扁平图标绘制的终极指南

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2018年05月07日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      387
      207
      11

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

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

      登录

      手机号

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

      登录
      第三方账号登录