多圖實例分享Material Design復雜響應式設計

【聲明】本文作者是Gekec網站產品總監(jiān)Chance。Chance最近研究了Google Material Design規(guī)范，并將研究成果用于www.gekec.com的網站設計。目前網上分享的各種攻略基本上都是Material Design對于app設計的應用。不同于那些APP設計的分享，本文通過實例介紹了Material Design在響應式網頁設計的實戰(zhàn)應用，內含響應邏輯、字體約束等諸多干貨，大量設計圖片是從Gekec網站真實設計稿中節(jié)選。為了表達對原作者的尊重，發(fā)表和轉發(fā)本文請保留此聲明。

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的一些文章：

網頁柵格系統(tǒng)研究（1）：960的秘密

網頁柵格系統(tǒng)研究（2）：蛋糕的切法

網頁柵格系統(tǒng)研究（3）：粒度問題

網頁柵格系統(tǒng)研究（4）：技術實現

在Gekec.com的項目中，經歷產品功能模塊的梳理，筆者使用了12柵格系統(tǒng)，目的是能夠滿足2、3、4、6的頁面等分。注：具體柵格系統(tǒng)的建立應因產品和設計所決定，柵格系統(tǒng)并不是萬能的，而確定的柵格系統(tǒng)可以為整個響應式設計做規(guī)范性參考。

2）占比

A.占比