

Vol.09 制定规范，提高沟通效率

产品海豚湾

2025-07-17

导读：规范能够节省产品，设计与开发的交流成本。

前言

做B端产品，产品的稳定性和一致性非常重要。每次出问题意味着影响客户的正常业务运作，每次功能的改动意味着客户员工需要重新适应。因此，在做B端产品时，务必优先考虑稳定性和一致性。如何保证稳定性和一致性呢？我的经验是，制定规范很重要。没有规范的情况下，会出现产品说一套，开发按自己的理解做一套；遗漏的部分被忽略等等。这些问题都可能导致系统不稳定或者体验不一致。而如果有规范指导，我们内部的沟通效率更高，产品出问题的概率也会大大降低。本篇将从4个方面来介绍如何制定一款产品的规范。

UI设计规范

通常来说，简单的UI设计规范会把布局、栅格、间距、色彩方案、字体、图标、缺省页面（默认页面）、主要页面元素（如按钮、分割线）等做一个统一的规范。大家也可以参考Ant Design的设计介绍。对于B端产品的UI设计，个人是建议做得更细一点，比如下面的这些要素也需要考虑，建议是UI、产品和开发一起讨论确定一个适合自己团队的规范。

关于UI设计规范，需要注意的是，一旦规范制定，首先要遵循设计规范的就是产品原型设计，我们尽可能地按照设计规范来绘制产品原型，这样到后续的设计（很多公司的Web管理后台都不单独设计界面）、开发环节才可能符合规范。

常用表单校验规范

表单校验遗漏是我遇到过的，导致产品出问题最多的因素。典型的例子就是数值类可以输入其他字符，文本输入没有限制长度导致数据库报错。而且，往往产品认为校验规则是开发理所应当要做的，而开发则以产品没有给明确说明怼回去。在技术开发领域有一句话，叫做“约定大于配置”，其中的“约定”就是一个事先确定好的规范。表单校验也一样，实际上，很多表单都是常见的，对于这些表单，我们产品和开发人员约定好校验规则就可以了，这样既不会出现出现问题“甩锅”的情况，而且可以有效降低由于校验不严谨导致的产品问题。

我总结了一份常用的表单校验规范表，表格太长，不太好粘贴在文章里，在公众号发送消息“校验”即可获取。

界面布局规范

B端产品的Web端界面大部分都是标准化的，因此我们可以穷举出可以标准化的页面，形成布局规范，避免设计师、开发者按照自己的个人习惯进行更改，从而保障产品界面的一致性。具体来说，可以归类为下面几种形式的布局规范：

实际上，梳理完之后，我们会发现页面并不会特别多，对于产品完全可以建立一套原型页面模板，用的时候直接复制修改就好，这样既能保持一致性，团队成员画原型的效率也能得到提高。

交互基本原则

交互方面，最主要的是给出及时反馈，也就是“尼尔森十大交互原则”中的可见性原则，比如按钮要区分进入、按下、点击、提交中、禁用这几种状态。比如输入表单要分为进入、错误、禁用等状态。这些其实目前大部分开源组件都已经帮我们处理好了，主要是一些自定义的组件可能会忽略这种操作反馈。

除了组件之外，就是对操作过程和操作结果的反馈。操作过程也就是我们说的等待过程，这块可以参考我公众号的文章：关于让用户等待这件“小事”。操作结果则是在操作完成后要及时告知用户结果，不管是成功、失败或者网络超时，都要给用户指示。同时，对于出现失败或网络超时时，应当主动告知用户这并不是他们的问题，并且引导用户如何解决问题。

最后一个就是“原路返回”原则，也就是允许用户怎么进入当前页面的，可以逐层级返回到原先的页面。我前两天体验了一个App就非常让人郁闷。这个App提供了一个分页面的级联选择，我逐级选择到了最后一级发现没有我要的选项时，想返回上一层级重新选，结果它直接返回到了第一层级。这就是没有遵循“原路返回”的原则。

典型的情况还有比如我们通常习惯了详情页面直接返回到对应的列表页面，但是如果用户是从其他入口查看这个详情页面时，就应该返回到来源页面，而不是列表页面。

【声明】内容源于网络

产品海豚湾

人人都是产品经理主编推荐作者，主导过多个产品从0-1，从1-N 的设计。目前从事 SaaS 产品设计和团队管理。B 站搜索：产品海豚湾也可以看相关视频哦。

内容 124

粉丝 0

产品海豚湾人人都是产品经理主编推荐作者，主导过多个产品从0-1，从1-N 的设计。目前从事 SaaS 产品设计和团队管理。B 站搜索：产品海豚湾也可以看相关视频哦。

总阅读55

粉丝0

内容124