Material Design Owl

这是一个翻译系列，原文是谷歌18年所出的材料设计指南（文末有链接），强大的材料设计将带我们一起深入了解UI设计中的所有规范。每周会更新数篇，一共百余篇，欢迎关注哦。

 

目录

关于Owl
产品架构
布局
颜色
排版
图标
形状
组件
动效

 

Owl是一款教育应用程序，它使用材料设计组件和材料主题来创建充满活力，激励的品牌体验。

​​

关于Owl

Owl是一款教育应用程序，为想要探索和学习设计、艺术，建筑和时尚新技能的人们提供课程。 Owl品牌使用大胆的颜色，形状和排版来表达其品牌属性：活力，大胆和有趣。

​​
大胆的审美

Owl的设计反映了学习新技能的活力和激情，使用表达探索和成长的大胆美学。 它的UI包含未填充的形状，邀请用户使用新的内容和课程填充它们。 它的文案是一种诱人的，可以做到的口号。

 

产品架构

​​Owl分为三个部分，每个部分都有自己的颜色主题和交互模型：

1. 个性化（黄色）
2. 浏览（蓝色）
3. 学习（洋红色）

缩小至50％（有图示）

辐射结构
应用程序的信息架构使用辐射结构。
“浏览”部分用作“中心”，其中各种“辐条”或子节点以教学类的形式提供给用户。 选择一个类并且用户进入Learn部分后，该类将成为一个集线器，每个部分都成为一个辐条。
此结构适用于应用程序的“浏览”和“学习”部分，而“个性化”是“进入”部分。

第1节：个性化

“个性化”部分专门用于选择感兴趣的区域，以黄色为主题作为特征。 此部分是一种引导，其中自定义多个卡片代表可选的课程科目。

导航
点击右下角的蓝色浮动操作按钮即可访问导航。可以通过设置图标访问设置。
​​

Owl移动端的个性化页面

 

第2节：浏览

“浏览”部分是用户感兴趣区域的中心。 它的特点是蓝色主题。

导航
此部分包含三个顶级导航目标：

1. 我的课程
2. 精选

搜索
在移动设备上，Owl使用底部导航栏访问这些部分。
​​
使用底部导航访问移动端上的“我的课程”页面

 

在平板电脑和桌面上，轨道导航可以访问三个目的地。

Owl在桌面上的导航

 

第3节：学习

本节是课程内容的中心。 每门课程都有一个包含教程视频的简介页面。

导航
要访问课程的教程视频，请点击屏幕右下角的曲线形状。 要导航回“浏览”部分，请点击后退箭头（位于屏幕左上角）。
​​
移动设备上的课程登陆页面
​​

​​

在横向显示的桌面和平板电脑上，有足够的屏幕空间来显示课程简介内容和视频。
​​
缩小至50％

在纵向较小的桌面视图和平板电脑上，默认隐藏视频，可以通过访问侧边栏来显示。
​​
缩小至50％

 

布局

网格系统

Owl使用响应式网格系统，该系统具有灵活的列和内边距，可根据屏幕宽度（如移动设备，平板电脑或桌面）调整大小。

Owl的网格系统，缩小到50％

 

颜色

Owl有三种主色。 每种颜色为不同的部分构建出独特的视觉主题。
​​

 

主题1

对于“个性化”部分，黄色是主色，蓝色是辅助色。
​​

 

主题2

对于“浏览”部分，蓝色是主色，黄色是辅助色。
​​

 

 

主题3

对于“学习”部分，粉色是主色。
​​

 

 

排版

字体比例

Owl的字体比例提供应用内容所需的排版样式。 比例中的所有项目都使用Rubik，并运用了其自带的三种字体粗细—Rubik Regular，Medium和Bold。

​​Owl的字体类型

 

Rubik
Owl使用Rubik字体。 Rubik是无衬线字体，角稍微圆，并且有多种字体粗细。
​​Rubik的字形
​​Rubik 和 Roboto的对比

 

图标

Owl的图标反映了它的品牌字体Rubik的曲线形状和风格。
​​

1. 为了创建一致性，Owl的所有图标共享相同的底层网格结构。
2. Owl图标的集合。

形状
分类
组件根据尺寸分类为形状组。这个分组让你整组一次性完成设置数值。形状分类包括：

1. 小组件
2. 中等组件
3. 大型组件

​​owl’s的形状分类
​​

1. 小组件
2. 中等组件
3. 大型组件

 

小组件
属于小的形状分类。它们的拐角是圆角，圆角半径是50%
​​

组件	类别	属性	值
展开底部动作条	小组件	字体大小	圆角 50%

 

中等组件
卡片属于中等形状分类。它们的拐角是圆角，圆角半径为0dp
​​

 

组件	类别	属性	值
卡片	中等组件	字体大小	圆角 0dp；0dp；0dp；0dp

 

大型组件
侧边动作条属于大型形状分类。它们的拐角是圆角，圆角半径是16dp。

 

 

组件	类别	属性	值
侧边动作条	大型组件	字体大小	圆角 16dp;n/a;n/a;16dp＊

​​
*侧边动作条可以在最左上和最左下的位置做拐角。右到左的语言顺序，就要相反方向的拐角形状。

 

组件

 

纸片
​​Owl使用自定义的选择纸片，允许用户个性化他们的浏览体验
​​

​​

列表和分隔符

Owl以各种方式使用列表组件。

此列表返回显示结果，包括自定义排版，颜色，图标和图像。 插入分隔线分开项目。
​​
列表和分隔符

​​
此列表包含自定义图像，各种排版样式以及播放教程视频的操作。 列表项由插入分隔符分隔。

列表中的图像和播放视频操作

每个列表项的宽度由文本长度确定，列表项之间有背景色填充。 每个项目都包括内嵌操作，多种图像类型和排版样式。
​​
列表中的项目包含图像，内嵌操作和各种宽度。

 

卡片
Owl特色课程使用卡片集呈现。 它们具有自定义形状，颜色，排版和图像，具有居中对齐的内容。 卡片之间几乎没有内边距，并且该系列使用瀑布流图像列表模式图案（卡片具有不同的高度）。
​​
Owl的自定义卡片集，缩小至50％

 

动作条

Owl使用工作表来展示课程教程视频。 在桌面和平板电脑上，可以使用“学习”部分的主色：粉色自定义的侧页中找到这些视频。
​​
缩小至50％

在移动设备上，Owl使用动作条来展示课程教程视频。 点击右下方的最小化动作条会扩展为全屏。

最小化的列表扩展为全屏。

 

底部导航

Owl的底部导航组件具有自定义颜色，排版和图标。
​​
Owl的底部导航

 

动效

启动页

Owl的启动页面展示一个角色动画（赋予动画角色生命力的动效），为应用程序增添了一些趣味特质。

Owl的启动页面

 

动画图标

Owl动画图标的灵感来自其图标和加载状态动画。

1. 系统图标动画
2. LOGO动画
3. 加载状态动画

 

导航过渡
高级转换

​​
Owl的底部导航过渡使用延时动效和过冲动效来表达一种充满活力的风格。

 

父子层级转换

卡片上的图像是增强连续性的焦点元素。 线性动效产生简单的移动，使转换变得轻松理解。

 

动作条转换

​​弧形动效用于将卡片流畅地转换为列表。

 

振荡

选择和滚动纸片会显示振荡效果，营造出新奇而有趣的氛围。

振荡

 

加载
使用动画的动效图像处理模型来表示加载。 点状图案反映了圆形品牌元素的形状，例如logo和图标。

动效加载页

 

原文：Material Design