这是一个翻译系列,原文是谷歌18年所出的材料设计指南(文末有链接),强大的材料设计将带我们一起深入了解UI设计中的所有规范。每周会更新数篇,一共百余篇,欢迎关注哦。

 

以下方法可用于自定义颜色、文本和形状。还有五种独特的图标选择方法。

 

目录

颜色

文本

形状

图标

 

颜色

颜色系统支持12种颜色,可应用于组件、文本、图标和表面。

  1. 主色
  2. 主色变体
  3. 辅色
  4. 辅色变
  5. 背景
  6. 表面
  7. 错误
  8. 主色之上
  9. 辅色之上
  10. 背景之上
  11. 表面之上
  12. 错误之上

 

颜色的主题

要将材料颜色主题化,首先选择合适的颜色用于UI。可以通过多种方式选择颜色:

  1. 颜色选择内嵌工具生成颜色
  2. 从材料调色板的和谐配色方案中选择颜色

 

主色和辅助色

在用户界面的关键之处谨慎选用主色。通常选择能够代表你的品牌的配色。

主色体现在诸如应用栏和按钮的组件和元素中。辅助色最常用于强调如FAB和选择控件等组件。

最后,变体的颜色也可作为备选用于补充主色和辅助色。

 

表面、背景和错误提示颜色

表面、背景和错误提示颜色通常不代表品牌色。

通常,它们占据UI的以下区域:

  1. 表面颜色体现在卡片、面板和菜单等组件
  2. 背景颜色用在可滚动内容后面
  3. 错误提示颜色提示组件中的错误,例如文本字段

 

“之上”色

应用中的元素颜色选自于你调色板中特定的类别,例如主色。每当其他屏幕元素(如文本或图标)出现在使用这些颜色的表面之前时,这些元素应使用专门设计的颜色,以清晰地从其背后的颜色中脱颖而出。

这类颜色被称为“之上”的颜色,是指带这些颜色的元素有时会置于使用主色、辅助色、表面颜色、背景颜色或错误提示颜色的关键表面之前。给这些原始类别名称(例如主色)标以“之上”的后缀。

“之上”的颜色主要用于文本、图标和边框。有时也用于表面。

 

“之上”色命名

类别

类别“之上”

主色

主色之上

辅助色

辅助色之上

表面

表面之上

背景

背景之上

错误提示

错误提示之上

“之上”类颜色应用于出现在:主色、辅助色、表面颜色、背景颜色或错误提示颜色之前的某些文本和图标(有时是表面)。

 

文本

字体系统有13类字体,这些类别在组合时形成字体格式。从正文到按钮,这种方案很明显体现在界面中的各种文本样式和尺寸中。字体无所不在:如在组件和表面中。

文本属性由自定义值控制,可以自定义字体、字型,大小写,字号和字距。

 

主题化方法

自定义并应用文本

有多种方法选择文本:

  1. 使用“材料主题编辑器”从本地系统的字体生成字体风格,然后将其应用于平台
  2. 从Google Fonts中选择体现你产品的字体

 

标题(Headlines)

Headlines1-6是字体格式中最大的尺寸。它们仅用于简短但有影响力的文本,也用于数字。

 

副标题(Subtitles)小于标题(Headlines)。它们通常用于较短文本字符串中的中等强调文本。

 

正文(Body)和较小的文字

正文(Body)1-2通常用于长段文字。它应适配小字号文本。

 

说明(Caption)和上划线(OVERLINE)是最小的字体。它们偶尔用于注释图像或简要介绍标题。

 

按钮(BUTTON)字号通常用于文字按钮,线框按钮和实心按钮。

 

形状

形状系统目前支持两类形状,可运用在组件的角上,来适配你的品牌和App:圆角或切割的角。

  1. 圆形状的角是有曲度的
  2. 切割的形状的角是直角

这些形状运用在组件的角上时,可以对称(所有角都形状一致)也可不对称(并非所有角形状都一致)。这些角都可以自定义。

1.圆角(0dp),2.圆角(4dp),3.圆角(16dp),4.圆角(24dp)

放大了500%。1-3的高度为36dp,4的高度为64dp。

 

1.切割角(0dp),2. 切割角(2dp),3. 切割角(8dp),4. 切割角(12dp)

放大了500%。1-3的高度为36dp,4的高度为64dp。

 

形状主题化

使用“材料主题编辑器”更改UI组件的形状。可以修改形状以适配你的品牌和应用,例如把形状从尖锐调到圆润,以及进行切割。

 

锋利类和属性覆盖

组件按照他们尺寸被归类。每当一个类的属性值(而非某一个组件)发生变化,该类下的所有组件都相应变化。

某个类下的某个特定组件的值可以单独发生变化,而不是永远保持该类的属性值不变。

 

圆角

卡片、菜单、Snackbar、工具提示、对话框和按钮等组件半径为4dp。

1.放大2000%,2.放大400%

 

最圆的组件的圆角半径为50%,例如药片形状的纸条和圆形的FAB。

1.放大2000%,2.放大400%

 

1.放大2000%,2.放大400%

 

方形角

方形角的组件,角曲率为0dp,例如全屏底部动作条的角就是方形,或者说,90度。

0dp的切割角和0dp的圆角也都属于方角,可以互换使用。

1.放大2000%,2.放大400%

 

切割的角

组件的角可以被45度切割。这些角的切口长度不一,从0dp到完全切割组件的侧边不等。

1.放大2000%,2.放大400%

 

例如,较大的表面如卡片可能切割得较大,而按钮可能切得较小。

先考虑品牌设计、组件尺寸,以及需要的易读面积,再确定每种元素的最佳切割尺寸。

1.放大2000%,2.放大2000%

 

图标

  1. 填充型
  2. 锋利型
  3. 圆型
  4. 线框型
  5. 双色型

 

除了原始的填充材料设计图标外,还有四个额外的图标主题可用。应在整个App中图标主题要一致以保持视觉一致性,不要在单个用户界面中混合多种图标主题。

 

图标主题化

从五个不同的图标主题中选择一个:

  1. 填充型图标
  2. 锋利型图标
  3. 圆型图标
  4. 线框型图标
  5. 双色型图标

 

图标类型

填充型图标

填充型图标是原始的材料图标主题。

1.网格结构,2.填充型图标示例

 

锋利型图标

锋利型图标去掉了填充型图标的圆角半径。

1.网格结构,2.锋利型主题示例

 

圆型图标

圆型图标与填充型图标的外圆角半径都是2dp。此外内描边、内圆角和内部区域半径为1dp。

1.网格结构,2.圆型图标示例

 

线框型图标

线框型图标集去掉了大部分填充,将大多数图标转换为2dp笔画,减轻了视觉重量。这些也可用于表示状态,例如将它与填充图标组合以显示选定状态。

1.网格结构,2.线框型图标示例

 

双色型图标

双色型图标的边框和填充颜色相同但不透明度不同。

1.网格结构,2.双色图标集示例

 

原文地址:Material Design

译者:珠珠

转载请注明:学UI网 » Implementing your theme 实施主题

登录收藏
 
你可能喜欢的:
这些手势交互你关注到了吗?这些手势交互你关注到了吗?
业务想大多全,用户要精准简,首页设计该如何破局?业务想大多全,用户要精准简,首页设计该如何破局?
案例锦囊|交互设计中「情感化」设计优秀案例(二)案例锦囊|交互设计中「情感化」设计优秀案例(二)
这个练习虽然已经不错了,但我觉得还可以有以下几点能优化!这个练习虽然已经不错了,但我觉得还可以有以下几点能优化!
iOS 规范与 Material Design 哪里不同?官网总结了这几点iOS 规范与 Material Design 哪里不同?官网总结了这几点
百度这一局改版,内容导向设计做得真行!百度这一局改版,内容导向设计做得真行!
微信生态中的设计(上) | 设计师如何通过生态视角找到设计优化点?微信生态中的设计(上) | 设计师如何通过生态视角找到设计优化点?
酷家乐优秀设计频道改版酷家乐优秀设计频道改版
如何用新风格引爆业务增长如何用新风格引爆业务增长
一局APP首页 改版设计分析一局APP首页 改版设计分析