第五篇设计规范-Web版

北京/UX设计师/6年前/10519浏览

版权

第五篇设计规范-Web版

本文为PC端设计规范总结，主要包括设计分辨率、栏目大小、字体大小规范，至于布局、元素、色彩搭配等在以后文章中再做详解

PC端的设计包括网页设计、PC端客户端设计，甚至可以把智能电视、大屏展示都划在这个范畴内，PC端拥有更大的设计面积，有不同的操作方式及用户习惯，也有区别于移动端的设计规范，在读了《破译Web UI：网页UI设计规范、流程与实战案例》、《众妙之门-网站UI设计之道》及大量相关文档后，对PC端有了新的认识，特此总结一下基础知识，更新一下知识库，也希望对各位有帮助！

一、PC端设计尺寸

1、主流的分辨率有哪些？

PC端我们所说的分辨率为显示器分辨率，相同尺寸的屏幕，分辨率越大画面就越精细，而显示器的大小通常以对角线的长度来衡量，以英寸单位，常见的有15英寸、17英寸、19英寸、20英寸、24英寸等。

在这普及一个小知识，寸和英寸的换算，英寸是英式的，寸是中式的，1英寸＝2.54厘米，1寸等于3.3厘米，1英寸＝0.762寸。

2019年~2020年PC端分辨率排名

通过statcounter网站2019年到2020年的分辨率统计，我们可以看出全球最主流的PC屏幕分辨率依然是windows底下的1366×768，其次是1920x1080，国内1920x1080占比最大，其次是1366x768，Mac常用的1440x900在国内外都是占据第三的位置，这三个都有可以选择做为设计尺寸。

怎么精确定位适合自己产品的分辨率？

很多时候我们可能没有规范的数据去分析用户使用分辨率，则需要我们主观的去判断网站用户所使用的的分辨率，如：

如果要设计一个面向年轻群体的潮牌官网，可能就会为了更好的展示效果放弃低分辨率的用户（主要集中在中老年群体），最低按 1366px宽开始支持

· 如果是设计像淘宝这样的要满足所有人的网站，那么就要从最低的 1024px开始支持

· 如为一些特定的企业设计web管理系统，该企业有统一的设备，这样我们就能更精确的确定用户群体及使用分辨率，那我们就以企业设备的分辨率为设计尺寸

· 如想避免分辨率对产品的限制，我们还可以设计响应式网站和自适应网站

确定好分辨率，我们打开设计软件做相应的选择即可开始啦！

2、安全宽度

安全宽度：设计和前端开发都需要保证网页在某个分辨率下图片、文字、布局、按钮等元素的正常比例和正常显示效果，比例不能过宽和过窄，否则容易造成阅读障碍。那么在某个分辨率下，我们使用一个固定宽度值来作为一个基准进行设计和开发，这个固定值就是安全宽度。安全宽度是在网页内容定宽的时候考虑的问题，我们可以根据客观条件考虑自己要支持最低的分辨率，然后选择相应的安全宽度，假设我们确定了1024px宽的支持起点，我们需要内容完整展示，选择960px为内容区域，则页面左右产生32px的留白，内容在1024px及更高分辨率中完整展示。

我们来总结一下PC端各分辨率所对应的安全宽度，方便选择

注：retina屏是在普通屏幕中一个像素格的位置用4个像素填充，所以显示会更加精细，但注意这个像素格的位置没变，所占空间没变，所以在设计的时候我们可以将retina屏进行相应的转换，比如说2880x1800可以转化为1440x900来进行设计，而不是建立2880x1800的画布去设计

上方安全宽度是针对不同分辨率的最佳安全宽度推荐，如果我们的产品具有特殊性，不一定会采用常用的分辨率，那怎么选择安全宽度那？当然是总结市场上成熟的同类产品，归纳相关属性，得出结论，转化为自己的。

下图是比较常用的网站的安全宽度分类

总结：

· 1200px是较常用的安全宽度尺寸，适合众多网站类型

· 内容型网站一般选择1000px及以下尺寸，方便查看，如知乎、豆瓣等

· 展示型网站通常会充分利用网页空间，所以大内容区域的使用居多，安全宽度多为1400px及以上，如花瓣、dribbble等

· 视频播放网站使用大内容区域甚至100%，这样可以展示大量资源，视频网站的卡片式布局又方便响应式布局，各种分辨率都能照顾到，如爱奇艺、腾讯视频、B站等都是采取的内容宽度皆大于1400px

3、浏览器对设计分辨率的影响

2019年~2020年PC端浏览器的全球份额

在设计网页界面的时候我们需要考虑网页在浏览器中打开后的效果展示，浏览器栏目会占据界面部分空间，这对滚动去查看内容没太大影响，但网页首屏、逐屏切换网站等就需要考虑影响了。浏览器纵向会有菜单栏、选项卡栏、工具栏、书签栏、任务栏这些常见栏目占位，IE还有命令栏、状态栏，那么首屏=分辨率高度-菜单栏-选项卡栏目-工具栏-书签栏-任务栏。横向会有浏览器滚动条，不过这个一般不用减，前端人员会处理。

主流浏览器的界面参数

网页首屏

首屏：即浏览器打开网站第一眼看到的区域，也可以广义地理解为未进行过上下或左右滚动操作的浏览器的全屏，是网站当之无愧的门面

页面首屏高度：网站首屏减去选项卡、菜单栏、书签栏和状态栏等的高度总和，剩下的高度就是首屏的高度，首屏有其重要的意义，网站的核心信息是否能在最短时间内进入用户的视线，是否能够被用户记住或给用户留下印象，是否能够在不同的浏览器和屏幕下将网站的核心信息传达出去，这是非常重要的。在某个首屏参考高度内的设计的好坏，可能直接影响到网站的营销能力和盈利。我们在上面主流浏览器的界面参数中总结出三大主流浏览器的参数，在计算首屏的时候直接减去就行了，有同学就有问题了，三个浏览器栏目占高各不一样，难道我需要弄三个版？不需要的啦，减去最大的就行，就能确保内容在首页完整展示了。如果是逐屏切换，前端会获取浏览器的参数做相应适配，你只需要按一种浏览器做就行了。

二、网页中的栏目

1、网页中的栏目有哪些？

上图是比较常见的网站布局，罗列出的各个栏目在这儿就不细讲了，我们总结一些有规律可循的知识点

（1）、导航栏高度

导航栏的高度自由度特别高，目前没有规定尺寸，高一点显得大方，低一点则精致，搭配网站风格和内容来选择，下方总结各大网站导航栏以供参考

（2）、banner图尺寸

banner狭义来说单指网页上面的横版广告图，现在也泛指网页上面的一切“海报”，尺寸不一，一般在首屏位置来展现企业文化或者展示产品，banner的种类比较多，有图片、gif、视频等，尺寸也比较多，以前会有定合适的banner是多大比例、多少宽高，现在我们按网站类型、用户需求、展示目的来定。

企业网站的banner一般用于展示企业文化，通常采用首屏位置的大面积区域的banner，如苹果（图片1903 x 624）、腾讯（视频2560 x 780）等

电商网站的banner则用于展示商品，首屏是抓住用户眼球的第一屏，是寸土寸金之地，所以我们能看到大量的图片展示，轮播banner是最常见的，如京东中心区域轮播图多达8张，还有静态的小图展示在首屏也是比比皆是，banner尺寸不定。

内容型网站重心在于内容展示，很大程度上会弱化banner图，小面积的banner应用更多

门户网站同样也是信息展示类型的，为减少对信息的干扰性，同样弱化了banner的存在，常用小尺寸图展示。

行业型网站banner图处理方式比较多，一般都会有大面积的banner展示主题或修饰，当然也有突出功能弱化图片展示的，如阿里健康，剔除图形修饰，最大程度上展示功能。

（3）网站页脚设计

网站页脚设计是整个页面中不可或缺的一部分，页脚设计包括了底部信息footer与版权信息copyright（footer和copyright也可以在一起），页脚部分包含内容如下：

提供网站地图，与头部导航首尾呼应，方便操作，也可以提供一下使用率比较高的页面/链接
提供联系方式、社交媒体帐号链接和信息
订阅或预约表单
提供行为召唤的功能，引导用户“关注”、“收藏”、“下载”等
提供公司或者店铺的实际地址/可视化地图
网站和团队相关的信息（适合博客类网站）
版权信息、法律信息和隐私条款

如优设网底部信息就比较丰富，囊括了“介绍”、“链接”、“服务”、“社交及行为引导”、“版权”等，底部大面积深色块与上方内容构成对比，从而形成视觉上的差异，用户会在看到页脚的时候因为差异而注意到并思考其功能。

有大型的页脚存在，也就有超简洁的页脚，下方网站的页脚是由一行版权信息构成

三、字体

1、web端常用字体

(1) serif -- 衬线字体：

宋体：Windows 下大部分浏览器的默认中文字体，笔画有粗细变化，是一种衬线字体，宋体在小字号下的显示效果还可以接受，但是字号一大体验就很差了，所以使用的时候要注意，不建议做标题字体使用。

Times New Roman：Mac 平台 Safari 下默认的英文字体，是最常见且广为人知的西文衬线字体之一，众多网页浏览器和文字处理软件都是用它作为默认字体。

(2)sans-serif -- 无衬线字体：

微软雅黑（Microsoft Yahei)：windows 浏览器最值得使用的中文字体

华文黑体（STHeiti）、华文细黑（STXihei）：MAC OS X 10.6 之前的简体中文系统界面的默认中文字体，正常粗细就是华文细黑，粗体下则是华文黑体。

黑体-简（Heiti SC）：从 MAC OS X 10.6 开始，黑体-简代替华文黑体用作简体中文系统界面默认字体，苹果生态最常用的字体之一，包括 iPhone、iPad 等设备用的也是这款字体。

冬青黑体（Hiragino Sans GB）：又叫苹果丽黑，是一款清新的专业印刷字体，小字号时足够清晰

Helvetica、Helvetica Neue：被广泛用于全世界使用拉丁字母和西里尔字母的国家。Helvetica 是苹果电脑的默认字体，微软常用的Arial 字体也来自于它。

Arial：Windows 平台上默认的无衬线西文字体，有多种变体，比例及字重（weight）和 Helvetica 极为相近。

Verdana：无衬线字体，优点在于它在小字上仍结构清晰端整、阅读辨识容易。

Tahoma：十分常见的无衬线字体，字体结构和 Verdana 很相似，其字元间距较小，而且对 Unicode 字集的支持范围较大。许多不喜欢 Arial 字体的人常常会改用 Tahoma 来代替，除了是因为 Tahoma 很容易取得之外，也是因为 Tahoma 没有一些 Arial 为人诟病的缺点，例如大写“I”与小写“L”难以分辨等。

2、安全字体

安全字体，是Web设计规范中必须要知晓的一个概念，在设计和开发Web时，应该确保网站在大多数将要访问的计算机上看起来舒服，大多数用户会使用Windows或Mac系统来浏览网页，两种操作系统都带有预先安装的字体，这些字体应该作为网页的首选字体，如果默认的字体无法满足需求，应该尽量避免第三方中文字体，适当使用第三方英文字体（如Google Fonts），因为英文字体字库体积较小。下图展示的是不同的操作系统中预装的常用于Web渲染的字体，这里没有将过旧版本的系统字体列出。表格仅供参考。

前端CSS样式中定义的网站字体越靠前优先级越高，如果用户没有安装当前字体或字体展示出现问题，则顺延选择下一个字体为网站字体样式

3、web端字体单位含义及单位转换

单位转换一般是前端人员的工作内容，但不排除一些公司UI人员来转换，在做PC端设计的时候，建议设计师去学习一些前端知识，一来方便与前端人员沟通，对自己设计稿实现有一定的预期，另一方面也能帮你少吃点“不懂”的亏。（以下内容其实更应该叫做web端常用单位的转换，因为这些单位是所有元素的单位，只不过此处只针对于字体来讲解）

px （Pixel）：px是像素单位，是一个相对于显示器屏幕分辨率而言的虚拟长度单位，对设计页面来说是一个固定的单位，页面按精确的像素值展示。

优点：与设计稿同一单位，无需转换，精确布局，设计稿还原度高。

缺点：如果用户在浏览网站过程中改变了浏览器的字体大小，或是缩放、放大页面，这时会使页面布局被打乱。

pt（point，点）：pt是一个物理长度单位，是能够使用测量设备测得的长度,指的是72分之一英寸。

优点：能测量的长度，一般用在打印

缺点：pt是绝对单位，绝对单位作用有限，因为它们不能够缩放，通常只用在已经知道是用在哪种输出媒体的情况下才使用。但大多数情况下最好使用相对单位。

em（font size of the element）：em是相对单位，基准点为父节点字体的大小。目前浏览器默认字体大小为16px，因此在浏览器下默认第一层级中1em = 16px ，前端人员可以修改默认，如设置css样式html｛font-size: 87.5%;｝，则1em=14px。

优点：相对单位，能够弹性布局，上面说到使用px为单位的web页面会遇到的问题可以使用em来解决。

缺点：会继承父级元素的字体大小，嵌套层级中的字体定义越多，前端计算就越复杂。

rem （font size of the root element）：rem是相对单位，基准点是页面根元素的字体大小，所以就会避免层层嵌套导致的数值变化，浏览器默认字体大小(即页面根元素字体大小)为16px，因此在浏览器下默认的设置将是：1em = 16px ，前端人员可以修改默认，如设置css样式html｛font-size: 87.5%;｝，则1em=14px。

优点：集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

缺点：除了跟其他单位一样需要转换，好像没什么缺点了。

% ：百分比是相对单位，和em大同小异

常用字体单位转化对照表

4、字体大小、行高

网页端字体相比较与移动端比较简单，下方总结了常用字体大小，设计网页界面时，挑选字体，设计一两个页面看一下字体大小，就可以定出字体规范了（我们流程上常说规范先行，但实际设计中你会发现大多情况下先定的规范比较鸡肋，设计过程中界面风格变化时还得进行大量修改及补充，所以建议先出一两个页面定网站的整体风格走向，确定基调后再定一份规范出来，小组讨论OK后，大家按照这份规范设计，有问题再补充与微调，最大程度发挥规范的作用）。

右侧列出CSS文字标签字体大小（此处字体基准是16px），设计稿选择CSS文字标签的字体大小对前端人员来说是非常友好的，对于设计师来说这些字体大小也是给了我们更多选择。