产品设计

扁平几何图标的终极指南

微信扫一扫,分享到朋友圈

扁平几何图标的终极指南
0

为用户界面创作单色图标的网格系统。

1.使用视觉网格

一个应用内的icon通常近似一个基本形状:一个斜方形,一个长方形,一个菱形,圆形,三角形,正方形。模糊显示后,它们的视觉重量会近似,因为它们或多或少有增有补。

根据图标形状,可以将其装进栅格框架中。比如说,接近正方形的就比长条形或三角形更加紧凑。

图标形状越紧凑,它需要的空间就越小;越锋利的形状,或者带有越多细节,占用框架内的空间就越大。

别变成网格的奴隶,不要太受限。如果视觉效果更好的话,可以适当让元素突出网格线。

2.注意像素格

优先设计小图标,要在非视网膜屏上看得清,要看像素网格。优先选择2px作为线宽(1倍),线构成的矢量的图标,最好用宽度居中的模式。

如果线性图标线宽1px(1倍大),就必须让宽度处于外侧。

1px线宽如果相对于路径居中,它就会出现虚边、模糊,尽管你在工程稿看的是清晰的。

如有斜边,起点和终点必须在交叉点上。经实验45°, 30° 和60°角度的斜边更干净,好过像是13.7° 或 81°这样的角度。

3.保持一定细节程度

设计一个图标包,最好从最复杂的开始。它能有效控制图标重量的统一性。

细节程度不同的图标,容易造成视觉重量不同。会吸引用户更关注视觉重量更重的。

4.控制最小间歇点

图标中的元素间隔不应该太小或大小不一。这样能避免图标的元素轮廓粘滞。

图标中“最小距离”和线宽一样粗。要么就把线合在一起,要么就把就设计明确的断点,不要出现“好像连在一起”的情况。

5.去除重复部分

图标库中的图标,你可能会重复某些元素,则摆脱它们,让用户聚焦图标的差异点。像数学中的化简一样。你的图标越少重复越易懂。

如果用户明白一个元素的意义,没必要一再重申。就看你会不会让用户误读。如果在一个邮件app里就可以去除这些冗杂了。

此规则还包括背景、装饰等等。如果不能帮你读懂图标,它就会阻碍界面整体辨识度。

6.选择一个风格,并遵循

在一个系列里不要混合 设计风格。统一风格会帮用户辨识其意思,区分它们的层级和适用范围是否相同。

同样的道理,线性图标和面性图标,如果你混搭,用户会认为它们是不同层级或用途。当然,除非你刻意为之。比如,面性图标代表关键命令,线性代表普通行为。

每个界面中有两种风格的图标是好的,线性代表未被惦记、可点击的状态。面性代表被选中状态。

7.基于两倍大的尺寸体系

8小格12柱廊布局广泛应用于界面中,它更加灵活。12栏可以被2、3、4、6整除;所以24、48px大小的图标成为标准。成倍地缩放它们也不成问题。

8.保持路径干净精准

完美不是目标,没人去看你路径。但是产品中不扭曲的图标是很重要的。记住尽量用最少的锚点,并且不要在靠在一起的形状间留间隙。

同样的道理,锚点处于“8.999 px” 或“100.001 px”,也会造成虚化。锚点卡在整像素点会让图形更加干净。在路径闭合为一的时候,经常会有这种风险。

9.清理SVG垃圾

sketch这样的应用中能直接输出SVG,其中有许多分组和遮罩,层层叠叠但工程里看不出来。

在其他应用中打开这个SVG(比如AI),你会看见很多空的图层,不必要的分组和遮罩。开发人员在网页或应用使用字体图标时可能会出现问题。

你可以移除这些垃圾再保存。

你能看见这个svg在重新编辑前后,在预览中的差异。当然也可以直接调代码,如果你懂画布的机制。

10.图标不是魔杖

当然,每个规则都不是定死的,它们都是经验总结,如果你知道自己的意图,可以随意跳过这些法则。在我看来,有至少两种情况可以不用几何构成图标。

1、空状态。如果你要显示“没更多任务”或者“全部邮件都已读”,最好用插画、情感化的图标或者仅仅是文字表明,更具有感情的图像或插画会让用户愉悦,几何的无感情的插画对交互没有半点帮助。

2、吉祥物和插图。如果界面中有插图,这些图像应该是情绪化的。不知设计师如何用几何网格能描绘这么多图像。

回到产品本身,问自己是否真的需要这样平衡、时尚、统一的图标呢?这是否是最佳的解决方案?

阅读原文...


微信扫一扫,分享到朋友圈

扁平几何图标的终极指南
0

UI中国

「得得涨跌榜」数字货币市场整体下行,ACAT-Alphacat单日涨幅为43.44%|2月12日

上一篇

T-SQL Tuesday #111 – Why I blog

下一篇

评论已经被关闭。

插入图片

热门分类

往期推荐

扁平几何图标的终极指南

长按储存图像,分享给朋友