Material Design Basil

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

目录

关于Basil
产品架构
布局
颜色
排版
图标
组件
动效
 
Basil是一款
食谱
应用程序，它使用材料设计组件和材料
主题来创建令人兴奋且易于探索的品牌体验。

 

关于Basil

Basil使用户浏览由厨师和调酒师策划的食谱。
它的品牌和应用程序
设计
得
平易近人，
直截了当并且充满了让
人愉快的惊喜。

 

时髦而实用的美学

Basil的大胆排版和色彩，搭配着简单易得的内容
，
创造了一个让人想要
探索
并且
易于理解的应用程序
。
 

产品架构

Basil应用程序的信息架构具有目录结构。 目录包含分类的层次信息，目录顶层由包含了从属信息的同级节点组成。

四个顶级部分
Basil的应用程序分为四个顶级部分，涵盖不同类型的食谱：开胃菜，主菜，甜点和鸡尾酒。
其中每个
食谱
都包含
多种
配方，
这里主要有
两个子部分：
食材和方法
。
 
一种新颖的导航方法
虽然导航抽屉通常用于目录结构，但Basil的交互模型使用了许多组件来创建一种新颖且有时令人
惊喜
的体验。

 
Basil在
桌面
端
，平板和手机上
的界面

桌面端和平板上的导航

在桌面和平板电脑上，Basil的主要部分可通过
固定标签
访问。 在桌面设备上以
垂直滚动
方式
浏览
每个部分
，
平板上以
水平滚动
方式
浏览。

在桌面上，Basil的主菜部分垂直滚动，已缩小至50％。

在平板电脑上，通过水平滚动浏览Basil的主菜部分，已缩小至
50％。
 
选择配方后，使用选项卡在
食材和方法
之间切换。使用自定义步进
器
组件显示方向。
​
在平板电脑上，这款Basil详细配方页面使用标签和
步进器
。
 

移动导航

在移动设备上，可以通过向下滑动
以
显示导航抽屉
来访问Basil的主要部分。

Basil的抽屉式导航

 

选择一个
类别
后，水平滚动
来
浏览其中的
食谱
。

选择配方后，底部的选项卡可以访问食材和方法。

 

选择其中一个选项卡后，底部工作表会向上设置动画以使用选定内容填充屏幕。
该
表中，用户可以在此工作表上的
“
食材
”和“
方法
”
之间切换，或向下滑动以将其移出屏幕。

移动
设备上，可以在底部卡片中找到特定食谱的
食材和方法
。

 

布局

网格系统
Basil使用响应式网格系统，它具有灵活的列和内
边距，可根据屏幕宽度（如桌面，平板和手机）调整大小。
Basil的居中对齐 – 将部分类型内容放进网格布局。

Basil的网格系统，已缩小至
50％。
 
Basil的标题
自适应字体大小
以填充手机屏幕的宽度。

 

海拔

Basil不使用阴影来显示UI元素之间的高度。 相反，内容被放置在不同的高度，这些高度使用视差运动和不透明度来区分。

这三层看起来彼此不同，并且可以通过视差运动来区分。

 

Basil通过使用透明度来显示高度差异，以显示UI元素的堆叠层。

这个稍微透明的底部工作表在屏幕上显示动画，允许用户查看其下方的主食谱界面
。 这些堆叠的图层向用户显示他们没有导航到新
界面
，而是与他们刚刚查看的内容之上的工作表进行交互。
 
当文本在图像上方滚动时，双色调图像处理可确保文本保持清晰。

双色调图像处理
 

颜色

 
颜色主题
Basil采用色彩主题，灵感来自水果和蔬菜的深色和丰富色彩：

1. Basil的主色是橄榄绿
2. Basil的辅助色是橙色

Basil的颜色主题

 

排版

字样

1. Montserrat
2. Lekton

字体比例
Basil的字体比例
使用两种字体：Montserrat和Lekton。 这两种字体创造了特别的对比，增添了Basil的特色。

​Basil的字体比例

 

Montserrat

Montserrat
是一种较宽的
无衬线字体，字体宽
。 Basil使用它作为
展览
字体
，以及正文，标题和按钮文本。

Montserrat的字形

 

​
Montserrat和Roboto的对比
 
Lekton
Lekton的灵感来自于Olivetti打字机中使用的一些字体。 字形是“三维空间”，意味着它们都是使用相同的三个模块单元构建的。 字体具有可预测的字符垂直对齐方式，类似于等宽字体。 Lekton用于Basil较小的标题和副标题
。

Lekton的字形
​
Lekton和Roboto的对比

​

图标

Basil的自定义图标采用简单，
诙谐的特性
，
有助于
内容更加平易近人。
​

1. 为了创建一致性，Basil的所有图标共享相同的底层网格结构。
2. Basil的图标集

Basil的图标使用其
主
色
（橄榄绿）。 Basil的
辅助
色
（橙色）
在图标中则
用于指示是否不包
含某类
食物（如麸质或乳制品）。

Basil
的
辅助
色（橙色）用于表示
该
食谱
不含
麸质和乳制品
。

 

形状

分类
 
组件根据尺寸分类为形状组。这个分组让你整组一次性完成设置数值。形状分类包括：

1. 小组件
2. 中等组件
3. 大型组件

​​
Basil的形状分类

 

1. 小组件
2. 中等组件
3. 大型组件

 
小组件
工具提示组件
的圆角半径是0dp。

 

组件	分类	属性	数值
工具提示	小组件	拐角尺寸	圆角 0；0；0dp

 

中等组件
菜单组件的圆角半径是0dp。

​​

组件	分类	属性	数值
菜单	中等组件	拐角尺寸	圆角 0；0；0dp

 

大型组件
默认底部动作条（处于折叠状态）的顶部拐角为0dp。

组件	分类	属性	数值
默认底部动作条	大型组件	拐角尺寸	圆角 0；0；n/a;n/a dp

＊底部动作条只能
自定义左上角和右上角的拐角。

 

组件

列表
Basil使用列表组件显示每个食谱的成分。 每个列表都使用Basil的排版和图标，通过一
行圆
点来
连接
每个
食材
与
其
数量。

Basil的自定义列表

 

底部动作条
在移动设备上，Basil使用扩展的
底
部动作条
来
展示
食谱的
食材和方法
。
点击标签后，内容前面会出现一个全屏幕
动作条
。 用户可以在此
动作条
上切换
食谱的食材和方法
。
动作条
的背景具有轻微的透明度，让用户知道
动作条
位于生成它的
界面
上方，并且用户可以随时关闭
动作条
。

Basil的扩展底部动作条

 

tab选项卡
在桌面和平板电脑上，Basil使用
tab选项卡
在各个部分之间导航。
tab选项卡
在固定宽度区域上均匀分布，该区域与界面
中心对齐。
​
Basil使用自定义选项卡在桌面和平板电脑上进行导航，已缩小至62.5％

 

​​
1.
标准
选项卡
2. Basil的桌面和平板电脑导航
选项卡
使用自定义排版，颜色和状态。 自定义选定状态将文本更改为较重的字体粗细。 （
已缩小至
62.5％）
在移动设备上，选项卡允许用户在
食谱的食材和方法
之间切换。 默认情况下，这些选项卡显示在食谱界面
的底部。 选择后，它们会移动到
界面
顶部并
附
着到允许用户切换的界面上
。

 

​​
食谱
详细信息选项卡首先显示在
界面
底部（1）。 点击时，它们会移动到
界面
顶部，
允许用户在
(2)
之间
互
换。
​

1.标准
选项卡
2.Basil的食谱标签使用自定义排版，颜色和状态。 自定义选定状态包括所选标签文本下的笔划，该笔划也会更改为较重的字体粗细。

 

步进器
Basil
的食谱说明使用非线性的步进器
，因此用户可以按照他们想要的任何顺序在不同步骤之间
切换
。
步进器
使用Basil的排版和配色方案，以及
自定义
的垂直间距。

（1）Basil使用放大倍数聚焦于激活的步进器，放大到200％
（2）Basil的步进器出现在界面
的右侧。
 

Basil在
步进器
上使用弹力运动表现出弹性风格。

 

动效

启动页
Basil的
logo
动画在整个应用程序中使用视差
动效
。底部箭头的微妙过冲鼓励用户垂直导航和
浏览
。

启动Basil时，会显示logo
动画。
​​

导航转换

在浏览应用程序时，Basil使用强调
缓动
，视差和
精简转换
。
移动
视差用于
表示
元素之间的高度
并在过渡期间添加
视觉
效果
。

移动设备上的导航
转换
利用了视差。

 

平板电脑和桌面
在平板电脑和台式机上，Basil使用
精简转换
来保持
简单和干净。
在
z轴
上用
平移与淡入淡出动画组合
以
创建压缩
转换
。

单击
食谱
时
，在
平板电脑和桌面上
进行精简的
父子转换。
​​
伸展
步进器
这样的组件使用拉伸运动为简单的交互添加意想不到的
愉悦气氛
。

步进器
在步骤之间转换时使用
弹性动效
。

 

原文：Material Design