资讯详情
关于Shrine
产品架构
布局
颜色
排版
图标
形状
组件
动效
Shrine是一个零售应用程序，它使用材料设计组件和材料主题来表达各种时尚和生活方式项目的品牌。
Shrine应用程序提供了一个在线市场，通过促销标签来强调生活方式和时尚主题。 Shrine’s的视觉是摩登的，优雅的，精致的。在多个品牌、展示产品下，Shrine’s的设计概念是统一的。
极简美学
Shrine采用极简主义美学，创造了一种让内容和动作引导用户的体验。 Shrine的品牌扮演着重要的角色，统一的架构作为展示各种产品和品牌的核心。
视觉主题
角度切割
有角度的切口是Shrine应用程序中的视觉主题，用于各种组件和元素。 它们呼应了Shrine的LOGO形状，并作为Shrine品牌的延伸。
重叠的动作条
Shrine交互模型的基本主题是三个重叠的表格。 底部动作条有导航和品牌元素; 中层动作条有主要内容; 顶部动作条有购物车。
底部动作条
中层动作条
顶部动作条
Shrine应用程序的信息架构具有目录结构。 目录包含分类数据，而顶层类别可能包含从属项的同级节点。 Shrine的顶层类别分为各种类型的商品（鞋子，配饰，连衣裙），这样商品之间的关联就清晰可见了。
采用目录结构允许用户浏览感兴趣的区域，对比不同的分类，以及查看特定项目的详细信息。
导航
Shrine在移动设备，平板电脑和桌面上使用不同类型的导航。
移动设备将导航项目放置在背景层组件的后层中
平板电脑使用标签进行导航
桌面使用标准导航抽屉
选择指示器
所有导航模式共享相同的选定状态：选择导航项时，后面会出现三角形。 这些选择指示器确保用户能明确其所在的位置。
购物车
可以通过屏幕右下角的动作条访问购物车。 在购物车中添加或删除商品时，工作表会动态更新以反映更改。
此工作表可以展开以显示其内容，或通过单击购物车图标将用户带到购物车界面。
购物车
网格系统
Shrine使用响应式网格系统，允许列和内边距大小在移动设备，平板电脑和桌面之间切换。
Shrine的网格系统。 缩小至50％
水平网格
Shrine在移动设备和平板电脑上的网格布局可以自定义为水平滚动。 列，间隙，边距从左到右排列，而不是从上到下排列。
Shrine的颜色主题是单色的，使用主色Shrine Pink的浅色和深色变化。 Shrine的主色（Shrine Pink 100）填充背层，辅助色（Shrine Pink 50）填充底部。 主要内容在白色界面上，深色的Shrine Pink 900用于排版和图标。
Shrine Pink 100用于“添加到购物车”按钮，确保突出显示。
Shrine Pink 100用于表示未选择的纸片，900用于选定的纸片。
颜色和图像
shrine采用图像处理方式，或者使用遮罩，来指示状态的变化（例如选择状态）。
字体比例
Shrine的字体比例提供应用内容所需的排版样式。 字体比例中的所有项目都使用Rubik作为字体，包括Rubik Light，Regular和Medium。
Rubik
Shrine使用Rubik作为字体。 Rubik是一种无衬线字体，有圆角和许多字体粗细可供选择。 Rubik非常适合Shrine，因为它是一种清晰，时尚，现代的字体，圆角使其具有温暖，友好和有趣的特点。
Shrine使用材料设计默认图标系统。 这些图标的构造使其在小尺寸下保持清晰易读。
为了创建一致性，Shrine的所有图标共享相同的底层网格结构。
Shrine的图标集。
组件根据尺寸分类为形状组。形状分类使多个组件一次性完成数值的设置。形状分类包括：
小组件
中等组件
大型组件
小组件
扩展浮动操作按钮属于小的形状分类。它们的拐角是裁剪了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在产品详细信息页面上使用选择纸片。 卡片具有圆形边缘，使得纸片与按钮始终保持区别。
标签
Shrine使用标签在桌面和平板电脑上进行导航。 他们使用自定义颜色，排版和状态。
为显示激活的选项卡，在其后面放置了一个自定义形状。
非自定义的选项卡。
Shrine的标签使用自定义形状，颜色，排版和状态。
导航抽屉和背景
Shrine在移动端上使用自定义的导航抽屉。 可以通过点击背景组件的底层来访问它。
Shrine的导航抽屉使用自定义排版，颜色和状态。 居中对齐的文体是自定义的另一个特征。
Shrine的背景使用自定义颜色和形状。 后层使用应用程序的主色; 前层的左上角有一个自定义角度切割。
图片列表
排列图片列表
Shrine使用排列图片列表来展示内容。 排列图片列表使用交替的容器大小（以特定比率）来创建节奏布局，并且最适合于对同级内容的随意浏览。
排列图片列表是Shrine内容的理想选择，因为它提高了每个项目的焦点和新颖性，使用户不会过快地浏览内容。
动作条
Shrine使用扩展底部动作条轻松访问购物车。
