网页设计基础规范

网页字体

网页的字体使用要遵循浏览器的渲染规则。需要客户端本地安装过的字体擦可以正常显示。
然而各种用户（Window/iOS/Phone/Pad）的默认安装和系统指定字体各不相同。

首先选择微软雅黑，除非是主要面向iOS用户，或有其他考量。

本地浏览器读取本地字体渲染出来的，通常没有版权问题。

字号

中文最小字号：12px
常规阅读字号：13-15px
较大文字字号：15-20px
注：对于中文字体，如果字号过小，无法完全显示出笔画。

自重

细体 Light：注释/次要文本
常规 Regular：正常阅读文本
粗体 Bold：强调/标题文本

字色

注释灰度：50-80
正文灰度：20-40
标题灰度：5-20

行高

注释文本：字号的1.4-1.6倍
阅读文本：字号的1.6-2倍
标题文本：默认字号 Auto

段间距：行高的0.4-0.8

总结

网页的色彩应用RGB色彩模式，由RED红色、Green绿色、Blue蓝色组成。但RGB模式难以进行记忆，我们通常使用更符合人类直觉的颜色模式（HSB）进行色彩搭配。关于颜色模式，详见此处。

主色 Primary Color

品牌用色
核心色彩

辅助色 Secondary Color

功能用色
氛围色
点缀色

中性色 Netural Color

灰度用色
文字色
背景色

注：优先确保品牌色，并在必要功能使用常见辅助色。重点要确保中性色的应用，它决定了页面的阅读性，即使只有黑白的配色也足以输出优秀的网页设计。

图片不一定要全部原创，但需要掌握基本的规范。

启动图标
装饰图标
工具图标

其中工具图标使用的频率最高，它所包含的规范要求也最多最严格

工具图标应当具有一致性

iconfont-阿里巴巴矢量图标库（不推荐）
图片风格多样，但是不够全面，用作工具图标难以保持一致性。可以用于找灵感。
ByteDance IconPark（推荐）

在UI设计的领域中，对数值的应用非常在意，行业喜欢应用4和8的倍数来制定空间尺寸。

网页中间距的应用要具备一定的规律，通过亲密性原则使用不同等级的间距数值。

第三课网页设计的基础规范_哔哩哔哩_bilibili