使用光栅更好的为 UI 创建单色图标

UI 2019-11-25 135 次浏览 0 条评论
1、使用光栅

a、界面图标通常可以定义的基本格式:横向矩形,纵向矩形,对角矩形,圆形,三角形,正方形。模糊显示图标后依然具有相同的视觉质量,因为图标变成或多或少相同的点。

b、根据图标形状,将其导入相应框架的栅格中。例如,方形图标比三角形或长方形图标更紧凑。

c、图标越紧凑,所需空间就越小;如果图标具有更锐利的边缘或小细节,那么图标占据的画板空间就越多。

注意不要把设计禁锢在网格内。它只是辅助,而不是限制。如果一个图标用一些拉伸的元素能在视觉上效果更好,那就让它们伸出来。

2、像素网格的使用要点

a、要在非视网膜屏幕上使图标清晰,需要用到像素网格,并优先选择 2px 线条图标作为边框。居中的 2px 边框通常提供足够的厚度和清晰的轮廓。

b、如果为图标选择 1px 的边框,则边框应该是在图标边缘外侧或内部而不是居中。

c、在像素网格后面设置对角线的起点和终点。角度为 45°、30°和 60°的对角线比角度不均匀(如 13.7°或 81°)的对角线更锐利。目前大部分用户还在使用低分辨率屏幕设备,这就是为什么图标清晰度仍然很重要的原因。

3、保持一定水平的细节

a、制作图标最好从复杂图标的部分起始。这样才能更好的定义细节级别并有助于制作相同视觉权重的图标。

b、当图标具有不同的细节层次时,更细致的图标会吸引更多用户的注意力,这样的图标看上去也会比一般图标更出类拔萃。

4、控制最小间隙尺寸

a、图标的相邻元素间的间隙在整个图标中不应太小或不一致。确定好最小间隙的位置并将其调整到最合适的尺寸。不要出现粘连感。

b、对于线图标,最小间隙尺寸应当等于线条粗细的尺寸。线条分离的位置应当明显分离,连接的位置也要彻底连接上,切忌出现分离不清的粘连感。

5、去掉重复部分

a、在一组图标中,您可能会重复细节。要去掉重复部分,将观众的注意力集中在不同的东西上。这就像数学中的分数简化一样。您看到的视觉噪音越少,您的理解就越清晰。

b、如果目标用户已经意识到他自己在用什么的话,那就无需一次又一次地重复出现。如下图,就算去掉信封图标,用户也清楚这是和 E-mail 相关的 app。

此设计原则还包括图标周围的各种装饰、边框、背景。如果这些元素没有帮助阅读图标,那么这些元素就等于画蛇添足,会阻碍用户阅读图标。

6、遵循统一的设计风格

a、不要在一组图标中同时出现 2.5D 和 2D 两种效果。设计风格统一将有助于用户识别图标,而且可以理解到每个图标都具有相同的重要性或状态。

b、统一的设计风格也适用于线图标和填充图标。如果你用了不同的设计风格来绘制图标的话,人们可能会认为这些图标具有不同的重要性或地位。当然,除非你刻意的想突出某个部分。例如,填充图标用于键命令,线图标用于其他命令。

c、在界面中每个图标有两个变体就非常好。线图标 - 用于禁用或常规状态。填充图标 - 用于单击状态。

7、使用基于 2px 的尺寸调整系统

a、与基于十进制的大小调整相比,8px 和 12 列布局在许多界面应用更为灵活。12 可以分为 2,3,4 和 6.因此,24px 或 48px 在图标中已成为标准尺寸。如果需要更大的尺寸,可以缩放这些图标。

8、保持轮廓清晰准确

a、没有像素点就不可能实现图形的设计,但是在作图时应注意少的节点更有利于渲染,并且删除无用且重复的像素点很关键

b、那些令人讨厌的“8.999 px”或“100.001 px”尺寸呢?如果形状锚定位准确,图标边缘看起来很清晰。并且,在合并形状时,不存在获得过多锚点和间隙的问题。

9、从垃圾桶中清除 SVG

a、许多界面编辑器(如 Sketch)会生成具有不必要伪影的 SVG - 过多的组,颜色层和剪切遮罩。让我们来看看。在 Sketch 中,一切看起来都不错。

b、在另一个编辑器(例如,Adobe Illustrator)中打开此 SVG。你会注意到空图层,不必要的组,有时还有剪贴遮罩。当前端开发人员将图标转换为代码或在网页上使用 SVG 时,所有这些都可能导致问题。

c、您可以删除多余垃圾并保存。

d、您将看到 Sketch SVG(picture.svg)和已编辑的 Illustrator SVG(picture_new.svg)在文件查看器中具有不同的预览。顺便说一下,可以在代码编辑器中删除垃圾。如果您知道 SVG 代码的具体名称,请尝试直接删除不必要的数据字符串。

10、图标≠魔法棒

当然,所有上述建议也要因人而异。如果你自己的方法更适合你的设计,可以随意跳过这些建议。严格的几何图标不一定是最佳选择。在我看来,至少有两种情况,

  • 空状态——如果您要创建空状态屏幕,例如“没有剩余任务”或“所有 E-mail 已阅读”,最好用情感图标说明它们或只使用文本描述。情感图标可以提升用户兴致,而无情感的几何图标不会为交互增加任何价值。
  • 吉祥物和插图——如果你的界面有吉祥物或插图,这种类型的图形应该是感性的。我不知道设计师应该怎样通过有限的形状选择和网格来表达情感。
原文链接:https://medium.muz.li/icon-set-3b4fc87dc6b5
文章源自网友分享,版权归原作者所有,如有侵权请联系删除。
广告
广告

发表评论

电子邮件地址不会被公开。 必填项已用*标注