相关分类
photoshop教程
Illustrator教程
CorelDraw教程
painter教程
Indesign教程
UI设计教程
sketch教程
设计理论
飞特网 顶部通栏广告

系统图标(二) - 图标分解Material规范

心蓝发布于:2019-11-27 09:32 |原作者: 罗耀_UI|
心蓝
上海市 徐汇区 设计爱好者
发私信 + 关注
简介: 文章的大体规则由谷歌的Material Design制定的,很多细节部分我是根据个人经验来解析的

版权申明:本文出自"罗耀_UI"原创,感谢"罗耀_UI"的原创文章分享!

前两篇文章讲到了谷歌的Material Design图标规范。谷歌的Material Design图标规范分为:产品图标系统图标。系统图标比较复杂,分为上下两章来讲,第一章主要讲系统图标的基础认知,第二章讲系统图标的绘制方法与解析。今天讲一下系统图标的图标分解,以及一些绘制细节。

谷歌规范相对过于范式化,他们只告诉大家界面的大体规范,而具体里面的为什么要这么做完全没有讲,思维和思考一点没提。很多细节都是自己根据自身经验去做的补充,很多细节也都有相应的描述,希望能帮助到大家提升些设计认知吧。

目录

1. 系统图标 - 结构

1.1 什么是轮廓

1.2 什么是形状

1.3 外路径

1.4 主路径

1.5 内路径

1.6 笔画

1.7 圆角曲率

1.8 内部区域

1.9 边界区域

2. 系统图标 - 规范

2.1 视觉修正

2.2 曲率的统一性

2.3 去立体化

2.4 避免复杂化

2.5 避免生硬感

3. 绘制系统图标

3.1 确定图标尺寸

3.2 确定轮廓与关键线

3.3 绘制主轮廓 - 粗细

3.4 绘制主轮廓 - 曲率

3.5 绘制主轮廓 - 开口

3.6 绘制内路径 - 箭头

3.7 完成绘制

FEVTE编注:更多UI设计教程,和UI设计理论知识请访问飞特网UI设计教程栏目:https://www.fevte.com/plan/UIdesign/

1.系统图标 - 结构

当我们把系统图标的结构分解后,就会发现一个系统图标是由很多个细小构件组成的,这些构件分别有自己的名字和用途,分别是外路径、主路径、内路径、笔画、圆角曲率、内部区域、边界区域,谷歌将它们称为"笔画末端、拐角、内部区域、笔画、内部笔画、边界区域",这些原始的构件名真的太难理解了,我就根据自身理解重新来进行命名了。另外有一些构件的用途与用法谷歌没有讲,我也是根据自身理解来进行讲解的。每一个图标组成部分都是由其相对应的规范去约束它们,我会试着把它们都讲明白,来方便大家去理解它们。

1. 外路径 - 超出整体形状之外的路径

2. 主路径 - 整体的形状(主要的轮廓)

3. 内路径 - 内部的形状(不包含负形)

1/3. 笔画 - 产生路径基本点的方向、粗细和角度

4. 圆角曲率 - 所有形状的曲率

5. 内部区域 - 图标内部的空白区域

6. 边界区域 - 图标的尺寸形成的边界域

这里大家理解不了构件的概念也没有关系,接下来我会一个点一个点的进行讲解。

系统图标(二) - 图标分解Material规范 飞特网 设计理论

1.1 什么是轮廓

轮廓指的是图标周围的外框。图标的轮廓被图标的性质影响并支配着,图标的性质被定义下来,这个图标的轮廓也会随之定义下来。例如"日历图标"在我们的认知中它是与纸张和装订孔联系在一起,纸张是有棱角的、方形的形状,而装订孔是圆润的、圆形的形状,所以日历图标的主轮廓是"方形"的,而不是三角形或是认知外的其他的形状,想表现图标就要还原这个图标的本质,如下图所示。

系统图标(二) - 图标分解Material规范 飞特网 设计理论

1.2 什么是形状

形状指的是图标中所有形式的构成,如长方形、三角形、圆形等。一个图标是由很多个形状构成的,例如一个非常简单的"插图图标",整体是由正方形和圆形构成的,里面的"山"是由三角形和圆角构成的,这些简单的形状整合在一起就会变成形式复杂的图标,并转变为象征性的图形,使整体赋予了新的意义。

系统图标(二) - 图标分解Material规范 飞特网 设计理论

插图图标中的"山"也是由形状(三角形和圆角)构成的。正因为图标中的形状可以根据需求进行任意的搭配,才会使图标具有无穷变化的属性。也正因为形状的变化,才能使图标的视觉语言发生不同的变化。

系统图标(二) - 图标分解Material规范 飞特网 设计理论

1.3 外路径

超出主要轮廓之外的路径是外路径。我们在设计一个图标时会实现考虑好它的轮廓,再根据它的轮廓绘制大体的形状,而超出大体轮廓之外的部分点组成的路径就是外路径了。因为形状是由路径的基本点构成的,外路径不一定是由正规的形状(方形、圆形、椭圆形等)构成的,也会有几条线段、几个角等不规则形状和路径构成的。

系统图标(二) - 图标分解Material规范 飞特网 设计理论


25

好评
12

差评

刚表态过的朋友 (37 人)

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

心蓝
上海市 徐汇区 设计爱好者
+关注 发私信
  • 远离侵权深“坑”,规范字体应用
  • 原子设计理论——实践
  • 原子设计理论——概念
  • 你的后期是亡羊补牢,还是锦上添花?
  • 系统图标(二) - 图标分解Material规范
  • 系统图标 - 基础认知 Material 规范

最新评论

您需要登录后才可以评论和提交作业 登录 | 立即注册
本周热点文章
2020 新飞特 从心开始
  • 我们一直在进步...
  • 2022年3月27日,飞特派单系统第三次升级调整结束,订单匹配更快、更精准.
  • 2022年3月飞特派单系统日均派单量超过20单.
  • 2022年1月1日飞特系统派单数量达到2013单.
  • 2021年11月1日飞特需求方订单数量增长超过200%.
  • ...