多图实例分享Material Design复杂响应式设计

简单的Des cription和一条横线，抽象了实体文字卡片的填写过程，可以帮助用户对输入区域有实体化的理解，欢迎来Gekec.com点击尝试。

2）文字样式

Material Design中强调“同时使用过多的字体尺寸和样式，可以轻易的毁掉布局”，并约束了常用的基本样式就是基于12sp、14sp、16sp、20sp的字体排版。

熟悉Android的朋友可能对sp的概念并不陌生，sp：Scale-independent pixels，它是安卓的字体单位，以160PPI屏幕为标准，当字体大小为 100%时， 1sp=1px；然而响应式的网页并不是安卓，网页更需要物理像素的尺寸约束，所以笔者在所划分的临界点计算了一下所测试屏幕的浏览器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

从上面的数据可以看出，大多浏览器启动像素所产生的PPI大约在160左右，所以某段文字在PC端约束的物理像素尺寸，直接同样尺寸应用于移动端时，应该也可以产生不错的体验效果，所以设计时可以直接将Material Design的字体sp尺寸转化为px来使用。Gekec.com的项目中，笔者只约束一套字体样式，在方便前端开发的同时，完成了不错的响应式效果。

3）颜色

Material Design Guide中给出了若干明亮鲜艳的颜色，并且指定了颜色的主要展现和层级变化，可供设计师选择。

在实际操作中，通过商品内容的分类，笔者直接选择Material Design中的颜色，作为每类商品的主要颜色，而在一些重要的操作入口，颜色应与主要颜色有明显区别。笔者应用色环在Material Design Color基础上，配合内容建立整个网站的颜色体系：

A.主体颜色以及层次根据内容确定，直接参考Material Design Color

B.应用色环分析整体补色间色

将所有主体颜色步在色环上，可以分析出补色位置应为上方红框位置，应用于有明显区别的重要入口，如“加入购物车”、“砸￥1元参与”，“结算”等等；而间色位置应为下方红框位置，应用于不明显的细节变化，如文字hover，文字链接等；

4）间距

Material Design Guide中已经严格约束了各个元素状态下的间距，但为了满足全站响应式布局在主流屏幕展现，笔者仍然使用了8px原理对一些间距进行了调整；在很多设计师研究8px原理并进行设计的同时，笔者仍然需要强调，响应式web的设计应基于浏览器的像素尺寸，并不是基于ios和android的屏幕尺寸。具体可以参考上面已经分享的表格进行实验。

这里分享一些8px的文章，感兴趣的同学可以看一看：

一切为了程序猿！详析手机端的8PX原理

一张图解释手机适配8px原理(原创)

总结：

Material Design已经给出了详细的设计细节和原则，但不一定适合每一款产品，设计师需要弄清自身的产品是web还是app，逻辑是什么样，才可以进行细化的设计工作；深入了解产品逻辑的基础上，确定的一套响应办法和页面细节，能够保障设计的展现并带来不错设计效果。Material Design作为即苹果、微软之后最新推出的设计语言，充满了浓郁的Google风情，能够给用户提供新鲜的视觉体验，希望有越来越多的设计师会尝试用Material Design进行设计。