MATERIAL DESIGN复杂响应式设计

        虎网科技（西安网站设计）按：网站设计Material Design初出茅庐，现在大多数是试水之作，刚好近期有同学接手了一个响应式Web站点的改版设计，虎网科技（西安网站设计）参考Material Design总结以下三点，关于如何实现复杂响应式站点的Material Design，希望对大家有帮助。

       2011年，Gmail邮箱的按钮变得更加扁平化。2012年，Google引入分层的卡片设计，使用更多的空白和精心设计的层次排版结构。经历了几年的迭代和提炼，Google寻找到了一种可以贯通的理论体系，即把系统内的各种设计都规范成一种变形的纸片，并套用现实中纸墨的物理模型进行交互，这就是2014年Google I/O大会隆重发布的Material Design。

Material Design提出了平面像素的Z轴概念，通过纸片在物理世界中形态的抽象和提炼，定义了各种信息层级和常用状态的表达方式，并详细讲解了各个细节的处理方法，就像一本考试大纲，囊括了产品中常用的UI细节，甚至一些UX细节。

如果说UX和UI的展现，是连接产品与用户的纽带，那么产品的UX以及UI应从产品的核心逻辑延展并且推演而来。如果说产品的核心逻辑或者技术的实现难易会成为设计展现的限制，那么UX和UI应是在各种限制下所权衡出的较优解。而Material Design则像是架桥说明或者权衡出的通用解，对于众多产品做以参考。

既然是通用大纲，那么抛开产品仅谈设计，难免会停留于“通用”层面，而利用Material Design进行实战的案例，网上也多是app的一些设计尝试。恰好在近期的工作学习中，接手一个响应式web站点的改版设计，笔者参考Material Design总结以下三点分享如何实现复杂响应式站点的Material Design。

西安网站设计：一、清晰轻量的产品逻辑

奥卡姆剃须刀法则同样在产品架构设计中适用，越简单的架构越有利于产品的生长。清晰轻量的产品逻辑，会减少用户的负担感，从而提高交互上的效率和愉悦感。

分析Material Design，会发现Google归纳了两类复杂内容信息的层级关系，分别是Card和Tile（List 以及其他相似定义属于同类的内容信息层级），其他定义多用于UI结构及细节。其中，Google定义Card是一种多功能信息的聚合入口，信息层级应较高，体现在Z轴应高于其他信息，视觉上有阴影表现并加以圆角处理。而tile（或同类信息列表）则是（同类或相关）信息的模块展现，信息层级应较0，体现在Z轴应略0于其他信息，视觉上应无阴影表现不加圆角处理。其结果是从视觉层面让产品对象更高效、更简单，同时也更具物理世界的“真实感”。

较近接手的项目是Gekec.com的全站改版。Gekec（革客）是Geek和Maker交集，喜欢革新，喜欢技术范儿、新潮的科技消费品，喜欢自己动手创造产品，Gekec.com也就是这类人的聚集地，整个产品囊括电商、资讯（或h5宣传）、拆机、以及社区讨论等各种功能，改版前逻辑复杂，功能繁多。改版开始之初，笔者了解到革客群体时，便认为理性加浓重Geek味道的Google风格或许是较适合Gekec.com的视觉体系，然而复杂的产品逻辑不能给用户带来高效的交互体验和愉悦的使用感受，视觉上也并不能很好的通过Material Design推演并且变化，所以梳理出清晰、轻量且方便视觉统一的产品逻辑成为先进任务。

如上图，轻量的产品结构即可方便设计的推演。例如其中先进层可以通过H5灵活排版做产品体验，第二层与第三层的关系即可利用Material Card和Tile表现。Card表达了全部信息的聚合和入口，tile则表现同类信息的罗列。从card跳转到较终页应有一种卡片展开的体验。

西安网站设计：二、适宜UI推演的响应办法

在产品逻辑清晰简洁的基础上，一套适宜Material Design变化的全尺寸响应办法就成为复杂响应式网页设计的核心内容，响应办法能够直接决定功能模块的响应逻辑以及UI的变化。实际操作中，响应办法的确定主要就是确定栅格和占比。

1）栅格（西安网站建设）

网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。

在Gekec.com的项目中，经历产品功能模块的梳理，笔者使用了12栅格系统，目的是能够满足2、3、4、6的页面等分。注：具体栅格系统的建立应因产品和设计所决定，栅格系统并不是全能的，而确定的栅格系统可以为整个响应式设计做规范性参考。

2）占比（西安网站建设）

A 占比

如上文说，12栅格约束网页的内容区，而网页的内容往往并不占据屏幕的全部宽度，而是在两侧留有间隙，营造空间感。由于屏幕的限制，这种空间感在移动端设备显得更加重要，如图，然而强加固定的margin pixel会使得12栅格占比不定，难以控制设计效果。

所以占比应是12栅格宽度对应屏幕的比值，即：

12栅格宽度X占比=屏幕宽（临界点）

先进而巧妙的占比确定可以让网页设计呈现在各个主流屏幕上均是100%像素。

这里简单解释一下，若一个200px宽的元素在1200px宽的屏幕上，其占比为16.67%，同样的逻辑，到1024px的屏幕上这个占比16.67%的元素即占据了170.67px，这样的情况下，某一个物理像素无法占据100%，在好主义的设计师眼里，是无法接受的事情。而巧妙的占比，可以让元素在各个主流屏幕占据100%像素，好展现设计意图。

B 临界点

临界点（breakpoint）是指响应式网页发生布局变化的关键点，如“当屏幕宽度小于480px时加载…样式，当宽度在480px- 600px之间时加载…样式”。响应式网页理论上有无数种尺寸，我们不可能也没有必要为每个尺寸都去做设计，需要做的是选定几个临界点做设计，在两个临界 点之间是延续上一个临界点的布局。

临界点确认总体目的就是为了页面在手机（屏幕很小）、平板（屏幕中等）、PC（屏幕大）上加载相应的样式，然而经验较少的设计师往往会苦恼一个问题，那就是高像素的手机屏幕和0像素的平板屏幕应如何处理。例如设计师会担心1080p的手机加载大屏幕页面，或者720p的平板加载小屏幕页面。

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；

如上图的占比划分，页面元素可以完成灵活、规范的响应。可以以此作为整个产品的响应办法，在此基础之上，可以对Material Design进行的推演。

西安网站设计：三、精雕细琢的页面细节

如果说产品逻辑是整个网站的骨架，那么精雕细琢的页面细节则可以比喻为网站的气质灵魂。有轻量级的产品构架和明确灵活的响应式办法后，即可通过Material Design的官方说明进行设计。在Material Design的说明中，已经详细解释了各个状态的约束和细节，在此并不赘述，笔者仅挑选一些典型的细节。

1）css动画（西安网站建设）

Material Design中开篇先进章节便讲述了动画给用户的直观感受，说明感知一个物体有形的部分可以帮助用户理解如何去控制它。一些细节位置的动画能给用户体验上的惊喜。然而在web端实现动画效果并不像app里那样的容易，大量JS也会影响页面加载速度甚至影响页面其他代码。所以笔者选择利用CSS对页面一些细节加以动画效果。

A 点击按钮

Material Design给出了一种ripple button，抽象了人用手触碰卡片的涟漪效果，给用户一种全新的使用体验，欢迎来Gekec.com点击尝试。

B 输入框

简单的Description和一条横线，抽象了实体文字卡片的填写过程，可以帮助用户对输入区域有实体化的理解，欢迎来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：1024×768/7.9英寸/PPI=131.96
• ipad mini：1024×768/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的屏幕尺寸。具体可以参考上面已经分享的表格进行实验。

虎网科技（西安网站设计）总结：

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

以上内容由虎网科技（西安网站设计,西安网站制作）为您提供，更多精彩内容：https://www.huwz.com/

关注“虎网科技”微信公众号，快速获取互联网较新资讯

企业做网站对于主机空间的处理办法

    企业做网站在注册了网址之后，下一步就是为网站找一间房子，即要有空间存放所要展示的内容，让世界各地的访问者登门来访。这儿所说的房子，其实就是人们经常说的空间。这个空间，务必是一台功能十分完善的主机级别的计算机，而且要用专线或以其他的形式全天与互联网相连。这种网络空间除可以存放企业的页面，为阅读者提供浏览服务之外，还可以此时充当电子邮局的作用，负责收发企业的Email。另外还可以在主机上添加各种各样的...

       西安网站建设做好优化前期工作 今天提示大家一点，当我们在做网站建设之后，一定要做好优化的准备工作，因为这个对我们的网站发展有很大的帮助，下面由西安网站建设公司小编为大家进行一下详细的阐述。 对于网站来说一定要选择个好的空间和域名，好的空间比较稳定、速度快、加载快、安全性高，网站长期稳定才能有个好的权重，给搜索引擎留下的印象才会好，同时还能够你的网站能时时的被访客搜索到，好的域名不仅仅好记，容易被访客记住，还会受到搜索引擎的喜欢...

       做营销型网站建设必须要懂得的东西 我想大家也知道，在这个网站横飞的时代，营销型网站在近几年来数量急剧上升，其中相关的技术与理念也在不断地提升之中，使得营销型网站早已跟传统的网站有着天壤之别。那么，如果你不懂一下这些区别，那么你就不懂什么是营销型网站及其建设。 　　在定位上 　　传统的网站是主要是站在美学角度和功能角度来建设，只要把网站建设得漂漂亮亮，能够让用户浏览信息就足够了，根本就不会考虑网站的定位问题。 　　营销型网站在进行建...

       网站内容推广有哪些技巧是需要掌握的？ 如今网站建设的热潮还没有褪去，依然处于顶峰，目前依然有很多的企业在寻找建站公司为自己的建站，而当一个网站建成以后，后期的维护和推广工作是必不可少的，这个步骤不仅重要，而且需要花费的时间较多，若不用心经营的话， 天津网站建设 - 虎网科技 的小编相信您刚精心做出的网站不久之后就会成为垃圾网站，所以必须重视推广，虽然目前市场上存在的推广方式有很多，如：百度推广、博客推广、论坛推广等，然而不管哪种推广方...

       提升网站权重需要做好的四点要素 我想每一个SEOer心里都很熟悉网站权重的定义，网站权重是指搜索引擎给网站(包括网页)赋予一定的权威值，对网站(含网页)权威的评估评价，一个网站权重越高，在搜索引擎所占的份量越大，在搜索引擎排名就越好。网站权重提高了，文章比之前更快收录，快照更新更加频繁等。做网站要以稳定增加内容和外链为主，不要采用作弊的方式，那么你的站一般来说你网站的权重只会增加不会减少的，而且网站也不会被降权的。 　　但是，网...

       设计网站应对网站风格搭配了如指掌 网站做为一种新模式逐渐被企业所运用，线上的竞争已经发展成为了线上的竞争，而线上的竞争来自于网站的竞争，作为的牌面与资本，企业网站设计时对风格有着严格的要求，只有对风格搭配了如指掌，才能设计出理想的网站！那么该怎么进行风格方面的搭配呢？ 设计网站应对网站风格搭配了如指掌 　　一、要找对欣赏的人，再完美的风格搭配也要有能欣赏的人，也就是网站的受众，因为每个用户群体对设计的风格要求都是不一样的，找对了才...