这是一个翻译系列,原文是谷歌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使用阴影来显示高度
应该谨慎使用阴影,并用于某些关键时刻。 例如,当页面滚动时顶部应用栏的层次不用表现,但是当换为短顶部应用栏时就要表现出其层次文章悬停或被点击时,使用细微的阴影处理,从而呈现该物体的层次。 导航抽屉总是使用阴影,以免在抽屉开始或者结束的时候使得用户混淆
  1. 带阴影的精选文章
  2. 带有阴影的短顶部应用栏
  3. 带阴影的导航抽屉
 

颜色

 
颜色主题
 
Fortnightly的主要颜色是白色。 它使用灰度调色板,使图片脱颖而出,正文易于阅读而不会分心。
 
辅助色
Fortnightly的辅助色是紫色。 谨慎使用辅助色以确保其能发挥重要的影响
颜色主题

 
颜色和图像
图像处理是一种微妙的品牌推广方式
  1. 当文章悬停在桌面上时,会对相应的图像填充半透明的紫色,从而突出显示分享功能。
  2. 通过在相应的照片上填充半透明的紫色来表示移动端上的文章的按状态。
(缩小至62.5%)
 
 
 
遮罩颜色
 
当出现导航抽屉和底部工作表时,Fortnightly在应用程序内容的其余部分前面会显示一个白色的遮罩。 该面板是不透明的,足以确保用户可以区分什么是可用的和什么是不可用
 
遮罩导航抽屉

 

排版

字体
Fortnightly使用Libre Franklin和Merriweather字体。
  1. Libre Franklin 
  2. Merriweather
 
字体比例
Fortnightly的字体比例通过使用两种字体以便区分:Merriweather和Libre Franklin。 用户专注于阅读时Merriweather用作标题字体和正文字体。 Libre Franklin用于以扫描和浏览内容为主要焦点的页面。
Fortnightly的字体比例
 
Merriweather
Merriweather被设计成一个可以在页面上阅读的文字样式。 它在横向上很宽,高度上略微缩短稍微倾斜且边缘较锋利
Merriweather的字形
Merriweather和Roboto的对比
 
 
Libre Franklin
这种无衬线字体是富兰克林哥特式的体现和延伸。 虽然富兰克林哥特式最初被去掉衬线用作显示面,但在小尺寸使用时也很清晰。 它的各种权重使得建立排版层次结构变得容易。
Libre Franklin的字形
Libre Franklin和Roboto的对比
 

图标

Fortnightly没有自定义图标而是采用一种可识别的功能图标,区别于其他文字和装饰。 没有品牌化的图标或独特的风格,他们可以与任何风格的内容配对,内容的风格冲突。
  1. 为了创建一致性,所有Fortnightly的图标共享相同的底层网格结构
  2. Fortnightly图标集
 

形状

分类
组件根据尺寸分类为形状组。这个分组让你整组一次性完成设置数值。形状分类包括:
  1. 小组件
  2. 中等组件
  3. 大型组件
Fortnightly’s 的形状组件
  1. 小组件
  2. 中等组件
  3. 大型组件
小组件
卡片属于为小形状分类。它们的圆角半径设置为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在占位符元素上使用细腻的延时动效动画来表现不会因为内容而分心。

占位符元素具有精妙的向下延时动效动画,表示加载。

原文:Material Design

译者:糖糖

转载请注明:学UI网 » Material Design Fortnightly

登录收藏
 
你可能喜欢的:
你必须知道的5个搜索入口的位置你必须知道的5个搜索入口的位置
无限式体验无限式体验
写给前端的弹窗使用指南!(下)写给前端的弹窗使用指南!(下)
iOS 13 隐秘的细节④:系统组件·下iOS 13 隐秘的细节④:系统组件·下
Material Design OwlMaterial Design Owl
卡片式设计流行的秘密 — 看完这15个案例你就懂了卡片式设计流行的秘密 — 看完这15个案例你就懂了
为什么常见的垂直列表,你却总设计不好为什么常见的垂直列表,你却总设计不好
QQ极简与夜间模式设计QQ极简与夜间模式设计
iOS 13 隐秘的细节③:原生APP的细节变化·下iOS 13 隐秘的细节③:原生APP的细节变化·下
一个弹窗引发的思考,我竟写了5000字的分享(上)一个弹窗引发的思考,我竟写了5000字的分享(上)