订阅摹客文章

免费获取优质的设计资讯!

文章分类
热门文章
Mockplus是什么?

更快更简单的原型设计工具,微软、联合国国贸中心、华为、百度、东软、育碧、中石油、Oracle、西门子、IBM都在用,你呢?

开始使用
2019,都在用iDoc了!

更高效的协作设计工具,产品团队必备。智能标注、一键切图、多样批注、交互原型、全貌画板、团队管理。

免费使用
【友情推荐】人人秀,H5活动制作工具,3分钟完成制作。

了解更多
入门教程 了解更多

分享到微信朋友圈:

打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。

博客 > 产品设计 > 设计师不容错过的扁平风图标的终极设计指南

设计师不容错过的扁平风图标的终极设计指南

Cherry
2018-03-26
29839

以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具


前言:之前读过《视觉重量》和《光学矫正》的老朋友们会发现,这篇文章作者一改之前的写作风格,内容以动图为主,文字为辅。

1.使用视觉栅格


界面图标通常可能与某个基本的格式近似: 横向矩形,纵向矩形,对角矩形,圆形,三角形,正方形。模糊显示使他们具有相同的视觉重量,因为它们变成了或多或少相同的团块。

根据图标的形状,将其嵌入到相应的光栅框架中。例如,方形的图标比三角形或细长的图标更紧凑。

图标越紧凑,所需的空间就越小。图标边缘越锐利或者细节越多,那么所占据的画布空间就会越大。

设计师不要因为栅格而限制了图标的设计。栅格的存在是为了辅助设计,而不是妨碍设计。如果一个图标添加一些突出的元素会带来更好的视觉效果,那不妨抛开栅格的规则限制,大胆使用这些元素!

2.使用像素网格


设计师如果要想在非视网膜屏幕上突显图标,则需要使用像素网格,并优先考虑用2像素的线条作为图标边框。

居中的2像素边框能够使图标具有足够的厚度和清晰的轮廓。如果选择1像素边框设计图标,这样的大小只适用外部边框或者内部边框,而不是居中的边框。否则,图标在100%的比例下显示会变得模糊。

根据像素网格设置对角线的起点和终点。度数为45°、30°和60°的对角线比特殊度数(如13.7°或81°)的对角线更锐利。


3. 在一定程度上保持细节


设计一个图标集最好从最复杂的图标开始。这样做可以帮助定义不同细节的层次,并创建相同视觉重量的图标。

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


4. 控制图标最小间距


图标中的相邻元素之间的距离不应该太小或不一致。因此设计师要定义图标的最小间距,并保证任意元素之间保持这种大小,以避免图标轮廓重叠。

对于线条图标,最小的间距等于线的厚度就刚刚好。而线条也应该明显地分开或精确地连接,绝对不要让线条的分开和连接看起来模模糊糊


5. 删除图标中重复部分


在设计师设计的图标集中,可能存在一些重复的细节。将观看者的注意力转移到不同的地方,这就像数学中的分数化简一样。你看到的图像杂物越少,你的理解也就越清晰。

如果目标用户已经意识到他或她的正在进行什么操作或工作,就不需要反复提示。如下图所示,避免基于信封的图标让人们认为这是一个电子邮件应用程序。

这个规则也涉及到各种各样的装饰——框架、背景——围绕着一个图标。如果它们不能帮助用户阅读图标,它们的存在则会阻碍用户阅读图标。

6. 统一图标风格并遵循它


在同一个图标集内,不要将侧面图标与正面图标混合在一起。风格的一致性有助于用户识别图标并了解它们相同的重要性或状态。

在一个图标集中,不要将线性图标和填充图标混在一起。

但是,在某种情况下,界面中有两个不同类型的图标也不错。使用线条图标来表示禁用或正常状态;使用一个填充的图标用于表示单击选中状态。


7.使用8像素倍数的分级系统


总所周知,8像素网格和12列栅格布局被用于许多界面设计,因为它们比基于十进制的分级系统更灵活。12可以被2 ,3 ,4 ,6整除,使用起来更加方便。因此,24或48像素的图标区域已经成为标准。如果需要更大的尺寸,这些图标也可以按比例缩放。


8 . 保持图标轮廓整洁和准确


完美主义并不是我们追求的目标,没有必要为了追求像素完美的线条而去设计。图标的最终显示更为最重要,一定要确保最基本的形状锚点数量和相邻元素之间没有多余的间隙,保持轮廓的干净整洁。

在设计中设计师如果遇到“8.999 px”或“100.001 px”这样特殊的数值,你必须将其修改为整数。只有形状锚定位准确,图标边缘看起来才会非常清晰。当你合并形状时,你也不会承担图标锚点过多和间隙过大的风险。


9.清除svg图中的垃圾


许多界面编辑器(如Sketch)可能会产生许多不必要的的SVG 垃圾-过多的组,颜色层和剪切遮罩。让我们一起来看看下图的这个例子,在Sketch中,这个图标看起来一切正常。

在其他编辑器中打开这个SVG(例如,Adobe illustrator), 你会注意到有空图层,不必要的组,有时还会有剪切遮罩。当前端开发人员将图标转换为字体图标或在网页上使用SVG时,所有这些都会引起一些问题。

这个时候,你可以选择清除这些垃圾并保存图标。

你将会看到Sketch SVG (后缀为 图片. SVG)和编辑的Illustrator SVG (后后缀为 图片_new.svg)在你的文件查看器中有不同的预览。

如果你有什么建议,欢迎在评论区分享你的建议,让我们让一起让这个图标设计指南更加全面!

原文作者:Slava Shestopalov

原文链接:https://medium.muz.li/icon-set-3b4fc87dc6b5



Mockplus做原型,更快更简单,现在下载Mockplus,免费体验畅快的原型设计之旅。



扫描二维码,关注 “摹客” 微信公众号。

上一篇
“手把手教你设计”—12个最佳手机APP界面设计教程

Summer   03/27

普通程序员该如何进阶为全栈工程师?

Grace   03/23

下一篇
咨询客服

帮助群:651432826

服务邮箱:service@jongde.com