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

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

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大會(huì)隆重發(fā)布的Material Design。

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

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

既然是通用大綱，那么拋開(kāi)產(chǎn)品僅談設(shè)計(jì)，難免會(huì)停留于“通用”層面，而利用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ì)中適用，越簡(jiǎn)單的架構(gòu)越有利于產(chǎn)品的生長(zhǎng)。清晰輕量的產(chǎn)品邏輯，會(huì)減少用戶的負(fù)擔(dān)感，從而提高交互上的效率和愉悅感。

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

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

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

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

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

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

1）柵格

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

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

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

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

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

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

2）占比

A.占比

如上文說(shuō)，12柵格約束網(wǎng)頁(yè)的內(nèi)容區(qū)，而網(wǎng)頁(yè)的內(nèi)容往往并不占據(jù)屏幕的全部寬度，而是在兩側(cè)留有間隙，營(yíng)造空間感。由于屏幕的限制，這種空間感在移動(dòng)端設(shè)備顯得更加重要，如圖，然而強(qiáng)加固定的margin pixel會(huì)使得12柵格占比不定，難以控制設(shè)計(jì)效果。

所以占比應(yīng)是12柵格寬度對(duì)應(yīng)屏幕的比值，即：

12柵格寬度X占比=屏幕寬（臨界點(diǎn)）

優(yōu)秀而巧妙的占比確定可以讓網(wǎng)頁(yè)設(shè)計(jì)呈現(xiàn)在各個(gè)主流屏幕上均是100%像素。

這里簡(jiǎn)單解釋一下，若一個(gè)200px寬的元素在1200px寬的屏幕上，其占比為16.67%，同樣的邏輯，到1024px的屏幕上這個(gè)占比16.67%的元素即占據(jù)了170.67px，這樣的情況下，某一個(gè)物理像素?zé)o法占據(jù)100%，在完美主義的設(shè)計(jì)師眼里，是無(wú)法接受的事情。而巧妙的占比，可以讓元素在各個(gè)主流屏幕占據(jù)100%像素，完美展現(xiàn)設(shè)計(jì)意圖。

B.臨界點(diǎn)

臨界點(diǎn)（breakpoint）是指響應(yīng)式網(wǎng)頁(yè)發(fā)生布局變化的關(guān)鍵點(diǎn)，如“當(dāng)屏幕寬度小于480px時(shí)加載...樣式，當(dāng)寬度在480px- 600px之間時(shí)加載…樣式”。響應(yīng)式網(wǎng)頁(yè)理論上有無(wú)數(shù)種尺寸，我們不可能也沒(méi)有必要為每個(gè)尺寸都去做設(shè)計(jì)，需要做的是選定幾個(gè)臨界點(diǎn)做設(shè)計(jì)，在兩個(gè)臨界 點(diǎn)之間是延續(xù)上一個(gè)臨界點(diǎn)的布局。

臨界點(diǎn)確認(rèn)總體目的就是為了保證頁(yè)面在手機(jī)（屏幕很�。�、平板（屏幕中等）、PC（屏幕大）上加載相應(yīng)的樣式，然而經(jīng)驗(yàn)較少的設(shè)計(jì)師往往會(huì)苦惱一個(gè)問(wèn)題，那就是高像素的手機(jī)屏幕和低像素的平板屏幕應(yīng)如何處理。例如設(shè)計(jì)師會(huì)擔(dān)心1080p的手機(jī)加載大屏幕頁(yè)面，或者720p的平板加載小屏幕頁(yè)面。

但需要注意的是，響應(yīng)式網(wǎng)頁(yè)不同于APP的屏幕適配。網(wǎng)頁(yè)是沉浸于瀏覽器的產(chǎn)品，瀏覽器所啟動(dòng)的屏幕像素才可以被認(rèn)為是臨界點(diǎn)的參考點(diǎn)，為此，筆者做了一些測(cè)試，如下表，可以看出不少1080p手機(jī)在瀏覽器中僅啟動(dòng)360px，而神奇的ipad無(wú)論是不是retina屏幕，無(wú)論是不是mini，均顯示1024x768px 。

從上表可以看出，許多擔(dān)心其實(shí)并不需要。綜上，在Gekec.com的項(xiàng)目中，筆者為達(dá)到多數(shù)主流屏幕100%像素的追求，即需達(dá)到內(nèi)容區(qū)在主流屏幕臨界點(diǎn)的占比可以被12等分，進(jìn)而獲得12柵格，即：

12的公倍數(shù)X占比=主流屏幕尺寸

項(xiàng)目中經(jīng)歷了一些測(cè)試和取舍，最終確定占比為93.75%，臨界點(diǎn)為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；

如上圖的占比劃分，頁(yè)面元素可以完成靈活、規(guī)范的響應(yīng)�？梢砸源俗鳛檎麄�(gè)產(chǎn)品的響應(yīng)辦法，在此基礎(chǔ)之上，可以對(duì)Material Design進(jìn)行全面的推演。

三、精雕細(xì)琢的頁(yè)面細(xì)節(jié)

如果說(shuō)產(chǎn)品邏輯是整個(gè)網(wǎng)站的骨架，那么精雕細(xì)琢的頁(yè)面細(xì)節(jié)則可以比喻為網(wǎng)站的氣質(zhì)靈魂。有輕量級(jí)的產(chǎn)品構(gòu)架和明確靈活的響應(yīng)式辦法后，即可通過(guò)Material Design的官方說(shuō)明進(jìn)行全面設(shè)計(jì)。在Material Design的說(shuō)明中，已經(jīng)詳細(xì)解釋了各個(gè)狀態(tài)的約束和細(xì)節(jié)，在此并不贅述，筆者僅挑選一些典型的細(xì)節(jié)。

1）css動(dòng)畫(huà)

Material Design中開(kāi)篇第一章節(jié)便講述了動(dòng)畫(huà)給用戶的直觀感受，說(shuō)明感知一個(gè)物體有形的部分可以幫助用戶理解如何去控制它。一些細(xì)節(jié)位置的動(dòng)畫(huà)能給用戶體驗(yàn)上的驚喜。然而在web端實(shí)現(xiàn)動(dòng)畫(huà)效果并不像app里那樣的容易，大量JS也會(huì)影響頁(yè)面加載速度甚至影響頁(yè)面其他代碼。所以筆者選擇利用CSS對(duì)頁(yè)面一些細(xì)節(jié)加以動(dòng)畫(huà)效果。

A.點(diǎn)擊按鈕

Material Design給出了一種ripple button，抽象了人用手觸碰卡片的漣漪效果，給用戶一種全新的使用體驗(yàn)，歡迎來(lái)Gekec.com點(diǎn)擊嘗試。

B.輸入框

簡(jiǎn)單的Des cription和一條橫線，抽象了實(shí)體文字卡片的填寫(xiě)過(guò)程，可以幫助用戶對(duì)輸入?yún)^(qū)域有實(shí)體化的理解，歡迎來(lái)Gekec.com點(diǎn)擊嘗試。

2）文字樣式

Material Design中強(qiáng)調(diào)“同時(shí)使用過(guò)多的字體尺寸和樣式，可以輕易的毀掉布局”，并約束了常用的基本樣式就是基于12sp、14sp、16sp、20sp的字體排版。

熟悉Android的朋友可能對(duì)sp的概念并不陌生，sp：Scale-independent pixels，它是安卓的字體單位，以160PPI屏幕為標(biāo)準(zhǔn)，當(dāng)字體大小為 100%時(shí)， 1sp=1px；然而響應(yīng)式的網(wǎng)頁(yè)并不是安卓，網(wǎng)頁(yè)更需要物理像素的尺寸約束，所以筆者在所劃分的臨界點(diǎn)計(jì)算了一下所測(cè)試屏幕的瀏覽器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

從上面的數(shù)據(jù)可以看出，大多瀏覽器啟動(dòng)像素所產(chǎn)生的PPI大約在160左右，所以某段文字在PC端約束的物理像素尺寸，直接同樣尺寸應(yīng)用于移動(dòng)端時(shí)，應(yīng)該也可以產(chǎn)生不錯(cuò)的體驗(yàn)效果，所以設(shè)計(jì)時(shí)可以直接將Material Design的字體sp尺寸轉(zhuǎn)化為px來(lái)使用。Gekec.com的項(xiàng)目中，筆者只約束一套字體樣式，在方便前端開(kāi)發(fā)的同時(shí)，完成了不錯(cuò)的響應(yīng)式效果。

3）顏色

Material Design Guide中給出了若干明亮鮮艷的顏色，并且指定了顏色的主要展現(xiàn)和層級(jí)變化，可供設(shè)計(jì)師選擇。

在實(shí)際操作中，通過(guò)商品內(nèi)容的分類，筆者直接選擇Material Design中的顏色，作為每類商品的主要顏色，而在一些重要的操作入口，顏色應(yīng)與主要顏色有明顯區(qū)別。筆者應(yīng)用色環(huán)在Material Design Color基礎(chǔ)上，配合內(nèi)容建立整個(gè)網(wǎng)站的顏色體系：

A.主體顏色以及層次根據(jù)內(nèi)容確定，直接參考Material Design Color

B.應(yīng)用色環(huán)分析整體補(bǔ)色間色

將所有主體顏色步在色環(huán)上，可以分析出補(bǔ)色位置應(yīng)為上方紅框位置，應(yīng)用于有明顯區(qū)別的重要入口，如“加入購(gòu)物車(chē)”、“砸￥1元參與”，“結(jié)算”等等；而間色位置應(yīng)為下方紅框位置，應(yīng)用于不明顯的細(xì)節(jié)變化，如文字hover，文字鏈接等；

4）間距

Material Design Guide中已經(jīng)嚴(yán)格約束了各個(gè)元素狀態(tài)下的間距，但為了滿足全站響應(yīng)式布局在主流屏幕展現(xiàn)，筆者仍然使用了8px原理對(duì)一些間距進(jìn)行了調(diào)整；在很多設(shè)計(jì)師研究8px原理并進(jìn)行設(shè)計(jì)的同時(shí)，筆者仍然需要強(qiáng)調(diào)，響應(yīng)式web的設(shè)計(jì)應(yīng)基于瀏覽器的像素尺寸，并不是基于ios和android的屏幕尺寸。具體可以參考上面已經(jīng)分享的表格進(jìn)行實(shí)驗(yàn)。

這里分享一些8px的文章，感興趣的同學(xué)可以看一看：

一切為了程序猿！詳析手機(jī)端的8PX原理

一張圖解釋手機(jī)適配8px原理(原創(chuàng))

總結(jié)：

Material Design已經(jīng)給出了詳細(xì)的設(shè)計(jì)細(xì)節(jié)和原則，但不一定適合每一款產(chǎn)品，設(shè)計(jì)師需要弄清自身的產(chǎn)品是web還是app，邏輯是什么樣，才可以進(jìn)行細(xì)化的設(shè)計(jì)工作；深入了解產(chǎn)品邏輯的基礎(chǔ)上，確定的一套響應(yīng)辦法和頁(yè)面細(xì)節(jié)，能夠保障設(shè)計(jì)的展現(xiàn)并帶來(lái)不錯(cuò)設(shè)計(jì)效果。Material Design作為即蘋(píng)果、微軟之后最新推出的設(shè)計(jì)語(yǔ)言，充滿了濃郁的Google風(fēng)情，能夠給用戶提供新鮮的視覺(jué)體驗(yàn)，希望有越來(lái)越多的設(shè)計(jì)師會(huì)嘗試用Material Design進(jìn)行設(shè)計(jì)。