m如何搭建 B 端设计规范( 二 ) 腾讯电子签|收据|c2c|合同|微信

文章插图
内容区定宽：此场景常用于用户欢迎页、结果页等需要将内容区宽度设置为固定值的页面。此时 column 和 gutter 保持不变，根据页面宽度改变 margin 的值。

文章插图
四、设计风格1. Color（颜色）色彩内容主要包含基础色（如品牌色、黑色、白色）和功能色（如链接色、提醒色等）。图表配色为单独的配色体系。
在前期制定颜色规范的时候，精益求精的设定颜色，切忌颜色过多。
颜色的状态色尽量用原色进行转换，设置一个合理的变色公式，让所有颜色的状态色都根据这个公式进行转换。例：

Hover：H不变 S加10 B减5；
Click：H不变 S加20 B减10；
Disable：HSB均不变，不透明度 30%。

在设计规范中，尽量把颜色的色值和 rgba 值都写出来（这里是强迫症患者要标的，因为有时候色值完全一样，但 rgba 数值略有不同，虽然效果一样，但是对于强迫症的你来说，舒服吗）。
状态色有 4 状态色：Normal、Hover、Click、Disable。
在设定图表颜色的时候，要考虑不同的使用样式（柱状图、环形图、饼图等……），同时也要考虑它的延展性，比如你设定 12 个 chart 色值，在使用的时候按着顺序来使用，当超过 12 个后可以为同一个颜色。
2. Font（文字）设定统一的字体规范，使用非衬线字体在各个操作系统下都有最佳展示效果。
首先，要设置一个字体家族，保证产品界面的最优展示。
例如（仅作为展示，不是建议）：font-family： “Chinese Quote”， -apple-system，BlinkMacSystemFont，“Segoe UI”，“PingFang SC”，“Hiragino Sans GB”，“Microsoft YaHei”，“Helvetica Neue”，Helvetica，Arial，sans-serif，“Apple Color Emoji”，“Segoe UI Emoji”，“Segoe UI Symbol”。
1）字号
现在主流的产品中，主体字为 12px / 14px的居多，可根据自身的产品定位以及用户的习惯进行设定。字号不要出现奇数，否则在一些显示器上会有对不齐像素的状况发生。
2）行高
行高常规的有两种规范：

文章插图
我喜欢用第一种，就是字号大小 + 8px 作为行高的规范。行高是不可被忽略的重要细节之一，因为在算间距的时候，行高是要被算进去的。
3）字重
字重有很多，但是在真正的产品使用中，字重尽量不要太多种，2~3 种即可。
4）字体颜色
字体颜色数量建议在 3~4 个，不宜过多，但是每个层级之间区分要大一些。
文本应该保持至少 4.5：1 （基于亮度值计算）的对比度以保持文本清晰；最佳对比度为 7：1。
测试对比度的网站：https://contrast-ratio.com
WCAG 2.0 中将颜色对比等级分为 3 种，A级、AA级、AAA级，等级越高意味着颜色的对比度越高，呈现出来的视觉压力越大。

A级：对比度 3：1，是普通观察者可接受的最低对比；
AA级：对比度 4.5：1，是普通视力损失的人可接受的最低对比度；
AAA级：对比度 7：1，是严重视力损失的人可接受的最低对比度。

3. icon（图标）设定统一的图标使用规范，让视觉效果更和谐。
1）icon 大小
icon 的常用尺寸有很多，需要注意的是 icon 的大小中，相邻的两个尺寸至少相差 4px，否则你会在后期用的时候会有选择困难症。
同时功能 icon 尽量贴边或尽量贴边绘制，保证展现的视觉统一性（操作 icon 除外）。
单独 icon 使用的时候，尽量不要太小，最小值建议为 12px。
2）icon 热区
icon 的热区经常被设计师和开发所忽略，本身 icon 的尺寸一般就很小，再加上如果没有设置热区的话，操作体验极差。
所以一定一定要设置 icon 的热区，设置的值我建议为 icon 大小的 2倍。例：icon 大小为 14 * 14px，则热区大小为 28 * 28px。

文章插图
4. size（尺寸）页面内布局间、模块间、模块内的各部件距离。
尺寸大部分规范中都用的是 8 的倍数，不用纠结，直接用就行。我这里有个公式：Sn = 8px * n，n为正整数。
特殊：最小支持4px。

文章插图
五、交互交互我分为两个方面：交互方式和交互状态。
1. 交互方式交互方式指的是对某一个操作所进行的具体行为，比如刷新方式有下拉、上滑、按压点击等方式，这就是所谓的交互方式。交互方式有很多种，没有最优，只有最适合。