【MD规范】1.1-Material Design设计案例讲解-Basil

Basil是一个菜谱app，使用了MD设计组件和主题创造了一个令人激动和易于探索的品牌体验。

目录

·      关于Basil

·      产品解构

·      布局

·      色彩

·      排版

·      图标

·      组件

·      动效

关于Basil

Basil为用户提供一道道由主厨和调味大师准备的菜谱。App的设计和品牌一样十分具有亲切感，并且充满了简明和令人喜悦的内容。

有趣但实用的美学

Basil采用了大胆的排版和用色搭配简单的内容，创造了一个让人乐于探索且易于使用的app。

产品解构

Basil应用的信息架构有一个目录组织，目录包含分类，层级数据和几个呈现不同数据的顶级频道。

四个顶级频道

Basil应用根据菜谱的分类不同提供了四个顶级频道：开胃菜，主菜，甜点和鸡尾酒。每一个频道里都罗列了大量的菜谱，包含两个子模块：配方和工序。

一种新颖的导航方法

虽然导航抽屉通常用于目录组织，但Basil的交互模型使用了许多组件来创造一种新颖且有时令人惊讶的体验。

Basil在平板、手机和电脑上的显示

电脑和平板上的导航

在电脑和平板上，Basil的主要内容可以通过固定的标签访问。在电脑上可以使用垂直滚动条浏览每个章节的内容，平板上则使用水平滚动条。

在电脑上，Basil的主菜部分的内容可以垂直滚动。缩小至50%的显示。

选择菜谱后，使用Tabs（选项卡）在配方和工序之间切换。使用自定义Stepper（步进器）组件显示步骤。

在平板上，Basil的菜谱详情屏幕也使用了选项卡和步进器。

手机导航

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

Basil的navigation drawer（抽屉导航）

选择一个部分之后，水平滑动切换菜谱。

选择菜谱之后，可以点击底部选项卡查看配方和工序。

选择其中一个选项卡后，底部表单动画呼出直到充满屏幕显示相关内容。在该表单中，用户可以在配方和工序之间切换，或者向下滑动关闭表单。

在手机上，你可以在底部表单找到菜谱的配方和工序

布局

网格化系统

Basil使用响应式网格化系统，可以根据屏幕尺寸灵活调整列数和间隔的尺寸。

Basil采用内容居中的布局形式。

Basil的网格系统，缩小至50%。

Basil的标题也会根据手机屏幕尺寸调整字体大小。

菜谱的标题大小根据屏幕宽度动态调整

菜谱的标题大小根据屏幕宽度动态调整

高度

Basil不使用投影表示两个元素之间的高度差，而是通过视差动效与不透明度来区分内容所处的不同高度。

通过视差动效可以区分这三个图层各不相同。

Basil通过透明度来显示UI元素图层的不同高度。

这个稍微透明点的底部呼出表单，可以让用户约略看到下面的菜谱内容。这个叠加的图层向用户表明他们没有跳转到新的页面，用户可以可以操作这个呼出表单的内容。

当文本在图片上滑动时，图片上覆盖一个有色蒙板可以确保文字的可读性。

蒙板处理

颜色

Basil从水果和蔬菜中获取灵感，采用了热烈且丰富的色彩主题。

·      Basil的主色调是橄榄绿

·      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字体的比较

Icon

Basil采用简洁、富有想象力的自定义icon，更加容易地呈现内容。

1.为了创建一致性，Basil所有的icon都使用相同的底层网格结构。

2.Basil的icon集。

Basil的icon使用主色调（橄榄绿）。辅助色（橘色）用在表示不包含某种食物类型时（如麸制品或乳制品）。

Basil的辅助色被用来说明菜谱中的麸制品和鸡蛋是自选的。

组件

列表

Basil使用列表控件显示每个菜单的配方。所有列表使用Basil的排版和icon，配方与用量使用点线连接。

Basil自定义列表

底部表单

在手机上，Basil使用一个扩展的底部表单提供菜谱的配方和工序。

点击标签之后向上呼出一个全屏的表单覆盖在内容上面。在表单上用户可以在配方和工序之间进行切换。

表单的背景轻微透明，让用户可以知道表单是位于生成它的屏幕上方，并且用户是随时可以关闭该表单。

Basil可扩展的底部表单

标签

在电脑和平板上，Basil使用标签在各个部分之间进行导航。标签在固定宽度区域上均匀分布，该区域与屏幕中心对齐。

Basil在电脑和平板上使用自定义的标签进行导航，缩小至62.5%。

1.一个标准的tab

2.Basil在电脑和平台上的导航标签使用了自定义的排版、颜色和状态。通过增加文本的粗细来表示选中状态。（缩小至62.5%）

在手机上，用户可以通过选项卡在菜谱的配方和工序之间进行切换。默认情况下，标签显示在菜谱页面的底部。选择后，他们会移动到屏幕的顶端并且允许用户在两个标签之间进行切换。

菜谱的内容标签最初是在屏幕的底部（如1）。当点击后，他们移到了屏幕的顶部，并且允许用户在两个标签之间进行切换（如2）。

1.标准的标签样式

2.Basil的菜谱标签使用了自定义的排版、颜色、和状态。自定义的选中状态加粗了字体并且在底部加粗了线条。

步进器

Basil的菜谱工序使用了非线性的步进器组件，用户可以在不同的工序之间任意选择。Basil的竖直步进器使用了自定义的排版和色系。

（1）Basil对选中的步进器节点使用放大聚焦，放大至200%。

（2）Basil的步进器显示在屏幕的右边。

Basil的步进器节点使用了伸缩动效表现出灵活的风格。

动效

启动页

Basil应用的logo动画使用了视差效果。底部的闪烁箭头鼓励用户进行点击探索。

当启动Basil的时候，有一个logo动画进行展示。

导航过渡

在浏览应用程序时，Basil使用了强调缓和、视差和压缩过渡。

手机

在过渡中使用视差效果表明不同元素的高度增加了视觉的趣味性

移动设备上的导航过渡利用了视差动效

平板和电脑

在平板和电脑上，Basil使用压缩过渡保持效果的简洁。Z轴上的平移和淡入淡出动画组合创建了一个压缩过渡。

在平板和电脑上单击菜谱缩略图时父子场景的过渡被压缩在一起。

伸缩

像步进器这样的组件使用了伸缩动效，在进行交互时，增加了意想不到的愉悦感。

当用户在不同节点进行切换时使用伸缩动效