关于图标网格系统的详细解析

13天前发布

原创文章 / UI / 教程
美腻腻nii 原创,如需商业用途或转载请与美腻腻nii联系,谢谢配合。

设计老姐姐带你学习图标的网格系统

如果你也是一位UI设计师,那么应该对图标网格有一定的了解。在之前的项目中可能为iOS或Android创建应用程序图标,或者为产品绘制了一组UI图标。但可能大部分人还不知道,该如何使用图标网格系统。

虽然看起来有些负责,但其实经过认真的分析和研究,我发现其实都是有规律可循的。



下面会为大家详细的讲解

👇


图标网格直观地表示图标集的规则,并放置一个画布来绘制。它们描绘了图标的尺寸、底层像素网格以及要跟随的其他关键网格线。

图标网格是一种提高速度和一致性的工具。当一个设计师画图标时,他们对规则了如指掌,因为他们发明了这些规则。但随着时间的推移,这些可能会丢失。在较大的图标集和较大的团队中,图标网格为多个贡献者提供了相同的起点。


图标网格的必要部分取决于显示图标的上下文、如何蒙版以及哪些形状将用作模板。


它的组成可以包括像素网格、关键形状、正交、遮罩和安全区域/修剪区域,每个都提供了要绘制的参考点。与任何配方一样,网格的创建者可以选择使用什么和省略什么。



像素网格


如果捕捉到网格,像素网格将帮助您以特定增量绘制。1px增量一直保持着数字标准,而最近采用了0.5px增量。


材质的“增大音量”图标位于其24 x 24像素系统图标网格上,使用2倍笔划:




像素捕捉有助于在分辨率较低的屏幕上清晰地呈现图标,但随着硬件渲染的改进,这一要求已大大降低。关于像素捕捉的更多研究将在以后的文章中介绍。


关键形状


关键形状提供模板形状。四个基本元素是常见的:圆形、正方形、纵向矩形和横向矩形。


IBM使用这4个键形绘制播放、保存、删除和HD的图标:



把关键形状想象成一个入门工具包,提供足够的设置标准,同时为灵活性和创造性留出空间。并不是每个图标都能完美地映射到基本形状。




正交


从透视图借用的正交是指与图标中心点相交并创建要使用的其他顶点的关键点。这些线条通常以90°和45°的角度切割画布。当需要更多角度时,下一步将增加15°和5°。


材料的体积偏离其斜线45°正交:





遮罩形状


遮罩形状从默认的方形画布自定义图标的容器。遮罩形状可以嵌入到资源本身中,也可以随后应用。Play Store在其所有图标上应用圆角矩形遮罩:




对于启动程序图标(位于主屏幕和应用程序抽屉中),不同的Android原始设备制造商在其图标上应用不同的形状



安全区和装饰区


安全区域或活动区域显示图标的重要内容应位于何处,而反向-裁剪区域显示要避免的区域。


在某些情况下,安全区域是一个软指导,但当内容被裁剪时,安全区域是严格的。


Google Apps设备策略图标关注修剪区域:




实例


现在我们已经熟悉了图标网格的组件,让我们更详细地检查它的构造和使用。


iOS应用图标网格


苹果的应用图标网格有助于创建显示在应用商店和iOS系统中的应用图标。它是从黄金比例比例和雕刻的形状,以一边的长度为起点。它的“外圆”掩模是对超椭圆或Lamé曲线计算的改编。



苹果的圆形图标,如Safari、时钟、指南针和设置,直接跟随它们的圆形关键线。



非圆形图标有一个很难追踪的结构,但可能使用了进一步的黄金比例计算和眼球:




我觉得这个网格非常令人愉快,但不是最直观的使用。因为现在还不清楚该做什么样的进一步计算,也不清楚该遵循什么样的规则。


材质的图标网格


iOS和材质网格之间的主要区别是在材质中添加了关键形状。四个基本形状是模板-圆形、正方形、纵向矩形和横向矩形:

Gmail使用横向矩形关键形状




Google Apps使用圆形关键形状:


Google指定了这个网格的一些变量,以适应不同的上下文。例如,launcher图标网格有一个宽大的修剪区域,允许不同的Android原始设备制造商应用他们自己的形状遮罩。尽管比例不同,但这些网格在意思上是相同的:


下面是用于为产品界面创建图标的系统图标网格的细分:




关于关键尺寸的标注


请注意,此图标网格的关键画布大小为24 x 24px,这意味着图标是按此大小创建的。但是,在使用中,材质系统图标可以缩放为一系列大小:

在一些图标族中,设计师绘制自定义的替代尺寸以优化性能。例如,随着图标变小,Nuclear的指南针图标会优雅地减少细节,以清晰易读:


这是一个复杂的举动,但维护许多图标耗时。细微之处越多,复杂性就越高。如果有必要的话考虑一下。


IBM图标网格


IBM的图标网格非常接近Material的,提供了类似的按键形状调色板:



它优雅地构建在32 x 32像素的关键画布上,具有干净、均匀的尺寸:




在上面见过这些:


与网格相对的IBM图标(从左到右,从上到下):Play、Save、Delete、HD、Bee、Cut、Microscope和Eye


我的图标网格

它的关键形状基本上是基于面积计算来达到视觉平衡。我们参考圆圈绘制Daylio和纽约时报,参考正方形绘制LinkedIn和计算器,参考矩形绘制Google Docs和Microsoft Word,参考矩形绘制AliExpress和NBC:

在某些情况下(第二排),我们直接使用模具,而在其他情况下(最后一排),它只是一个一般指南。


重要的是要注意,这个网格从一开始就定下来的。随着时间的推移,经过几次迭代,去掉了那些没有帮助的部分(例如额外的正交),并强调了修剪区域,并且随着图标规则的形成,修改了关键线。


网格是向导


与任何网格一样,图标网格是用来作为向导的,而不是硬规则。当他们不再为你工作时就把他们扔了。


光学>网格


务必检查光学天平。在下面的示例中,直接引用圆键形状感觉不太正确。



“G”和其他图标相比感觉有点大。可以适当缩小一点,让它视觉感受上更加平衡。



为了保持视觉平衡,经常需要偏离网格。遵循与严格的度量值相对应的光学正确值。


测试>网格


在上下文中测试图标以检查一致性和有效性。如果你正在创建一个iOS应用程序图标,它如何与主屏幕上的其他图标一起使用?在文件夹中,在通知中,在设置视图中?在应用商店?在本地环境中测试(与设计软件相比)以获得最高的准确性。

我们可以输出设计图直接在设备上预览,以证明其清晰性、可读性和风格适合性。



网格+原则+规则


图标网格提供了一个方便的视觉规范,但不要传达每个图标应该遵循的所有技术规则和设计原则。将图标网格与清晰的文档配对以绘制更加完美的图标库。


在我自己的实践中,图标网格更多的是一个背景参考,而原则和规则是首要考虑的:


图标网格的使用原则:


清晰

首先要清楚,图标必须具备可识别性和可读性,永远不要牺牲图标所代表的清晰性。


简洁


尽量少用细节。图标网格还是还原性的。每一笔都要简洁而有目的地传达icon所代表的本质。


有特点


有自己的特点,但少加独特的细节,带来一点温暖和发挥,否则可能是一个非常严峻的设置。




图标网格的技术规则:


1.使用48 x 48像素的画布


2.使用1.5px居中描边


3.使用连续的笔划,除非断段有助于理解


4.必要时调整曲线以保持设计原则




最后

👇


任何规则和规律都是为了辅助我们进行更有效率的设计,但这不是我们设计枷锁,所以大家一定要学会活学活用哦~


66
- 位站酷推荐设计师推荐 -
    没有新消息