Owl

Owl 是一款教育应用程序，它使用 Material Design 组件和 Material Theming来创建充满活力的励志品牌体验。

一. 关于 Owl

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

大胆的美学

Owl 的设计运用大胆的美学表现出探索和成长，反映出学习新技能时的活力和激情。他的UI设计中包含许多未填充的形状，这些形状促使用户向其中填充新的内容和课程。应用程序中的文案促人奋进，催人实干。

二. 产品架构

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

1. 个性化页（黄色）

2. 浏览页（蓝色）

3. 学习页（品红色）

轮毂结构

该应用程序的信息体系结构使用轮毂结构。

浏览页部分作为轮轴，其他各种分支或子节点作为课程的形式提供给用户。选择课程后用户进入学习页面，此时课程将作为轮轴，而课程的每个子部分成为轮辐。

第1部分：个性化页

个性化页提供给用户，用于选择感兴趣的领域，它的主题色是黄色的。这个部分是一个上手的过程，其中定制的面包屑（chip）代表可选的课程主题。

导航

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

第2部分：浏览页

浏览页部分是用户感兴趣区域的中心，它以蓝色为主题色。

导航

这个页面包含三个顶级导航图标：

我的课程

精选

搜索

在移动设备上，Owl 使用底部导航栏访问这些部分。

在平板电脑和PC上，可以通过铁路（rail）导航访问这三个部分。

第3部分：学习页

本部分是课程内容的中心，每门课程都有一个概述，其中包含教程视频。

导航

要访问课程的教学视频，需要点击屏幕右下角的弯曲图标，如果要导航回到浏览页，需要点击后退箭头，位于屏幕的左上方。

移动设备上的课程落地页。

点击图标后，屏幕会全屏展开，显示课程视频列表。

点按课程视频后，可以在横向模式下全屏播放，也可以在纵向模式下逐行浏览内容。

在较大的PC和横向浏览平板电脑上，有足够的屏幕空间来展示课程内容和视频列表。

在较小的PC和纵向浏览平板电脑上，默认情况下，视频列表是隐藏的，可以通过访问侧面板来显示他们。

三. 布局

网格系统

Owl 使用了自适应网格系统，该系统可以根据屏幕宽度（例如移动设备、平板电脑或 PC）自动调节列（Column）和填充（Padding）的大小。内容堆叠在列中，这些列在用户交互时会垂直扩展和收缩。

四. 颜色

Owl 有三种主色调，每种颜色用于为不同的部分创建不同的视觉主题。

主题1

对于个性化页，黄色（Yellow）是主色调，蓝色（Blue）是副色调。

主题 2

对于浏览页，蓝色（Blue）是主色调，黄色（Yellow）是副色调。

主题 3

对于学习页，红色（Pink）是主色调。

五. 版式

Owl 为应用内容提供了不同的字体比例，所有的内容都使用 [Rubik](https://fonts.google.com/specimen/Rubik) 作为字体，并使用不同的权重（weight）。

Rubik

Owl 使用 Rubik 字体。Rubik 是无衬线字体，带有微圆的角，并且有很多权重变化。

六. 图标

Owl 的图标与其使用的字体 Rubik 风格保持一致（弯曲形状）。

七. 形状

类别

组件根据其大小分为不同的形状类别，这些类别使你可以一次设置多个组件值，形状类别包括：

小组件

中组件

大组件

小组件

底部扩展页（Expanding bottom sheet）是原型的，角半径为 50%。

中组件

卡片（Card）使用方角，0dp。

大组件

侧板（Side sheet）使用圆角，16dp。

侧板仅可以调整左上角和左下角的形状。

八. 组件

面包屑（Chip）

Owl 使用了自定义的面包屑组件，允许用户自定义他们的浏览页面。

列表和分隔线（List & Divider）

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

此列表返回显示结果，其中包含自定义的板式、颜色、图标和图像，分割线将各个项目分开。

此列表包含了自定义的图像、排版样式以及播放视频的操作。列表项由分隔符隔开。

每个列表项的宽度由文本的长度决定，每个列表项之间留有足够的间隙。每个项目都包含了内联操作、多种图像类型和排版样式。

卡片（Card）

Owl 的精选课程使用卡片集合展示，它们具有自定义的形状、颜色、版式和图标，内容居中对齐。卡片之间几乎没有间隙，集合采用砌石（masonry）结构（卡片高度不同）。

页面（Sheet）

Owl 使用表格页展示课程视频，在 PC 和平板电脑上，这些视频可以在侧边表中找到，表格页使用学习中心的主色调：品红色。

在移动设备上， Owl 使用表格页展示课程视频，点击右下角最小化的表格页可以全屏展开。

底部导航栏（Bottom Navigation）

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

九. 交互

启动画面

Owl 的启动画面使用了栩栩如生的动画，使应用看起来非常有趣。

动画图标

Owl 的图标动画受其 Logo 和加载状态动画的影响。

导航过渡

顶层过渡

Owl 的底部导航栏过渡使用交错（stagger）和过冲（overshoot）动作来展现充满活力的风格。

父子元素过渡

卡片上的图像是增强连续性的焦点元素，线性（linear）动作产生简单的运动，使过渡易于跟随。

表格页过渡

弧线（Arc）动作用于将表格页缩图流畅地转换为列表。

振荡

选择和滚动面包屑组件会产生振荡效果，从而营造生动而有趣的氛围。

加载过程

使用动画形式的图像处理来表示加载。