本文介绍了制定产品设计规范标准的重要性，也包括行业对于高级产品经理的要求，并以几点详细介绍，包括了制定标准的共同目标、基础要素、设计原则、规范制定的流程以及如何推动规范的执行等。适合产品岗位的你阅读。
每一款产品，都会有它的产品设计规范。例如支付宝小程序，微信小程序，有它的设计风格和交互的审核要求。
而适用于移动应用以及Web设计，可以参考Material Design（Google），强调直观性、一致性和有意义的动效设计。
如果你是ios产品，那首先就得去了解Human Interface Guidelines（Apple），再基于这个设计规范制定符合平台的标准，最通用，最基础的，就当属Microsoft Design Guidelines，适用于Windows平台的设计规范，强调平面化、简洁和直观的设计风格。
为什么要制定产品的规范标准？
制定产品的规范标准可以提高产品的一致性、可用性和用户体验，帮助建立品牌形象、提升用户满意度，并为团队提供明确的指导，提高工作效率和协作效果。
行业对于高级产品经理的要求:
在讲这篇内容之前，先容许我把之前的几篇文章给大家同步一下，感兴趣的小伙伴或者遇到瓶颈的小伙伴一定要看，我相信会对你们的提升带来很大的帮助，内容很长，建议先收藏。
我们先来简单的对规范标准有个概念，有很多小伙伴都总是会在这两个词进行拉扯，但其实这两个词加起来就代表了准则。而规范则是基于标准之下，如支付宝小程序，它的设计规范，对于我们来讲，就是平台的设计标准，我们基于这个标准下再去制定属于自己产品的设计规范。
那我们现在来看看，标准和规范在文学上的区别为：意思不同、出处不同。
① 意思不同
② 出处不同
规范要求和标准的区别：
③ 成因不同
接下来，我们开始今天的主要内容。小编会通过三个篇章，七个章节，给大家提供落地的方法。
倘若你目前刚好处在对于制定产品的规范标准无从下手的阶段，以下内容绝对能够让你按部就班的完成；假如你已经为多个平台制定过标准，也可以参考本篇内容，思考下有没有进步的空间；假如你从来没接触也没有机会制定，那么，这篇文章就是你的敲门砖。
小编总结了十点，先给大家介绍一下，我们为什么要去做这个事情，这个事情给我们带来什么价值。
作为产品，我们必须要清楚一个原则在于：我们做的任何事情，都得有它的价值，要清楚它的目的再去做，拒绝为了做而做的行为，切勿让自己变成了传声筒。
综上所述，制定产品的设计规范标准可以带来许多益处，包括提升用户体验、降低开发成本、增强品牌形象和改善团队协作。
规范的制定和执行有助于打造出一致、优质的产品，提高用户满意度和市场竞争力。
产品设计的常识（Common Sense），很多时候都会被忽略，特别一些小型项目。研发人员会在初期嫌麻烦不对一些常识的问题进行处理，最终导致的影响，往往是影响到产品的本身。
产品一定要把控好这个关卡，谁都可以不懂，产品一定要最清楚最基本的就是系统异常处理设计规范能够有效解决且避免以下七点：
产品设计是否保持一致很容易反映出一个产品经理做事情的严谨性。有不少产品经理设计产品很随意，抱着“能用就行”的态度做设计，结果就会出现整个产品的一致性非常差。
比如，列表的添加按钮一会在页面的右上角，一会在页面的左上角，搞得用户使用不同的页面像是在玩“躲猫猫”游戏一般，学习成本非常高。
再比如移动端，有些页面使用长按删除，有的使用向左滑动删除，还有的需要点击“…”在弹层中点击删除……同一个产品，多种交互形式也会让用户困惑。
至此，产品的规范标准入门篇已经跟大家介绍完了。大家在做任何一个项目的时候，都应该注意入门篇的两个章节，究竟有没有做到位，有没有制定规范标准同步到设计，研发。
入门篇基本满足大部门从0-1的项目，或者是初中级的产品经理所需要掌握的技能，建议大家收藏起来。如果遇到这类任务的时候，就可以以这篇文章，作为你们的任务List，一项一项对应的去检查是否有做到位。那么我相信你们吹来的作品，一定是具备一定的专业度，一致性以及可延展性的。
在入门篇开始之前，先给大家交个底。我们在制定产品入门篇的规范标准时，有一个部门必须拉他们参与进来，那就UI部。UI部门在入门篇的环节，起到了决定性的作用，由他们为主导，我们为辅助的方式，达成一致性的决定。
这一个环节，最重要的目的是让产品与UI保持同频，大家都在统一规范标准下进行设计，为产品添砖加瓦。而且通常我们都会把这个环节以一个功能模块级别的需求去做，也有这个需求的版本，持续优化迭代。
当然，需要优化迭代的时候，那就应该是由产品为主导，在原有的标准下，再去优化规范，最终形成新一版的规范标准。
这个环节也是能够让产品在与UI沟通上的成本减少，在同频基础下工作也有利于减少两个部门之间的摩擦。
相信大家应该也听说过交互设计师这个岗位，大多数在中小型企业很难有资源去匹配这个岗位，一般都是在成熟的互联网公司会有这个岗位的需求。
通过这么个规律我们也可以发现：需要注重交互设计，往往到了产品已经扎根土地，茁壮成长的阶段。
相对比较稳定的时候就会开始考虑这个问题，但并不代表说，交互设计不重要。交互设计对于产品来言，在做需求时，靠的是经验，靠的是竞品分析，靠的是借鉴。
看到这里的小伙伴们，自动自觉对号入座，往往一味的靠经验，靠竞品，靠借鉴，只会让产品的交互五花八门，没有一个体系。单个功能抽出来可能是合理的，方便的；但全部凑在一起的时候，倘若需要用户去适应，那么就适得其反。
因此，我们产品就需要UI同学帮忙一起制定出产品交互设计规范，而产品本身，也应该有一套自己的标准，把控好产品的交互，这样才有利于产品的发展。
接下来，我会通过收集一些常见的交互问题，给大家用实例去介绍产品交互设计规范如何制定。
1）做一个页面交互设计的时候要注意什么？
2）如何理解模态框？
何时应该使用模态框？模态框和阻断框有什么区别？
模态对话框(Modal DialogueBox) ，阻断(Blocking），可以用两个比喻给大家解释：
3）在具体设计一个产品的过程中，把握住哪些关键点才能让整个产品有着一致的交互体验，或者交互模式？比如iOS端和android端，比如web端和移动端？
一致性，在交互设计中非常重要！保持交互一致性，有两个武器：原则和规范。
规范又有两个层面：指南Guidelines和规格
原则
一些指导性的东西，在设计当中要遵从。在整个产品（无论多少端，多少子产品）都要遵守的。
举例：一个界面完成一个任务；表单超过10项必须分步骤；用户必须随时能回到主界面……这些原则可以由不同的形式来实现，但必须遵从这些原则。
规范
文章开头也有提及到，忘记了请翻上去复习一下。
指南：圈定具体的交互模式、色彩搭配和设计禁忌。
在这个层面，一个[构]可以有多个[形]，但某个形只能有一个[构]，达到相同位置、相同外观、相同操作。通过指南能够让各个端（IOS和安卓）看起来似曾相识，便于用户学习和养成习惯。
举例：在没有左侧导航的详情界面，必须包含面包屑；面包屑只能出现在PC浏览器端，不允许出现在响应式web界面中。
IOS和安卓的官方Guidelines就是这样的东西，但也可视情况制定私有的指南，也就是各个公司自己的设计指南。
规格：规格非常具体的描述了每一个模式的每一个形态的具体尺寸、色彩、响应，精确到数值。
举例：一级标题，字号为宋体 18pt；行高30pt；行上下外距为5pt；色值为#CC9300。
3）表单布局有什么规范要注意的？
这个问题是初级产品经理最容易犯的问题，设计太随意，看到别人的就想复制粘贴过来。这个问题正是可以解决很多初级产品常见错误的问题，以及给大家提供一个思路。
这里分享四个常见的表达布局对齐：
首先，我们要清楚，人的视觉是上下，左右的。所以我们会把要填写的标题，放在左边，输入的内容放在右边。这个原因也在于大部分都是右撇子，所以放在右面方便输入，而在左边提到的四点，各有千秋。
关键在于考虑的出发点是用户的视觉，还是表单的体验，抑或者是信息是否足够直观。再者就是是否够简洁，都是可供选择，关键在于选定一个就保持一致。
综上所述我们可以知道，交互设计可以通过交互的显性和交互的隐性去考虑。
交互显性
交互显性指的是用户在页面所有的点击，滑动，跳转的操作，比如刷新方式有下拉、上滑、按压点击等方式。
这就是所谓的交互显性的操作。要保持产品显性操作的统一性，同类别的交互不可有不同的操作感受。同时交互显性要符合大众的认知习惯，可创新但不可违背潜意识，比如说PC端的交互显性是以点击事件作为核心操作的，移动端的交互显性是以滑动作为核心操作的。
交互隐性
交互隐性指的是用户信息发生改变时的显示。比如说订单状态的显示，确认收货后，绿色的标签显示订单已完成，申请售后则有售后的标签，一些平台还会以订单的颜色区分去给用户隐喻。
再举个例子，消息有个小红点，用户就会知道去点，上文也有提到隐喻，很多时候，我们就是通过交互隐性的方式，来引导用户，提示用户，这样的方式有利于让用户自发性去体验，感受平台的功能，带来舒适感。
归根结底，产品的交互离不开创新，一致，符合规范。
本章节我们以Web端为例，我们在设计过程中，需要考虑我们基于什么样的尺寸进行基础设计。划分哪些区域需要固定尺寸、哪些需要做适配等。
据统计，使用中系统的用户的主流分辨率主要为 1920、1440 和 1366。
设计思考，有如下几点：
web页面是按照Html的设计规范标准进行布局设计的，由以下三部分构成:
1）Margin（边距）
为避免页面元素紧贴边沿的情况发生，WEB 页面和其中的表格，应设定边距，最小边距值为 “3px”。
一般粗细直角以1px，圆角为2px。
2）Button（按钮）
按钮一般有三种样式：小、中、大。
按钮是交互设计中必备的元素，它在用户和系统的交互中承担着非常重要的作用。
后台中常见的按钮类型分为线性按钮、文字按钮、图标按钮等。
按钮并列间距为：小间距8px，中间距16px，大间距24px
其中小中大的宽度分别为：58px，74px，96px
3）Table（表单）
常见表单是由多个列表项构成的。而每一个列表项都是由最基本的标签和输入框组成，常规的表单包括单选、多选、下拉选、输入框、时间选择、开关选择等控件。
顶部标签是标签在控件的上方，标签可以和控件左对齐，对于横向空间不足的情况是一种很好的方案。
竖列标签的使用场景思考：
表格的设计思考：
表格的设计规范的设计思考点如下：
表头的文案，可遵循信息降噪的原则思考：
4）Progress bar（进度条）
进度条的设计思考：
加载中进度条，存在加载中、成功、失败三种状态通过颜色去区分，进度条长度支持自定义。
5）Dialog（弹窗）
弹框主要分为两个大类模态弹框和非模态弹框，他们最大的区别就是是否强制用户交互。
常规状态通常出现在页面的上方，有普通信息、成功信息、失败信息、警示信息四种icon。
6）Default（缺省状态）：
缺省页面是当页面没有数据、用户没有建立资料或网络连接不通畅的情况下所展现的页面。
为了缓解用户面对这类情况产生焦虑情绪，设计师可以用一些插画和文字的结合来引导用户进行下一步的操作。
产品风格设计的形成一般通过以下几点：颜色，字体，图标，尺寸决定的。
1）Color（颜色）
色彩内容主要包含基础色（如品牌色、黑色、白色）和功能色（如链接色、提醒色等），图表配色为单独的配色体系。
在前期制定颜色规范的时候，精益求精的设定颜色，切忌颜色过多。
颜色的状态色尽量用原色进行转换，设置一个合理的变色公式，让所有颜色的状态色都根据这个公式进行转换。
例：
在设计规范中，尽量把颜色的色值和 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”;
字号
现在主流的产品中，主体字为 12px / 14px 的居多，可根据自身的产品定位以及用户的习惯进行设定。
字号不要出现奇数，否则在一些显示器上会有对不齐像素的状况发生。
字体颜色
字体颜色数量建议在 3~4 个，不宜过多，但是每个层级之间区分要大一些。
文本应该保持至少 4.5:1 （基于亮度值计算）的对比度以保持文本清晰；最佳对比度为 7:1。
测试对比度的网站：https://contrast-ratio.com
WCAG 2.0 中将颜色对比等级分为 3 种，A级，AA级，AAA级，等级越高意味着颜色的对比度越高，呈现出来的视觉压力越大。
3）icon（图标）
设定统一的图标使用规范，让视觉效果更和谐。
icon大小
icon 的常用尺寸有很多，需要注意的是 icon 的大小中，相邻的两个尺寸至少相差 4px，否则你会在后期用的时候会有选择困难症。同时功能 icon 尽量贴边或尽量贴边绘制，保证展现的视觉统一性（操作 icon 除外）。
单独 icon 使用的时候，尽量不要太小，最小值建议为 12px。
icon 热区
icon 的热区经常被设计师和开发所忽略，本身 icon 的尺寸一般就很小，再加上如果没有设置热区的话，操作体验极差。
所以一定一定要设置 icon 的热区，设置的值我建议为 icon 大小的 2倍。例：icon 大小为 14 * 14px，则热区大小为 28 * 28px。
4）size（尺寸）
页面内布局间、模块间、模块内的各部件距离。
尺寸大部分规范中都用的是 8 的倍数，不用纠结，直接用就行。我这里有个公式：Sn = 8px * n，n为正整数。特殊：最小支持4px。
进入进阶篇阶段，我们不只是按照行业标准制定规范，也不是按照一些平台标准以及常识问题，去为自己的产品制定规范标准。而是需要投入更多的精力，站在更高的角度去思考要为产品带来什么价值。而价值的体现就在于转化，管理，引导，复用，创新，切忌盲目动手。
在进阶篇没有唯一的标准，都需要各位结合自身产品的业务，产品定位，用户画像去制定。
接下来的内容，也只是小编分享一下比较通用的方法，希望能够帮助有缘人在迷茫的时候有个新思路。
在开始之前，再给大家补充三点，作为进阶篇学习之前，所需要结合着来学习的3个方面：
引导分为 5 种：Newbie guide（新手引导）、Steps guide（步骤引导）、Help / Operation guide（帮助/操作引导）、New function guide（新功能引导）、Blank guide（空白页引导）。
1）Newbie guide（新手引导）
新手引导是针对新用户的，首次进入产品的时候，我们要着重的把自己产品的亮点以及操作快速的介绍给新用户，让他用最短的时间上手我们的产品。
新手引导要言简意赅，并且如果非必要的话，尽量给用户一个可以直接关闭的按钮，让用户有选择权。我就非常讨厌有一些产品的新手引导，必须走完全部流程后才能关闭，恶心的不行。
2）Steps guide（步骤引导）
步骤引导一般用在有固定操作步骤的场景下，指引用户一步一步的完成想要的结果。常规的步骤引导建议在 3~5 步之间为合理。
3）Help/Operation guide（帮助/操作引导）
帮助/操作引导的展现方式是比较丰富多彩的，可以是提示语、辅助性文本、tooltips 等等，他的作用就是辅助用户去了解并且知道如何操作这个功能。
这个也是在产品中使用频率最高的，运用好他，可以让你的产品事半功倍。
4）New function guide（新功能引导）
他就是常用在新功能上线后，用户第一次登陆相关页面后做的一些引导，目的是为了告诉用户我们做了新东西，你快来试试吧。
5）Blank guide（空白页引导）
空白页引导一般用在在缺省页，对用户进行一些操作指引，让无信息的页面变得更有价值。比如百度在一些缺省页上就放了一些关于失踪儿童的信息，就因为做了这个引导，帮助了千万个家庭找到了失散的孩子。
这一章节在很多平台里面，都会给忽略掉它的一个重要性，一个产品的延展性，通用性，易用性和亲密性都离不开一个好的角色设计规范，角色设计的底层逻辑就是产品权限的制定。
目前的主流产品对于权限的制定都有一套规范标准，小编负责的产品也是通过借鉴主流产品权限的制定方式来设计，本章节主要是给大家分享下小编的方法。
我在做权限制定的对象是角色，而不是用户，所以也点一下题，我们在做的是对产品角色设计的规范，并不是对用户权限去做控制，接下来我们先来梳理下在做权限制定的时候常见的问题。
1）权限制定的过程中常遇到的问题有。
我们可管理的权限（系统资源）分为功能权限、数据权限：
这些问题主要都是基于用户作为权限主体的时候会出现的问题。传统的方式就是A -> B -> C 这类型的用户权限去对用户进行管理，对于业务的调整以及对功能模块的拓展是不友好的。
因此，我对于权限管理的理解为权限是主体对客体遵循特定机制做出的行为，而本章节主要是给各位分享RBAC模型。
2）对RBAC模型中的关系描述 – 基于角色的访问控制
RBAC（Role-Based Access Control）是一种访问控制模型，用于管理系统中的用户访问权限。RBAC模型基于角色来定义和分配权限，通过将权限与角色关联，然后将角色分配给用户，实现对系统资源的访问控制。
1. 角色与权限之间的关系：
2. 角色与用户之间的关系：
这些关系形成了RBAC模型的基本结构，通过这些关系的建立和管理，可以实现对用户访问权限的控制和管理。
3）对RBAC模型的分析
RBAC模型的优点包括：
然而，RBAC模型也存在一些挑战，如角色爆炸问题（角色数量过多）、权限维护复杂、权限继承问题等。在实施RBAC模型时，需要仔细设计角色和权限的结构，平衡权限的粒度和灵活性，以及确保合理的权限继承和分配策略。
4）分享一个使用RBAC模型的实例
假设有一个在线学习平台，涉及学生、教师和管理员三个角色，以及对应的权限：
1. 角色与权限之间的关系：
2. 角色与用户之间的关系：
3. 在该实例中，RBAC模型的使用如下：
通过RBAC模型，该在线学习平台实现了对不同角色的权限控制，确保每个用户只能执行其角色所允许的操作，从而提供了安全和可控的访问控制机制。
5）最后，对本章节进行一个总结
在权限模型里面有两个核心概念，第一个是静态指责分离，第二个是动态指责分离
静态职责分离
互斥角色限制：有些特殊的岗位，同一个用户在两个互斥的角色中只能选择一个。
比如财务和审计，不能既是运动员又做裁判。
基数限制：考虑容量、并发等的问题，一个用户拥有的角色是有限的，一个角色拥有的权限也是有限的，一个角色下的用户也是有限的。
比如微信公众平台做的限制：一个微信号可绑定并管理5个公众号。
先决条件限制：用户想要获得高级别的角色，必须先获得低级别的角色。
比如一个PMer需要先从专员做起，再升为产品经理，再到产品总监。
这种条件限制在人员规模比较大的团队就很常见了，人越多越需要严格且清晰的制度，避免个别的take a shortcut影响大局的稳定。
动态职责分离
动态的限制用户及其拥有的角色。
一个用户可以拥有多个角色，但是运行时只能激活一个角色。
常见就像招聘网站这种，用户既可以招人也可以找工作，角色不同看到的信息完全不一样，所以就只能激活其中一个角色。
最后给大家总结一下今天分享出来的内容，产品设计的规范标准，具体的规范还会根据产品的特点、行业要求和用户需求而有所不同。
在制定产品设计规范时，需要综合考虑用户体验、技术可行性、业务目标和品牌形象等因素，以确保产品能够提供优质的用户体验并达到预期的目标。
归纳为以下8点：
本文由@乐少有话说 原创发布于人人都是产品经理。未经许可，禁止转载。
题图来自 Unsplash，基于 CC0 协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。