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

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

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

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

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

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

B.臨界點

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

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

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

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

12的公倍數(shù)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；

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

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

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

1）css動畫

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

A.點擊按鈕

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

B.輸入框