關於 Material Design
關於 Material Design
Material Design 是由Google推出視覺語言，或可以說是一種設計準則，其中定義了基本的樣式、排版、元件等等的設計方向，目標是希望藉由一致的設計樣式規則，讓平面的UI更具立體感，卻又不失操作流暢度，提高使用者體驗(User Experience)，例如設計一個Icon，要怎麼做比較好呢，就可以參考 Product icons 裡面的說明；一個Menu的呈現方式該如何呢？Menus 也有詳細的說明。
初步發布的樣子?
Material Design 是由 Google 推出全新的設計語言，這種設計意旨在手機、平板電腦和其他平台提供更一致性、更廣泛的外觀和感覺。
於2014 年 Google I/O 上展示 Material Design，宣布了Google Design的存在。Material Design在設計上並沒有完全拋棄Google過去在設計上取得的成果。Material Design和Google的標誌一樣，崇尚多彩，但它並不使用那種很艷麗的顏色，反而似乎是為了讓圖案變得沉穩，而有意令原本很晃眼的色彩混入一點點的灰色，讓圖案變得活潑之餘，又不會因為過於艷麗而讓人感覺到俗套和嬉皮。
當時碰到的原因?
過去Google的產品線，每一個都相當的獨立，在產品的設計上反映得尤為明顯，甚至不必看產品設計，只要看一下Google每款產品的LOGO都能發現許多不同風格的設計。這種混亂難以體現出Google的風格，如果Google的風格不是混亂和無序的話。
發布的原因?
為了讓 Google 實現的發展速度，要用全新的方法來解決問題，尋找一種共同的設計語言。最終他們找到跨產品的設計是“卡片式設計”。
設計語言如何使用?
可以參考這個網站 Material
有材料設計指南、組件的設計、常用的圖標、web 材料組件、顏色工具、響應式布局網格...等等。
為什麼要使用這個?
因為它將優秀設計的經典原則與技術和科技創新相結合，讓設計者可以有一套設計準則且讓網頁體驗者能有好的視覺享受。
參考資料
- Material Introduction
- Material Official website
- Material Design
- [前端軍火庫]Materialize - 遵循Google Material Design實作的CSS framework
Material Design 筆記
Android dp 和 px 單位
dp 獨立於螢幕解析密度的像數值，也就是說，當你設定 1dp時，在120 dpi 的螢幕上會是原本的 75%，在 160dpi 的螢幕上為100%，在 240dpi 的螢幕上為150%，實際的像數值會依螢幕密度而改變。
px，pixel ，一般所認知的像素值，指定多少就是多少，不會因螢幕密度不同而改變。所以 100 * 100 px 的方形在 320 x 480 螢幕的手機上看起來會比 1280 x 720 的螢幕上看起來大很多，這個方形實際上尺寸並沒有改變，改變的是螢幕解析度，放在一個較小的空間看起來比較大，放在一個較大的空間，看起來就會比較小。
綜合來說，160DPI的裝置下，1dp = 1px；240DPI的裝置下，1dp = 1.5px ... 以此類推，640DPI的裝置下，1dp = 4px 。公式如下：
px = dp * (DPI/160)
響應式網格
360 dp - 4 columns / 16dp 的網格槽/網站的邊距 16dp
600 dp - 8 columns / 24dp 的網個槽/網站的邊距 24dp
定制排水溝 gutters
最小的排水溝建議使用 8dp
最大的排水溝建議使用 64dp
斷點
自訂大略分別為 600 dp、840dp、1280dp
| 斷點 | 肖像 | 列 | 邊距/排水溝 |
| 0-599 | 小手機 | 4 | 16 |
| 599-839 | 中型手機 | 8 | 24 |
| 840-1280 | 大平板電腦 | 12 | 24 |
寬高比
是元素寬度與高度的比例，建議您使用 UI 中 使用寬高比
觸碰目標
填充
填充是指元素之間的空間。它是一種替代間距的方法，以 8dp 或 4 dp 的增量測量。
增量
增量的測量在應用程式元件的大小和位置的量測。如增量使用的高度定義，如欄位高度為 64dp，則增量為 64 x 64dp;下方要增加8的增量，以56 dp，則 8dp * 56dp = 512dp
何時施加密度
如表單之類顯示大量訊息時使用此方式，通用欄位高度 48 dp，高地度則使用 32 dp
如輸入框之類，默認高度 56 dp，高密度則使用 44 dp。
常用的 rem 與 px 計算
1rem = 16px
1.5rem = 24px
2rme = 32px
2.25rem = 36 px
2.75rem = 44px
3rem = 48 px
3.5rem = 56px
了解導航
導航使用戶可以在應用程式中移動
導航方向根據您應用的信息架構，用戶可以在以下三個導航方向之一中移動:
Lateral navigation
Forward navigation
Reverse navigation
看到這
https://material.io/design/navigation/understanding-navigation.html
參考資料