设计是很灵活的，但同一个专案/产品的设计，就必须要有它的规范，而这些规范，必须要遵循设计的原理，对自己而言，以后再同一专案做更新优化时能用更快的时间搞定，对他人而言，不让人喷的同时认同您是个专业的设计师。最近咨询网页前端设计的朋友比较多，当然大部分是求 PSD~，授人以鱼不如授人以渔，是时候分享一些推荐给大家了。这篇文章是出于对客观的理解加上小编的设计经验，因此有些地方可能会跟大家的想法有出入，不对的地方请指出。前端设计也是属于网页设计的一部分，自从有了 H5，网页设计的展现形式真是千变万化，但是要做一个让大部分非 IT 的人操作的 PC 端前端，您把它做的很炫，请问多用户答应吗？前端和开发都不想答应。当然，对于一些控制组件/组件是可以做一些轻动画互动。居中对齐的网页这个尺寸的网页尺寸很好把握，新建画布 A（白色图层），然后新建另外一个网页有效区的画布 B(黄色图层)，把画布 B 的图层拖到画布 A，居中对齐，然后拖两条参考线，删除黄色图层，这个时候就可以在这个画布上大展身手了。那么，画布 A 的宽度到底应该是多少解析度呢？很明显，只要大于有效区即可。因为这种网页设计尺寸是固定的，控制组件和组件等的都设定一个固定值，比如间距刚刚好是 30px，按钮刚刚好是 100px，表格刚刚好是 700px 等。网页有效区的宽度从以前的 600px 涨到现在 1200px，甚至更高，因此，结合我们当前使用的主流显示器，例，做一个 1200px 宽度的网页，那么画布 B 就是要设定的宽度，而画布 A 则是大于 1200px 宽度，就算网页的有效区已经固定，然而很多时候，您肯定会设计通栏的 banner，用上 1920 解析度显示器的您，当然是用 1920 的宽度比较爽比较任性好吗？版面解析度的设定，常见的网页结构型别科学的网页结构能够更好地展现网站资讯，让任务的完成更容易，对内容的存取更直接。网页结构的科学性和艺术性，可易于资讯的管理。 常见的网页布局结构主要有以下几种：1.“T” 形布局所谓 “T” 形布局就是指页面顶部为横条网站标志与广告条，下方左面为主选单，右面显示内容的布局，因为选单条背景较深，整体效果类似，英文字母 “T”，所以我们称之为 “T” 形布局，这是网页设计中用得广泛的一种布局方式。这种布局的优点是页面结构清晰，主次分明，是初学者容易上手的布局方法。缺点是规矩呆板，如果细节色彩上不注意加工，很容易让人 “看之无味” 。 2.“口” 形布局这是一个象形的说法，一般就是页面上下各有一个广告条，左面是主选单，右面放友情连结等，中间是主要内容。这种布局的优点是充分利用版面，资讯量大。缺点是页面拥挤，不够灵活。也有将四边空出，只用中视窗形布局。 3.“三” 形布局这种布局多为国外站点使用，国内用得不多。特点是页面上横向两条色块，将页面整体分割为三部分，色块中大多放广告条。 4. 对称对比布局顾名思义，采取左右或者上下对称的布局，一半深色，一半浅色，般用于设计型站点，优点是视觉冲击力强，缺点是对两部分进行有机的结合比较困难。 5.POP 布局 POP 引自广告术语，就是指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。这种布局常用于时尚类站点，优点显而易见：漂亮，吸引人。缺点就是速度慢。布满全屏的网页对于全屏展示的网页，又分为自适应和响应式。自适应是根据浏览器的解析度大小自动适配尺寸布满全屏，它所呈现的样式一直都是一个终端的（如 PC 端）效果，通常前端会给这种网页设定一个最小值（min-width），当浏览器的解析度小于这个值的时候，浏览器会出现横向滚动条。另外一种就是近几年超流行的人们常说的 H5 响应式布局（栅格化布局），一般把浏览器解析度三等分，在每个等分割槽间展示的布局都不尽相同，也就是我们说手机端、平板、 PC 端的展示，并且在每一个区间的解析度的缩放也应包括了自适应。因此在设计这种网页时，通常要做三种尺寸的设计。响应式布局网页固然有很大的优势，但是在很多约束的现实情况，后台设计（一般指资讯/资料型的管理系统）并不会采取这种方式，而是选择自适应的 PC 端设计，当然如果产品需要，一般开发上会分开做成两种形式，PC 端和移动端。正因为是 PC 端的后台，它的解析度（浏览器解析度）仍然有大有小，全屏自适应的布局会根据解析度的大小而改变。 PC 端后台介面会设计一个最小宽度 min-width，如果浏览器小于这个值，那么只能用滚动条拖动了。既然是布满全屏的网页，那么新建的画布尺寸就可以更主观了，一般就按照自己使用的显示器的更佳 解析度来设定，至于在什么样的尺寸展示什么样的布局，那是前端的技术，设计只提供各个解析度展示的效果图，但是，您必须理解其中的原理，否则前端直接跟您说做不了您也没辙。对于后台设计，布满全屏的网页尺寸在当下的环境显得更为主流，因为后台的更新优化实在是太频繁了，固定宽度有时候很难满足互动需求。