2011年，Gmail郵箱的按鈕變得更加扁平化。2012年，Google引入分層的卡片設計，使用更多的空白和精心設計的層次排版結構。經(jīng)曆了幾年的叠代和提煉，Google尋找到了一種(zhǒng)可

以貫通的理論體系，即把系統内的各種(zhǒng)設計都(dōu)規範成(chéng)一種(zhǒng)變形的紙片，并套用現實中紙墨的物理模型進(jìn)行交互，這(zhè)就是2014年Google I/O大會隆重發(fā)布的Material Design。

内蒙古網站制作，内蒙古網站設計，内蒙古網站建設，呼和浩特網站建設，呼和浩特網站制作、呼和浩特網站設計首選内蒙古呼和浩特先誠網絡科技公司。先誠官網：/

注：本文均來自百度搜索，如涉及版權問題，請聯系我們，我們會第一時間解決。

Material Design提出了平面(miàn)像素的Z軸概念，通過(guò)紙片在物理世界中形态的抽象和提煉，定義了各種(zhǒng)信息層級和常用狀态的表達方式，并詳細講解了各個細節的處理方法，就像一

本考試大綱，囊括了産品中常用的UI細節，甚至一些UX細節。這(zhè)裡(lǐ)并不贅述，想看詳細的Design Guide請點擊這(zhè)裡(lǐ)（要搬梯子），翻譯版的點擊這(zhè)裡(lǐ)。

如果說UX和UI的展現，是連接産品與用戶的紐帶，那麼(me)産品的UX以及UI應從産品的核心邏輯延展并且推演而來。如果說産品的核心邏輯或者技術的實現難易會成(chéng)爲設計展現的限制

，那麼(me)UX和UI應是在各種(zhǒng)限制下所權衡出的最優解。而Material Design則像是架橋說明或者權衡出的通用解，對(duì)于衆多産品做以參考。

既然是通用大綱，那麼(me)抛開(kāi)産品僅談設計，難免會停留于“通用”層面(miàn)，而利用Material Design進(jìn)行實戰的案例，網上也多是app的一些設計嘗試。恰好(hǎo)在近期的工作學(xué)習中，接

手一個響應式web站點的改版設計，筆者參考Material Design總結以下三點分享如何實現複雜響應式站點的Material Design。

一、清晰輕量的産品邏輯

奧卡姆剃須刀法則同樣(yàng)在産品架構設計中适用，越簡單的架構越有利于産品的生長(cháng)。清晰輕量的産品邏輯，會減少用戶的負擔感，從而提高交互上的效率和愉悅感。

分析Material Design，會發(fā)現Google歸納了兩(liǎng)類複雜内容信息的層級關系，分别是Card和Tile（List 以及其他相似定義屬于同類的内容信息層級），其他定義多用于UI結構及細

節。其中，Google定義Card是一種(zhǒng)多功能(néng)信息的聚合入口，信息層級應較高，體現在Z軸應高于其他信息，視覺上有陰影表現并加以圓角處理。而tile（或同類信息列表）則是（同

類或相關）信息的模塊展現，信息層級應較低，體現在Z軸應略低于其他信息，視覺上應無陰影表現不加圓角處理。其結果是從視覺層面(miàn)讓産品對(duì)象更高效、更簡單，同時也更具物

理世界的“真實感”。

最近接手的項目是Gekec.com的全站改版。Gekec（革客）是Geek和Maker交集，喜歡革新，喜歡技術範兒、新潮的科技消費品，喜歡自己動手創造産品，Gekec.com也就是這(zhè)類人的

聚集地，整個産品囊括電商、資訊（或h5宣傳）、拆機、以及社區讨論等各種(zhǒng)功能(néng)，改版前邏輯複雜，功能(néng)繁多。改版開(kāi)始之初，筆者了解到革客群體時，便認爲理性加濃重Geek

味道(dào)的Google風格或許是最适合Gekec.com的視覺體系，然而複雜的産品邏輯不能(néng)給用戶帶來高效的交互體驗和愉悅的使用感受，視覺上也并不能(néng)很好(hǎo)的通過(guò)Material Design推演

并且變化，所以梳理出清晰、輕量且方便視覺統一的産品邏輯成(chéng)爲第一任務。

Gekec.com的産品全功能(néng)在此并不贅述，Product Feature全部爲達成(chéng)宜家式的體驗式設計，經(jīng)過(guò)梳理可以歸納成(chéng)三層，首層爲體驗層（多入口的首頁封面(miàn)）、第二層爲貨架層（包

括商城模塊、拆機模塊、體驗模塊）、第三層爲詳細、操作層；

輕量的産品結構即可方便設計的推演。例如其中第一層可以通過(guò)H5靈活排版做産品全方位體驗，第二層與第三層的關系即可利用Material Card和Tile表現。Card表達了全部信息的

聚合和入口，tile則表現同類信息的羅列。從card跳轉到最終頁應有一種(zhǒng)卡片展開(kāi)的體驗。

二、适宜UI推演的響應辦法

在産品邏輯清晰簡潔的基礎上，一套适宜Material Design變化的全尺寸響應辦法就成(chéng)爲複雜響應式網頁設計的核心内容，響應辦法能(néng)夠直接決定功能(néng)模塊的響應邏輯以及UI的變化

。實際操作中，響應辦法的确定主要就是确定栅格和占比。

1）栅格

網頁栅格系統是從平面(miàn)栅格系統中發(fā)展而來。對(duì)于網頁設計來說，栅格系統的使用，不僅可以讓網頁的信息呈現更加美觀易讀，更具可用性。而且，對(duì)于前端開(kāi)發(fā)來說，網頁將(jiāng)更

加的靈活與規範。栅格系統的具體含義以及使用方法在此不再贅述，感興趣的朋友可以參考淘寶UED的一些文章：

網頁栅格系統研究（1）：960的秘密

網頁栅格系統研究（2）：蛋糕的切法

網頁栅格系統研究（3）：粒度問題

網頁栅格系統研究（4）：技術實現

在Gekec.com的項目中，經(jīng)曆産品功能(néng)模塊的梳理，筆者使用了12栅格系統，目的是能(néng)夠滿足2、3、4、6的頁面(miàn)等分。注：具體栅格系統的建立應因産品和設計所決定，栅格系統并

不是萬能(néng)的，而确定的栅格系統可以爲整個響應式設計做規範性參考。

2）占比

A.占比

如上文說，12栅格約束網頁的内容區，而網頁的内容往往并不占據屏幕的全部寬度，而是在兩(liǎng)側留有間隙，營造空間感。由于屏幕的限制，這(zhè)種(zhǒng)空間感在移動端設備顯得更加重要

，然而強加固定的margin pixel會使得12栅格占比不定，難以控制設計效果。

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

12栅格寬度X占比=屏幕寬（臨界點）

優秀而巧妙的占比确定可以讓網頁設計呈現在各個主流屏幕上均是100%像素。

這(zhè)裡(lǐ)簡單解釋一下，若一個200px寬的元素在1200px寬的屏幕上，其占比爲16.67%，同樣(yàng)的邏輯，到1024px的屏幕上這(zhè)個占比16.67%的元素即占據了170.67px，這(zhè)樣(yàng)的情況下，某一

個物理像素無法占據100%，在完美主義的設計師眼裡(lǐ)，是無法接受的事(shì)情。而巧妙的占比，可以讓元素在各個主流屏幕占據100%像素，完美展現設計意圖。

B.臨界點

臨界點（breakpoint）是指響應式網頁發(fā)生布局變化的關鍵點，如“當屏幕寬度小于480px時加載...樣(yàng)式，當寬度在480px- 600px之間時加載…樣(yàng)式”。響應式網頁理論上有無數

種(zhǒng)尺寸，我們不可能(néng)也沒(méi)有必要爲每個尺寸都(dōu)去做設計，需要做的是選定幾個臨界點做設計，在兩(liǎng)個臨界 點之間是延續上一個臨界點的布局。

臨界點确認總體目的就是爲了保證頁面(miàn)在手機（屏幕很小）、平闆（屏幕中等）、PC（屏幕大）上加載相應的樣(yàng)式，然而經(jīng)驗較少的設計師往往會苦惱一個問題，那就是高像素的

手機屏幕和低像素的平闆屏幕應如何處理。例如設計師會擔心1080p的手機加載大屏幕頁面(miàn)，或者720p的平闆加載小屏幕頁面(miàn)。

但需要注意的是，響應式網頁不同于APP的屏幕适配。網頁是沉浸于浏覽器的産品，浏覽器所啓動的屏幕像素才可以被(bèi)認爲是臨界點的參考點，爲此，筆者做了一些測試，如下表，

可以看出不少1080p手機在浏覽器中僅啓動360px，而神奇的ipad無論是不是retina屏幕，無論是不是mini，均顯示1024x768px 。

從上表可以看出，許多擔心其實并不需要。綜上，在Gekec.com的項目中，筆者爲達到多數主流屏幕100%像素的追求，即需達到内容區在主流屏幕臨界點的占比可以被(bèi)12等分，進(jìn)而

獲得12栅格，即：

12的公倍數X占比=主流屏幕尺寸

項目中經(jīng)曆了一些測試和取舍，最終确定占比爲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；

占比劃分，頁面(miàn)元素可以完成(chéng)靈活、規範的響應。可以以此作爲整個産品的響應辦法，在此基礎之上，可以對(duì)Material Design進(jìn)行全面(miàn)的推演。

三、精雕細琢的頁面(miàn)細節

如果說産品邏輯是整個網站的骨架，那麼(me)精雕細琢的頁面(miàn)細節則可以比喻爲網站的氣質靈魂。有輕量級的産品構架和明确靈活的響應式辦法後(hòu)，即可通過(guò)Material Design的官方說

明進(jìn)行全面(miàn)設計。在Material Design的說明中，已經(jīng)詳細解釋了各個狀态的約束和細節，在此并不贅述，筆者僅挑選一些典型的細節。

1）css動畫

Material Design中開(kāi)篇第一章節便講述了動畫給用戶的直觀感受，說明感知一個物體有形的部分可以幫助用戶理解如何去控制它。一些細節位置的動畫能(néng)給用戶體驗上的驚喜。然

而在web端實現動畫效果并不像app裡(lǐ)那樣(yàng)的容易，大量JS也會影響頁面(miàn)加載速度甚至影響頁面(miàn)其他代碼。所以筆者選擇利用CSS對(duì)頁面(miàn)一些細節加以動畫效果。

A.點擊按鈕

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

B.輸入框

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

2）文字樣(yàng)式

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

熟悉Android的朋友可能(néng)對(duì)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

從上面(miàn)的數據可以看出，大多浏覽器啓動像素所産生的PPI大約在160左右，所以某段文字在PC端約束的物理像素尺寸，直接同樣(yàng)尺寸應用于移動端時，應該也可以産生不錯的體驗

效果，所以設計時可以直接將(jiāng)Material Design的字體sp尺寸轉化爲px來使用。Gekec.com的項目中，筆者隻約束一套字體樣(yàng)式，在方便前端開(kāi)發(fā)的同時，完成(chéng)了不錯的響應式效果

。

3）顔色

Material Design Guide中給出了若幹明亮鮮豔的顔色，并且指定了顔色的主要展現和層級變化，可供設計師選擇。

在實際操作中，通過(guò)商品内容的分類，筆者直接選擇Material Design中的顔色，作爲每類商品的主要顔色，而在一些重要的操作入口，顔色應與主要顔色有明顯區别。筆者應用色

環在Material Design Color基礎上，配合内容建立整個網站的顔色體系：

A.主體顔色以及層次根據内容确定，直接參考Material Design Color

B.應用色環分析整體補色間色

將(jiāng)所有主體顔色步在色環上，可以分析出補色位置應爲上方紅框位置，應用于有明顯區别的重要入口，如“加入購物車”、“砸￥1元參與”，“結算”等等；而間色位置應爲下方

紅框位置，應用于不明顯的細節變化，如文字hover，文字鏈接等；

4）間距

Material Design Guide中已經(jīng)嚴格約束了各個元素狀态下的間距，但爲了滿足全站響應式布局在主流屏幕展現，筆者仍然使用了8px原理對(duì)一些間距進(jìn)行了調整；在很多設計師研

究8px原理并進(jìn)行設計的同時，筆者仍然需要強調，響應式web的設計應基于浏覽器的像素尺寸，并不是基于ios和android的屏幕尺寸。具體可以參考上面(miàn)已經(jīng)分享的表格進(jìn)行實驗

。

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

一切爲了程序猿！詳析手機端的8PX原理

一張圖解釋手機适配8px原理(原創)

總結：

Material Design已經(jīng)給出了詳細的設計細節和原則，但不一定适合每一款産品，設計師需要弄清自身的産品是web還(hái)是app，邏輯是什麼(me)樣(yàng)，才可以進(jìn)行細化的設計工作；深入了解

産品邏輯的基礎上，确定的一套響應辦法和頁面(miàn)細節，能(néng)夠保障設計的展現并帶來不錯設計效果。Material Design作爲即蘋果、微軟之後(hòu)最新推出的設計語言，充滿了濃郁的

Google風情，能(néng)夠給用戶提供新鮮的視覺體驗，希望有越來越多的設計師會嘗試用Material Design進(jìn)行設計