B端产品原型进化录

关于B端Web产品前期从流程上进行了复盘，这次从原型设计的角度来进行梳理。

原型设计是产品经理的硬技能，也是产品经理与各相关方沟通的直观桥梁。只有看到了原型demo，甲方爸爸们才会清楚的知道他们不要什么，可能还需要什么。

我的原型设计之路，从一开始的野路子，到目前的稍有章法，多亏了Ant design的组件库、设计语言，以及参照《写给大家看的设计书.第4版》一书中所进行的刻意练习。

特此给大家做个小小的分享，给入门的产品小白以参照，如有设计师出身的产品大大们还请拍砖。

目录：

设计基本原则

Ant design精选

个人建议

一、设计基本原则

参照基本的设计原则，可以帮助我们更高效、高质量的完成原型设计。

四大设计原则，是在《写给大家看的设计书.第4版》一书中由罗宾·威廉姆斯(RobinWilliams)提出的，包括亲密性、对比、对齐、重复，适用于印刷品、出版物，也适用于Web的产品设计。

1. 亲密性（Proximity）

含义：将相关的项组织在一起。彼此相关的项应当靠近，归组在一起；不相关的项，则远离。

作用：有助于组织信息，减少混乱，为读者提供清晰的结构。

表现：在一个页面上，物理位置的接近就意味着存在关联（实际生活中也是如此）。

问题：哪副图看起来这两位像亲密母子，哪幅像是路人？

图源自《写给大家看的设计书.第4版》

亲密性在Web页面的体现是横向、纵向的间距。信息的关联性越强，则间距越小，反之则间距越大。

间距规格分为小、中、大三种，对应8px、16px、24px，再大些可用32px、48px。也可以参照公式来设定间距 y=8+8 * n（n>=0），y为纵向间距。这个公式不等于y=8*n（数学学渣已经想了一遍） 来扩展间距。

踩过的坑儿：

一期设计时，对间距的认知是需要间距，标准自定义为10px的倍数，吭哧吭哧一顿调，还觉得页面比上实战课时画的好，羞愧。直到原型已经画完了，和UI同学请教，才发现标准是8px的倍数，再后来看到了Ant design上的建议，先按照着规范来。

亲密性bad case示例（图源自某产品试用版）

2. 对齐（Alignment）

含义：任何东西都不能在页面上随意安放。每个元素都应当与页面上的另一个元素有某种视觉联系。

作用：使页面统一而且有条理。

表现：在页面中无形的一条线，常见的有左对齐、右对齐、居中对齐。Ant design建议是文案左对齐，表单冒号对齐，数字取相同的有效位的右对齐，其中冒号对齐是一种特殊的右对齐。

踩过的坑儿：

对于表单的冒号对齐，官方解释是，能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项。

目前我的理解是，表单内存在输入前、输入中、输入后三种状态，输入前和输入中，需要了解填写哪些内容，固然是左侧的项目信息重要。而在输入后，左侧信息变为了辅助，而右侧输入框中的内容变为了主要，即使没有左侧的项目信息，你也依然能够轻松理解、校验其内容。

图源自Ant Design Pro（也可对比上一张图片，亲密性上有很大差异）

3. 对比（Contrast）

含义：页面上的不同元素之间要有对比效果，达到吸引读者的对比效果。

作用：不仅可以用来吸引眼球，还可以用来组织信息、清晰层级、在页面上指引读者，制造焦点。

表现：Ant design提供了主次、总分、状态这3种关系的对比示例。

踩过的坑儿：

主次关系对比，比如在页面操作区一共有5个按钮（可以用一个更多来隐藏3个按钮）。那5个按钮，谁是主，谁是次，需要产品经理去判断，去引导去告知用户这个页面的核心功能是什么。

主次关系不明确的bad case（优化方案有多种）：

状态对比，可通过改变颜色、增加辅助形状等方法来实现。一开始认为由文案来进行状态区分即可，颜色是非必需的。最近在学习了视觉认知的内容后，转变观念，确实可以运用颜色来进行辅助；例如贴近生活的红绿灯、自然灾害的蓝黄橙红预警，都能够让用户更好区分信息。

图源自Ant Design Pro。

4. 重复（Repetition）