HTML 5 學習心得
#第四週
Material Design
平面的藝術
我們的平板、手機、電腦...等等的界面（UI）現在都是以Material Design 的設計風格為主。跟以往的風格不同，Material Design是一種扁平化的設計、為google最新的UI 設計。扁平化設計的優勢就是信息噪音少，而缺點就是情感傳遞不足，而 Material Design似乎是一個很好的解決方案，在最大限度保證可讀性的基礎上有一些我們熟悉的物理現實的影子。所以一定程度上它既是擬物的也是扁平的。
早期比較流行的版本
現在流行的版本
Materialize CSS是Carnegie Mellon University的學生開發出來的框架, 他們開發的套件是可以免費下載的，只要上到他們的網站下載套件，並將套件套進HTML裡，就可以讓我們的網頁變成Material Design的風格
這是套用了 Materialize CSS 的網頁
它裡面有很多的套件，有小卡片、有提示欄等等，我們只需要按照作者的指示，運用網頁內的程式及套件，就能輕鬆實現具Material Design風格的網頁
這是Materialize CSS 內的網頁導覽，以及作者指示
rwd--responsive web design
- Responsive Web Design (RWD) ，自適應網頁設計，是一種網頁設計的技術做法，該設計可使網站在不同的設備上瀏覽時對應不同分辨率皆有適合的呈現。
- 對於網站設計師和前端工程師來說，有別於過去需要針對各種設備進行不同的設計，使用此種設計方式將更易於維護網頁。
一個使網頁上的多個元素在台式機、平板電腦、智能手機等不同分辨率的設備上適應的示例。
如何做到自適應？？照片大小如何做自動調整？？
這個就關係到一個概念---柵格系統（Grid Design）；簡單理解的話就是把網頁切割成好幾個欄位，然後我們依據屏幕大小來決定，我們網頁內的元素所要佔的欄位數【例：如果今天是高分辨率屏，我就讓我的照片按每3個欄位的大小來排】
一個網頁可以分成三個部分：
- 列（Columns）
- 水槽（Gutters）
- 边距（Margins）
列（Columns）
- 列建立的時候要考慮整體的寬度，然後進行整除。【不同寬度的手機（屏幕的大小），列的數量是不一樣的】
- 然後我們做界面的時候可以和列對齊，就達到了所有寬度都是倍數或有聯繫的效果了。【網頁放大或縮小時，網頁的內容也會隨之更改大小】
- 在平面設計中，柵格系統是為了讓界面更有秩序感，而在UI設計中，除了視覺的要求還有來自自適應需要整除元素的要求。
在360dp寬度的手機設備中，使用4個列
在600dp寬度的平板電腦中，使用8個列
水槽（Gutters）
- 水槽（Gutters）是用來區別內容的，被作為列之間的留白使用的。
- 在響應式佈局中，列的寬度是不變的，然而水槽的寬度是可變的。
在寬度為360dp的手機界面中使用16dp的水槽
而在600dp寬度的平板設備中使用26dp的水槽
边距（Margins）
边距（Margins）是柵格和屏幕之間的距離，在不同的屏幕上我們可以根據手指點擊方便程度給予不同的邊距當做安全距離，同時也可以解決列和水槽無法被整除的一些情況。
自定義柵格系統
- 我們設計的界面由於內在的邏輯關係需要，不能直接套用很多固定的柵格系統版式。那麼可以根據需求進行自定義柵格系統。
- 比如信息間的水槽就要考慮信息之間的邏輯關係。所以不要死板地使用柵格系統，根據自己的需要去自定義才是好的設計。
為了讓用戶感知圖像是緊密相關的，這個案例中網格使用了8dp水槽
為了讓用戶認為專輯是各個獨立的，這裡使用了較大的32dp水槽來創建列之間的分隔
錯誤案例：這裡使用了太大的水槽，使界面顯得分裂
在不同設備中的柵格系統建議
所以當我們的網頁在不同的設備上顯示的時候（或者解析度不一樣時），改變的是列的大小，列的數量越多，能顯示的畫面也會越多（這要看網頁設計者要怎樣的呈現方式）
色彩選擇
- Material Design 的配色靈感來源於現代主義設計和路標等標識
- 所以它的色彩選擇都非常鮮亮，顏色在明度和純度上都較為適中，在我們設計 APP 時這些顏色能夠突出信息並且使人愉悅
- Material Design 非常重視背景和文字的色彩對比，需要最大化地保證文字的可讀性
- 在配色的時候注意三個原則：
- 分級：我們可以使用不同的顏色來告訴用戶哪些是可交互的，哪些是裝飾；並且色彩與信息的邏輯關係應該是相關的，重要的元素應該使用最突出的顏色。
- 清晰：文本和背景一定要有色彩反差，也就是常說的「黑紙白字」和「白紙黑字」。
- 品牌：一個產品的品牌與調性體現在移動端應用程序上就是主色調了，比如Facebook的藍色、Youtube的紅色等，能讓人時刻都明白自己在什麼產品上。
主色和輔助色使用同色系的樣式
色表參考
#如果對色彩科學比較沒有掌握的人，建議使用它們配好的顏色，不讓出來的效果可能會達不到預期
上課到這裡，就開始明白了別人的網頁是如何設計的，有了資源和管道，就可以開始設計自己的網頁了。分享一個小故事；就在上完這堂課的當天晚上，我一位朋友來跟我分享，他說他的一個朋友（這位朋友是做微商的）自己做了一個網頁來宣傳他自己的產品，他覺得他做的網頁好棒，我看了下他的網頁再回顧一下今天上課所學的，咦...這不就是今天我所學到的嗎，原來我現在學到的東西也可以這樣用了。因此我也想做一個網頁，裡面放的是我過去幾年拍的照片，把這個網頁做成我個人的相冊，這樣我就可以發這個網頁給別人，跟別人分享我的作品～～～