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

簡(jiǎn)單的Des cription和一條橫線，抽象了實(shí)體文字卡片的填寫過(guò)程，可以幫助用戶對(duì)輸入?yún)^(qū)域有實(shí)體化的理解，歡迎來(lái)Gekec.com點(diǎn)擊嘗試。

2）文字樣式

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

熟悉Android的朋友可能對(duì)sp的概念并不陌生，sp：Scale-independent pixels，它是安卓的字體單位，以160PPI屏幕為標(biāo)準(zhǔn)，當(dāng)字體大小為 100%時(shí)， 1sp=1px；然而響應(yīng)式的網(wǎng)頁(yè)并不是安卓，網(wǎng)頁(yè)更需要物理像素的尺寸約束，所以筆者在所劃分的臨界點(diǎn)計(jì)算了一下所測(cè)試屏幕的瀏覽器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

從上面的數(shù)據(jù)可以看出，大多瀏覽器啟動(dòng)像素所產(chǎn)生的PPI大約在160左右，所以某段文字在PC端約束的物理像素尺寸，直接同樣尺寸應(yīng)用于移動(dòng)端時(shí)，應(yīng)該也可以產(chǎn)生不錯(cuò)的體驗(yàn)效果，所以設(shè)計(jì)時(shí)可以直接將Material Design的字體sp尺寸轉(zhuǎn)化為px來(lái)使用。Gekec.com的項(xiàng)目中，筆者只約束一套字體樣式，在方便前端開發(fā)的同時(shí)，完成了不錯(cuò)的響應(yīng)式效果。

3）顏色

Material Design Guide中給出了若干明亮鮮艷的顏色，并且指定了顏色的主要展現(xiàn)和層級(jí)變化，可供設(shè)計(jì)師選擇。

在實(shí)際操作中，通過(guò)商品內(nèi)容的分類，筆者直接選擇Material Design中的顏色，作為每類商品的主要顏色，而在一些重要的操作入口，顏色應(yīng)與主要顏色有明顯區(qū)別。筆者應(yīng)用色環(huán)在Material Design Color基礎(chǔ)上，配合內(nèi)容建立整個(gè)網(wǎng)站的顏色體系：

A.主體顏色以及層次根據(jù)內(nèi)容確定，直接參考Material Design Color

B.應(yīng)用色環(huán)分析整體補(bǔ)色間色

將所有主體顏色步在色環(huán)上，可以分析出補(bǔ)色位置應(yīng)為上方紅框位置，應(yīng)用于有明顯區(qū)別的重要入口，如“加入購(gòu)物車”、“砸￥1元參與”，“結(jié)算”等等；而間色位置應(yīng)為下方紅框位置，應(yīng)用于不明顯的細(xì)節(jié)變化，如文字hover，文字鏈接等；

4）間距

Material Design Guide中已經(jīng)嚴(yán)格約束了各個(gè)元素狀態(tài)下的間距，但為了滿足全站響應(yīng)式布局在主流屏幕展現(xiàn)，筆者仍然使用了8px原理對(duì)一些間距進(jìn)行了調(diào)整；在很多設(shè)計(jì)師研究8px原理并進(jìn)行設(shè)計(jì)的同時(shí)，筆者仍然需要強(qiáng)調(diào)，響應(yīng)式web的設(shè)計(jì)應(yīng)基于瀏覽器的像素尺寸，并不是基于ios和android的屏幕尺寸。具體可以參考上面已經(jīng)分享的表格進(jìn)行實(shí)驗(yàn)。

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

一切為了程序猿！詳析手機(jī)端的8PX原理

一張圖解釋手機(jī)適配8px原理(原創(chuàng))

總結(jié)：

Material Design已經(jīng)給出了詳細(xì)的設(shè)計(jì)細(xì)節(jié)和原則，但不一定適合每一款產(chǎn)品，設(shè)計(jì)師需要弄清自身的產(chǎn)品是web還是app，邏輯是什么樣，才可以進(jìn)行細(xì)化的設(shè)計(jì)工作；深入了解產(chǎn)品邏輯的基礎(chǔ)上，確定的一套響應(yīng)辦法和頁(yè)面細(xì)節(jié)，能夠保障設(shè)計(jì)的展現(xiàn)并帶來(lái)不錯(cuò)設(shè)計(jì)效果。Material Design作為即蘋果、微軟之后最新推出的設(shè)計(jì)語(yǔ)言，充滿了濃郁的Google風(fēng)情，能夠給用戶提供新鮮的視覺(jué)體驗(yàn)，希望有越來(lái)越多的設(shè)計(jì)師會(huì)嘗試用Material Design進(jìn)行設(shè)計(jì)。