Material Design
2011年，Gmail郵箱的按鈕變得更加扁平化网沾。2012年初茶，Google引入分層的卡片設計，使用更多的空白和精心設計的層次排版結構喊废。經歷了幾年的迭代和提煉祝高，Google尋找到了一種可以貫通的理論體系，即把系統(tǒng)內的各種設計都規(guī)范成一種變形的紙片污筷，并套用現實中紙墨的物理模型進行交互工闺，這就是2014年Google I/O大會隆重發(fā)布的Material Design。
Material Design提出了平面像素的Z軸概念瓣蛀，通過紙片在物理世界中形態(tài)的抽象和提煉陆蟆，定義了各種信息層級和常用狀態(tài)的表達方式，并詳細講解了各個細節(jié)的處理方法惋增，就像一本考試大綱叠殷，囊括了產品中常用的UI細節(jié)，甚至一些UX細節(jié)诈皿。這里并不贅述林束，想看詳細的Design Guide請點擊這里（要搬梯子），翻譯版的點擊這里稽亏。
如果說UX和UI的展現壶冒，是連接產品與用戶的紐帶，那么產品的UX以及UI應從產品的核心邏輯延展并且推演而來截歉。如果說產品的核心邏輯或者技術的實現難易會成為設計展現的限制胖腾，那么UX和UI應是在各種限制下所權衡出的最優(yōu)解。而Material Design則像是架橋說明或者權衡出的通用解瘪松，對于眾多產品做以參考咸作。
既然是通用大綱，那么拋開產品僅談設計宵睦，難免會停留于“通用”層面记罚，而利用Material Design進行實戰(zhàn)的案例，網上也多是app的一些設計嘗試壳嚎。恰好在近期的工作學習中桐智，接手一個響應式web站點的改版設計，筆者參考Material Design總結以下三點分享如何實現復雜響應式站點的Material Design诬辈。
一、清晰輕量的產品邏輯
奧卡姆剃須刀法則同樣在產品架構設計中適用荐吉，越簡單的架構越有利于產品的生長焙糟。清晰輕量的產品邏輯，會減少用戶的負擔感样屠，從而提高交互上的效率和愉悅感穿撮。
分析Material Design缺脉，會發(fā)現Google歸納了兩類復雜內容信息的層級關系，分別是Card和Tile（List 以及其他相似定義屬于同類的內容信息層級）悦穿，其他定義多用于UI結構及細節(jié)攻礼。其中，Google定義Card是一種多功能信息的聚合入口栗柒，信息層級應較高礁扮，體現在Z軸應高于其他信息，視覺上有陰影表現并加以圓角處理瞬沦。而tile（或同類信息列表）則是（同類或相關）信息的模塊展現太伊，信息層級應較低，體現在Z軸應略低于其他信息逛钻，視覺上應無陰影表現不加圓角處理僚焦。其結果是從視覺層面讓產品對象更高效、更簡單曙痘，同時也更具物理世界的“真實感”芳悲。
最近接手的項目是Gekec.com的全站改版。Gekec（革客）是Geek和Maker交集边坤，喜歡革新名扛，喜歡技術范兒、新潮的科技消費品惩嘉，喜歡自己動手創(chuàng)造產品罢洲，Gekec.com也就是這類人的聚集地，整個產品囊括電商文黎、資訊（或h5宣傳）惹苗、拆機、以及社區(qū)討論等各種功能耸峭，改版前邏輯復雜桩蓉，功能繁多。改版開始之初劳闹，筆者了解到革客群體時院究，便認為理性加濃重Geek味道的Google風格或許是最適合Gekec.com的視覺體系，然而復雜的產品邏輯不能給用戶帶來高效的交互體驗和愉悅的使用感受本涕，視覺上也并不能很好的通過Material Design推演并且變化业汰，所以梳理出清晰、輕量且方便視覺統(tǒng)一的產品邏輯成為第一任務菩颖。
Gekec.com的產品全功能在此并不贅述样漆，Product Feature全部為達成宜家式的體驗式設計，經過梳理可以歸納成三層晦闰，首層為體驗層（多入口的首頁封面）放祟、第二層為貨架層（包括商城模塊鳍怨、拆機模塊、體驗模塊）跪妥、第三層為詳細鞋喇、操作層；
如上圖眉撵，輕量的產品結構即可方便設計的推演侦香。例如其中第一層可以通過H5靈活排版做產品全方位體驗，第二層與第三層的關系即可利用Material Card和Tile表現执桌。Card表達了全部信息的聚合和入口鄙皇，tile則表現同類信息的羅列。從card跳轉到最終頁應有一種卡片展開的體驗仰挣。
二伴逸、適宜UI推演的響應辦法
在產品邏輯清晰簡潔的基礎上，一套適宜Material Design變化的全尺寸響應辦法就成為復雜響應式網頁設計的核心內容膘壶，響應辦法能夠直接決定功能模塊的響應邏輯以及UI的變化错蝴。實際操作中，響應辦法的確定主要就是確定柵格和占比颓芭。
1）柵格
網頁柵格系統(tǒng)是從平面柵格系統(tǒng)中發(fā)展而來顷锰。對于網頁設計來說，柵格系統(tǒng)的使用亡问，不僅可以讓網頁的信息呈現更加美觀易讀官紫，更具可用性。而且州藕，對于前端開發(fā)來說束世，網頁將更加的靈活與規(guī)范。柵格系統(tǒng)的具體含義以及使用方法在此不再贅述床玻，感興趣的朋友可以參考淘寶UED的一些文章：
在Gekec.com的項目中毁涉，經歷產品功能模塊的梳理，筆者使用了12柵格系統(tǒng)锈死，目的是能夠滿足2贫堰、3、4待牵、6的頁面等分其屏。注：具體柵格系統(tǒng)的建立應因產品和設計所決定，柵格系統(tǒng)并不是萬能的缨该，而確定的柵格系統(tǒng)可以為整個響應式設計做規(guī)范性參考偎行。
2）占比
A.占比
如上文說，12柵格約束網頁的內容區(qū)，而網頁的內容往往并不占據屏幕的全部寬度睦优，而是在兩側留有間隙，營造空間感壮不。由于屏幕的限制汗盘，這種空間感在移動端設備顯得更加重要，如圖询一，然而強加固定的margin pixel會使得12柵格占比不定隐孽，難以控制設計效果。
所以占比應是12柵格寬度對應屏幕的比值健蕊，即：
12柵格寬度X占比=屏幕寬（臨界點）
優(yōu)秀而巧妙的占比確定可以讓網頁設計呈現在各個主流屏幕上均是100%像素菱阵。
這里簡單解釋一下，若一個200px寬的元素在1200px寬的屏幕上缩功，其占比為16.67%晴及，同樣的邏輯，到1024px的屏幕上這個占比16.67%的元素即占據了170.67px嫡锌，這樣的情況下虑稼，某一個物理像素無法占據100%，在完美主義的設計師眼里势木，是無法接受的事情蛛倦。而巧妙的占比，可以讓元素在各個主流屏幕占據100%像素啦桌，完美展現設計意圖溯壶。
B.臨界點
臨界點（breakpoint）是指響應式網頁發(fā)生布局變化的關鍵點，如“當屏幕寬度小于480px時加載...樣式甫男，當寬度在480px- 600px之間時加載…樣式”且改。響應式網頁理論上有無數種尺寸，我們不可能也沒有必要為每個尺寸都去做設計查剖，需要做的是選定幾個臨界點做設計钾虐，在兩個臨界 點之間是延續(xù)上一個臨界點的布局。
臨界點確認總體目的就是為了保證頁面在手機（屏幕很兴褡）效扫、平板（屏幕中等）、PC（屏幕大）上加載相應的樣式直砂，然而經驗較少的設計師往往會苦惱一個問題菌仁，那就是高像素的手機屏幕和低像素的平板屏幕應如何處理。例如設計師會擔心1080p的手機加載大屏幕頁面静暂，或者720p的平板加載小屏幕頁面济丘。
但需要注意的是，響應式網頁不同于APP的屏幕適配。網頁是沉浸于瀏覽器的產品摹迷，瀏覽器所啟動的屏幕像素才可以被認為是臨界點的參考點疟赊，為此，筆者做了一些測試峡碉，如下表近哟，可以看出不少1080p手機在瀏覽器中僅啟動360px，而神奇的ipad無論是不是retina屏幕鲫寄，無論是不是mini吉执，均顯示1024x768px 。
從上表可以看出地来，許多擔心其實并不需要戳玫。綜上，在Gekec.com的項目中未斑，筆者為達到多數主流屏幕100%像素的追求咕宿，即需達到內容區(qū)在主流屏幕臨界點的占比可以被12等分，進而獲得12柵格蜡秽，即：
12的公倍數X占比=主流屏幕尺寸
項目中經歷了一些測試和取舍荠列，最終確定占比為93.75%，臨界點為1280px载城、1024px肌似、768px和320px。
具體為：
1280px<=screen诉瓦，占比93.75%川队，12柵格在典型屏（1280px）寬1200px；
1024px<=screen<1280px睬澡，占比93.75%固额，12柵格在典型屏（1024px）寬960px；
768px<=screen<1024px煞聪，占比93.75%斗躏，12柵格在典型屏（768px）寬700px；
320px<=screen<768px昔脯，占比93.75%啄糙，12柵格在典型屏（320px）寬300px；
如上圖的占比劃分云稚，頁面元素可以完成靈活隧饼、規(guī)范的響應【渤拢可以以此作為整個產品的響應辦法燕雁，在此基礎之上诞丽，可以對Material Design進行全面的推演。
三拐格、精雕細琢的頁面細節(jié)
如果說產品邏輯是整個網站的骨架僧免，那么精雕細琢的頁面細節(jié)則可以比喻為網站的氣質靈魂。有輕量級的產品構架和明確靈活的響應式辦法后捏浊，即可通過Material Design的官方說明進行全面設計猬膨。在Material Design的說明中，已經詳細解釋了各個狀態(tài)的約束和細節(jié)呛伴，在此并不贅述，筆者僅挑選一些典型的細節(jié)谒所。
1）css動畫
Material Design中開篇第一章節(jié)便講述了動畫給用戶的直觀感受热康，說明感知一個物體有形的部分可以幫助用戶理解如何去控制它。一些細節(jié)位置的動畫能給用戶體驗上的驚喜劣领。然而在web端實現動畫效果并不像app里那樣的容易姐军，大量JS也會影響頁面加載速度甚至影響頁面其他代碼。所以筆者選擇利用CSS對頁面一些細節(jié)加以動畫效果尖淘。
A.點擊按鈕
Material Design給出了一種ripple button奕锌，抽象了人用手觸碰卡片的漣漪效果，給用戶一種全新的使用體驗村生，歡迎來Gekec.com點擊嘗試惊暴。
B.輸入框
簡單的Description和一條橫線，抽象了實體文字卡片的填寫過程趁桃，可以幫助用戶對輸入區(qū)域有實體化的理解辽话，歡迎來Gekec.com點擊嘗試。
2）文字樣式
Material Design中強調“同時使用過多的字體尺寸和樣式卫病，可以輕易的毀掉布局”油啤，并約束了常用的基本樣式就是基于12sp、14sp蟀苛、16sp益咬、20sp的字體排版。
熟悉Android的朋友可能對sp的概念并不陌生帜平，sp：Scale-independent pixels幽告，它是安卓的字體單位绘闷，以160PPI屏幕為標準蜕劝，當字體大小為 100%時酪惭， 1sp=1px液南；然而響應式的網頁并不是安卓鹃唯，網頁更需要物理像素的尺寸約束榆芦，所以筆者在所劃分的臨界點計算了一下所測試屏幕的瀏覽器PPI达椰，如下：
iphone5: 320x568px/4英寸/PPI=162.95
榮耀6：360x640px/5英寸/PPI=146.86
ipad：1024x768/7.9英寸/PPI=131.96
ipad mini：1024x768/7.9英寸/PPI=162.03
從上面的數據可以看出友绝，大多瀏覽器啟動像素所產生的PPI大約在160左右，所以某段文字在PC端約束的物理像素尺寸芋绸，直接同樣尺寸應用于移動端時媒殉，應該也可以產生不錯的體驗效果，所以設計時可以直接將Material Design的字體sp尺寸轉化為px來使用摔敛。Gekec.com的項目中廷蓉，筆者只約束一套字體樣式，在方便前端開發(fā)的同時马昙，完成了不錯的響應式效果桃犬。
3）顏色
Material Design Guide中給出了若干明亮鮮艷的顏色，并且指定了顏色的主要展現和層級變化行楞，可供設計師選擇攒暇。
在實際操作中，通過商品內容的分類子房，筆者直接選擇Material Design中的顏色形用，作為每類商品的主要顏色，而在一些重要的操作入口证杭，顏色應與主要顏色有明顯區(qū)別田度。筆者應用色環(huán)在Material Design Color基礎上，配合內容建立整個網站的顏色體系：
A.主體顏色以及層次根據內容確定解愤，直接參考Material Design Color
B.應用色環(huán)分析整體補色間色
將所有主體顏色步在色環(huán)上镇饺，可以分析出補色位置應為上方紅框位置，應用于有明顯區(qū)別的重要入口送讲，如“加入購物車”兰怠、“砸￥1元參與”，“結算”等等李茫；而間色位置應為下方紅框位置揭保，應用于不明顯的細節(jié)變化，如文字hover魄宏，文字鏈接等秸侣；
4）間距
Material Design Guide中已經嚴格約束了各個元素狀態(tài)下的間距，但為了滿足全站響應式布局在主流屏幕展現宠互，筆者仍然使用了8px原理對一些間距進行了調整味榛；在很多設計師研究8px原理并進行設計的同時，筆者仍然需要強調予跌，響應式web的設計應基于瀏覽器的像素尺寸搏色，并不是基于ios和android的屏幕尺寸。具體可以參考上面已經分享的表格進行實驗券册。
這里分享一些8px的文章频轿，感興趣的同學可以看一看：
總結：
Material Design已經給出了詳細的設計細節(jié)和原則，但不一定適合每一款產品航邢，設計師需要弄清自身的產品是web還是app耕赘，邏輯是什么樣，才可以進行細化的設計工作膳殷；深入了解產品邏輯的基礎上操骡，確定的一套響應辦法和頁面細節(jié)，能夠保障設計的展現并帶來不錯設計效果赚窃。Material Design作為即蘋果册招、微軟之后最新推出的設計語言，充滿了濃郁的Google風情勒极，能夠給用戶提供新鮮的視覺體驗是掰，希望有越來越多的設計師會嘗試用Material Design進行設計。
