Text靠左对齐，输入框在右。Text靠右对齐，输入框在右。Text靠左对齐，输入框在下。Text在输入框里。

首先，我们要清楚，人的视觉是上下，左右的。所以我们会把要填写的标题，放在左边，输入的内容放在右边。这个原因也在于大部分都是右撇子，所以放在右面方便输入，而在左边提到的四点，各有千秋。

关键在于考虑的出发点是用户的视觉，还是表单的体验，抑或者是信息是否足够直观。再者就是是否够简洁，都是可供选择，关键在于选定一个就保持一致。

综上所述我们可以知道，交互设计可以通过交互的显性和交互的隐性去考虑。

交互显性

交互显性指的是用户在页面所有的点击，滑动，跳转的操作，比如刷新方式有下拉、上滑、按压点击等方式。

这就是所谓的交互显性的操作。要保持产品显性操作的统一性，同类别的交互不可有不同的操作感受。同时交互显性要符合大众的认知习惯，可创新但不可违背潜意识，比如说PC端的交互显性是以点击事件作为核心操作的，移动端的交互显性是以滑动作为核心操作的。

交互隐性

交互隐性指的是用户信息发生改变时的显示。比如说订单状态的显示，确认收货后，绿色的标签显示订单已完成，申请售后则有售后的标签，一些平台还会以订单的颜色区分去给用户隐喻。

再举个例子，消息有个小红点，用户就会知道去点，上文也有提到隐喻，很多时候，我们就是通过交互隐性的方式，来引导用户，提示用户，这样的方式有利于让用户自发性去体验，感受平台的功能，带来舒适感。

归根结底，产品的交互离不开创新，一致，符合规范。

2. 产品布局设计规范

本章节我们以Web端为例，我们在设计过程中，需要考虑我们基于什么样的尺寸进行基础设计。划分哪些区域需要固定尺寸、哪些需要做适配等。

据统计，使用中系统的用户的主流分辨率主要为 1920、1440 和 1366。

设计思考，有如下几点：

web页面是按照Html的设计规范标准进行布局设计的，由以下三部分构成:

头部区域header。主体区域main。底部区域footer。

1）Margin（边距）

为避免页面元素紧贴边沿的情况发生，WEB 页面和其中的表格，应设定边距，最小边距值为 “3px”。

一般粗细直角以1px，圆角为2px。

2）Button（按钮）

按钮一般有三种样式：小、中、大。

按钮是交互设计中必备的元素，它在用户和系统的交互中承担着非常重要的作用。

后台中常见的按钮类型分为线性按钮、文字按钮、图标按钮等。

按钮并列间距为：小间距8px，中间距16px，大间距24px

其中小中大的宽度分别为：58px，74px，96px

3）Table（表单）

常见表单是由多个列表项构成的。而每一个列表项都是由最基本的标签和输入框组成，常规的表单包括单选、多选、下拉选、输入框、时间选择、开关选择等控件。

顶部标签是标签在控件的上方，标签可以和控件左对齐，对于横向空间不足的情况是一种很好的方案。

竖列标签的使用场景思考：

表格的设计思考：

表格的设计规范的设计思考点如下：

表头的文案，可遵循信息降噪的原则思考：

4）Progress bar（进度条）

进度条的设计思考：

加载中进度条，存在加载中、成功、失败三种状态通过颜色去区分，进度条长度支持自定义。

5）Dialog（弹窗）

弹框主要分为两个大类模态弹框和非模态弹框，他们最大的区别就是是否强制用户交互。

常规状态通常出现在页面的上方，有普通信息、成功信息、失败信息、警示信息四种icon。

6）Default（缺省状态）：

缺省页面是当页面没有数据、用户没有建立资料或网络连接不通畅的情况下所展现的页面。

为了缓解用户面对这类情况产生焦虑情绪，设计师可以用一些插画和文字的结合来引导用户进行下一步的操作。

3. 产品风格设计规范

产品风格设计的形成一般通过以下几点：颜色，字体，图标，尺寸决定的。

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。

测试对比度的网站：

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个方面：

深入了解产品管理和产品战略。学习产品管理的最佳实践、产品开发流程和产品策略，了解市场需求、用户行为和竞争环境对产品的影响。增强技术背景和产品理解。深入了解产品所涉及的技术和行业知识，与工程团队合作，理解技术可行性和产品的技术架构。探索产品创新和市场机会。主动寻找产品创新和市场机会，发现用户需求和行业痛点，并提出创新的产品解决方案。1. 产品引导设计规范

引导分为 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（空白页引导）

空白页引导一般用在在缺省页，对用户进行一些操作指引，让无信息的页面变得更有价值。比如百度在一些缺省页上就放了一些关于失踪儿童的信息，就因为做了这个引导，帮助了千万个家庭找到了失散的孩子。

2. 产品角色设计规范

这一章节在很多平台里面，都会给忽略掉它的一个重要性，一个产品的延展性，通用性，易用性和亲密性都离不开一个好的角色设计规范，角色设计的底层逻辑就是产品权限的制定。

目前的主流产品对于权限的制定都有一套规范标准，小编负责的产品也是通过借鉴主流产品权限的制定方式来设计，本章节主要是给大家分享下小编的方法。

我在做权限制定的对象是角色，而不是用户，所以也点一下题，我们在做的是对产品角色设计的规范，并不是对用户权限去做控制，接下来我们先来梳理下在做权限制定的时候常见的问题。

1）权限制定的过程中常遇到的问题有。

我们可管理的权限（系统资源）分为功能权限、数据权限：

这些问题主要都是基于用户作为权限主体的时候会出现的问题。传统的方式就是A -> B -> C 这类型的用户权限去对用户进行管理，对于业务的调整以及对功能模块的拓展是不友好的。

因此，我对于权限管理的理解为权限是主体对客体遵循特定机制做出的行为，而本章节主要是给各位分享RBAC模型。

2）对RBAC模型中的关系描述 – 基于角色的访问控制

RBAC（Role-Based Access Control）是一种访问控制模型，用于管理系统中的用户访问权限。RBAC模型基于角色来定义和分配权限，通过将权限与角色关联，然后将角色分配给用户，实现对系统资源的访问控制。

1. 角色与权限之间的关系：

2. 角色与用户之间的关系：

这些关系形成了RBAC模型的基本结构，通过这些关系的建立和管理，可以实现对用户访问权限的控制和管理。

3）对RBAC模型的分析

角色：RBAC模型中的核心是角色，角色代表了一组具有相似职责和权限需求的用户。角色可以根据用户的职位、部门、职能等因素进行定义。通过角色的定义，可以实现权限的集中管理和统一分配。权限：RBAC模型将权限与角色关联起来。权限指的是用户在系统中可以执行的操作或访问的资源。权限可以细分为功能权限和数据权限。功能权限控制用户可以执行的操作，如创建、编辑、删除等；数据权限控制用户可以访问和操作的具体数据范围。用户：RBAC模型通过将角色分配给用户来实现访问控制。用户可以根据其职位和职责被分配一个或多个角色。通过角色的分配，用户可以继承角色所具有的权限。授权：RBAC模型通过授权机制来管理用户的访问权限。授权是指将角色与权限进行关联，以确定哪些角色具有哪些权限。通过授权，系统管理员可以控制和管理用户的访问权限，以确保用户只能访问其所需的资源和功能。审计：RBAC模型提供了对系统访问的审计功能。审计可以跟踪和记录用户的操作行为和访问权限的使用情况。审计日志可以用于安全审计、故障排查和合规性检查等目的。

RBAC模型的优点包括：

然而，RBAC模型也存在一些挑战，如角色爆炸问题（角色数量过多）、权限维护复杂、权限继承问题等。在实施RBAC模型时，需要仔细设计角色和权限的结构，平衡权限的粒度和灵活性，以及确保合理的权限继承和分配策略。

4）分享一个使用RBAC模型的实例

假设有一个在线学习平台，涉及学生、教师和管理员三个角色，以及对应的权限：

1. 角色与权限之间的关系：

2. 角色与用户之间的关系：

3. 在该实例中，RBAC模型的使用如下：

通过RBAC模型，该在线学习平台实现了对不同角色的权限控制，确保每个用户只能执行其角色所允许的操作，从而提供了安全和可控的访问控制机制。

5）最后，对本章节进行一个总结

在权限模型里面有两个核心概念，第一个是静态指责分离，第二个是动态指责分离

静态职责分离

互斥角色限制：有些特殊的岗位，同一个用户在两个互斥的角色中只能选择一个。

比如财务和审计，不能既是运动员又做裁判。

基数限制：考虑容量、并发等的问题，一个用户拥有的角色是有限的，一个角色拥有的权限也是有限的，一个角色下的用户也是有限的。

比如微信公众平台做的限制：一个微信号可绑定并管理5个公众号。

先决条件限制：用户想要获得高级别的角色，必须先获得低级别的角色。

比如一个PMer需要先从专员做起，再升为产品经理，再到产品总监。

这种条件限制在人员规模比较大的团队就很常见了，人越多越需要严格且清晰的制度，避免个别的take a shortcut影响大局的稳定。

动态职责分离

动态的限制用户及其拥有的角色。

一个用户可以拥有多个角色，但是运行时只能激活一个角色。

常见就像招聘网站这种，用户既可以招人也可以找工作，角色不同看到的信息完全不一样，所以就只能激活其中一个角色。

四、结语

最后给大家总结一下今天分享出来的内容，产品设计的规范标准，具体的规范还会根据产品的特点、行业要求和用户需求而有所不同。

在制定产品设计规范时，需要综合考虑用户体验、技术可行性、业务目标和品牌形象等因素，以确保产品能够提供优质的用户体验并达到预期的目标。

归纳为以下8点：

一致的用户界面：确保产品在整个界面上保持一致的设计风格、布局和交互模式，使用户在不同的页面和功能之间能够轻松理解和导航。响应式设计：确保产品能够适应不同设备和屏幕尺寸，提供一致的用户体验，无论用户使用手机、平板或电脑访问产品。易用性和可访问性：设计产品以满足广大用户的使用需求，包括易用性、可访问性和无障碍性，确保产品能够被所有用户轻松使用和理解。信息架构和导航：设计清晰的信息架构和导航体系，使用户能够快速找到所需的信息和功能，减少用户的学习成本和迷失感。可视化设计和品牌一致性：使用合适的色彩、图标、排版和视觉元素，确保产品的可视化设计与品牌形象一致，提升产品的识别度和用户体验。内容布局和呈现：设计清晰、简洁的内容布局，使重要的信息和功能得到突出展示，避免信息过载和混乱的界面。用户反馈和引导：提供及时、明确的用户反馈和引导，使用户能够了解他们的操作结果、状态和下一步的行动。安全和隐私保护：考虑用户数据的安全性和隐私保护，遵循相关的安全标准和法规，采取必要的措施保护用户的个人信息和账号安全。