Material Design之图标设计

移动开发 Android
系统图标或者UI界面中的图标代表命令、文件、设备或者目录。系统图标也被用来表示一些常见功能,比如清空垃圾桶、打印或者保存。

图标-系统图标

定义

系统图标或者UI界面中的图标代表命令、文件、设备或者目录。系统图标也被用来表示一些常见功能,比如清空垃圾桶、打印或者保存。

系统图标的设计要简洁友好,有潮流感,有时候也可以设计的古怪幽默一点。要把很多含义精简到一个很简化的图标上表达出来,当然要保证在这么小的尺寸下,图标的意义仍然是清晰易懂。

SystemIcons icon

设计原则

展示一些黑体的几何形状。

一个简洁的黑体图形在采用对称一致的设计时,一样能够拥有***的品质。

DesignPrinciples1 icon

DesignPrinciples2 icon

DesignPrinciples3 icon

DesignPrinciples4 icon

 

网格、比例和大小

图标网格是所有图标的基准网格并且具有特定的组成和比例。图标由一些对齐图标网格的平面几何形状组成。基本的平面几何形状有四种,具有特定尺寸以保证所有图标有一致的视觉感和比例。 两种形状相同尺寸不同的图标集供您在应用程序中使用:状态栏、上下文图标集和操作栏、桌面图标集。

GridProportionSize1 icon

GridProportionSize2 icon

GridProportionSize3 icon

GridProportionSize4 icon

GridProportionSize5 icon

GridProportionSize6 icon

圆角

正方形和矩形都应该添加圆角,也可以同时使用圆角和尖角,这样更具凸凹感。所有由笔划或线条组成的图标都有尖角。

RoundCorners1 icon

RoundCorners2 icon

RoundCorners3 icon

RoundCorners4 icon

每一个尺寸的系统图标集使用不同大小的圆角以保证视觉的一致性。

RoundCorners5 icon

RoundCorners6 icon

一致性

一致性非常重要,尽可能使用系统中提供的图标,在不同的app中也一样。

Consistency1 icon

Consistency2 icon

上下文和应用中的图标

图标网格决定了图标位于一个固定大小(24dps)的区域内。

IconsinApplication1 icon

IconsinApplication2 icon

原文:Icons 翻译:Haoxiqiang 校对:cxytomo

责任编辑:闫佳明 来源: design.1sters
相关推荐

2014-12-08 13:40:10

Material De色彩

2014-12-08 15:03:17

Material De图像

2014-12-08 14:15:48

Material De字体排版

2018-04-25 09:06:32

Chrome浏览器语言

2014-09-10 10:35:11

Material De设计原则

2014-08-19 16:10:05

Material DeUI设计趋势

2014-08-21 15:40:53

Material De真实动作

2014-08-21 15:29:29

Material De概述

2014-08-11 11:19:19

Material De

2014-08-07 14:19:46

Material DeGoogle

2015-07-21 15:02:37

设计扁平

2014-07-02 10:26:52

Material DeGoogle

2014-08-07 10:13:43

谷歌Material De设计规范

2014-07-22 10:44:21

Material De

2017-02-14 13:35:15

AndroidMaterial De动画

2014-10-27 14:18:06

Material De交互响应

2015-08-07 10:24:17

AndroidMaterialDes

2014-06-26 10:21:04

Material DeSwift

2016-01-31 13:50:55

Material DeChrome浏览器

2016-02-02 10:03:15

chromeMaterial De
点赞
收藏

51CTO技术栈公众号