2011年Gmail按鈕扁平化，2012年Google引入分層卡片設計，多留白精心層次排版。經幾年迭代提煉，Google尋得貫通理論體系：將系統內各種設計規範為一種變形紙片，套用現實紙墨物理模型交互，即2014 Google I/O隆重發布的Material Design。

Material Design提出平面像素Z軸概念，通過紙片物理形態抽象提煉，定義各種信息層級常用狀態表達，詳細講解細節處理，如考試大綱囊括產品常用UI甚至UX細節。此處不贅述，詳細Design Guide請點擊（需梯子），翻譯版點此。

若UX/UI展現是連接產品用戶紐帶，產品UX/UI應從核心邏輯延展推演。若核心邏輯或技術實現難易成設計限制，UX/UI應是在限制下權衡最優解。Material Design如架橋說明或通用解，供眾多產品參考。

既是通用大綱，拋開產品談設計難免停留「通用」層面。利用Material Design實戰案例多為App設計嘗試。恰好近期工作接手響應式Web站點改版，參考Material Design總結三點分享複雜響應式站點落地實踐。

一、清晰輕量的產品邏輯

奧卡姆剃刀法則同樣適用產品架構設計，越簡單架構越利產品生長。清晰輕量邏輯減少用戶負擔感，提高交互效率與愉悅感。

分析Material Design，Google歸納兩類複雜內容信息層級關係：Card與Tile（List及其他相似定義屬同類）。其他定義多用於UI結構細節。Google定義Card為多功能信息聚合入口，信息層級較高，Z軸高於其他信息，視覺有陰影表現並圓角處理。Tile（或同類信息列表）為同類/相關信息模組展現，層級較低，Z軸略低，視覺無陰影不加圓角。結果從視覺層面讓產品對象更高效、簡單，更具物理世界「真實感」。

近期接手Gekec.com全站改版。Gekec（革客）= Geek ∩ Maker，喜歡革新、技術范兒、新潮科技消費品、自己動手創造產品，Gekec.com即此類人聚集地。產品囊括電商、資訊/H5宣傳、拆機、社區討論等功能，改版前邏輯複雜功能繁多。初期了解革客群體，認為理性濃重Geek味Google風格或許最適合視覺體系，但複雜產品邏輯無法帶來高效交互愉悅體驗，視覺也難通過Material Design推演變化。梳理清晰、輕量、便於視覺統一的產品邏輯成首要任務。

Gekec.com全功能不贅述，Product Feature全部為達成宜家式體驗設計，梳理歸納三層：首層體驗層（多入口首頁封面）、二層貨架層（商城/拆機/體驗模塊）、三層詳細操作層。

輕量產品結構便於設計推演。如首層可通過H5靈活排版做全方位體驗，二三層關係用Material Card與Tile表現。Card表達全部信息聚合入口，Tile表現同類信息羅列。從Card跳轉最終頁應有卡片展開體驗。

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

產品邏輯清晰簡潔基礎上，一套適宜Material Design變化的全尺寸響應辦法成核心，直接決定功能模塊響應邏輯與UI變化。實際操作中響應辦法確定主要確定柵格與佔比。

1) 柵格系統

網頁柵格系統源自平面柵格。使用柵格不僅讓信息呈現更美觀易讀、更具可用性，對前端開發也更靈活規範。具體含義用法不贅述，參考淘寶UED文章：《網頁柵格系統研究(1-4)》。

Gekec.com項目經產品功能模塊梳理，使用12柵格系統，目的滿足2、3、4、6頁面等分。註：具體柵格建立應因產品設計決定，柵格非萬能，但確定柵格可為響應式設計做規範性參考。

2) 佔比與臨界點

A 佔比

12柵格約束內容區，但內容往往不佔滿屏寬，兩側留間隙營造空間感。屏幕限制下空間感移動端更重要。強加固定margin pixel會使12柵格佔比不定、難控制設計效果。

所以佔比應為12柵格寬度對應屏幕比值：12柵格寬度 × 佔比 = 屏幕寬（臨界點）。優秀佔比確定讓網頁設計在各主流屏幕均為100%像素。

簡單解釋：200px元素在1200px屏佔比16.67%，同邏輯到1024px屏該佔比元素佔170.67px，物理像素無法佔100%，完美主義設計師無法接受。巧妙佔比讓元素各主流屏佔100%像素，完美展現設計意圖。

B 臨界點

臨界點(breakpoint)指響應式網頁發生佈局變化關鍵點。理論上無數尺寸，不可能也無必要為每尺寸做設計，需選定幾個臨界點設計，兩點間延續上一臨界點佈局。

確認臨界點總體目的是保證頁面在手機（小）、平板（中）、PC（大）加載相應樣式。經驗少設計師常苦惱：高像素手機屏與低像素平板屏怎處理？如擔心1080p手機加載大屏頁面、720p平板加載小屏頁面。

但需注意：響應式網頁不同於App屏幕適配。網頁沉浸於瀏覽器，瀏覽器啟動屏幕像素才是臨界點參考點。做測試如下表：不少1080p手機瀏覽器僅啟動360px，神奇iPad無論Retina否、Mini否，均顯示1024×768px。

許多擔心其實不需要。綜上，Gekec.com項目為達多數主流屏100%像素追求，即需內容區在主流屏臨界點佔比可被12等分，進而獲12柵格：

12的公倍數 × 佔比 = 主流屏幕尺寸

經測試取捨，最終確定佔比93.75%，臨界點1280px、1024px、768px、320px。

• ≥1280px：佔比93.75%，12柵格在典型屏(1280px)寬1200px
• 1024-1280px：佔比93.75%，12柵格寬960px
• 768-1024px：佔比93.75%，12柵格寬700px
• 320-768px：佔比93.75%，12柵格寬300px

此佔比劃分下頁面元素可完成靈活規範響應，作為整個產品響應辦法基礎，可對Material Design進行全面推演。

三、精雕細琢……

（原文至此截斷）