Material Design Shrine

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

 

目录

关于Shrine
产品架构
布局
颜色
排版
图标
形状
组件
动效

 

Shrine是一个零售应用程序，它使用材料设计组件和材料主题来表达各种时尚和生活方式项目的品牌。​​

 

关于Shrine

Shrine应用程序提供了一个在线市场，通过促销标签来强调生活方式和时尚主题。 Shrine’s的视觉是摩登的，优雅的，精致的。在多个品牌、展示产品下，Shrine’s的设计概念是统一的。
​​

极简美学
Shrine采用极简主义美学，创造了一种让内容和动作引导用户的体验。 Shrine的品牌扮演着重要的角色，统一的架构作为展示各种产品和品牌的核心。

视觉主题
角度切割
有角度的切口是Shrine应用程序中的视觉主题，用于各种组件和元素。 它们呼应了Shrine的LOGO形状，并作为Shrine品牌的延伸。
​​
Shrine的Logo中的角度切割和用户界面中角度切割对比的例子

重叠的动作条
Shrine交互模型的基本主题是三个重叠的表格。 底部动作条有导航和品牌元素; 中层动作条有主要内容; 顶部动作条有购物车。

​​

1. 底部动作条
2. 中层动作条
3. 顶部动作条

 

产品架构

Shrine应用程序的信息架构具有目录结构。 目录包含分类数据，而顶层类别可能包含从属项的同级节点。 Shrine的顶层类别分为各种类型的商品（鞋子，配饰，连衣裙），这样商品之间的关联就清晰可见了。

采用目录结构允许用户浏览感兴趣的区域，对比不同的分类，以及查看特定项目的详细信息。

导航

Shrine在移动设备，平板电脑和桌面上使用不同类型的导航。

1. 移动设备将导航项目放置在背景层组件的后层中
2. 平板电脑使用标签进行导航
3. 桌面使用标准导航抽屉
   ​​
   虽然使用了不同的导航模式，但它们在重要的部分保持一致性，确保易于使用它们。

 

选择指示器
所有导航模式共享相同的选定状态：选择导航项时，后面会出现三角形。 这些选择指示器确保用户能明确其所在的位置。
​​
Shrine的选择指标使用较暗的文字和三角形

 

购物车

可以通过屏幕右下角的动作条访问购物车。 在购物车中添加或删除商品时，工作表会动态更新以反映更改。

此工作表可以展开以显示其内容，或通过单击购物车图标将用户带到购物车界面。

购物车

 

布局

网格系统

Shrine使用响应式网格系统，允许列和内边距大小在移动设备，平板电脑和桌面之间切换。

Shrine的网格系统。 缩小至50％

 

水平网格
Shrine在移动设备和平板电脑上的网格布局可以自定义为水平滚动。 列，间隙，边距从左到右排列，而不是从上到下排列。
​​
缩小至50％

 

颜色

Shrine的颜色主题是单色的，使用主色Shrine Pink的浅色和深色变化。 Shrine的主色（Shrine Pink 100）填充背层，辅助色（Shrine Pink 50）填充底部。 主要内容在白色界面上，深色的Shrine Pink 900用于排版和图标。
​​
Shrine的调色板

​​

 

1. Shrine Pink 100用于“添加到购物车”按钮，确保突出显示。
2. Shrine Pink 100用于表示未选择的纸片，900用于选定的纸片。

 

颜色和图像
shrine采用图像处理方式，或者使用遮罩，来指示状态的变化（例如选择状态）。
​​
图像处理方式用于指示状态变化，例如选择。
​​

在对话框下的遮罩层是自定义的Shrine Pink。

 

排版

字体比例

Shrine的字体比例提供应用内容所需的排版样式。 字体比例中的所有项目都使用Rubik作为字体，包括Rubik Light，Regular和Medium。
​​
Shrine的字体比例

 

Rubik
Shrine使用Rubik作为字体。 Rubik是一种无衬线字体，有圆角和许多字体粗细可供选择。 Rubik非常适合Shrine，因为它是一种清晰，时尚，现代的字体，圆角使其具有温暖，友好和有趣的特点。
​​
Rubik的字形
​​

Rubik和Roboto的对比

 

图标

Shrine使用材料设计默认图标系统。 这些图标的构造使其在小尺寸下保持清晰易读。
​​

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

 

形状

组件根据尺寸分类为形状组。形状分类使多个组件一次性完成数值的设置。形状分类包括：

1. 小组件
2. 中等组件
3. 大型组件
   ​​
   Shrine的形状分类
   ​​
   1.小组件
   2.中等组件
   3.大型组件

小组件
扩展浮动操作按钮属于小的形状分类。它们的拐角是裁剪了4dp长的形状。
​​

 

组件	类别	属性	值
扩展FAB	小组件	字体大小	切角 4dp；4dp；4dp；4dp

 

中等组件
菜单属于中等形状分类。它们的拐角是裁剪了8dp长的形状。
​​

组件	类别	属性	值
菜单	中等组件	字体大小	切角 8dp；8dp；8dp；8dp

 

大型组件
一个背景页面属于大型形状分类。它的拐角是不规则的裁切形状，数值如下：24; 0; n / a; n / a dp
​​

组件	类别	属性	值
背景	大型组件	字体大小	切角 24dp；0dp；n/a;n/a＊

＊底部动作条的拐角只在左上和右上的位置。

 

组件
​​

 

按钮
文字按钮
Shrine的文字按钮采用屏幕的背景颜色，没有高度。
​​
Shrine的轻度强调按钮没有容器，也没有高度。
​​

 

实心按钮
Shrine的实心按钮使用自定义颜色和排版。 它们已被修改为：

1. 斜角
2. 细长宽度
   ​​
   Shrine的实心按钮使用原色Shrine Pink 100，带有高度。
   ​​

 

纸片
Shrine在产品详细信息页面上使用选择纸片。 卡片具有圆形边缘，使得纸片与按钮始终保持区别。
​​
Shrine的自定义选择纸片

 

​​

标签

Shrine使用标签在桌面和平板电脑上进行导航。 他们使用自定义颜色，排版和状态。
​​
（放大200％）

为显示激活的选项卡，在其后面放置了一个自定义形状。

​​

1. 非自定义的选项卡。
2. Shrine的标签使用自定义形状，颜色，排版和状态。

 

导航抽屉和背景

Shrine在移动端上使用自定义的导航抽屉。 可以通过点击背景组件的底层来访问它。

Shrine的导航抽屉使用自定义排版，颜色和状态。 居中对齐的文体是自定义的另一个特征。

Shrine的背景使用自定义颜色和形状。 后层使用应用程序的主色; 前层的左上角有一个自定义角度切割。

Shrine的背景和自定义的导航抽屉

 

图片列表

排列图片列表
Shrine使用排列图片列表来展示内容。 排列图片列表使用交替的容器大小（以特定比率）来创建节奏布局，并且最适合于对同级内容的随意浏览。

排列图片列表是Shrine内容的理想选择，因为它提高了每个项目的焦点和新颖性，使用户不会过快地浏览内容。
​​
Shrine的排列图片列表，缩小至50％

 

动作条
Shrine使用扩展底部动作条轻松访问购物车。

动作条
​​

 

动效

Shrine的动效设计通过强调缓和，更长的延迟和摇摆来营造优雅和愉悦的格调。

启动页面
Shrine的产品图标动画以其图标的几何形式呈现。

Shrine的启动页面

 

动效图标

动效图标增加了乐趣，同时也引导用户旅程。

Shrine的动效图标

 

导航过渡

Shrine的导航过渡使用强调缓和和长持续时间来实现轻松优雅的格调。 时间延迟用于引起对重要元素的注意，例如购物车和结账按钮。 在后层内容上使用交错的淡入淡出以产生级联效果。

​Shrine的导航过渡

 

用户教学
首次将项目添加到购物车时，教学动画会显示购物车中商品的位置。

Shrine的教学动画

 

原文地址：Material Design