所有分类
  • 所有分类
  • 未分类
Material Design Basil

Material Design Basil

这是一个翻译系列,原文是谷歌18年所出的材料设计指南(文末有链接),强大的材料设计将带我们一起深入了解UI设计中的所有规范。每周会更新数篇,一共百余篇,欢迎关注哦。 目录 关于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

 

原文链接:http://www.uiya.cn/15532.html,转载请注明出处。

0
分享海报

评论0

没有账号? 注册  忘记密码?