系统图标 基础认知 Material 规范优秀UI教程(2)

UI / UI设计教程 / UI教程 /      

uimaker
UI设计师 / 江苏 南京

来源:网络   作者:佚名

关键词

undefined

3.3 尺寸20px

再来讲一下20px这个尺寸的图标的安全区域。图标内容被限制在16px*16px的安全区域中,四周留有2px的留白。四周2px的留白构成了内边距,围绕着16px*16px的安全区域。图标尺寸20px相对较小,可以应用在紧凑型的页面布局中。

undefined

4.关键线

当我们把图标的设计尺寸和网格都设置好,就要约束设计尺寸24px/20px里面的图标的形状了,所有形状随便画就缺少了统一性,大小不一形状各异,又不美观又不实用就不规范了。由于系统图标不像产品图标那样有一个固定的尺寸(48放大4倍),就会导致两种尺寸的产品图标中均包含4种关键线形状,还是得一个一个来讲。

undefined

4.1 24px关键线

大家按照下图给出的参数来绘制出这四种关键线,一定要绘制在一个文档里!线段的宽度用于展示时可以设置为0.1px或0.2px,如下图所示。

标注1(正方):18px*18px,曲率2px;线0.1/0.2px;

标注2(正圆):20px*20px,正圆;线0.1/0.2px;

标注3(垂直矩形):高20px,宽16px;曲率2px;线0.1/0.2px;

标注4(水平矩形):高16px,宽20px;曲率2px;线0.1/0.2px;

undefined

绘制完成之后,我们将绘制好的四条关键线水平垂直居中对齐,并且按照最外围(24px*24px)的矩形框来绘制对角线,水平线和垂直线。之后就得到了下面的图。

undefined

4.2 20px关键线

跟上面绘制24px图标的方法一致,只是要重新修改一下数值。线段的宽度用于展示时可以设置为0.1px或0.2px,如下图所示。

标注1(正方):14px*14px,曲率2px;线0.1/0.2px;

标注2(正圆):16px*16px,正圆;线0.1/0.2px;

标注3(垂直矩形):高16px,宽12px;曲率2px;线0.1/0.2px;

标注4(水平矩形):高12px,宽16px;曲率2px;线0.1/0.2px;

undefined

同上,绘制完成之后,我们将绘制好的四条关键线水平垂直居中对齐,并且按照最外围(20px*20px)的矩形框来绘制对角线,水平线和垂直线。之后就得到了下面的图。

undefined

5.绘制系统图标

当我们掌握了图标的风格特性、图标的尺寸与网格、图标的区域和关键线等重要规则后,ui,就可以绘制出一些较为简单的图标了。但往深了研究,绘制系统图标不仅于此,还需要去理解并分解图标的构成,包括图标的笔划末端、拐角、内部区域、笔划、内部笔划和边界区域等等,不同的绘制方法均有不同的规则约束,如线的宽度、角的曲率、间隔数值、笔画倾斜角度与视觉修正等等。这章篇幅也过长了,我就把这些内容分为两章来讲。这章主要讲解系统图标的基础认知,下一章讲解系统图标的解析与局部细节的掌控。

undefined

总结

结尾我想与大家分享一下新的感悟。我们生活在三维(长宽深)的物质世界中,能感知到的全部都是“物质”形态,所以才会重视物质,渴望体验物质上的需求来慰藉精神所需。正因为我们处于三维世界中,而感知不到其他维度,也不会存在其他维度的认知,我们才会深陷于物质世界中。

最近我在想一种设想,人是由“意识”和“肉身”构成的,例如我们在睡觉或者冥想,我们的肉身是静止不动的,而意识却在发生变化,所以我觉得肉身与意识本是一体却不分离。那有没有一种可能,我们用一种方法来训练或者提升我们的意识,让我们的意识去感知万物。人的肉身和科技是无法穿越时空来揭开宇宙奥秘的,但意识不同,人是否能使意识脱离本体来打破三维的约束,进入到五维空间(意识体),是不是就可以利用人的意识去控制四维时空(时间),就可以凭意识穿越到任何一个时间点,这样就能解开宇宙的奥秘与人类的起源了呢。

我目前就有这么一个设想,为了找到我想要的答案我就查找了一些宗教知识,发现很多知识与我的设想都不谋而合,也找到了一个关键词“灵修”,灵修的目的就是让人的意识从三维世界中脱离出来,并进入更高维度的空间中,只是称呼不一样。但我对这些知识的理解较为浅薄,如果看到我的文章,且对这方面有兴趣的朋友,可以在主页中查找到我的微信,加好友并讨论。

 收藏