深聊MATERIAL DESIGN復雜響應式設(shè)計

原文出處：http://www.uisdc.com/material-design-responsive-design

編者按：Material Design初出茅廬，現(xiàn)在大多數(shù)是試水之作，剛好近期有同學接手了一個響應式Web站點的改版設(shè)計，筆者參考Material Design總結(jié)以下三點，關(guān)于如何實現(xiàn)復雜響應式站點的Material Design，希望對大家有幫助。

說到Material Design，有一篇強烈推薦：《重磅教程！幫你全面徹底搞定MATERIAL DESIGN的學習筆記》

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

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

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

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

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

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

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

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

三、精雕細琢的頁面細節(jié)

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

1）css動畫

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

A 點擊按鈕

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

B 輸入框

簡單的Description和一條橫線，抽象了實體文字卡片的填寫過程，可以幫助用戶對輸入?yún)^(qū)域有實體化的理解，歡迎來Gekec.com點擊嘗試。

2）文字樣式

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

熟悉Android的朋友可能對sp的概念并不陌生，sp：Scale-independent pixels，它是安卓的字體單位，以160PPI屏幕為標準，當字體大小為 100%時， 1sp=1px；然而響應式的網(wǎng)頁并不是安卓，網(wǎng)頁更需要物理像素的尺寸約束，所以筆者在所劃分的臨界點計算了一下所測試屏幕的瀏覽器PPI，如下：

• iphone5: 320x568px/4英寸/PPI=162.95
• 榮耀6：360x640px/5英寸/PPI=146.86
• ipad：1024×768/7.9英寸/PPI=131.96
• ipad mini：1024×768/7.9英寸/PPI=162.03

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

3）顏色

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

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

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

B 應用色環(huán)分析整體補色間色

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

4）間距

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

總結(jié)：

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