one 点设计-木木翻译
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轴上的平移和淡入淡出动画组合创建了一个压缩过渡。
在平板和电脑上单击菜谱缩略图时父子场景的过渡被压缩在一起。
伸缩
像步进器这样的组件使用了伸缩动效，在进行交互时，增加了意想不到的愉悦感。
当用户在不同节点进行切换时使用伸缩动效
原文链接：https://material.io/design/material-studies/basil.html