这是一个翻译系列，原文是谷歌18年所出的材料设计指南（文末有链接），强大的材料设计将带我们一起深入了解UI设计中的所有规范。每周会更新数篇，一共近百篇，欢迎关注哦。
目录
关于
Fortnightly
产品架构
布局
颜色
排版
图标
形状
组件
动效
Fortnightly是一种新闻应用程序，它使用材料设计组件和材料
主题
来创建一
种
品牌
化的
，以内容为中心的
客户
体验
。
关于Fortnightly
Fortnightly是一款涵盖各种主题新闻的应用程序。 该应用程序的重点在
内容
上
，特别是
文
稿
和摄影。
Fortnightly的品牌旨在以一种将内容本身置于用户体验最前沿的方式提供各种内容。
品牌是通过Fortnightly图标，排版系统和紫色（应用程序的辅助
色
）在
原本
灰度应用程序中
来
表现。
这种微妙的方法确保品牌在通过颜色或排版表达时会引人注目。
内容为重点
Fortnightly
的审美将重点放在内容上，通过使用灰度调色板使图片脱颖而出，并使用排版比例使头条新闻
突出
，长
文本
易于阅读。
应用程序的布局网格从报纸中汲取灵感，为其设计为
提供
传统
、
直观的结构，同时提供大量内容。
产品架构
Fortnightly的信息架构被
梳理
成一个目录结构。
目录包含分类的层次信息，目录顶层由
包含了从属信息的同级节点组成
。
Fortnightly的内容分为主要部分和
从属
部分，从属部分类似于
报纸中的
头版头条
，
世界
版块
，美国
版块
，政治
版块
和商业
版块等
。
目录结构
使
用户快速导航到感兴趣的区域。 导航抽屉非常适合浏览目录结构，这就是Fortnightly使用此组件的原因。
导航抽屉
Fortnightly在平板电脑和桌面
上使用标准导航抽屉，在移动设备上使用模态导航抽屉。
导航图标放置在顶部应用栏是为了提示用户去打开导航抽屉
。
导航
导航部分仅包含文本。 带有小节的部分有一个箭头，表示它们可以打开。
品牌推广
Fortnightly还使用导航抽屉做品牌推广
，将
logo放置
在
导航
抽屉
里
。
导航抽屉用于移动，平板电脑和桌面
。
顶部应用栏和纸片
Fortnightly的顶部应用栏包含导航图标，
logo
，搜索功能和纸片。 这些纸片呈现出热门
标签
。
当点击纸片时，与标签相关的文章会填充页面。
这
允许
不同部分中的
文章可以
围绕共
同的对象
或主题
聚
在一起
。
Fortnightly的顶部
应用栏
和纸片
短顶部应用栏
滚动时，顶部应用栏会折叠成为短顶部应用栏，从而为内容留出更多空间。短顶部应用栏包含两个元素：用于打开导航抽屉的导航图标和
Fortnightly的logo
Fortnightly的短顶部应用
栏
搜索
Fortnightly具有强大的搜索功能，可以快速让读者获得所需的内容。 点击搜索图标后，会出现一个带有搜索条目字段和
热门
标签的全屏对话框。 输入搜索词后，结果将显示在全屏对话框中。
选择搜索结果或
对话框关闭按钮时，对话框将关闭。
在Fortnightly搜索
布局
网格系统
Fortnightly将各种信息组合在一起，特别是在登陆界面等地方。有些地方
，例如单篇文章，
内容
部分
有大量的
留
白
。 所有页面都使用相同的
响应
式
网格，
这样允许在达到某些转效点时内容可以页面重排到可用的屏幕空间中
。
跨越转效点的布局网格，缩小至50％
海拔
Fortnightly
使用阴影来
显示
高度
。
应该谨慎使用阴影
，并用于某些关键时刻。 例如，
当页面滚动时顶部应用栏的层次不用表现，但是当换为短顶部应用栏时就要表现出其层次
。
当
文章
悬停或
被点击
时，
使用
细微的阴影处理，
都
从而呈现该物体的层次
。 导航抽屉总是使用阴影，以免
在抽屉开始或者结束的时候使得用户混淆
。
- 带阴影的精选文章
- 带有阴影的短顶部应用栏
- 带阴影的导航抽屉
颜色
颜色主题
主色
Fortnightly
的主要颜色是白色。 它使用灰度调色板，使图片脱颖而出，
正文
易于阅读而不会分心。
辅助色
Fortnightly
的辅助色是紫色。
谨慎使用
辅助色
以确保
其能发挥重要的影响
。
颜色主题
颜色和图像
图像处理是一种微妙的
品牌
推广
方式
。
- 当文章悬停在桌面上时，会对相应的图像填充半透明的紫色，从而突出显示分享功能。
- 通过在相应的照片上填充半透明的紫色来表示移动端上的文章的按下状态。
（缩小至62.5％）
遮罩颜色
当出现导航抽屉和底部工作表时，
Fortnightly
在应用程序内容的其余部分前面会显示一个白色的
遮罩
。 该面板是
不透明的，足以
确保用户可以区分
什么是可用的
和什么是
不可用
的
。
遮罩导航抽屉
排版
字体
Fortnightly
使用Libre Franklin和Merriweather字体。
- Libre Franklin
- Merriweather
字体
比例
Fortnightly
的字体
比例通过使用两种字体
以便区分
：Merriweather和Libre Franklin。
当
用户专注于
阅读时
，
Merriweather用作标题字体和正文字体
。 Libre Franklin用于以扫描和浏览内容为主要焦点的页面。
Fortnightly的字体
比例
Merriweather
Merriweather被设计成一个可以在页面上阅读的文字样式。
它在横向上很宽，
高度
上略微缩短
，
稍微倾斜且边缘较锋利
。
Merriweather的字形
Merriweather和
Roboto
的对比
Libre Franklin
这种无衬线字体是富兰克林哥特式的
体现和延伸
。 虽然富兰克林哥特式最初被
去掉衬线
用作显示面，但在小尺寸使用时也很清晰。 它的各种权重使得建立排版层次结构变得容易。
Libre Franklin的字形
Libre Franklin和
Roboto
的对比
图标
Fortnightly
没有
自定义图标
，
而是采用一种可识别的功能图标，区别于其他文字和装饰。
没有品牌化
的图标或独特的风格，他们可以与任何
风格
的内容配对，
与
内容的风格
不
冲突。
- 为了创建一致性，所有Fortnightly的图标共享相同的底层网格结构
- Fortnightly图标集
形状
分类
组件根据尺寸分类为形状组。这个分组让你整组一次性完成设置数值。形状分类包括：
- 小组件
- 中等组件
- 大型组件
Fortnightly’s 的形状组件
- 小组件
- 中等组件
- 大型组件
小组件
卡片属于为小形状分类。它们的圆角半径设置为0dp。
| 元素 | 类别 | 属性 | 值 |
| 纸片 | 小组件 | 字体尺寸 | 切角
0dp;0dp;0dp;0dp |
中等组件
对话框属于为中等形状分类。它们的圆角半径设置为0dp。
| 元素 | 类别 | 属性 | 值 |
| 对话框 | 中等组件 | 字体尺寸 | 切角 0dp;0dp;0dp;0dp |
大型组件
导航抽屉属于为大型形状分类。它们的圆角半径设置为0dp。
| 元素 | 类别 | 属性 | 值 |
| 导航抽屉 | 大型组件 | 字体尺寸 | 切角
n/a;0dp;0dp;n/a＊ |
*导航抽屉可以放置在最右上位置和底部最右下位置。因为是从左到右的语言类型，相反方向的角落位置非常明显。
组件
对话框
某些内容在悬停或点击时会启动一个对话
窗口以提供更多信息。 Fortnightly经常使用它来提供传记信息，允许用户进一步了解文章中提到的人。
Fortnightly使用一个白色的遮罩
，表示内容在屏幕上时禁用所有应用功能。 在桌面上，对话框和
遮罩
保持不变，
直到用户将名称
点中
; 在平板电脑上，它们一直保持到用户点击
对话
框
之外
的区域
。
当用户悬停或点击某些名称时，可获得更多的传记信息。
在桌面和平板电脑上使用对话框时，表格更适合移动设备。
文本框
当搜索是页面上的主要操作时，Fortnightly使用比例来强调搜索
文本框
。
文本
框
发送搜索查询后，文本框
的横线标签上的加载动作表示搜索正在进行中。
纸片
Fortnightly使用自定义
的选择纸片进行基于主题的搜索体验。
Fortnightly的自定义
选择纸片
列表
Fortnightly使用一个自定义列表作为其搜索结果。
此自定义列表为每个列表项及其包含的各种信息（例如章节，日期，文章标题，简要说明和照片）周围提供了大量的空白区域。
空白区域允许用户根据最有用的信息快速扫描结果。
在平板电脑上搜索结果列表
步进器
Fortnightly在其订阅过程中使用线性步进器。 每个步骤都充当可扩展的抽屉，垂直线条确定了焦点区域。 Fortnightly的紫色强调色突出了激活的选项。
Fortnightly的线性步进器
动效
产品图标
Fortnightly的图标动画反映了其字体的
书写特征
。
首次启动Fortnightly会显示一个动画启动页面。
导航过渡
Fortnightly使用简单的淡入淡出和精简过渡来为其略保守的品牌表现方式增色。 精简的过渡样式有助于平衡显示密集内容。
父子转换使用压缩过渡来保持简洁的风格。
导航抽屉过渡使用细腻的淡入淡出动画。
加载
Fortnightly在占位符元素上使用细腻的延时动效动画来表现
而
不会因为内容而分心。
占位符元素具有精妙的向下延时动效动画，表示加载。
评论0