Fortnightly

Fortnightly 是一款新闻应用程序，它使用 Material Design 组件和 Material Theming 来创建一个专注内容的品牌体验。

一. 关于 Fortnightly

Fortnightly 是一个涵盖各种主题新闻的应用程序，这款 app 的重点是内容，尤其是文章和摄影作品。

Fortnightly 的品牌旨在提供各种内容，内容本身是用户体验最关注的地方。品牌通过 Logo、排版系统和白紫的配色外观组成。这种精妙的方法可确保通过颜色和排版将品牌表现的引人注目。

专注内容

Fortnightly 的美学理念是通过使用灰色反差使摄影作品脱颖而出，放大加粗标题引人注目，并通过调整排版使长内容文本易于阅读。

该应用程序的布局网格从报纸中汲取灵感，从而为该应用程序提供传统、直观的结构，同时展现了大量内容。

二. 产品架构

Fortnightly 的信息架构组织成一个目录结构，目录包含一个顶层菜单，和层级下细分的内容。Fortnightly 的内容分为两块，一个是主菜单，另一块是内容，内容部分与主流报纸上的内容相似。

目录结构使用户可以快速导航到感兴趣的区域，导航抽屉（Navigation Drawers）是导航目录结构的理想选型，这就是为什么 Fortnightly 使用该组件的原因。

导航抽屉（Navigation Drawers）

Fortnightly 在平板电脑和 PC 上使用标准导航抽屉（standard navigation drawer），在移动设备上使用模态导航抽屉（modal navigation drawer），打开导航抽屉的功能是在顶部应用程序栏中找到导航图标。

导航部分

导航部分仅包含文本，带有箭头的指示标志可以展开导航栏。

品牌展示

Fortnightly 也将导航抽屉用作品牌展示的地方，Logo 放置在抽屉内。

顶级应用栏和面包屑（Top app bar and chips）

Fortnightly 的顶部应用栏包含导航图标、Logo、搜索框和面包屑（chips），面包屑显示趋势标签。

点击面包屑时，与主题标签相关的文章将填充在页面，这允许将位于不同部分的文章围绕一个共享的主题或者题材进行分组。

短的顶部应用栏

在滚动时，顶部应用程序栏将折叠成一个短的顶部应用程序栏，从而为内容展现留出更多空间。

短的应用程序栏包含两个元素，用于打开导航抽屉的图标和 Fortnightly 的 Logo 图标。

搜索框

Fortnightly 有强大的搜索功能，可快速将读者带到他们所需的内容。点击搜索图标后，将出现一个全屏对话框，其中包含搜索输入栏和趋势标签。输入搜索词后，结果将显示在全屏对话框中。

选择搜索结果或选择对话框关闭按钮时，对话框关闭。

三. 布局

网格系统

Fortnightly 将各类信息组合在一起，尤其在诸如着陆页（landing page）之类的地方。在其他地方，例如单篇文章，内容的留白很大。所有页面都使用相同的响应网格，当达到某些端点后，允许内容填充可用的屏幕空间。

标高

Fortnightly 使用阴影显示标高。

阴影只在关键时刻使用。例如，当页面滚动时，顶部应用栏变短，会显示标高信息。当在文章上方悬停或者点击文章时，会进行细微的阴影处理，使文章看起来有被提起的效果。导航抽屉始终使用阴影，以标注导航栏的边界。

四. 颜色

颜色主题

主色调

Fortnightly 的主色调使用白色，它使用灰度调色板，使摄影作品可以脱颖而出，文章内容也易于阅读且不会分散注意力。

副色调

Fortnightly 的副色调是紫色，谨慎使用它，以确保它在显示的地方有很强的影响作用。

颜色和图像

图像处理过程是展现产品品牌的一个非常好的方式。

1. PC 平台上，当鼠标悬停时，半透明的紫色图层会覆盖在对应的图像上，并且显示共享功能

2. 在移动设备上，用半透明的紫色表示手指摁下的状态

稀松布（scrim）颜色

当导航抽屉和底部表格出现时，Fortnightly 在其他应用程序内容前显示一层白色的稀松布（scrim）。稀松布需要足够的透明度来指引用户哪些功能可用的，哪些功能是禁用的。

五. 版式

字体

Fortnightly 使用 [Libre Franklin](https://fonts.google.com/specimen/Libre+Franklin) 和 [Merriweather](https://fonts.google.com/specimen/Merriweather) 这两种字体。

样式模板

Fortnightly 使用两类字体提供印刷字符的多样性：Merriweather 和 Libre Franklin。Merriweather 用于用户阅读时的展现的字体，Libre Franklin 主要用于浏览内容时展现的字体。

Merriweather

Merriweather 的设计目的是在屏幕上阅读文字时感到愉悦。它具有较大的x轴宽度，轻微的对角线应力和坚固的衬线。

Libre Franklin

Libre Franklin 字体是 Franklin Gothic 字体的无衬线扩展。Libre Franklin 最初被用作展示字体，在小尺寸时也清晰易读，不同的字体权重可以很容易建立印刷层次。

六. 图标

Fortnightly 采用的是易识别的功能图标，不进行自定义设计和装饰。由于不给图标添加商标或鲜明的样式，可以将其与任何色调的内容配对，并且不会与该内容的样式产生冲突。

七. 形状

类别

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

小组件

中组件

大组件

小组件

面包屑（Chip）使用切角，0dp。

中组件

对话框（Dialog）使用切角，0dp。

大组件

导航抽屉（Navigation Drawer）使用切角，0dp。

导航抽屉仅可以调整右上角和右下角的形状。

八. 组件

对话框（Dialog）

当悬停或轻按某些内容时，会启动一个对话框，以提供更多信息，Fortnightly 经常使用此操作来提供传记信息，从而使用户可以进一步了解到文章中提到的人。

Fortnightly 使用白色稀疏布覆盖在屏幕上时，表示那些功能不可用。在 PC 上，对话框和稀疏布将一直存在，直到用户将悬停的鼠标移开；在平板电脑上，用户需要点击对话框外的内容才能解除。

当用户将鼠标悬停或点击某些名称时，可获得更多的传记信息。

平板电脑和 PC 适合使用对话框，移动设备适合表格页（sheet）。

文字栏（Text Field）

当在屏幕上使用搜索功能时，Fortnightly 会使用移动光标（scale），将重点放在搜索框上。

发送搜索查询后，文字栏底部会显示加载条，表示搜索正在进行中。

面包屑（Chip）

Fortnightly 使用自定义的面包屑组件来提供基于主题的搜索体验。

列表（List）

Fortnightly 使用自定义列表展现搜索结果，自定义列表在每个元素周围都留有足够的留白，每个列表项包含各种信息（例如类别、日期、文章标题、简要说明和照片），空白允许用户根据最有用的信息快速扫描结果。

步进器（Stepper）

Fortnightly 在订阅模块中使用了线性步进器，每个步骤都是可扩展的抽屉（expandable drawer），垂直线确定了焦点区域，紫色的配色突出了当前选中的步骤。

九. 交互

启动画面

Fortnightly 的启动画面使用了书写形式。

导航过渡

Fortnightly 使用简单的淡入淡出和压缩过渡来做动画过渡，简单的过渡样式有助于平衡显示大量文本内容。

父子页面过渡使用压缩过渡来保持简洁的样式。

导航抽屉过渡使用微小的淡入淡出动画。

加载过程

Fortnightly 在占位符元素上使用微小的交错（stagger）动画来表示加载状态，而不会分散对内容的注意力。