所有分类
  • 所有分类
  • 未分类
Material Design Crane

Material Design Crane

这是一个翻译系列,原文是谷歌18年所出的材料设计指南(文末有链接),强大的材料设计将带我们一起深入了解UI设计中的所有规范。每周会更新数篇,一共近百篇,欢迎关注哦。   目录 关于Crane 产品架构 布局 颜色 排版 图标 形状 组...

这是一个翻译系列,原文是谷歌18年所出的材料设计指南(文末有链接),强大的材料设计将带我们一起深入了解UI设计中的所有规范。每周会更新数篇,一共近百篇,欢迎关注哦。

 

目录

关于Crane
产品架构
布局
颜色
排版
图标
形状
组件
动效
 
 
Crane是一款旅行应用程序,它使用材料设计组件和材料
主题
来创建个性化的品牌体验。

 

关于Crane

Crane是一款旅行应用程序,可帮助用户查找和预订符合其输入偏好的旅行、
住宿和餐厅。
Crane应用程序(用于预订)
功能
和(允许用户探索和了解新体验)
信息都很齐全

Crane的品牌精致而富有表现力,注重视觉和
动效
细节

营造出
一种
为用户
量身定制的体验。

 
灵活美观
除了具有功能性和信息性外,Crane应用程序还提供各种过滤器来自定义内容,以便
关联用户

为了方便用户理解这种灵活性,交互以使用背景组件为中心。
对背景图层的首选项或过滤器进行更改的消息
会立即
显示
在背景的
上一层

例如,当用户在Crane上寻找航班时,他们在后层输入诸如目的地和日期之类的信息。 输入此信息后,符合其偏好的航班将显示在
上一
层。 这种相互作用强化了Crane如何根据用户的偏好定制内容,以大胆而优雅,直接但尊重
用户
的方式呈现选项。
 

产品架构

Crane应用程序的信息架构使用

结构
。 流结构是基于任务的结构,需要以连续顺序访问屏幕。

结构
最适合Crane,因为它为有兴趣探索过滤内容的用户提供了所需的灵活性,使其可操作,以便他们可以预订特定的选择。

​​
Crane使用标签和背景来浏览和过滤移动设备

平板电脑和桌面上的内容。
 
主要部分
Crane应用程序有三个主要部分:

  1. 航班
  2. 住宿
  3. 餐饮

使用界面
顶部的选项卡导航到这些主要部分。
这些选项卡嵌套在背景组件的后层,后者还包含相关的过滤器和上下文操作。

内容过滤

用户可以根据自己的喜好快速自定义Crane的内容。 后层包含影响上一
层显示内容的控件,允许用户查看为其定制的内容。

在Crane上的标签之间点击

 

布局

网格系统
Crane使用响应式网格系统,它具有灵活的列和
内边距
,可根据屏幕宽度(如移动设备,平板电脑和桌面)调整大小。 内容按列堆叠,在用户交互时垂直扩展和收缩。

Crane的网格系统,缩小到50%

 

标签和背景(移动)

由于屏幕空间有限,每个背景项目垂直叠加在其他项目之上。

 

标签和背景(平板电脑)

由于平板电脑的屏幕空间比移动设备多,因此有足够的水平空间将背景放在另一个旁边。


缩小至62.5%
 
标签和背景(桌面)
由于桌面上的界面
空间比平板电脑上的
界面
空间多,因此有足够的空间可以将所有背景项水平放置在一起。



缩小至50%
 

海拔

使用颜色

Crane的UI使用颜色来表示元素之间的高度差异,而不是阴影。 例如,卡片通过具有与背景不同的颜色来显示其容器的边界,而不会投射阴影。
 

背景阴影

Crane使用阴影表示高度
的一个实例是当内容在背景组件的前层滚动时。 在这种情况下,背景的默认行为保持不变,产生阴影以将前层

子标题与其后面的内容滚动分开。

​​


在前


子标题下方滚动的卡片集合。
 
 

颜色

 
颜色主题
 

Crane的主要颜色是紫色。 它使用此颜色的三种变体来区分不同的UI元素。
 
辅助

Crane的
辅助

为红色,用于突出显示所选项目。

 

不同的元素和状态

并非所有界面都需要使用辅色。 Crane的主色紫色的变化足以产生元素之间的区别。 由于Crane的辅色红色通常用于选定状态,它的消失有助于表明未选择状态


Crane座椅选择页面仅使用主紫色,直到用户选择座位。
 
Crane的
辅助色
红色用于指示组件的选定状态,例如复选框,滑块和单选按钮。 红色也可用于给出排版重点。
缩小至62.5%
 
替代错误颜色
Crane的颜色主题使用错误状态的替代颜色:橙色。
这是因为红色是Crane的
辅助
色,并且红色错误不能从周围的UI中充分突出,并且可能被误读为选择状态。


 
排版

字体比例
 
Crane的
字体
比例提供其应用内容所需的排版样式。 样式类型中的所有项目都使用Raleway作为字体,利用Raleway Light,Regular,Medium和SemiBold提供的各种权重。

Crane的字体
类型
 
Raleway
Crane在整个应用程序中使用sans-serif字体Raleway。
尽管Raleway最初是作为特性字体制作的,用于标题和大尺寸,但它已经扩展为
9种粗细
的字体库,适合
正文使用
。 在Crane中使用单一字体可以提供一致的UI,允许其他元素(如摄影和小视觉细节)
突出显示


Raleways
的字体形式



Raleway 和 Roboto的对比
 
 

图标

Crane的图像让人联想到旅行设置中的图标,例如机场和火车站。

  1. 为了创建一致性,Crane的所有图标共享相同的底层网格结构。
  2. Crane的图标集合

 

形状

分类
组件根据尺寸分类为形状组。这个分组让你整组一次性完成设置数值。形状分类包括:

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

Crane的形状分类

 


1.小组件
2.中等组件
3.大型组件
 
小组件
线性文本框属于小组件的形状分类。它们的拐角是圆角,圆角半径是4dp。

 

组件 类别 属性
线性文本框 小组件 字体大小 圆角

4dp;4dp;4dp;4dp

按钮属于小组件的形状分类。它们的拐角是圆角,圆角半径是50%。


组件 类别 属性
按钮 覆盖所有分类 字体大小 圆角

50%

*Crane的按钮在小组件的形状分类里使用特殊的尺寸数值
 
中等组件
图片列表属于中等形状分类。它们的拐角是圆角,圆角半径为16dp。

组件 类别 属性
图像列表 中等组件 字体大小 圆角

16dp;16dp;16dp;16dp

 

大型组件

背景页面属于大型形状分类。它们的拐角是圆角,圆角半径是20dp。

组件 类别 属性
背景页面 大型组件 字体大小 圆角

20dp;20dp;n/a;n/a*

*背景页面只能放置在左上和右上的拐角处。
 
 

组件

 

图像列表

Crane允许用户使用图像列表(在平板电脑和桌面上)浏览内容。

 

瀑布流式布局网格

此图像列表使用瀑布流式布局网格,该网格根据原始图像大小动态调整图像容器高度。 瀑布流式布局网格样式确保横向

纵向或方形格式的照片都尽可能多的
显示
内容。 它创造了令人兴奋

出人意料
的节奏,
吸引
用户继续向下滚动并探索内容。

 

图像标签

图像列表已自定义为显示每个项目的文本标签。 自定义
内边距为
每个项目的上方和下方提供更多空间,确保不会混淆
文本标签与图像的匹配


Crane的自定义瀑布流布局图片
列表
(减少50%)
 


列表
在移动设备上,Crane使用列表组件来组织内容。列表组件是定制的,匹配Crane的排版和颜色。 每个列表项包含与用户最相关的内容(包括地址名称、类型、距离和价格)和一张照片。

Crane在移动端上的自定义列表
 
卡片
Crane使用卡片显示详细的搜索结果,例如出发和到达时间

费用,机场和登机信息的航班选项。
 
垂直卡片集
Shrine的卡片出现在垂直堆叠的卡片合集。颜色
通过使用填充颜色白色和背景色浅紫色形成对比,来指示卡片的容器
。 Crane的卡片不会投射阴影,因此每张卡片之间只有很少的填充,
以方便浏览

移动端上点击卡片会全屏显示以显示更多信息,并允许用户执行操作,例如预订航班。

在平板电脑和桌面机上,当点击时,卡片会展开以显示更多信息,并允许用户对该项目采取操作。当一个集合中的一张卡被展开时,集合中的所有其他卡都被赋予一个白色遮罩层,不透明度为80%,以强调展开的卡片。

Crane在桌面上的自定义卡片集

 
文本框
线性文本框
Crane使用根据品牌字体和颜色定制的线性文本框。
因为Crane使用红色作为其
辅助色
,所以使用橙色表示错误以确保它们
突出显示


Crane的自定义
线性文本框
​​

 

填充文本框

Crane使用填充的文本框输入用户首选项。 它们的四面都有定制的圆角形状,并使用Crane的品牌颜色,排版和图标。

Crane的自定义填充文本框



​​
 
选择控件和滑块
Crane使用各种选择控件来帮助用户过滤搜索结果,

在结账过程中进行选择。 这些控件包括复选框,单选按钮,滑块和开关,可使用Crane的品牌颜色进行自定义。
​​

  1. Crane的复选框和滑块
  2. Crane的单选按钮
  3. Crane的开关

 
 
标签
 
为了表示标签的活动状态,Crane使用药丸形状选择器作为
视觉表现

​​
 
Crane的自定义标签

  1. 标准选项卡
  2. Crane的标签使用自定义排版,颜色和状态。 自定义选择状态包括标签周围的药丸形状轮廓和颜色样式的变化。

 
背景
 
背景组件通过在后层上包含导航,过滤器和上下文操作以及前一层上的主要内容来为Crane提供主要结构。 这允许用户快速从被动浏览信息转换到对其采取行动 – 所有这些都在同一个屏幕上,使过程变得简单而有效。
 
后层通过自定义Crane的
主色
紫色,与上层白色形成鲜明的对比。

层通过自定义顶部边缘的圆形曲线,来
模仿
Crane标志中圆角矩形。

 

步进器
步进器使Crane用户可以轻松预订机票,住宿和预订餐饮。
Crane在桌面设备和平板端使用一种步进器,而在移动端使用另一种步进器

 
在移动设备上,步骤显示在
背景的底层
,相关的表单位于前层。 如果用户希望看到更多的前层,Crane的步进器的
折叠状态可让
用户在界面顶部处位置知道他们在

进器
过程中的位置。

Crane的移动步进器处于折叠状态。

较大尺寸的平板电脑和桌面使Crane能够
容纳
顶部的所有步进器。

 
缩小至50%
 
 

动效

启动页
角色动画
,强调缓动以及延时动效给页面设定了细腻和优雅的基调


 
Crane首次启动时使用动画
启动页

强化品牌形象

 

导航转换

Crane的导航转换使用强调缓动和延时增加了一种细腻的格调。

父子层级

淡入淡出,共享变换和
强调缓动的动画效果
用于保持连续性。

同级层级

强调
缓动
用于
同级
转换。
​​

 
延时动效
 
当新列表或卡片进入界面
时使用
延时动效
。 级联效果
赋予了变换优雅的格调

​更新日期过滤器会使用延时动效来重新加载列表项。

 

原文:Material Design

 

原文链接:https://www.uiya.cn/15421.html,转载请注明出处。

0
分享海报

评论0

没有账号? 注册  忘记密码?