前端网页设计的参考标准（PC端），要使web页面看起来美观，就需要从网页尺寸、字体、颜色、间距等方面遵循一定的规范。

对每一个前端开发者来说，如果没有 UI 设计师出图，仅凭自己写一个好看的网页是一件很让人头疼的事情。因此本文从初学者的角度出发，总结一些设计规范要点，作为近段时间学习的温故总结。

我本身是一名前端开发者，因为前段时间写的项目被客户吐槽颜值欠佳，故请教了一些 UI 设计师，并查阅了许多资料和教程，最终整理了一份 PC 端网页设计的参考标准。可能公司不同，面向客户群体不同，大家设计习惯也不尽相同。这里写的只是我个人的参考标准，因此下面提到的规范或标准只是一种方法论，在具体工作中还是要灵活运用。

本文大致分为 7 个模块来介绍，未来随着经验的积累、学习的深入，还会更新。

接下来逐一展开，可先查看思维导图，有一个宏观的了解。

制作网页时我们选用的分辨率是 72 像素/英寸，使用的画布尺寸 1920px * 1080px。但并不代表我们可以在整个画布上作图。

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

居中布局一般分为顶部导航和主内容区两部分。

顶部导航：承载的是品牌信息与整个网站的结构信息，明确的告知我们网站里最主要的几块内容。 通常放置于页面的顶端，从左自右依次为：LOGO、一级导航项、辅助菜单（用户、设置、通知等）。

主内容区：用于网站内容的展示。 通常内容区域设置为固定尺寸 1200px（或 1000px ~ 1400px 区间），整个页面排版稳定，不受用户终端显示器影响。

上下级的结构符合用户上下浏览的习惯，也是较为经典的网站导航模式。页面上下切分的方式提高了主工作区域的信息展示效率，但在纵向空间上会有一些牺牲。此外，由于导航栏水平空间的限制，不适合那些一级导航项很多的信息结构。

上下布局的做法是对两边留白区域进行最小值 M（Margin） 的定义，当留白区域到达限定值之后再对中间的主内容区域 W（Weight）进行动态缩放。

主内容区 W 尺寸常用的有 1200px、1190px、1168px、1152px、1000px、960px。 两边留白区域最小值 M 常用尺寸有24px、16px、0px。 这里说的只是一般常用的动态布局参数，实际设计中一套完美的方案需要设计师具备前端视角、平面构图视角以及交互视角，并且依据所在团队产品规范来综合决定。

以 W = 1152px ， M = 24px 为例，为在响应式方面保证更好的预览效果，我们在主内容区外面增加了 24px 的边距, 避免屏幕尺寸在低于 1152px 的时候内容贴边, 于是需要将主内容区域最大宽度改为 1200px，再增加 24px 的内边距 。

注：部分 B 端产品不考虑浏览器范围缩小低于 1000px 时的动态布局情况；部分B端产品考虑浏览器范围缩小低于 1000px 时移动设备上的动态布局情况。

页脚：Footer（页脚）也是展示页中非常重要的一部分，包含的信息内容为：实用导航，语言选择，社交链接，帮助和支持，版权和隐私声明等。 在页面的最底部。并且如果没有特殊需求，不建议设置成固定在显示器的底部，否则会浪费纵向空间。

常见的做法是将左边的导航栏固定，对右边的工作区域进行动态缩放。

左右布局分两类：

顶部-侧边布局-通栏：同样拥有顶部导航及侧边栏，和上下布局的区别是两边未留边距，多用于应用型的网站。

侧边布局：侧边两列式布局。页面横向空间有限时，侧边导航可收起。

侧边导航在页面布局上采用的是左右的结构，一般主导航放置于页面的左侧固定位置，辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应，能提高横向空间的使用率，但是整个页面排版不稳定。侧边导航的模式层级扩展性强，一、二、三级导航项目可以更为顺畅且具关联性的被展示，同时侧边导航可以固定，使得用户在操作和浏览中可以快速的定位和切换当前位置，有很高的操作效率。但这类导航横向页面内容的空间会被牺牲一部分。

网页中字体也是有使用规范的，我们这里考虑主流的 PC 端屏幕尺寸（1920px*1080px分辨率）。

先看某个网页的规范：

下面具体介绍下网页文字应该遵守的设计规范。

中文建议：微软雅黑 英文建议：arial

最多使用三种混搭，优先使用各操作系统默认的字体。如果指定其他字体，要注意版权问题。

正文：12px ~ 18px 之间 　　　12px 适用于突出性的日期、版权等注释性内容； 　　　14px 适用于非突出性的普通正文内容； 　　　16px 或 18px 适用于突出性的标题内容。 英文可偏小：10px ~ 16px 导航栏字体：14px ~ 18px 区间，禁用加粗 整站文字：12px ~ 36px 区间

根据实际情况可以调整，但要使用偶数字号。

层次的区别，可以改变字体颜色或加粗来体现。

相邻两个文字的间距，其实不需要太过介意，除了特殊的需求之外，都可以使用默认数值的间距。

行间距：字体大小的 1.5 ~ 2 倍； 段间距：字体大小的 2 ~ 2.5 倍。

例如：当用 14px 的字体时，行间距（line-height）：21px ~ 28px；段间距（margin）：28px ~ 35px。

主文字颜色，建议使用公司品牌的 VI（视觉识别 Visual Identity）颜色，可提高公司网站与公司 VI 之间的关联，增加可辨识性和记忆性。

正文字体颜色：#333333 ~ #666666 之间的颜色 辅助性、注释类的文字：#999999 等比较浅的颜色

如果对颜色驾驭能力比较强，也可以选用偏公司 VI 颜色的深色作为正文字体颜色或者辅助性文字颜色。 例如：公司的品牌色是蓝色，那么正文字体就可以选用偏蓝色的深色。 这样处理之后，文字就带有了环境色，网站整体色调将更加和谐。

避免大面积的纯黑字体。

文字块视情况可以用 1px 虚线框围起来，虚线框颜色用 RGB(0,0,0,0.15)。

利用 8 的倍数来规定页面中元素（按钮、输入框、图片等）的尺寸及各自间距的大小。 即任何需要自定义的长、宽，margin 和 padding 都应该是 8 的倍数。

查看大图

很多人虽然理解要用原则约束尺寸，但还是会产生疑问，为什么是 8，不是 6、10 或者其他数字？

据统计，使用中后台系统的用户的主流分辨率主要为 1920、1440 和 1366，个别系统还存在 1280 的显示设备。主流的屏幕尺寸大部分都是 8 的整数倍数。即使某些屏幕边长像素不是 8 的倍数，在设计中仍然可以尽量做到自定义元素的长、marging，以及 padding 都是 8 的倍数来维持设计的一致性。

田字形布局时，中间十字间距要一致。 上下、左右要对称统一。

特殊情况下，「竖」可以比「横」宽（符合中国传统美学）。

表格的外边间距用 16px，其他组件 8px。 可参考 Markdown。

不同行业一般有自己行业的色彩。 例如： 金融行业网站：红色或者金黄色 环保行业网站：大多喜欢绿色 家具行业网站：白色 企业展示网站：蓝色

具体参考比较知名的几个网站。

背景色一般采用清淡素雅的色彩，避免采用复杂的图片作为背景色，同时背景色要与文字的色彩对比强烈一些。

一般控制在 3 ~ 4 种色彩以内，通过调整色彩的各种属性来产生变化。

常用的网页设计配色：同色系、邻近色、类似色、中差色、对比色。

如果是新手，推荐6条网页配色原则：

蓝白橙： 蓝为主调。白底，蓝标题栏，橙色按钮或 icon 做点缀。

绿白兰：绿为主调。白底，绿标题栏，兰色或橙色按钮或 icon 做点缀。

橙白红： 橙为主调。白底，橙标题栏，暗红或桔红色按扭或 icon 做点缀。

暗红黑：暗红主调。黑或灰底，暗红标题栏，文字内容背景为浅灰色。

万能色：黑白灰是万能的，可以跟任意一种色彩搭配。当你为某种色彩的搭配苦恼的时候，不防试试用黑白灰。

避免使用单色，纯度很高的单一色彩容易造成视觉疲劳。

忌脏：背景与文字内吝对比不强烈，灰暗的背景令人沮丧。

忌纯：艳丽的纯色对人的刺激太强烈杭议，缺乏内涵。

忌跳：再好看的颜色，也不能脱离整体。

忌花：要有一种主色贯穿其中，主色并不是面积最大的颜色，而是最重要，最能揭示和反映主题的颜色，就像领导者一样，虽然在人数上居少数，但起决定作用。

忌粉：颜色浅固然显的干净，但如果对比过弱，整得苍白无力了，就像病夫一样无可救药。

蓝色忌纯，绿色忌黄，红色忌艳。

还可以参考几个不错的配色工具网站（排名分先后）：

图片是网页设计中不可缺少的元素，它于文字和色彩并称为网页三大语言。

首图最好只用高清图片。

在展示多张图片的时候，要保持图片的统一性、色调的统一性、尺寸的统一性（最好数值都为偶数）。

需要全屏显示的图片，宽度尺寸严格设计为 1920px。 但是值得注意的是，图片内容的有效范围不能超过网页内容的有效范围，控制在 1200px 以内，以免遇到小屏设备时显示不全，而造成信息遗漏。

这里的设计原则主要是参考了蚂蚁金服的 PC 设计规范，不做搬运工，仅列出几个重要的点，详情参考原文。

如果信息之间关联性越高，它们之间的距离就应该越接近；反之，则它们的距离就应该越远。

纵向间距关系： 通过「小号间距（8px）」、「中号间距（16px）」、「大号间距（24px）」这三种规格来划分信息层次。

基础间距：8 纵向间距的加减：y = 8 + 8 * n（n 是自然数）

横向间距关系： 为了适用不同尺寸的屏幕，在横向采用「栅格布局」来排布组件，从而保证布局的灵活性。 需要注意的是，在一个组件内部，元素的横向间距也应该有所不同。

文案类对齐： 标题和正文左对齐，使用了一个视觉起点。

表单类对齐： 冒号对齐（右对齐）。

数字类对齐： 为了快速对比数值大小，建议所有数值取相同有效位数，并且右对齐。

主次关系对比、总分关系对比、状态关系对比。

详情见蚂蚁金服的 PC 设计规范。

重复元素可以是一条粗线、一种线框，某种相同的颜色、设计要素、设计风格，某种格式、空间关系等。

详情见蚂蚁金服的 PC 设计规范。

需要在哪里输出，就要允许在哪里输入。 不要为了编辑内容而打开另一个页面，应该直接在上下文中实现编辑。

详情见蚂蚁金服的 PC 设计规范。

能在这个页面解决的问题，就不要去其它页面解决。

详情见蚂蚁金服的 PC 设计规范。

如果用户鼠标移动距离越少、对象相对目标越大，那么用户越容易操作。

通过运用上下文工具（即：放在内容中的操作工具），使内容和操作融合，从而简化交互。

详情见蚂蚁金服的 PC 设计规范。

在交互之前给出反馈，解决易发现性问题。

详情见蚂蚁金服的 PC 设计规范。

在交互期间为用户提供视觉反馈。

详情见蚂蚁金服的 PC 设计规范。

在交互之后立即给出反馈。

详情见蚂蚁金服的 PC 设计规范。

层级过深时，建议做隐藏处理，页面显示保持在三级以内，最多不宜超过五级。

尽可能不使用面包屑，尤其是当前页面的导航能清晰的告诉用户他在哪里时。

选项不多的下拉框，可以用多选框代替。

不要直接用 label，加个底纹可能更好看（少的情况下）。

必要的时候加个图标。 过渡 loading 视情况可以放在按钮上。

图例不要在右边竖着，放在上面偏右横排。 有标题的话放在中间横排。

详情见蚂蚁金服的 PC 设计规范。