Material Design Basil

2019-11-06 14:26:11

目录

关于Basil

产品架构

布局

颜色

排版

图标

组件

动效

 

Basil是一款食谱应用程序，它使用材料设计组件和材料主题来创建令人兴奋且易于探索的品牌体验。

 

关于Basil

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

 

时髦而实用的美学

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

 

产品架构

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

四个顶级部分

Basil的应用程序分为四个顶级部分，涵盖不同类型的食谱：开胃菜，主菜，甜点和鸡尾酒。 其中每个食谱都包含多种配方，这里主要有两个子部分：食材和方法。

 

一种新颖的导航方法

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

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

桌面端和平板上的导航

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

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

在平板电脑上，通过水平滚动浏览Basil的主菜部分，已缩小至50％。

 

选择配方后，使用选项卡在食材和方法之间切换。使用自定义步进器组件显示方向。

在平板电脑上，这款Basil详细配方页面使用标签和步进器。

 

移动导航

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

Basil的抽屉式导航

 

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

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

 

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

h5页面应用 h5达内

↑ 回到顶部