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的教育动效
*原文作者为谷歌设计团队，本文为个人翻译作品，仅供学习参考
