多圖實例分享Material Design復雜響應式設計(2)

如上文說，12柵格約束網頁的內容區(qū)，而網頁的內容往往并不占據屏幕的全部寬度，而是在兩側留有間隙，營造空間感。由于屏幕的限制，這種空間感在移動端設備顯得更加重要，如圖，然而強加固定的margin pixel會使得12柵格占比不定，難以控制設計效果。

所以占比應是12柵格寬度對應屏幕的比值，即：

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

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

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

B.臨界點

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

臨界點確認總體目的就是為了保證頁面在手機（屏幕很小）、平板（屏幕中等）、PC（屏幕大）上加載相應的樣式，然而經驗較少的設計師往往會苦惱一個問題，那就是高像素的手機屏幕和低像素的平板屏幕應如何處理。例如設計師會擔心1080p的手機加載大屏幕頁面，或者720p的平板加載小屏幕頁面。

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

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

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

項目中經歷了一些測試和取舍，最終確定占比為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；

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

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

如果說產品邏輯是整個網站的骨架，那么精雕細琢的頁面細節(jié)則可以比喻為網站的氣質靈魂。有輕量級的產品構架和明確靈活的響應式辦法后，即可通過Material Design的官方說明進行全面設計。在Material Design的說明中，已經詳細解釋了各個狀態(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.輸入框