产品原型设计的基本步骤（产品经理必知必会的原型设计知识）

产品原型设计的基本步骤（产品经理必知必会的原型设计知识）2.3.2 对齐：如果信息之间关联性越高，他们之间的距离就应该越接近。亲密性的本质是通过界面距离加强大家对不同元素亲密程度的理解。为了尽可能减少沟通与理解的成本，有必要在组织内部统一设计板的尺寸。蚂蚁中台设计团队统一的画板尺寸为 1440px 。界面所有元素以 8px 为基数的栅格设置间距，提供常用的对齐栅格8px/16px/24px/32px/48px。设计的四大原则是：亲密性、对齐、重复、对比

以下阅读仅需 15 分钟

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

本文可以帮助大家了解的知识内容有：

1. 熟悉PC端做的不错的UI组件
2. 设计原型推荐掌握的设计规范

一、个人觉得做的不错的PC端UI组件

我本人就是通过这些 UI 组件快速掌握原型组件设计知识的，之前写过一篇《产品经理如何快速掌握原型》，所以有空多看看这些组件有助于原型设计能力快速提升。

1. Ant Design（阿里出品）
2. Arco Design (字节出品)
3. iViewUI(原Talking Data 员工，创业做的)
4. Element UI(饿了么出品，可惜不维护了，但是内部员工维护了 Element UI plus)

二、设计原型必须要会的设计规范

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

2.1 画板统一尺寸

为了尽可能减少沟通与理解的成本，有必要在组织内部统一设计板的尺寸。蚂蚁中台设计团队统一的画板尺寸为 1440px 。

2.2 元素间距

界面所有元素以 8px 为基数的栅格设置间距，提供常用的对齐栅格8px/16px/24px/32px/48px。

2.3设计的四大基本原则

设计的四大原则是：亲密性、对齐、重复、对比

2.3.1 亲密性：

如果信息之间关联性越高，他们之间的距离就应该越接近。亲密性的本质是通过界面距离加强大家对不同元素亲密程度的理解。

2.3.2 对齐：

采用对齐的方式可以帮助用户更快的找到相似的信息。关于Table 对齐中有个设计小技巧：文字一般都是以左对齐的方式，数字一般都是以右对齐的方式。

2.3.3 重复：

利用重复的原则，可以降低用户的学习理解成本，帮助用户找出这些元素的关联性。

2.3.4 对比：

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

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

2.4.2 头、左导航、内容、脚

2.4.3 头、内容、右导航、脚

什么是右导航呢，见下图框选的地方：

2.4.4 左导航、头、内容、脚

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

2.4.6 关于常见布局尺寸:

2.5 字体大小

默认 14 px，行高 字体大小 8 或 乘 1.5

2.6 字体颜色

以前大家都直接采用颜色去区分，新一代设计技巧采用百分比的办法去改变颜色

采用百分比的好处是：多个颜色重叠的时候，还可以看到背后的颜色（给前端和设计技巧都降低了难度）。