2.8 Shrine(电商APP)

Shrine

Shrine是一款零售APP，它使用Material Design组件和主题来表现各种时尚和生活方式商品的品牌。

目录

简介

架构

布局

颜色

文字

图标

形状

组件

动效

简介

Shrine提供了一个主打生活方式和热销时尚商品的在线市场，其品牌美学定位为现代、优雅和精致。Shrine是各种品牌和产品展示背后的统一理念。

极简美

Shrine采用极简美学，以内容和操作作为用户体验的首选。Shrine的品牌在集中统一展示各种产品和品牌中扮演了重要角色。

视觉主题

斜切角是Shrine的一个视觉主题，用于各种组件和元素。它们也表现在Shrine logo以及品牌延伸上。

Shrine logo和切角示例

重叠面板：Shrine交互模型的基本结构为三层重叠面板。底层面板有导航和品牌元素；中层面板包含主要内容；顶层面板为购物车。

1. 底层面板；2. 中层面板；3. 顶层面板

架构

Shrine的信息架构中包含目录结构。目录中有分类信息，由可能包含从属项的同等顶级类组成。Shrine的顶级类将商品按类型（鞋、配饰、服装等）分组，因此能通过相互关系来查看。

采用目录结构可以使用户浏览兴趣区域、对比商品以及查看详情等。

导航

Shrine在移动、平板和桌面端使用不同的导航类型。

•  移动端导航项放置在背景组件的底层

•  平板端使用标签导航（Tabs）

•  桌面端使用标准抽屉导航

尽管使用了不同的导航模式，但它们的一致性保证了相互间的和谐易用。

选中标识：所有导航模式共用相同的已选状态——当选中导航项时，其下方会出现一个三角形状。这些选中标识能确保用户知道他们所处的位置。

Shrine的选中标识使用了深色文本和三角形状。

购物车

购物车可以通过屏幕右下角的动作条（面板）来访问。由于购物车中可以添加或删除商品，因此动作条会通过即时变化来反馈动态更新。

点击动作条上的购物车图标可以展开相关内容，把用户带到购物车界面。

购物车

布局

栅格系统

Shrine使用响应式栅格系统，其间距和列能通过改变大小来适配移动、平板和桌面端尺寸。

Shrine的栅格系统

水平网格：在移动和平板端，Shrine通过自定义网格布局来满足水平滚动的需求。列、槽（内间距）和外间距从上到下排列，而非从左到右。

颜色

Shrine颜色主题为单色，使用了主色粉红色的深浅衍生色。底层面板填充主色（粉红100 *），底部动作条（顶层面板）填充辅助色（粉红50）。主要内容显示在白色表面上，深衍生色(粉红900)用于文字和图标。

*个人标注：此处的“100”指的是明度等级，范围在0（纯白）~1000（纯黑）之间，MD中一般以50或100为间隔。更详细的内容将在以后的MD颜色系统专题中讲解。

Shrine的调色盘

1. Shrine粉红100用于“ADD TO CART（添加到购物车）”按钮填充，确保其突出可见。

2. Shrine粉红100用于线性未选纸片（小标签），900用于已选。

颜色和图像

Shrine利用图像处理来表明状态改变（例如选中）或作为遮罩层。自定义图像处理是加强品牌表现的一种方式。

图像处理用于指示状态改变，例如选中。

对话框下面的遮罩使用了自定义的Shrine粉红。

文字

字体格式

Shrine的字体格式给内容提供了必要的文字排版变化。所有字体格式都使用Rubik字体，字重包括Rubik Light, Regular和Medium。

Shrine的字体格式

Rubik

Shrine使用Rubik作为字体类型。Rubik是一个带有细微圆角和多种可选字重的无衬线字体。Rubik很适合Shrine，因为它是一款清晰可读、个性和现代化的字体，其圆角也赋予了它温和、友好和有趣的特性。

Rubic字形

Rubik与Roboto相比较

图标

Shrine使用Material Design默认图标系统。这些图标结构在小尺寸显示时在也能保持清晰可读。

1. 为形成一致性，所有的Shrine图标都使用相同的底层网格系统

2. 一套Shrine图标集

形状

组件基于其形状尺寸组成了形状类。形状类能让你一次设置多个组件值。形状类包括：

• 小型组件

• 中型组件

• 大型组件

Shrine形状类

(1)小型组件；(2)中型组件；(3)大型组件

小型组件

扩展型FABs（浮动操作按钮）属于小型形状类。它们的角为切角，长度为4dp。

中型组件

菜单属于中型形状类。它们的角为切角，长度为8dp。

大型组件

背景（backdrop）属于大型形状类。它的几个角为不对称的切角，长度为24;0;n/a;n/a dp。

*底部动作条只能改变左上角和右上角。

组件

按钮

文本按钮

Shrine的文本按钮采用主色的深衍生色，没有高度（即与对话框的高度一致）。

Shrine的非重点按钮没有容器和高度

   

1. 标准文本按钮

2. Shrine文本按钮使用了自定义的颜色和文字

填充按钮

Shrine的填充按钮使用了自定义的颜色和文字。它们的改动包括：

• 角度边角

• 拉长宽度

Shrine的填充按钮使用主色（粉红100），带有高度。

  

1. 标准填充按钮

2. Shrine的填充按钮使用自定义形状、颜色和文字

纸片（Chips，小标签）

Shrine在产品详情页中使用了选择纸片。这些纸片保留了圆角，能与按钮区分开来。

Shrine的自定义选择纸片

 . 

1. 标准选择纸片

2. Shrine的选择纸片使用自定义形状、颜色、文字和状态。已选纸片会改变颜色和字体大小。

标签（Tabs）

Shrine在桌面和平板端使用标签导航。它们使用自定义颜色、文字和状态。

为表示标签激活状态，后面放置了一个自定义形状。

1. 标准标签导航

2. Shrine的标签导航使用自定义形状、颜色、文字和状态

抽屉导航和背景组件（Backdrop）

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

Shrine的抽屉导航使用自定义文字、颜色和状态。文字居中对齐也是一个自定义特征。

Shrine的背景组件使用自定义颜色和形状。后层面板使用主色，前层面板左上角有个自定义切角。

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

图像列表

编织式图像列表

Shrine使用编织式图像列表来表现内容。编织式图像列表使用尺寸可变（特定比例）的容器来创建有节奏的布局，非常适合随意浏览同等级的内容。

编织式图像列表是表现Shrine内容的理想组件，因为它突出了每个商品的特点和创意，避免用户一扫而过。

Shrine的编织式图像列表

动作条

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

动作条

动效

Shrine的动效设计使用强调缓动、长时长和交错来建立愉悦和优雅的格调。

启动界面

Shrine的产品图标动画演绎了logo的几何形态。

Shrine的启动界面

动效图标

动效图标既增加了愉悦性，也引导了用户的体验流程。

Shrine的动效图标

导航转换

Shrine的导航转换使用强调缓动和长时长来表现放松和优雅的效果。短暂偏移*主要用于突出重要元素（例如购物车或者结账按钮）。后层内容通过交错动效来展示瀑布效果。

*个人标注：短暂偏移（Temporal offsets），指的是在所有动画元素结束动作时，给其中某元素额外增加一点时间，达到强调的效果（类似随处可见的Ken Berns效果，打开图片或含图片的界面后，图片还会缓慢放大）。

Shrine的导航转换

用户教育

首次添加商品到购物车时，教育动效显示了商品在购物车中的位置。

Shrine的教育动效

*原文作者为谷歌设计团队，本文为个人翻译作品，仅供学习参考