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

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

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

12柵格寬度X占比=屏幕寬（臨界點(diǎn)）

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

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

B.臨界點(diǎn)

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

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

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

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

12的公倍數(shù)X占比=主流屏幕尺寸

項(xiàng)目中經(jīng)歷了一些測(cè)試和取舍，最終確定占比為93.75%，臨界點(diǎn)為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；

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

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

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

1）css動(dòng)畫(huà)

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

A.點(diǎn)擊按鈕

Material Design給出了一種ripple button，抽象了人用手觸碰卡片的漣漪效果，給用戶(hù)一種全新的使用體驗(yàn)，歡迎來(lái)Gekec.com點(diǎn)擊嘗試。

B.輸入框