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

 

材料主题化是指你材料设计App的自定义,它可以更好地展示你的产品品牌。

 

目录

材料主题化

使用材料主题化

 

材料主题化

 

什么是材料主题化?

材料主题化能通过系统地自定义材料设计来帮助你更好地展示产品品牌。

当你开始改动UI的各个元素(例如颜色和排版)时,材料主题工具会将你的设计愿景应用到用户体验中。通过为所有可自定义属性提供特定值,这些工具能让你在设计和代码工作之间轻松切换。要为你的产品创建材料主题,自定义这些属性值即可。

 

使用材料主题化

材料主题包含三个主要操作:自定义主题,在设计原型中应用它并用代码实现它。

材料设计有一个内置的基本主题,可以直接照原样使用。此外你也可以根据喜好对其自定义,使之适配你的产品。

 

使用材料主题化

实践中的主题

主题影响整个UI,包括单个组件,如按钮。此示例显示如何大开脑洞自定义按钮组件的属性值。

 

自定义:前后对比

为实心按钮设置特定颜色、形状和字体。默认情况下,实心按钮具有以下默认值:

  1. 颜色为#6200EE
  2. 文本是14pt、Roboto、Medium、全部大写
  3. 圆角半径为4dp

 

你可以调整此实心按钮的默认颜色、类型和形状以适配你的App样式。

左边是默认样式的材质按钮。右边则是更改了属性值的完全自定义的按钮。

默认值和自定义值

按钮具有以下属性和默认值,此示例的自定义值以粗体表示。

 

文本

元素

类别

属性

默认值

自定义值

文本标签

按钮(BUTTON)

字体

字型

大小写

字号

Roboto

Medium

全部大写

14pt

Rubik

Medium

全部大写

14pt

 

颜色

元素

类别

属性

默认值

自定义值

容器

主色

颜色

不透明度

#6200EE

100%

#FEDBD0

100%

文本标签

主色之上

颜色

不透明度

#FFFFFFF

100%

#442C2E

100%

图标

主色之上

颜色

不透明度

#FFFFFFF

100%

#442C2E

100%

 

图标

元素

类别

属性

默认值

自定义值

图标

图标集

图标类型

图标

实心

线框

购物车

 

形状

元素

类别

属性

默认值

自定义值

容器

小组件

左上角

右上角

右下角

左下角

圆角半径 4dp

圆角半径 4dp

圆角半径 4 dp

圆角半径 4 dp

切角半径 4 dp

切角半径 4 dp

切角半径 4 dp

切角半径 4 dp

粗体字表示自定义的值。

 

原文地址:Material Design

译者:珠珠

 

转载请注明:学UI网 » Material Theming Overview 材料主题概述

登录收藏
 
你可能喜欢的:
还在靠感觉做界面设计?来了解下格式塔,怎么套公式做设计还在靠感觉做界面设计?来了解下格式塔,怎么套公式做设计
产品细节剖析,让你看看大厂是如何做设计的05产品细节剖析,让你看看大厂是如何做设计的05
导航栏该如何设计?导航栏该如何设计?
老虎帮学员作品公开老虎帮学员作品公开
没想到这个设计这么简单,效果却这么好!没想到这个设计这么简单,效果却这么好!
58的系统性设计,让我收获不小58的系统性设计,让我收获不小
【蓝湖有方】如何做出有效的设计,让产品又好看又好用?【蓝湖有方】如何做出有效的设计,让产品又好看又好用?
初探运营活动故事化体验设计初探运营活动故事化体验设计
产品细节剖析,让你看看大厂是如何做设计的04产品细节剖析,让你看看大厂是如何做设计的04
挖掘服务链路中的体验设计机会点挖掘服务链路中的体验设计机会点