超复杂网页设计 第1篇
导航对于网站的重要性不言而喻，用户在登陆了你网站时，应该是第一眼就该我明白接下来他可以进行怎样的操作，哪些操作会把他带到何处。因此，导航一定要醒目，建议导航和菜单栏往往处于页面的顶部，不要另辟蹊径，因为导航信息是在太重要了。
此外，导航的标签内容和运行效果必须清晰直观，不要使用水平方向的滚动条或者其他一些不太寻常的动效设计的时候，就算要用，也一定要给用户一些暗示让他们知道你的网页如何工作。不过讲真的，过于复杂的设计会让用户感到无所适从并直接关闭你的网站。
一个优秀的导航应该是这样的。
超复杂网页设计 第2篇
Material Design中开篇第一章节便讲述了动画给用户的直观感受，说明感知一个物体有形的部分可以帮助用户理解如何去控制它。一些细节位置的动画能给用户体验上的惊喜。然而在web端实现动画效果并不像app里那样的容易，大量JS也会影响页面加载速度甚至影响页面其他代码。所以笔者选择利用CSS对页面一些细节加以动画效果。
B 输入框
超复杂网页设计 第3篇
A 占比
如上文说，12栅格约束网页的内容区，而网页的内容往往并不占据屏幕的全部宽度，而是在两侧留有间隙，营造空间感。由于屏幕的限制，这种空间感在移动端设备显得更加重要，如图，然而强加固定的margin pixel会使得12栅格占比不定，难以控制设计效果。
所以占比应是12栅格宽度对应屏幕的比值，即：
12栅格宽度X占比=屏幕宽（临界点）
优秀而巧妙的占比确定可以让网页设计呈现在各个主流屏幕上均是100%像素。
这里简单解释一下，若一个200px宽的元素在1200px宽的屏幕上，其占比为，同样的逻辑，到1024px的屏幕上这个占比的元素即占据了，这样的情况下，某一个物理像素无法占据100%，在完美主义的设计师眼里，是无法接受的事情。而巧妙的占比，可以让元素在各个主流屏幕占据100%像素，完美展现设计意图。
B 临界点
临界点（breakpoint）是指响应式网页发生布局变化的关键点，如“当屏幕宽度小于480px时加载...样式，当宽度在480px- 600px之间时加载…样式”。响应式网页理论上有无数种尺寸，我们不可能也没有必要为每个尺寸都去做设计，需要做的是选定几个临界点做设计，在两个临界 点之间是延续上一个临界点的布局。
临界点确认总体目的就是为了保证页面在手机（屏幕很小）、平板（屏幕中等）、PC（屏幕大）上加载相应的样式，然而经验较少的设计师往往会苦恼一个问题，那就是高像素的手机屏幕和低像素的平板屏幕应如何处理。例如设计师会担心1080p的手机加载大屏幕页面，或者720p的平板加载小屏幕页面。
但需要注意的是，响应式网页不同于APP的屏幕适配。网页是沉浸于浏览器的产品，浏览器所启动的屏幕像素才可以被认为是临界点的参考点，为此，笔者做了一些测试，如下表，可以看出不少1080p手机在浏览器中仅启动360px，而神奇的ipad无论是不是retina屏幕，无论是不是mini，均显示1024x768px 。从上表可以看出，许多担心其实并不需要。综上，在的项目中，笔者为达到多数主流屏幕100%像素的追求，即需达到内容区在主流屏幕临界点的占比可以被12等分，进而获得12栅格，即：
12的公倍数X占比=主流屏幕尺寸
项目中经历了一些测试和取舍，最终确定占比为，临界点为1280px、1024px、768px和320px。
具体为：
如上图的占比划分，页面元素可以完成灵活、规范的响应。可以以此作为整个产品的响应办法，在此基础之上，可以对Material Design进行全面的推演。
如果说产品逻辑是整个网站的骨架，那么精雕细琢的页面细节则可以比喻为网站的气质灵魂。有轻量级的产品构架和明确灵活的响应式办法后，即可通过Material Design的官方说明进行全面设计。在Material Design的说明中，已经详细解释了各个状态的约束和细节，在此并不赘述，笔者仅挑选一些典型的细节。
超复杂网页设计 第4篇
Material Design中强调“同时使用过多的字体尺寸和样式，可以轻易的毁掉布局”，并约束了常用的基本样式就是基于12sp、14sp、16sp、20sp的字体排版。
熟悉Android的朋友可能对sp的概念并不陌生，sp：Scale-independent pixels，它是安卓的字体单位，以160PPI屏幕为标准，当字体大小为 100%时， 1sp=1px；然而响应式的网页并不是安卓，网页更需要物理像素的尺寸约束，所以笔者在所划分的临界点计算了一下所测试屏幕的浏览器PPI，如下：
从上面的数据可以看出，大多浏览器启动像素所产生的PPI大约在160左右，所以某段文字在PC端约束的物理像素尺寸，直接同样尺寸应用于移动端时，应该也可以产生不错的体验效果，所以设计时可以直接将Material Design的字体sp尺寸转化为px来使用。的项目中，笔者只约束一套字体样式，在方便前端开发的同时，完成了不错的响应式效果。