Basil

Basil 是一个点餐 App，它使用了 Material Design 组件和 Material Theming 来创建令人兴奋且易于探索的品牌体验。

一. 关于 Basil

Basil 允许用户浏览由一群厨师和调酒师制定的菜谱，其品牌和应用程序设计为平易近人、直接并充满惊喜。

时髦并且实用的美学

Basil 使用醒目的字体和颜色，内容简单直接，创建了一个令人兴奋，易于理解的应用程序。

二. 产品架构

Basil 应用程序的信息结构是目录结构，每一个目录包含了一个顶层菜单和其下对应的从属数据。

四个顶层元素

Basil 的应用程序划分完四个顶级菜单，涵盖了不同类型的食谱：开胃菜、主菜、甜点和鸡尾酒。其中，每一个都包含许多食谱，每个食谱再细分为两小节：配料表和制作方法。

一种新颖的导航方式

尽管导航抽屉经常用于目录结构，但 Basil 的交互模型使用了许多组件来创建新颖并令人惊讶的体验。

PC 和 平板电脑导航

在 PC 和平板电脑上，可以通过永久化标签（persistent tabs）访问 Basil 的主要内容。在 PC 上以垂直滚动的方式浏览菜谱、在平板电脑上以水平滚动的方式浏览。

PC 上，元素垂直滚动排列 平板电脑上，元素水平排列

当选中食谱后，使用 Tab 页划分配料表和制作方法，制作方式使用定制的步进器（stepper）组件展现。

移动设备导航

在移动设备上，向下滑动以显示导航抽屉，向上滑动显示 Basil 的主题内容。

当选中一个顶层菜单后，可以水平滚动页面浏览其中的食谱。

当选中某个食谱后，底部的 Tab 页可以访问配料表和制作方法。

当选中 Tab 页的选项卡时，底部会弹出一个页面，将所选内容填充整个屏幕。在这个页面中，用户可以在配料表和制作方法间来回切换，或者向下移动移出屏幕。

三. 布局

网格系统

Basil 使用了自适应网格系统，该系统可以根据屏幕宽度（例如移动设备、平板电脑或 PC）自动调节列（Column）和填充（Padding）的大小。Basil 的文本使用中心对齐。

Basil 的标题会相应地改变字体大小，填充移动设备上的屏幕宽度

标高

Basil 不使用阴影显示 UI 元素之间的标高，而是使用视差运动和透明度来区分不同的标高。

Basil 通过使用透明度来显示 UI 元素的对叠层来表达高低差。

这些堆叠的图层向用户显示，他们尚未导航到新屏幕，而是正在与之前那个界面进行交互。

当文字在图像上方滚动时，双色调图像处理可确保文字清晰易读。

四. 颜色

颜色主题

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

Basil 的主色调使用橄榄绿

Basil 的副色调使用橙色

五. 版式

字体

1. [Montserrat](https://fonts.google.com/specimen/Montserrat)

2. [Lekton](https://fonts.google.com/specimen/Lekton)

样式模板

Basil 的样式模板使用了两种字体：Montserrat 和 Lekton，这两类字体相得益彰。

Montserrat

Montserrat 是一种无衬线字体，具有宽大的字母形式，Basil 将其用作显示正文、标题和按钮文本。

Lekton

Lekton 的灵感来自于 Olivetti 打字机中使用的某些字体。

这些字形是三行间隔（trispace）的，这意味着它们都是使用相同的三个模块化单元构建的，字符垂直对齐，类似于等宽字体，Basil 在较小的标题和字幕中使用 Lekton 字体。

六. 图标

Basil 的自定义图标简单且高质量，以使内容显得平易近人。

Basil 的图标颜色使用主色调（橄榄绿），副色调用来显示不包含某类食品类型（例如谷蛋白或乳制品）。

七. 形状

类别

组件根据其大小分为不同的形状类别，这些类别使你可以一次设置多个组件值，形状类别包括：

小组件

中组件

大组件

小组件

工具提示（tooltip）组件是角半径为 0dp 的方角。

中组件

菜单（menu）组件是角半径为 0dp 的方角。

大组件

标准底部栏（折叠状态）组件是角半径为 0dp 的方角。

底部栏组件只能改左上角和右上角。

八. 组件

列表

Basil 使用列表组件显示配料表的成分，每一列使用 Basil 定制的样式和图标，成分和数量之间使用点线连接起来。

底部页

在移动设备上，Basil 使用扩展的底部页来提供配料表和制作方法。

点击 Tab 页的选项卡后，将全屏展示文本内容，用户可以在配料表和制作方法之间进行切换。

页面的背景是略显透明的，这样用户知道生成的页面在之前页面的上方，并且可以随时将其关闭。

标签页

PC 和 平板电脑

在 PC 和 平板电脑上，Basil 使用标签页（Tabs）在各部分之间进行导航，这些选项卡在固定宽度区域内均匀分布，该区域与屏幕中心对齐。

1. 基准标签页

2. Basil PC 和平板电脑的标签页使用自定义的样式、颜色和状态，自定义的选中状态的字体会改为粗体，整个标签页比例缩小到 62.5%

移动设备

在移动设备上，标签页允许用户在配料表和制作方法之间切换，默认情况下，这些选项卡显示在菜谱屏幕的底部，当用户点击时，它们会移至屏幕顶部。

1. 基准标签页

2. Basil 的食谱标签页使用自定义的样式、颜色和状态，选中的状态会更换粗体字，文本下方会留有笔触。

步进器

Basil 使用非线性步进器（non-linear stepper）来显示制作方法，这样用户可以根据所需顺序在不同步骤之间切换。步进器使用 Basil 的字体和配色方案，并具有自定义的垂直间距。

1. Basil 使用放大倍率聚焦在激活的步进器上，放大到200%

2. Basil 的步进器显示在屏幕的右侧

九. 交互

启动画面

Basil 的 Logo 动画在整个应用程序内都没有使用视差，底部箭头上的细微抖动鼓励用户进行垂直导航并探索。

导航过渡

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

移动设备

视差用于标记元素之间的标高，并在过渡期间增加视觉趣味。

平板电脑 和 PC

在平板电脑和 PC 上，Basil 使用压缩过渡来保持过渡的简洁明了，将 z 轴的平移与淡入淡出动画组合在一起以创建压缩过渡。

延伸

步进器等组件使用拉伸动画为简单的交互添加愉悦的交互体验。