one 點設計-木木翻譯
Basil是一個菜單app，使用了MD設計元件和主題創造了一個令人激動和易于探索的品牌體驗。
目錄
· 關于Basil
· 産品解構
· 布局
· 色彩
· 排版
· 圖示
· 元件
· 動效
關于Basil
Basil為使用者提供一道道由主廚和調味大師準備的菜單。App的設計和品牌一樣十分具有親切感，并且充滿了簡明和令人喜悅的内容。
有趣但實用的美學
Basil采用了大膽的排版和用色搭配簡單的内容，創造了一個讓人樂于探索且易于使用的app。
産品解構
Basil應用的資訊架構有一個目錄組織，目錄包含分類，層級資料和幾個呈現不同資料的頂級頻道。
四個頂級頻道
Basil應用根據菜單的分類不同提供了四個頂級頻道：開胃菜，主菜，甜點和雞尾酒。每一個頻道裡都羅列了大量的菜單，包含兩個子子產品：配方和工序。
一種新穎的導航方法
雖然導航抽屜通常用于目錄組織，但Basil的互動模型使用了許多元件來創造一種新穎且有時令人驚訝的體驗。
Basil在平闆、手機和電腦上的顯示
電腦和平闆上的導航
在電腦和平闆上，Basil的主要内容可以通過固定的标簽通路。在電腦上可以使用垂直滾動條浏覽每個章節的内容，平闆上則使用水準滾動條。
在電腦上，Basil的主菜部分的内容可以垂直滾動。縮小至50%的顯示。
選擇菜單後，使用Tabs（頁籤）在配方和工序之間切換。使用自定義Stepper（步進器）元件顯示步驟。
在平闆上，Basil的菜單詳情螢幕也使用了頁籤和步進器。
手機導航
在移動裝置上，可以通過向下滑動以顯示導航抽屜來通路Basil的主要部分。
Basil的navigation drawer（抽屜導航）
選擇一個部分之後，水準滑動切換菜單。
選擇菜單之後，可以點選底部頁籤檢視配方和工序。
選擇其中一個頁籤後，底部表單動畫呼出直到充滿螢幕顯示相關内容。在該表單中，使用者可以在配方和工序之間切換，或者向下滑動關閉表單。
在手機上，你可以在底部表單找到菜單
布局
網格化系統
Basil使用響應式網格化系統，可以根據螢幕尺寸靈活調整列數和間隔的尺寸。
Basil采用内容居中的布局形式。
Basil的網格系統，縮小至50%。
Basil的标題也會根據手機螢幕尺寸調整字型大小。
菜單的标題大小根據螢幕寬度動态調整
菜單的标題大小根據螢幕寬度動态調整
高度
Basil不使用投影表示兩個元素之間的高度差，而是通過視差動效與不透明度來區分内容所處的不同高度。
通過視差動效可以區分這三個圖層各不相同。
Basil通過透明度來顯示UI元素圖層的不同高度。
這個稍微透明點的底部呼出表單，可以讓使用者約略看到下面的菜單内容。這個疊加的圖層向使用者表明他們沒有跳轉到新的頁面，使用者可以可以操作這個呼出表單的内容。
當文本在圖檔上滑動時，圖檔上覆寫一個有色蒙闆可以確定文字的可讀性。
蒙闆處理
顔色
Basil從水果和蔬菜中擷取靈感，采用了熱烈且豐富的色彩主題。
· Basil的主色調是橄榄綠
· Basil的輔助色是橘色
Basil的主題色
排版
字型
1．Montserrat字型
2．Lekton字型
字号
Basil的使用了兩種類型的字型：Montserrat字型和 Lekton字型。這兩種風格迥異的字型增加了Basil的獨特性。
Basil的字号
Montserrat字型
Montserrat時一種無襯線的寬字型。Basil用它顯示正文、标題和按鈕的文本。
Montserrat的字形
Montserrat和Roboto字型的比較
Lekton字型
Lekton字型的靈感來源于Olivetti打自己中使用的字型。字形是“三維空間”的，意味着它們是使用三個相同子產品組成的。字型預設垂直對齊，類似于等寬字型。Lekton在Basil中用在較小的标題和副标題上。
Lekton的字形
Lekton和Roboto字型的比較
Icon
Basil采用簡潔、富有想象力的自定義icon，更加容易地呈現内容。
1.為了建立一緻性，Basil所有的icon都使用相同的底層網格結構。
2.Basil的icon集。
Basil的icon使用主色調（橄榄綠）。輔助色（橘色）用在表示不包含某種食物類型時（如麸制品或乳制品）。
Basil的輔助色被用來說明菜單中的麸制品和雞蛋是自選的。
元件
清單
Basil使用清單控件顯示每個菜單的配方。所有清單使用Basil的排版和icon，配方與用量使用點線連接配接。
Basil自定義清單
底部表單
在手機上，Basil使用一個擴充的底部表單提供菜單的配方和工序。
點選标簽之後向上呼出一個全屏的表單覆寫在内容上面。在表單上使用者可以在配方和工序之間進行切換。
表單的背景輕微透明，讓使用者可以知道表單是位于生成它的螢幕上方，并且使用者是随時可以關閉該表單。
Basil可擴充的底部表單
标簽
在電腦和平闆上，Basil使用标簽在各個部分之間進行導航。标簽在固定寬度區域上均勻分布，該區域與螢幕中心對齊。
Basil在電腦和平闆上使用自定義的标簽進行導航，縮小至62.5%。
1.一個标準的tab
2.Basil在電腦和平台上的導航标簽使用了自定義的排版、顔色和狀态。通過增加文本的粗細來表示選中狀态。（縮小至62.5%）
在手機上，使用者可以通過頁籤在菜單的配方和工序之間進行切換。預設情況下，标簽顯示在菜單頁面的底部。選擇後，他們會移動到螢幕的頂端并且允許使用者在兩個标簽之間進行切換。
菜單的内容标簽最初是在螢幕的底部（如1）。當點選後，他們移到了螢幕的頂部，并且允許使用者在兩個标簽之間進行切換（如2）。
1.标準的标簽樣式
2.Basil的菜單标簽使用了自定義的排版、顔色、和狀态。自定義的選中狀态加粗了字型并且在底部加粗了線條。
步進器
Basil的菜單工序使用了非線性的步進器元件，使用者可以在不同的工序之間任意選擇。Basil的豎直步進器使用了自定義的排版和色系。
（1）Basil對選中的步進器節點使用放大聚焦，放大至200%。
（2）Basil的步進器顯示在螢幕的右邊。
Basil的步進器節點使用了伸縮動效表現出靈活的風格。
動效
啟動頁
Basil應用的logo動畫使用了視差效果。底部的閃爍箭頭鼓勵使用者進行點選探索。
當啟動Basil的時候，有一個logo動畫進行展示。
導航過渡
在浏覽應用程式時，Basil使用了強調緩和、視差和壓縮過渡。
手機
在過渡中使用視差效果表明不同元素的高度增加了視覺的趣味性。
移動裝置上的導航過渡利用了視差動效，
平闆和電腦
在平闆和電腦上，Basil使用壓縮過渡保持效果的簡潔。Z軸上的平移和淡入淡出動畫組合建立了一個壓縮過渡。
在平闆和電腦上單擊菜單縮略圖時父子場景的過渡被壓縮在一起。
伸縮
像步進器這樣的元件使用了伸縮動效，在進行互動時，增加了意想不到的愉悅感。
當使用者在不同節點進行切換時使用伸縮動效
原文連結：https://material.io/design/material-studies/basil.html