网页UI设计原则与规范

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

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

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

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

  • 网页尺寸
  • 网页文字
  • 网页留白
  • 颜色规范
  • 图片规范
  • 设计原则
  • 组件使用原则

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

一、网页尺寸

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

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

1. 居中布局

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

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

  • 顶部导航(大部分系统):一级导航高度 64px,二级导航 48px。
  • 顶部导航(展示类页面):一级导航高度 80px,二级导航 56px。
  • 顶部导航高度 H(header)的范围计算公式为:48 + 8n(n 是自然数)。

上下布局顶部导航

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

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

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

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

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

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

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

2. 左右布局

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

  • 顶部导航(大部分系统):一级导航高度 64px,二级导航 48px。
  • 顶部导航(展示类页面):一级导航高度 80px,二级导航 56px。
  • 顶部导航高度 H(header)的范围计算公式为:48 + 8n(n是自然数)。
  • 侧边导航宽度 S(sidebar)的范围计算公式:200 + 8n(n是自然数)。

左右布局分两类:

顶部-侧边布局-通栏:同样拥有顶部导航及侧边栏,和上下布局的区别是两边未留边距,多用于应用型的网站。
左右布局第一类:顶部-侧边布局-通栏

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

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

二、网页文字

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

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

1. 字体

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

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

2. 字号

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

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

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

3. 间距

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

行间距:字体大小的 1.5 ~ 2 倍;
段间距:字体大小的 2 ~ 2.5 倍。

例如:当用 14px 的字体时,行间距(line-height):21px ~ 28px;段间距(margin):28px ~ 35px。

4. 颜色

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

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

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

5. 文字块区域

避免大面积的纯黑字体。

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

border: 1px dashed  rgba(0,0,0,0.15);

三、网页留白

1. 8倍数原则

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

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

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

2. 间距一致性

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

特殊情况下,「竖」可以比「横」宽(符合中国传统美学)。
网页设计留白间距一致性

3. 组件留白

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

四、颜色规范

1. 颜色特性

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

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

2. 背景色

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

3. 色彩数量

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

常用的网页设计配色:同色系、邻近色、类似色、中差色、对比色。
网页设计留白间距一致性

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

  • 需要配色的是你的画布,而不是你的图片
  • 选择简单的灰色作为你网站的基调
  • 只选择一种颜色突出显示
  • 如果有疑问,请使用蓝色
  • 给你的高亮色增加变化
  • 尽量不要使用颜色选择器右上角的颜色

4. 常用搭配

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

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

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

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

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

5. 颜色的禁忌

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

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

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

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

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

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

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

6. 推荐的配色工具网站

还可以参考几个不错的配色工具网站(排名分先后):

  • 色卡生成类
    • Adobe Color CC
      这款是 Adobe 官方出品的配色工具,里面有很多配色的模式,比如单色系,三元色,互补色等,还能自己通过调节色轮选择配色方案。
    • Palettable
      进入网站它会随机推荐给你一个颜色,你可以选择喜欢(快捷键 L)或不喜欢(快捷键按 D),不喜欢的话,就会再推荐一个新的。选择喜欢的话,网站会继续推荐颜色来与它搭配,如此进行下去,就可以得到一个配色色卡了,而且里面的颜色都是你喜欢的。
    • Color Scheme Designer
      这个配色工具是国人翻译的一个外国工具网站,原网站叫 Paletton。可以选择多种颜色搭配模式,并且能够预览生成的网页效果。
  • 色卡选择类
  • 优秀网站参考
    • Reeoo
      通过颜色搜索,为用户提供 APP,网页设计,平面设计,书籍设计,ICON 等精彩案例。

五、图片规范

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

1. 首图

首图最好只用高清图片。

2. 图片展示

在展示多张图片的时候,要保持图片的统一性、色调的统一性、尺寸的统一性(最好数值都为偶数)。
多图展示时的规范

3. 图片尺寸

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

六、设计原则

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

1. 亲密性

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

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

基础间距:8
纵向间距的加减:y = 8 + 8 * n(n 是自然数)
亲密性原则:纵向间距示例

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

2. 对齐

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

表单类对齐
冒号对齐(右对齐)。

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

3. 对比

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

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

4. 重复

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

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

5. 直截了当

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

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

6. 足不出户

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

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

7. 简化交互

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

通过运用上下文工具(即:放在内容中的操作工具),使内容和操作融合,从而简化交互。

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

8. 提供邀请

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

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

9. 巧用过渡

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

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

10. 即时反应

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

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

七、组件使用原则

1. 面包屑

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

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

2. 下拉框

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

3. label标签

不要直接用 label,加个底纹可能更好看(少的情况下)。

4. button按钮

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

5. charts图表

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

6. 其他组件

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

参考文献


博文对你有帮助吗?如果有的话,想不想送我一本书呢?
  目录