网页设计解析 第1篇
本模块从响应式、中断点、布局类型、流动布局下的模块处理、自适应这 5 方面进行阐述。
①响应式
响应式 Responsive 是使用一套页面/代码适配多个客户端。
适用场景：从运营和维护的便利性方面考虑，当网站交互少、功能少、升级不频繁时建议使用响应式，如展示类官网等。
实现响应的前提条件：
这两点也是栅格系统本身的典型特点，栅格系统是响应式网页的实现方式。
②中断点
中断点，是网页在收缩的过程中的最小范围。当网页宽度到达这个范围以后，网页内部的元素就要进行相应的变化，用来适应网页尺寸的变化。
中断点是基于页面具体内容、主流用户设备的分辨率、用户规模和成本计算等设置的。在拉升/压缩页面的过程中，无法使用相同的布局且必须改变内容展现方式时，产生的关键尺寸节点即可作为中断点。
以下断点以谷歌 Material Design 和 Bootstrap 的断点为例，仅作参考：
中断点越多会让网页变得更加细腻、流畅。然而，当研发时间有限、对显示要求较低时，可选择常用的断点设置即可。
以下我们挑选了三个常用的中断点数值作为参考：
③布局类型
基于固定宽度和百分比宽度，我们可以将网页的布局类型分为：固定布局、流动布局、混合布局。这里的布局是指收缩网页的时，信息模块网格的变化模式。
固定布局
固定布局是指在收缩网页的过程中，列宽和水槽宽固定保持不变。
通常我们会设置一个最小宽度（PC 端常用最小宽度为 1200px）。小于最小宽度页面底部就会出现横向滚动条；大于最小宽度则内容居中（两侧留白）。示例如下：
流动布局
当窗口缩小时，内容将动态地发生变化，文本会进行换行，元素也会变窄。然而，这些元素在内容宽度缩小到下一个中断点之前，布局是不会变化的。
网页设计解析 第2篇
本篇文章较长，请大家做好心理准备。因为每个模块内容长短不一，分开写一篇文章过短，放一起归纳会更加系统点。版权声明：最终解释权归前司所有。
本模块从设计原则、基础布局、扩展布局、懒加载这 4 方面进行阐述。
框架布局是页面的骨架和基础。在框架确定之后，设计者才可进行下一步的构建：统一的视觉元素，清晰的功能操作，具体流程的交互等。
我们主要梳理了基础层、内容层相关模块所组合的布局框架。以下主要从基础布局、扩展布局这两方面进行阐述。
网页设计解析 第3篇
指的是在长网页中延迟加载图像。页面滚动到可视区域中，图像才会加载出来，是一种加载速度快、能缓解服务器压力的方式。加载时显示的页面骨架屏（灰色占位图），是页面加载过程中的过渡效果。
试想，在图片多、页面长的电商网页中，如果每一张图片都需要加载，由于加载数量过大，会造成长时间白屏或闪烁，有时候页面甚至会崩溃，这就严重影响到了用户体验。
本模块从背景层、内容层、全局控制层、蒙版层、弹出层这 5 方面进行阐述。
页面层级用于规范页面元素所属层级、层级顺序及组合规范。
页面的基础层级从 底层 到 顶层 的排序，依次为：Background 背景层、Content 内容层、Global control 全局控制层(导航、菜单、侧边栏等)、Mask 蒙版层、Pop-up 弹出层。
下面以结构相对复杂的“口”型布局作层级示例：
网页设计解析 第4篇
背景层样式固定，在页面中永远置于页面底部，并且一般会给予背景层中性色，作用是方便突出内容层和全局控制层。
背景层可分为纯色背景、图片背景。纯色背景常用颜色：中性色板的 color1 - #ffffff、color2 - #fafafa、color3 - #f5f5f5。图片背景又包括图形、文字、图片等元素构成的背景，主要用于装饰页面、引导视觉。
网页设计解析 第5篇
所谓_T_结构布局，就是指网页上边和左边相结合，页面顶部为横条网站标志和广告条，左下方为主菜单，右面显示内容，这是网页设计中用得最广泛的一种布局方式。在实际设计中还可以改变_T_结构布局的形式，如左右两栏式布局，一半是正文，另一半是形象的图片、导航。或正文不等两栏式布置，通过背景色区分，分别放置图片和文字等。
这样的布局有其固有的优点，因为人的注意力主要在右下角，所以企业想要发布给用户的信，大都能被用户以最大可能性获取，而且很方便，其次是页面结构清晰，主次分明、易于使用。缺点是规矩呆板，如果细节色彩上不注意，很容易让人_看之无味_。