网页设计也被称为 Web Design、网站设计、WUI 等。它的本质就是网站的图形界面设计。虽然现在我们常使用移动端上的 APP 来获取资讯，但是针对于企业来讲，企业网站也是必不可少的一种形式，从1987年钱天白教授向德国发出第一封电子邮件到2000年搜狐、新浪、网易在美国纳斯达克挂牌上市，再到现在网站遍地，中国的网站高速发展了近三十年。电脑的分辨率只有800×600像素，那时的网站性能和体验都不好，而现在网站设计和过去已经有了巨大的变化：注重用户体验、注重页面内容、多媒体等设计让如今的网站体验并不比软件和手机 APP 差。加上个人电脑的普及，网站仍然是人机交互中非常重要的平台之一。那么作为 UI设计师我们就必须掌握网站设计的规范和理解网站运行的原理，才能更好地驾驭这个平台。

因互联网的发展，现今对网页设计的要求也提高了，所以有个自己的设计规范会使设计简洁而高效。接下来，我们会从尺寸、字体、图片、颜色等方面来开展深入探索喽！其实设计规范就是把主要页面的元素固定成统一元素即可。具体来说一个产品的设计规范应该有：字体规范、主体色规范、图表规范、图片规范等不同分类。

网页的布局主要有两种：左右型布局和居中型布局。布局的不一致，使得可设计的空间也不相同。

灵活性强，UI的限制小；左边通栏为导航栏，宽度没有具体的限制，可根据实际情况调整；右侧为内容版块范围，是网站内容的展示区域。

中间为有效的显示局域，用于网站内容的展示；换句话说，两边均为留白，没有实际用途，只是为了适配而存在。

我们在设计的过程中应该时常将自己抽离出来,审视界面中这些作为元素“容器”的线和框是否让界面显得过于杂乱,是否应该予以保留。通常这些用以区隔界面内容的线和框可以被边界留白代替。我们设计的大部分元素都存在于线框里,简单清除掉这些“容器”可以让界面看起来不那么拥挤，给元素更多呼吸的空间。

善用对比度不仅仅是为了让用户的注意力集中于重要的信息,更是为了使产品更容易使用。设计产品就好比建设像图书馆、学校类的公共场所,它的适用对象需要涵盖每一个人,包括失明、色盲和视障用户。

善用颜色视觉重量的秘诀是,一个更为重要的元素，应该有更重的视觉颜色,以便用户快速浏览网页,区分重要和不重要的信息。大字号、粗体的信息会首先被用户注意到,而后他们会关注其下的辅助性信息。

有人可能会觉得间距和尺寸有些相似，但其实它们有着很大的不同，我们可以这样理解：尺寸是形容容器的大小，而间距是形容容器之间的距离。间距相对比较简单，只要标注清晰就不会有太大问题。

很多网页设计师对于“命名”是没什么概念的，他们都是随随便便地用一些没有特定意思的字母去给页面命名，这是不好的。因为统一的、规范的命名对我们自己的文件整理有很大的帮助，后期修改文件、图层的时候更加方便快捷，而且规范的命名也显得我们自身比较专业。而且，如果如果命名不统一，团队之间的成员很难达成共识，任务交接时需要很大的学习成本。而更重要的是，有规范的命名可以极大的节省程序开发的时间成本，减少很多不必要的沟通与重复切图的概率，程序员完全可以直接使用的我们切片而不更改切片的名称，后期我们更换切图，只要切片名称不变，开发看都不用看直接替换就可以了。

在程序员的代码里只有小写的英文字母，如果你给出的命名全是中文的，那么他们是一定会更改的，所以命名全部用小写的英文字母是最基本的规则。有些人会觉得写这么多英文太麻烦，但其实为了自己专业能力的提高，这种规范的命名方式是必须要经历的过程，当你习惯了这样的命名方式后，你的成就感会油然而生。

一个大型项目会分很多模块，每个模块由不同的设计师来独立完成，还有人会专门管理公共的组件，如tabbar、navbar等等，这种情况下就会分为两种切图，一种是通用类型的切图，还有一种就是各个模块特有的切图。

如果所有命名都写为全称，名字就会特别长，所以我们可以将一些常用的英文单词进行缩写，减少工作成本与开发代码资源。至于怎么缩写，只要整个团队能够达成共识并且输出一份缩写清单，任何缩写规则都是可以的。

图文提供：网络

图文编辑：辛梓绮 戚雨莹

图文指导：赵凤翾

图文审核：杨志卿