Shrine

Shirne 是一款零售应用程序，使用 Material Design 组件和 Material Theming 来表达时尚和生活品味的品牌体验。

一. 关于 Shrine

Shrine 应用程序是在线电商应用程序，其中包含时尚商品和生活方式。Shrine 的品牌美学是现代、优雅和精致的。

极简美学

Shrine 使用了极简主义的美学，其中的内容和操作占据了用户体验的最前沿。Shrine 在展示各种产品和品牌的货架处理上起着重要的作用。

视觉主题

斜角切割

斜角切割是 Shrine 应用程序中的诗句主题，用于各种组件和元素。它们反应在 Shrine Logo 的形状上，并作为 Shrine 品牌的延伸。

堆叠的页面

Shrine 交互模型的基本主题是三个堆叠的页面，底页上有导航和品牌元素；中间层是主要内容；最上层是购物车

二. 产品架构

Shrine 应用程序的信息体系结构是目录结构。目录包含一个顶层菜单，和下层对应的物品。Shrine 的顶层类别包含是各类物品的分组（包括鞋子、衣服和配饰等）。

采用目录结构可以使用户专注浏览感兴趣的区域，相互比较产品，以及查看特定物品的详细信息。

导航

Shrine 在移动设备、平板电脑和 PC 上使用不同类型的导航：

移动设备将导航项放置在 backdrop 组件的 back 层；

平板电脑使用标签页进行导航；

PC 使用标准导航抽屉进行导航

选择指示符

所有导航模式都具有相同的选定状态，选择导航项时，其后会出现一个三角形，这个选择指示符可确保用户知道他们所在的位置。

购物车

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

该页面会扩展显示购物车中的内容，用户也可以单击购物车图标全屏显示购物车页面。

三. 布局

网格系统

Shrine 使用自适应网格系统，可在移动设备、平板电脑和 PC 之间自动更改填充和列大小。

水平网格

Shrine 在移动设备和平板电脑上的布局网格自定义为水平滚动，列、装订线（gutter）和边距（margin）从左到右，而不是从上到下布置。

四. 颜色

Shrine 的颜色主题是单色的，使用了粉色的不同变化。Shrine 的主色调（Pink 100）填充了背层页，副色调（Pink 50）填充了底部页。主要内容使用，深粉色（Pink 900）用于字体和图标。

1. Shrine Pink 100 用于**添加购物车**按钮，以确保突出显示。

2. Shrine Pink 100 用于未选中的面包屑组件，900 用于选中的组件。

颜色和图片

Shrine 使用图像处理来指示状态变化（例如选中），定制图像处理是强化 Shrine 品牌的一种方式。

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

对话框下方使用的稀松布定制为使用 Shrine。

五. 版式

类型规模

Shrine 为应用内容提供了不同的字体比例，所有的内容都使用 [Rubik](https://fonts.google.com/specimen/Rubik) 作为字体，并使用不同的权重（weight）。

Rubik

Shrine 使用 Rubik 作为其字体。Rubik 是一种无衬线字体，带有微圆的角，并且有许多权重可以选择。Rubik 非常适合 Shrine，因为它是一种清晰、时尚的现代的字体，带有圆角，给人温暖、友善和有趣的感觉。

六. 图标

Shrine 使用 Material Design 默认的图标系统，这些图标的构造使其在小尺寸时仍清晰可见。

七. 形状

类别

组件根据其大小分为不同的形状类别，这些类别使你可以一次设置多个组件值，形状类别包括：

小组件

中组件

大组件

小组件

扩展的悬浮按钮（Extended Floating Action Button）使用切角，角半径为4dp。

中组件

菜单（Menu）使用切角，8dp。

大组件

Backdrop 使用不对称形状，仅有一个切角，角半径为24dp。

底部表格页仅可以调整左上角和右上角的形状。

八. 组件

按钮（Button）

文字按钮

Shrine 的文字按钮采用屏幕的背景颜色，没有标高。

Shrine 低强调的按钮没有容器，也没有标高。

带容器的按钮

Shrine 带容器的按钮使用自定义的颜色和样式，它们包括：

使用切角

拉长宽度

Shrine 带容器的按钮使用主色调（Pink 100），并带有标高。

面包屑（Chip）

Shrine 在产品详情页面使用面包屑组件，这些组件始终具有圆形轮廓，因此与按钮不同。

标签页（Tab）

Shrine 使用标签页在 PC 和平板电脑上进行导航，它们使用自定义的颜色、版式和状态。

1. 基准标签页

2. Shrine 的标签页使用自定义的颜色、版式和状态。

导航抽屉（Navigation Drawer）和 Backdrop

Shrine 在移动设备上使用了定制的导航抽屉，可以通过点击 backdrop 的 back 层来访问它。

Shrine 的导航抽屉使用自定义字体、颜色和状态，内容居中对齐。

Shrine 的 backdrop 使用自定义的颜色和形状，back 层使用主色调，front 层使用自定义的切角。

图片列（Image List）

编织图像列表（Weaved Image List）

Shrine 使用编织的图像列表来展示内容，编织状的图像列表使用交替的容器大小（以特定比例组织）来创建有节奏的布局，这种布局适合随意浏览的内容。

编织的图像列表非常适合 Shrine 的内容，因为它增加了每个项目的焦点和新颖性，从而使用户不必太快地扫描内容。

表格页（Sheet）

Shrine 使用可扩展的底部表格页，非常方便使用购物车。

九. 交互

Shrine 的交互设计使用了强调缓和，较长的持续时间和交错的设计，从而营造出优雅而令人愉悦的氛围。

启动画面

Shrine 的产品图标动画使 Logo 的几何形状更生动。

动画图标

动画图标增加了乐趣，同时也指导用户行为。

导航过渡

Shrine 的导航过渡了使用了强调缓和和长时间的持续时间来营造优雅而令人愉悦的氛围。时间偏移量用于引起用户对诸如购物车和结账按钮之类重要元素的注意。在底层页内容上使用交错的淡入淡出动画以创建级联效果。

用户教学

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