在停止Web 网页设想时，需要遵照必然的设想标准。领会Web 设想的标准能够帮忙设想新人更好地掌握工做的要点，削减失误。本节将讲解Web 设想的常用标准。需要留意的是，差别的公司、差别的项目会有差别的设想标准，在完成现实项目时应遵照该项目标详细设想标准。
目次
1 尺寸和分辩率
2 文字标准
3 图片的选择和处置
4 栅格
5 切图
1 尺寸和分辩率
在Photoshop 的“新建文档”对话框中有常见的几种网页尺寸预设供选择，如：网页-常见尺寸（1366x768 像素）、网页-大尺寸（1920x1080 像素）、网页-最小尺寸（1024x768 像素）、MacBook Pro13 （2560x1600 像素）、MacBook Pro15（2880x1800像素）、iMac 27（2560x1440 像素）等，如下方的例图所示。
尺寸设置涉及各类屏幕适配的问题，在现实工做中需要与前端开发人员沟通详细细节。
因为网页是由电子屏幕来显示的，所以将网页设想文档的分辩率设置为72ppi，颜色形式选择为RGB 颜色。
需要留意的是，网页设想的区域其实不会占满整个画布。以1920像素×1080像素的网页为例，在设想网页首屏时，网站的宽度为1920像
素，高度约为900像素， 因为需要从1080像素的高度中减去阅读器头部和底部的高度。为了制止内容显示不全，1920像素的宽度也不建议占满。所以建议在宽度为1400/1200/1000 像素，高度约为900像素
的内容平安区域停止设想，如下方的例图中所示。
2 文字标准
在Web 设想中利用文字也需要遵照必然的标准。
字体选择
出于易读性的考虑，网页的字体一般利用非衬线字体。中文网页保举利用苹方或微软雅黑字体，英文网页则保举利用Arial字体。
字体大小
在字体大小方面，常用的字体大小为12像素、14像素、16像素和18像素，如图下方例图所示。12像素是适用于网页的最小字号，适用于正文性内容；14像素则适用于通俗注释内容；16像素或18像素适用于凸起性的题目内容。
网站的字体大小并没有硬性规定，详细的字号能够按照现实情况酌情考虑，但是要利用偶数字号。
在一个网页中，字体的品种不需要太多，最多利用3 种字体停止混搭。若是需要字体来表示更多信息层级，能够通过改动字体颜色或选择加粗字体来表现。
文字颜色
主文字的颜色，建议利用品牌的VI 颜色，如许做可进步网站与品牌之间的联系关系，增加可辨识性和记忆性。
注释字体颜色，选用易读性的深灰色，如#333333、#666666等；辅助性的正文类文字，则能够选用#999999等比力浅的颜色，如下方的例图中所示。
字间距、行间距和段间距
字间距利用默认数值即可。行间距一般为字号大小的1.5至2倍。以14像素的注释字号为例，行间距一般设置为21~28像素。段间距一般为字号的2至2.5倍。以14像素的注释字号为例，段间距一般设置为28~35像素。
3 图片选择和处置
网站设想中常用的宽高比是4:3、16:9、1:1等比例图片。详细图片大小没有固定要求，但以整数和偶数为佳。选择图片素材时，尽可能选择尺寸比目的尺寸大的图片，图片处置的空间会更大。
图片的格局有良多，如撑持通明的PNG 格局、节省空间的JPG 格局、撑持动画的GIF 格局等。
输出收集利用的图片时，在包管图像明晰度的情况下，文件占用空间越小越好。
那么若何输出较小的图片呢?
在Photoshop 中, 利用“文件-导出-存储为Web 所用格局”号令，如下方例图所示，能够压缩图片的多余像素，会比通俗存储的图片小。
留意，在输出PNG格局图片时，要选择“PNG-24”格局，不
要选择“PNG-8”格局， 因为“PNG-8”导出的图片量量较差，明晰度较低。
4 栅格
栅格也被称为网格。在网页设想中常用12栅格，如下方的例图所示，它便于对网页停止2等分、3等分、4等分，从而适应大大都网页规划。每个栅格包罗列和水槽，列承载内容，水槽不克不及填充内容。网格中列越多，灵敏性越大，响应的，复杂度越高，所以并非列越多越好。
栅格系统能大大进步网页的标准性，使网页看起来更有次序感。在栅格系统下，页面中所有组件的尺寸都是有规律的。别的，基于栅格停止设想，能够让整个网站各个页面的规划连结一致。那能增加页面的类似度，提拔用户体验。
设想中良多时候需要将多个栅格合并，从而构成一个组合区域来利用，组合区域内的水槽能够承载信息。下方例图所示为一种栅格合并利用的体例，右边6个栅格构成一个组合，右边的6个栅格，每两个构成一个组合。
5 切图
切图工做有时候由设想师负责，有时候由前端工程师负责，因而需要按照差别公司的详细情况来停止沟通协调。
设想师需要领会一些切图的根本常识。在网页设想中，可以间接导出图片的元素，不需要切图，如带通明的元素能够间接导出PNG 图片。而前端工程师能够简单造做的图片或图形，也不需要切图，如纯色的底图，在提交设想标准时标注颜色数值即可。还有像一些简单的按钮，前端工程师也能间接用代码实现。因为切图工做与前端开发工做亲近相关，所以设想师需要与前端人员多多沟通，互相协做。
Photoshop中的“切片东西”能够辅助切图工做。切片东西位于东西箱中，如下方的例图中所示。切片东西的利用办法是，选中切片东西后，间接在工做区框选切片的区域，系统将主动划分出切片的范畴。
利用切片东西时，除了间接框选切片区域外，还能够基于参考线来切片。如微博九宫格宣传图，能够基于图片原有的九宫格参考线来切片。在显示参考线的情况下，单击切片东西属性栏的“基于参考线的切片”按钮，即可基于参考线停止切图，如下图所示。
若何导出那些切片呢？施行“文件-导出-存储为Web所用格局”号令，在弹出的对话框中利用切片选择东西，选择本身需要导出的切片，设置好图片格局、图像大小后导出即可。
除了微博九宫格图片需要切图外，电商详情页有的时候也需要切图。以淘宝详情页为例，平台对图片高度有同一的要求，因而超出规定高度的详情页需要切割后再上传。切割详情页也能够利用切片东西。
最初必定少不了我们的祖传大礼包，送给各人~不谢，我先走了
Adobe After Effects 国际认证培训教材(彩印) AE 特 京东 ¥99.00 去购置 从零起头：HTML5+CSS3快速入门教程 网页造做网站设想w 京东 ¥59.80 去购置 Adobe Illustrator 2020根底培训教材 ai AI Ai 插画 京东 ¥49.00 去购置 Adobe Premiere Pro 2020根底培训教材 Pr PR 剪辑 视 京东 ¥59.00 去购置 Adobe After Effects 2020根底培训教材 ae教程 视频剪 京东 ¥59.00 去购置 Adobe Photoshop 2020根底培训教材 PS 平面设想 插画 京东 ¥59.00 去购置 从零起头：CINEMA 4D快速入门教程 c4d册本 3d建模教程 京东 ¥79.80 去购置 像素的艺术 从零起头学UI设想 根底篇 平面设想册本 ui 京东 ¥99.00 去购置 Adobe Dreamweaver 2020根底培训教材 前端开发 DW 京东 ¥59.00 去购置 Adobe Photoshop国际认证培训教材 PS教程册本 photosh 京东 ¥99.00 去购置