多圖實(shí)例分享Material Design復(fù)雜響應(yīng)式設(shè)計(jì)

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

Material Design

2011年，Gmail郵箱的按鈕變得更加扁平化。2012年，Google引入分層的卡片設(shè)計(jì)，使用更多的空白和精心設(shè)計(jì)的層次排版結(jié)構(gòu)。經(jīng)歷了幾年的迭代和提煉，Google尋找到了一種可以貫通的理論體系，即把系統(tǒng)內(nèi)的各種設(shè)計(jì)都規(guī)范成一種變形的紙片，并套用現(xiàn)實(shí)中紙墨的物理模型進(jìn)行交互，這就是2014年Google I/O大會隆重發(fā)布的Material Design。

Material Design提出了平面像素的Z軸概念，通過紙片在物理世界中形態(tài)的抽象和提煉，定義了各種信息層級和常用狀態(tài)的表達(dá)方式，并詳細(xì)講解了各個(gè)細(xì)節(jié)的處理方法，就像一本考試大綱，囊括了產(chǎn)品中常用的UI細(xì)節(jié)，甚至一些UX細(xì)節(jié)。這里并不贅述，想看詳細(xì)的Design Guide請點(diǎn)擊這里（要搬梯子），翻譯版的點(diǎn)擊這里。

如果說UX和UI的展現(xiàn)，是連接產(chǎn)品與用戶的紐帶，那么產(chǎn)品的UX以及UI應(yīng)從產(chǎn)品的核心邏輯延展并且推演而來。如果說產(chǎn)品的核心邏輯或者技術(shù)的實(shí)現(xiàn)難易會成為設(shè)計(jì)展現(xiàn)的限制，那么UX和UI應(yīng)是在各種限制下所權(quán)衡出的最優(yōu)解。而Material Design則像是架橋說明或者權(quán)衡出的通用解，對于眾多產(chǎn)品做以參考。

既然是通用大綱，那么拋開產(chǎn)品僅談設(shè)計(jì)，難免會停留于“通用”層面，而利用Material Design進(jìn)行實(shí)戰(zhàn)的案例，網(wǎng)上也多是app的一些設(shè)計(jì)嘗試。恰好在近期的工作學(xué)習(xí)中，接手一個(gè)響應(yīng)式web站點(diǎn)的改版設(shè)計(jì)，筆者參考Material Design總結(jié)以下三點(diǎn)分享如何實(shí)現(xiàn)復(fù)雜響應(yīng)式站點(diǎn)的Material Design。

一、清晰輕量的產(chǎn)品邏輯

奧卡姆剃須刀法則同樣在產(chǎn)品架構(gòu)設(shè)計(jì)中適用，越簡單的架構(gòu)越有利于產(chǎn)品的生長。清晰輕量的產(chǎn)品邏輯，會減少用戶的負(fù)擔(dān)感，從而提高交互上的效率和愉悅感。

分析Material Design，會發(fā)現(xiàn)Google歸納了兩類復(fù)雜內(nèi)容信息的層級關(guān)系，分別是Card和Tile（List 以及其他相似定義屬于同類的內(nèi)容信息層級），其他定義多用于UI結(jié)構(gòu)及細(xì)節(jié)。其中，Google定義Card是一種多功能信息的聚合入口，信息層級應(yīng)較高，體現(xiàn)在Z軸應(yīng)高于其他信息，視覺上有陰影表現(xiàn)并加以圓角處理。而tile（或同類信息列表）則是（同類或相關(guān)）信息的模塊展現(xiàn)，信息層級應(yīng)較低，體現(xiàn)在Z軸應(yīng)略低于其他信息，視覺上應(yīng)無陰影表現(xiàn)不加圓角處理。其結(jié)果是從視覺層面讓產(chǎn)品對象更高效、更簡單，同時(shí)也更具物理世界的“真實(shí)感”。

最近接手的項(xiàng)目是Gekec.com的全站改版。Gekec（革客）是Geek和Maker交集，喜歡革新，喜歡技術(shù)范兒、新潮的科技消費(fèi)品，喜歡自己動手創(chuàng)造產(chǎn)品，Gekec.com也就是這類人的聚集地，整個(gè)產(chǎn)品囊括電商、資訊（或h5宣傳）、拆機(jī)、以及社區(qū)討論等各種功能，改版前邏輯復(fù)雜，功能繁多。改版開始之初，筆者了解到革客群體時(shí)，便認(rèn)為理性加濃重Geek味道的Google風(fēng)格或許是最適合Gekec.com的視覺體系，然而復(fù)雜的產(chǎn)品邏輯不能給用戶帶來高效的交互體驗(yàn)和愉悅的使用感受，視覺上也并不能很好的通過Material Design推演并且變化，所以梳理出清晰、輕量且方便視覺統(tǒng)一的產(chǎn)品邏輯成為第一任務(wù)。

Gekec.com的產(chǎn)品全功能在此并不贅述，Product Feature全部為達(dá)成宜家式的體驗(yàn)式設(shè)計(jì)，經(jīng)過梳理可以歸納成三層，首層為體驗(yàn)層（多入口的首頁封面）、第二層為貨架層（包括商城模塊、拆機(jī)模塊、體驗(yàn)?zāi)K）、第三層為詳細(xì)、操作層；

如上圖，輕量的產(chǎn)品結(jié)構(gòu)即可方便設(shè)計(jì)的推演。例如其中第一層可以通過H5靈活排版做產(chǎn)品全方位體驗(yàn)，第二層與第三層的關(guān)系即可利用Material Card和Tile表現(xiàn)。Card表達(dá)了全部信息的聚合和入口，tile則表現(xiàn)同類信息的羅列。從card跳轉(zhuǎn)到最終頁應(yīng)有一種卡片展開的體驗(yàn)。

二、適宜UI推演的響應(yīng)辦法

在產(chǎn)品邏輯清晰簡潔的基礎(chǔ)上，一套適宜Material Design變化的全尺寸響應(yīng)辦法就成為復(fù)雜響應(yīng)式網(wǎng)頁設(shè)計(jì)的核心內(nèi)容，響應(yīng)辦法能夠直接決定功能模塊的響應(yīng)邏輯以及UI的變化。實(shí)際操作中，響應(yīng)辦法的確定主要就是確定柵格和占比。

1）柵格

網(wǎng)頁柵格系統(tǒng)是從平面柵格系統(tǒng)中發(fā)展而來。對于網(wǎng)頁設(shè)計(jì)來說，柵格系統(tǒng)的使用，不僅可以讓網(wǎng)頁的信息呈現(xiàn)更加美觀易讀，更具可用性。而且，對于前端開發(fā)來說，網(wǎng)頁將更加的靈活與規(guī)范。柵格系統(tǒng)的具體含義以及使用方法在此不再贅述，感興趣的朋友可以參考淘寶UED的一些文章：

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

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

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

網(wǎng)頁柵格系統(tǒng)研究（4）：技術(shù)實(shí)現(xiàn)

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

2）占比

A.占比