邮箱订阅

订阅即可免费获取优质的设计资讯!

邮箱订阅

感谢你的支持!

分享到微信朋友圈:

Close

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

热门文章

Mockplus是什么?

Mockplus,更快更简单的原型设计工具。快速创建原型,一键拖拽创建交互,团队协作省事省力。微软、腾讯、东软、育碧、Oracle、西门子、IBM等全球知名企业和全球300多所高校都在用,你也可以免费开始你的设计!

了解更多

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

Cherry 2018-03-26 14:09:27 阅读:1525

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

以下内容由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,免费体验畅快的原型设计之旅。




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

原型工具难上手、速度慢?试试Mockplus!

_____

Mockplus,更快更简单的原型设计工具。快速创建原型,一键拖拽创建交互,团队协作省事省力。微软、腾讯、东软、育碧、Oracle、西门子、IBM等全球知名企业和全球300多所高校都在用,你也可以免费开始你的设计!

免费下载
logo

咨询客服

帮助群:513732983 加入QQ群

服务邮箱:service@jongde.com

咨询客服
置顶