东方锐智—让教育更美好

当前位置:锐智首页 > 技术博文-UI > 正文
扁平图标设计终极指南
时间:2018-03-18 00:00:00 来源:NewBeee的设计日记 作者: Ivy Yu

1.使用网格


一个界面图标通常可以视作为一种基础形状:矩形、纵向矩形、对角线矩形、圆形、三角形、正方形。

模糊显示它们后,发现它们具有相同的视觉权重,或多或少的变成相同的斑点。


根据图标的形状,把它变成一个相应的网格框架。例如,方形比三角或长方形更紧凑。



图标越紧凑,所需的空间就越小。边缘更锋利、细节更多的图标,则需要占用更多的画板空间。



不要过于依赖网格。网格起到的作用是帮助我们制作图标,而不是限制。如果一个图标与一些突出元素拥有更好的视觉表现,那么就让它们突出。


2.注意像素网格


在非视网膜屏上想要使图标清晰,就要使用像素网格,并优先选择2像素的描边作为线条图标。


2像素居中描边,能够提供足够的厚度和清晰的轮廓。如果你选择1像素的描边,应该使用外部或内部描边,而不是居中描边。否则,图标将100%模糊。


根据像素网格设置对角线的起始点和结束点。45°、30°和60°的对角线,比像13.7°或81°这种参差不齐的对角线看起来更清晰。



3.保持一定程度的细节


最好从最复杂的图标开始绘制,它将定义细节的层次,并帮助绘制具有相同视觉权重的图标。


当图标有不同层次的细节时,更精细的图标会吸引更多用户的注意,而且视觉上看起来更重。



4.控制最小间隙大小


图标的相邻元素之间的空间不应该太小或不一致。定义最小的间隙,并保证它在任何地方,都以避免轮廓“卡住”。


对于线条图标,最好是最小的空间等于线的宽度。线条应该清晰地分开或精确地连接,而不是看起来是几乎连在一起的样子。

5.删除重复的部分


在一组图标中,可能有重复的细节。把它们的注意力转移到不同的地方。这就像数学中的分数简化一样。你看到的图像噪音越少,你的理解就越清晰。


如果目标用户已经实现了他的任务,就不需要反复地重复。例如,避免绘制基于信封元素的图标,这并不会让人们觉得这不是一个电子邮件应用程序。

这个规则也涉及到各种围绕图标的装饰——如框架、背景。如果这些装饰不能帮助用户理解图标,那么它们反而会阻碍图标的理解。


6.选择一种风格并延续它


在一组图标内,不要将侧视视角与正视视角图标混在一起显示。风格的一致性将帮助用户识别图标并理解它们具有同等的重要性或状态。


不要将线性图标和面型图标混在一起。


但是,在界面中有两个不同的图标是正确的。

线性图标-为禁用或正常状态。面型图标-点击状态。


7.基于利用2的分级系统


8像素网格和12列栅格被用于许多界面设计当中,相较于十进制更灵活。12可以除以2、3、4、6。因此,24-48像素大小的图标已经成为标准。如果需要更大的尺寸,这些图标可以缩放。



8.保持轮廓整洁和准确


完美主义不是目标。没有人为了完美的像素线条,而需要完美像素线条。但对于最终产品,正确的、不失真的图标渲染非常重要。记住最基本的形状锚点数量和相邻元素之间的间隙。



同样还有恼人的“8.999 px”或“100.001 px”大小。如果形状的锚点定位准确,图标边缘看起来锐利。当你合并形状时,你不会冒着得到过多的锚点和间隙的风险。


9.净化SVG中的"垃圾"


sketch制作SVG格式图标时,带有许多不必要元素(既:我们所指的"垃圾"),比如:过多的分组、颜色图层和剪切蒙版。它们在sketch中看起来一切都很好。


在不同的软件(如Ai)中打开SVG文件。你会看到空的图层,不必要的分组,有时还会有剪切蒙版。当前端开发人员将图标转换为iconfont或在网页上使用SVGs时,所有这些"垃圾"都会引起问题。


你可以在Ai中删除这些"垃圾",并保存。


在文件查看器中预览,你将看到用sketch导出的SVG(picture.svg)和用Ai导出的SVG (picture_new.svg)有不同的效果。

文章来源: NewBeee的设计日记

原文链接: https://mp.weixin.qq.com/s/_OQyLYbMvHWYD_QOgtiNTQ?scene=25#wechat_redirect




学员感言
【13期嵌入式-江信程】
申请免费试听
姓名:
手机:
Q Q: