Shrine
Shirne 是一款零售應(yīng)用程序，使用 Material Design 組件和 Material Theming 來表達時尚和生活品味的品牌體驗。
一. 關(guān)于 Shrine
Shrine 應(yīng)用程序是在線電商應(yīng)用程序，其中包含時尚商品和生活方式。Shrine 的品牌美學(xué)是現(xiàn)代、優(yōu)雅和精致的。
極簡美學(xué)
Shrine 使用了極簡主義的美學(xué)，其中的內(nèi)容和操作占據(jù)了用戶體驗的最前沿。Shrine 在展示各種產(chǎn)品和品牌的貨架處理上起著重要的作用。
視覺主題
斜角切割
斜角切割是 Shrine 應(yīng)用程序中的詩句主題，用于各種組件和元素。它們反應(yīng)在 Shrine Logo 的形狀上，并作為 Shrine 品牌的延伸。
堆疊的頁面
Shrine 交互模型的基本主題是三個堆疊的頁面，底頁上有導(dǎo)航和品牌元素；中間層是主要內(nèi)容；最上層是購物車
二. 產(chǎn)品架構(gòu)
Shrine 應(yīng)用程序的信息體系結(jié)構(gòu)是目錄結(jié)構(gòu)。目錄包含一個頂層菜單，和下層對應(yīng)的物品。Shrine 的頂層類別包含是各類物品的分組（包括鞋子、衣服和配飾等）。
采用目錄結(jié)構(gòu)可以使用戶專注瀏覽感興趣的區(qū)域，相互比較產(chǎn)品，以及查看特定物品的詳細信息。
導(dǎo)航
Shrine 在移動設(shè)備、平板電腦和 PC 上使用不同類型的導(dǎo)航：
移動設(shè)備將導(dǎo)航項放置在 backdrop 組件的 back 層；
平板電腦使用標簽頁進行導(dǎo)航；
PC 使用標準導(dǎo)航抽屜進行導(dǎo)航
選擇指示符
所有導(dǎo)航模式都具有相同的選定狀態(tài)，選擇導(dǎo)航項時，其后會出現(xiàn)一個三角形，這個選擇指示符可確保用戶知道他們所在的位置。
購物車
可以通過屏幕右下角的頁面訪問購物車，在購物車中添加或刪除商品時，頁面會動態(tài)更新以反映更改。
該頁面會擴展顯示購物車中的內(nèi)容，用戶也可以單擊購物車圖標全屏顯示購物車頁面。
三. 布局
網(wǎng)格系統(tǒng)
Shrine 使用自適應(yīng)網(wǎng)格系統(tǒng)，可在移動設(shè)備、平板電腦和 PC 之間自動更改填充和列大小。
水平網(wǎng)格
Shrine 在移動設(shè)備和平板電腦上的布局網(wǎng)格自定義為水平滾動，列、裝訂線（gutter）和邊距（margin）從左到右，而不是從上到下布置。
四. 顏色
Shrine 的顏色主題是單色的，使用了粉色的不同變化。Shrine 的主色調(diào)（Pink 100）填充了背層頁，副色調(diào)（Pink 50）填充了底部頁。主要內(nèi)容使用，深粉色（Pink 900）用于字體和圖標。
1. Shrine Pink 100 用于**添加購物車**按鈕，以確保突出顯示。
2. Shrine Pink 100 用于未選中的面包屑組件，900 用于選中的組件。
顏色和圖片
Shrine 使用圖像處理來指示狀態(tài)變化（例如選中），定制圖像處理是強化 Shrine 品牌的一種方式。
圖像處理用于指示狀態(tài)變化，例如選擇。
對話框下方使用的稀松布定制為使用 Shrine。
五. 版式
類型規(guī)模
Shrine 為應(yīng)用內(nèi)容提供了不同的字體比例，所有的內(nèi)容都使用 [Rubik](https://fonts.google.com/specimen/Rubik) 作為字體，并使用不同的權(quán)重（weight）。
Rubik
Shrine 使用 Rubik 作為其字體。Rubik 是一種無襯線字體，帶有微圓的角，并且有許多權(quán)重可以選擇。Rubik 非常適合 Shrine，因為它是一種清晰、時尚的現(xiàn)代的字體，帶有圓角，給人溫暖、友善和有趣的感覺。
六. 圖標
Shrine 使用 Material Design 默認的圖標系統(tǒng)，這些圖標的構(gòu)造使其在小尺寸時仍清晰可見。
七. 形狀
類別
組件根據(jù)其大小分為不同的形狀類別，這些類別使你可以一次設(shè)置多個組件值，形狀類別包括：
小組件
中組件
大組件
小組件
擴展的懸浮按鈕（Extended Floating Action Button）使用切角，角半徑為4dp。
中組件
菜單（Menu）使用切角，8dp。
大組件
Backdrop 使用不對稱形狀，僅有一個切角，角半徑為24dp。
底部表格頁僅可以調(diào)整左上角和右上角的形狀。
八. 組件
按鈕（Button）
文字按鈕
Shrine 的文字按鈕采用屏幕的背景顏色，沒有標高。
Shrine 低強調(diào)的按鈕沒有容器，也沒有標高。
帶容器的按鈕
Shrine 帶容器的按鈕使用自定義的顏色和樣式，它們包括：
使用切角
拉長寬度
Shrine 帶容器的按鈕使用主色調(diào)（Pink 100），并帶有標高。
面包屑（Chip）
Shrine 在產(chǎn)品詳情頁面使用面包屑組件，這些組件始終具有圓形輪廓，因此與按鈕不同。
標簽頁（Tab）
Shrine 使用標簽頁在 PC 和平板電腦上進行導(dǎo)航，它們使用自定義的顏色、版式和狀態(tài)。
1. 基準標簽頁
2. Shrine 的標簽頁使用自定義的顏色、版式和狀態(tài)。
導(dǎo)航抽屜（Navigation Drawer）和 Backdrop
Shrine 在移動設(shè)備上使用了定制的導(dǎo)航抽屜，可以通過點擊 backdrop 的 back 層來訪問它。
Shrine 的導(dǎo)航抽屜使用自定義字體、顏色和狀態(tài)，內(nèi)容居中對齊。
Shrine 的 backdrop 使用自定義的顏色和形狀，back 層使用主色調(diào)，front 層使用自定義的切角。
圖片列（Image List）
編織圖像列表（Weaved Image List）
Shrine 使用編織的圖像列表來展示內(nèi)容，編織狀的圖像列表使用交替的容器大?。ㄒ蕴囟ū壤M織）來創(chuàng)建有節(jié)奏的布局，這種布局適合隨意瀏覽的內(nèi)容。
編織的圖像列表非常適合 Shrine 的內(nèi)容，因為它增加了每個項目的焦點和新穎性，從而使用戶不必太快地掃描內(nèi)容。
表格頁（Sheet）
Shrine 使用可擴展的底部表格頁，非常方便使用購物車。
九. 交互
Shrine 的交互設(shè)計使用了強調(diào)緩和，較長的持續(xù)時間和交錯的設(shè)計，從而營造出優(yōu)雅而令人愉悅的氛圍。
啟動畫面
Shrine 的產(chǎn)品圖標動畫使 Logo 的幾何形狀更生動。
動畫圖標
動畫圖標增加了樂趣，同時也指導(dǎo)用戶行為。
導(dǎo)航過渡
Shrine 的導(dǎo)航過渡了使用了強調(diào)緩和和長時間的持續(xù)時間來營造優(yōu)雅而令人愉悅的氛圍。時間偏移量用于引起用戶對諸如購物車和結(jié)賬按鈕之類重要元素的注意。在底層頁內(nèi)容上使用交錯的淡入淡出動畫以創(chuàng)建級聯(lián)效果。
用戶教學(xué)
當首次將商品添加到購物車時，用戶教學(xué)會顯示商品在購物車中的位置。
