下面的阅读只需要15分钟。

产品经理适当掌握一些设计规范，可以更高效地绘制原型，也可以防止被设计diss~~~。

#这篇文章可以帮助你了解以下知识：

1.熟悉PC做的好的UI组件。

2.设计原型推荐的设计规范

# I .我个人认为做得不错的PC UI组件。

我通过这些UI组件快速掌握了原型组件设计知识。之前写过一篇《产品经理如何快速掌握原型》的文章，所以有时间多看看这些组件，对提高原型设计能力有帮助。

1.蚂蚁设计(阿里出品)

2.Arco设计(字节制作)

3.iViewUI(前通话数据员工，由Venture制作)

4.元素UI(饥饿时产生，可惜没有维护，但内部人员维护了元素UI plus)

# 2.设计原型必须有设计规范。

推荐直接熟悉Ant Design或Acro Design的大型厂商的设计规范。

# 2.1画板尺寸一致

为了尽可能降低沟通和理解的成本，有必要统一组织内部设计板的规模。蚂蚁中央设计团队统一画板尺寸为1440px。

# 2.2元素间距

基于8px的所有接口元素的网格设置间距，并提供公共对齐网格8px/16px/24px/32px/48px。

# 2.3设计的四个基本原则

设计的四个原则是亲密、对齐、重复和对比。

# 2.3.1亲密度：

信息越相关，它们之间的距离就应该越近。亲密关系的本质是通过界面距离加强人们对不同元素亲密关系的理解。

2.3.2 对齐：

对齐可以帮助用户更快地找到相似的信息。表格对齐有一个设计技巧：文本通常向左对齐，数字通常向右对齐。

qvj2l q49k 0/c6a 7d 26 B4 a 624d 898 de 46 a 94 E3 a 253 c 9 /

2.3.4 对比：

对比是增强视觉效果最有效的方法之一，它还可以在不同元素之间建立有组织的层次结构，帮助用户快速识别关键信息。

qvj2l q49k 0/5508 be 91 a4 af 4 b 878 E8 b 85 e 60 e 38 b 103 /

2.4 典型的PC端页面布局2.4.1 头、内容、脚

qvj2l q49k 0/84 FBD 502d 90842 bfb7ff 22700 b 10 c 798 /

2.4.3 头、内容、右导航、脚

qvj2l q49k 0/8be 03 F4 b 7555409d 96d 43 f1 f 63 a 93951 /

2.4.5 关于页面常见像素（px）：

2.4.6 关于常见布局尺寸：

qvj2l q49k 0/E1 CB 8537333245318 c 982927 e5b 86 f 0e /

2.5 字体大小

默认14 px，行高字号8或乘以1.5

# 2.6字体颜色

以前大家直接用颜色来区分，新一代的设计技巧用百分比法来换颜色。

使用百分比的好处是，当多种颜色重叠时，还可以看到其背后的颜色(这降低了前端和设计技巧的难度)。