Reply
Reply 是一款電子郵件應(yīng)用程序，它使用 Material Design組件和 Material Theming 來(lái)創(chuàng)建交流體驗(yàn)。
一. 關(guān)于 Reply
Reply 是一款幫助個(gè)人和團(tuán)體進(jìn)行交流的應(yīng)用程序，它旨在提供清晰飒焦、已讀、直觀和易于使用的功能。
Reply 的品牌彰顯友善灰瞻、干練腥例，并跳脫一些靈性。
功能性的美學(xué)
Reply 的品牌強(qiáng)調(diào)溝通酝润，因此燎竖，應(yīng)用程序的設(shè)計(jì)優(yōu)先考慮功能質(zhì)量，因此功能性的優(yōu)先級(jí)大于易用性要销。
Reply 的品牌通常與用戶(hù)操作配對(duì)构回，例如可以點(diǎn)擊品牌 Logo 訪問(wèn)導(dǎo)航抽屜。
二. 產(chǎn)品架構(gòu)
Reply 使用類(lèi)似于其他電子郵件應(yīng)用程序的產(chǎn)品架構(gòu)：包含新郵件和已歸檔郵件的收件箱疏咐。還有一系列 UI 與郵件操作相關(guān)纤掸，郵件可以加注星標(biāo)，也可以發(fā)送浑塞、刪除和將郵件標(biāo)記為垃圾郵件借跪，或者以自定義的方式組織。
專(zhuān)注用戶(hù)的任務(wù)
由于用戶(hù)任務(wù)主要涉及內(nèi)容的生成和使用酌壕，屏幕空間專(zhuān)注于其他元素上的內(nèi)容掏愁。為了確保內(nèi)容和導(dǎo)航都有足夠的空間，Reply 對(duì) PC卵牍、平板電腦和移動(dòng)設(shè)備使用不同的導(dǎo)航模式果港。
導(dǎo)航抽屜
在 PC 上，Reply 使用標(biāo)準(zhǔn)的導(dǎo)航抽屜辽慕。
抽屜組織
抽屜欄同時(shí)使用圖標(biāo)和文本表示京腥，導(dǎo)航抽屜的頂部包含設(shè)置、賬戶(hù)切換器和 Reply Logo（與之配對(duì)的箭頭）溅蛉。
抽屜交互
輕按時(shí)公浪，Logo 會(huì)將抽屜折疊成滑軌。
底部應(yīng)用欄
在移動(dòng)設(shè)備上船侧，Reply 使用底部應(yīng)用欄進(jìn)行導(dǎo)航欠气。
底部應(yīng)用欄交互
輕按 Reply 圖標(biāo)后，它會(huì)顯示一個(gè)底部導(dǎo)航抽屜镜撩，其中帶有設(shè)置圖標(biāo)和賬戶(hù)頭像（可以輕按以切換賬戶(hù)）预柒。
再次點(diǎn)擊 Reply 圖標(biāo)，導(dǎo)航關(guān)閉袁梗，底部的應(yīng)用欄返回其默認(rèn)狀態(tài)宜鸯。
軌道（Rail）導(dǎo)航
在平板電腦上，Reply 使用軌道導(dǎo)航遮怜，其中每個(gè)目的地均由一個(gè)圖標(biāo)表示淋袖。
軌道交互
輕按 Reply Logo，即可將軌道展開(kāi)成標(biāo)準(zhǔn)導(dǎo)航抽屜锯梁，Logo 旁邊箭頭清晰可見(jiàn)即碗。
軌道導(dǎo)航非常適合在平板電腦上使用焰情，因?yàn)樗梢燥@示大量圖標(biāo)，但占用的空間卻很小剥懒。當(dāng)打開(kāi)軌道導(dǎo)航時(shí)内舟，將顯示自定義文件夾，允許用戶(hù)讀取文件夾標(biāo)題文本初橘。
折疊時(shí)验游，滑軌不包含用戶(hù)創(chuàng)建的自定義文件夾。這是因?yàn)樽远x的文件夾都使用相同的圖標(biāo)壁却，因此不能僅通過(guò)圖標(biāo)區(qū)分它們批狱。
三. 布局
網(wǎng)格系統(tǒng)
Reply 使用了自適應(yīng)網(wǎng)格系統(tǒng)裸准，該系統(tǒng)可以根據(jù)屏幕寬度（例如移動(dòng)設(shè)備展东、平板電腦或 PC）自動(dòng)調(diào)節(jié)列（Column）和填充（Padding）的大小。內(nèi)容堆疊在列中炒俱，這些列在用戶(hù)交互時(shí)會(huì)垂直擴(kuò)展和收縮盐肃。
標(biāo)高
Reply 使用顏色來(lái)區(qū)分組件，例如卡片容器是可見(jiàn)的权悟，因?yàn)榭ㄆ砻骖伾珵榘咨彝酰鴳?yīng)用背景為灰色。
緊密的布局
由于 Reply 有時(shí)會(huì)顯示密集的內(nèi)容峦阁，因此消除影響有助于降低視覺(jué)復(fù)雜度谦铃，這樣項(xiàng)目之間的間隙也會(huì)比較小，可以為內(nèi)容留出更多空間榔昔。
四. 顏色
顏色主題
Reply 使用深藍(lán)灰色（Dark Blue-Gray）作為主色調(diào)驹闰，橙色（Orange）作為副色調(diào)。
由于副色調(diào)很少使用撒会，所以 Reply 的 UI 經(jīng)常使用主色調(diào)的變體嘹朗。這種微妙的顏色主題使內(nèi)容易于閱讀而不會(huì)分散注意力，并且易于看到用戶(hù)頭像诵肛。
當(dāng)使用到 Reply 的副色調(diào)時(shí)屹培，會(huì)產(chǎn)生明顯的影響。
五. 版式
類(lèi)型規(guī)模
Reply 為應(yīng)用內(nèi)容提供了不同的字體比例怔檩，所有的內(nèi)容都使用 [Work Sans](https://fonts.google.com/specimen/Work+Sans) 作為字體褪秀，并使用不同的權(quán)重（weight）。
六. 圖標(biāo)
Reply 的圖標(biāo)具有微妙的樣式薛训，既能夠表達(dá)品牌媒吗，又可以專(zhuān)注于圖標(biāo)的識(shí)別的功能。
七. 形狀
類(lèi)別
組件根據(jù)其大小分為不同的形狀類(lèi)別许蓖，這些類(lèi)別使你可以一次設(shè)置多個(gè)組件值蝴猪，形狀類(lèi)別包括：
小組件
中組件
大組件
小組件
擴(kuò)展的懸浮按鈕（Extended Floating Action Button）使用圓角调衰，角半徑為50%。
中組件
卡片（Card）使用方角自阱，0dp嚎莉。
大組件
底部表格（Bottom Sheet）使用圓角，12dp沛豌。
底部表格頁(yè)僅可以調(diào)整左上角和右上角的形狀趋箩。
八. 組件
懸浮按鈕（Floating Action Button）
在移動(dòng)設(shè)備上，Reply 將自定義的懸浮按鈕嵌套在底部的應(yīng)用欄中加派。
1. 基準(zhǔn)懸浮按鈕叫确；
2. Reply 的懸浮按鈕使用自定義的顏色和圖標(biāo)。
擴(kuò)展的懸浮按鈕（Extended FAB）
在 PC 和平板電腦上芍锦，Reply 使用與導(dǎo)航抽屜配對(duì)的自定義擴(kuò)展懸浮按鈕竹勉。
1. 基準(zhǔn)擴(kuò)展懸浮按鈕；
2. Reply 的擴(kuò)展懸浮按鈕使用自定義的顏色和圖標(biāo)娄琉。
底部應(yīng)用欄（Bottom App Bar）次乓、底部表格（Bottom Sheet）
在移動(dòng)設(shè)備上，Reply 使用自定義的底部應(yīng)用欄進(jìn)行導(dǎo)航和重要操作孽水。
1. 基準(zhǔn)底部應(yīng)用欄票腰；
2. Reply 的地步應(yīng)用欄使用自定義的圖標(biāo)、顏色和形狀女气。Reply 的 Logo 合并在組件中杏慰，用作菜單圖標(biāo)。欄中的自定義形狀包含懸浮按鈕炼鞠。
底部應(yīng)用欄
在移動(dòng)設(shè)備上缘滥，Reply 的底部應(yīng)用欄是執(zhí)行導(dǎo)航和操作的主要方式。
上下文操作欄
當(dāng)用戶(hù)選中多個(gè)項(xiàng)目時(shí)簇搅，底部應(yīng)用欄轉(zhuǎn)換為上下文操作欄完域。
底部導(dǎo)航抽屜
當(dāng)按下 Reply Logo 后，底部應(yīng)用欄會(huì)顯示為一個(gè)底部導(dǎo)航抽屜瘩将，其中包含導(dǎo)航項(xiàng)目和一個(gè)賬戶(hù)切換器吟税。
懸浮按鈕
當(dāng)滾動(dòng)屏幕時(shí)，底部應(yīng)用欄消失姿现，但是懸浮按鈕依然存在肠仪。
卡片（Card）
Reply 將電子郵件顯示在自定義方角的卡片上，卡之間的間隙非常小备典，通過(guò)顏色表示每個(gè)卡之間的邊界（沒(méi)有使用標(biāo)高）异旧。
較小的填充可以使更多內(nèi)容適合屏幕展示。
將卡向右滑動(dòng)提佣，將顯示刪除郵件的操作吮蛹。
將卡向左滑動(dòng)荤崇，將顯示加注星標(biāo)的操作。
面包屑（Chip）
Reply 的面包屑組件使用自定義的版式潮针、顏色和圖像大小术荤。
1. 基準(zhǔn)面包屑組件；
2. Reply 的面包屑使用自定義的顏色和版式每篷，頭像的圖像被放大瓣戚。
九. 交互
啟動(dòng)畫(huà)面
Reply 的 Logo 動(dòng)畫(huà)受彎曲的紙片所啟發(fā)，描繪了一條路徑焦读。
導(dǎo)航過(guò)渡
Reply 使用更短的持續(xù)時(shí)間和標(biāo)準(zhǔn)放緩（standard easing）以專(zhuān)注于效率子库。
圖標(biāo)的插畫(huà)
動(dòng)畫(huà)插畫(huà)在用戶(hù)行為的關(guān)鍵節(jié)點(diǎn)建立聯(lián)系，例如查看完收件箱中的所有郵件矗晃。
剩下的兩封電子郵件被存檔仑嗅，觸發(fā)慶祝動(dòng)畫(huà)。
當(dāng)向下拉動(dòng)頁(yè)面加載新郵件時(shí)喧兄，Reply 的 Logo 動(dòng)畫(huà)會(huì)持續(xù)循環(huán)播放无畔。
