2.5 Owl(教育APP)

Owl

Owl是一款教育应用，它使用Material组件和主题创建了充满活力和激励的品牌体验。

目录

简介

架构

布局

颜色

文字

图标

形状

组件

动效

Owl简介

Owl是一款教育应用，给那些想在设计、艺术、建筑和时尚等方面探索和学习新技能的人提供教育课程。Owl使用醒目的颜色、形状以及文字排版来表达它的品牌特性：积极、大胆和有趣。

绚丽美

Owl的设计彰显了学习新技能的能量与激情，它使用大胆、绚丽的美学来表现探索和成长。它的UI包含未填充形状，鼓励用户填入新的内容和课程。它的内容讲解既富有魅力，也实用有效。

架构

Owl分为三个部分，每个部分都有其独立的颜色主题和交互模型。

1. 订制（黄色）

2. 浏览（蓝色）

3. 学习（品红）

中心发散结构

应用程序的信息架构使用中心发散结构。

“浏览”部分作为“中心”，各种“发散点”（或者说“子节点”）都以课程指导的形式来供用户选择。选定课程后，用户进入“学习”区域，此时这个课程变成了一个中心，课程的每个章节都成了发散点。

这种结构应用在“浏览”和“学习”部分，“订制”部分是一个引导区域。

分部 1：订制

“订制”部分是一个兴趣选择区域，它以黄色作为主题特征。此部分为引导区域，定制的纸片（chips）代表可选的课程科目。

导航可以通过轻触右下角的浮动操作按钮来访问。“设置”可以通过设置图标进行访问。

Owl移动端的订制（个性化）区域

分部 2 ：浏览

”浏览“部分是兴趣区域的一个中心，以蓝色作为主题特征。

导航包含三个顶级导航目标：

1. 我的课程

2. 特色

3. 搜索

在移动端，Owl使用一个底部导航栏来访问这些区域。

在移动端，使用底部导航访问”我的课程“

  

1. 在移动端，使用底部导航访问”特色“

2. 在移动端，使用底部导航访问”搜索“

在平板和桌面端，使用轨道导航来访问三个目标。

Owl桌面端的轨道导航

分部 3 ：学习

这部分是课程内容的中心。每个课程都有一个包含指导视频的概览界面。

点击右下角的曲面形状可以访问课程指导视频。如果想导航到浏览区域，点击返回图标（屏幕左上角）即可。

移动端上的一个课程登陆页

  

1. 点击底部动作条（曲面形状）将展开全屏显示指导视频列表。

2. 点击其中一个指导视频后，可以通过横屏模式全屏播放，或者使用竖屏模式一步步观看内容。

在桌面端和平板的横向模式上，有足够的屏幕空间显示课程摘要和视频。

在桌面端的较小查看界面和平板的纵向模式上，视频默认为隐藏状态，可以通过访问侧边动作条（面板）来显示。

布局

栅格系统

Owl使用响应式栅格系统，具有灵活的列和间距，能根据屏幕宽度（例如移动端、平板和桌面端）来改变大小。

Owl的栅格系统

颜色

Owl有三个主色，每种颜色分别为各个部分创建了独特的视觉主题。

主题1

在“订制”部分中，黄色为主色，蓝色为辅助色。

主题2

在“浏览”部分中，蓝色为主色，黄色为辅助色。

主题3

在“学习”部分中，粉红为主色。

文字

字体格式

Owl字体格式给应用程序内容提供了必要的文字排版变化。字体格式中的所有项目都使用Rubik字体，并且利用了其自带的Rubik Regular、Medium和Bold的等多种字重。

Owl的字体格式

Rubik

Owl使用Rubik字体，它是一款无衬线体，具有细微的圆角和多种字重。

Rubik字形

Rubik与Roboto相比较

图标

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

1. 为创造一致性，所有Owl图标都使用了相同的底层网格结构

2. 一套Owl图标集

形状

类别

组件基于它们的形状大小组成了形状类别。形状类别能让你一次对多个组件进行设置。形状类别包括：

1. 小型组件

2. 中型组件

3. 大型组件

Owl的形状组件

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

小型组件

属于小型形状类。它们的角是圆角，圆角半径为50%。

中型组件

卡片属于中型形状类。它们的角是圆角，角半径为0dp。

大型组件

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

*侧边动作条的左上角和左下角可以变形。对与从右到左的语言，变形的角与之相反。

组件

纸片（Chips）

Owl使用自定义选择纸片，给用户增添个性化的浏览体验。

1. 标准选择纸片

2. Owl选择纸片使用自定义大小、形状、排版、颜色和高度（海拔），同时用一张图片的处理状态来表示选择。

列表与分隔线

这个列表包含自定义的图片、多种文字排版风格以及一个播放指导视频操作。列表项由分隔线分开。

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

每个列表项的宽度由文本长度决定，同时列表项间也有较大的距离。每一项都包含内联操作、多种图片类型和文字风格。

列表项内有图片、内联操作和多种宽度。

卡片

Owl使用卡片来呈现特色课程。它们有自定义的形状、颜色、文字和图标，内容居中显示。卡片间的距离非常小，整个集合使用砌体（瀑布）模式（卡片高度各不相同）。

Owl自定义卡片集

动作条/面板（sheet）

Owl使用动作条来呈现课程指导视频。在平板和桌面端，这些视频可以在侧边动作条（面板）中找到，面板使用“学习”部分的主色：粉红色。

在移动端，Owl使用一个动作条来呈现课程指导视频。点击右下角最小化的动作条可以触发展开全屏显示。

最小化的动作条展开全屏

底部导航

Owl的底部导航组件自定义了颜色、文字和图标。

动效

启动界面

Owl的启动界面播放了一个角色动画（带给动画角色生命力的动效），赋予了应用程序有趣的品质属性。

Owl的启动页

动效图标

Owl图标动效的灵感来源于其logo和载入状态动效。

1. 图标动效

2. logo动效

3. 加载动效

导航转换

顶级转换

Owl的底部导航转换使用交错和过冲动作来表现充满活力的风格。

1. 父子转换; 2. 动作条转换

 

1. 卡片中的图片是一个焦点元素，能促进视觉连续性。线性动作产生简单的移动，使转换更容易被理解。

2. 弧形动作用来将动作条流畅地转换成列表。

振荡

选择和滚动纸片会显示振荡动效，烘托出一个奇特而有趣的氛围。

振荡

加载

加载是通过一个模型图像的动效处理来表现。斑点模型反映了圆形品牌元素（例如logo和图标）的形状。

动画加载界面

*原文作者为谷歌设计团队，本文为个人翻译作品，仅供学习参考