web标准的制定者是 基本技能——制定产品标准

文本左对齐，输入框在右侧。 文本右对齐，输入框在右侧。 文本左对齐，输入框在底部。 文本在输入框中。

首先我们要知道人的视觉是上下左右的，所以我们会把需要填写的标题放在左边，输入的内容放在右边，这样做的原因是大多数人都是右撇子，所以在右边输入比较方便，左边提到的四点各有各的好处。

关键是考虑用户的视觉体验，表单体验，信息是否够直观，再就是是否够简洁，这几种方式都可以，关键是选择一种，并且保持一致。

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

互动优势

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

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

交互式隐式

交互隐性是指用户信息发生变化时的展示。比如订单状态的展示，确认收货后，有绿色标签表示订单已完成，申请售后，有售后标签，有的平台也会用订单的颜色来给用户一个隐喻。

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

最终，产品交互需要创新、一致性和符合标准。

2. 产品版图设计规范

本章我们以Web端为例，在设计过程中，我们需要考虑以什么尺寸作为基础设计，哪些区域需要固定尺寸，哪些区域需要适配。

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

设计思维包含以下几点：

网页按照Html设计标准设计，由以下三部分组成：

页眉区域为 header。主要区域为 main。底部区域为 footer。

1）保证金

为了避免页面元素过于靠近边缘，应该为网页及其中的表格设置边距，最小边距值为“3px”。

一般直角厚度为1px，圆角厚度为2px。

2）按钮

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

按钮是交互设计中必不可少的元素，在用户和系统的交互中起着非常重要的作用。

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

按钮之间的间距为：小间距8px，中间距16px，大间距24px

小、中、大的宽度分别为：58px、74px、96px。

3）表格

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

顶部标签是位于控件上方的标签，该标签可以与控件左侧对齐，这对于水平空间不足的情况是一个很好的解决方案。

使用列标签的注意事项：

表格的设计注意事项：

表格设计规范的设计考虑如下：

表格头的文案可以按照信息降噪原则来考虑：

4）进度条

进度条的设计注意事项：

加载进度条有加载中、成功、失败三种状态，通过颜色区分，进度条长度可自定义。

5）对话

弹窗主要分为两类：模态弹窗和非模态弹窗，它们之间最大的区别就是是否强制用户交互。

正常状态一般出现在页面顶部，有四个图标：正常信息、成功信息、失败信息、警告信息。

6）Default（默认状态）：

默认页面是当页面没有数据、用户未创建档案或网络连接不顺畅时显示的页面。

为了减轻用户面对此类情况时的焦虑，设计师可以采用插图和文字相结合的方式，引导用户进行下一步操作。

3.产品款式设计规范

产品风格设计的形成一般由以下几点决定：色彩、字体、图标、大小。

1）颜色

颜色内容主要包括基础色（如品牌色、黑色、白色等）和功能色（如链接色、提醒色等），图表配色方案为单独的配色体系。

在前期制定颜色规范的时候，要慎重设置颜色，避免使用过多的颜色。

颜色的状态色应尽量与原来的颜色进行转换，并设定合理的颜色变化公式，使得所有颜色的状态色都能按照这个公式进行转换。

例子：

在设计规范中，尽量把颜色值和RGB值都写出来（这个是给有强迫症的人看的，因为有时候颜色值一模一样，但是RGB值稍有不同，虽然效果一样，但是对于有强迫症的你来说，这样舒服吗？）。

有 4 种状态颜色：正常、悬停、单击和禁用。

在设置图表颜色时web标准的制定者是，需要考虑不同的使用风格（条形图、环形图、饼图等），同时也要考虑其可扩展性。比如设置了12个图表颜色值，可以按顺序使用，当超过12个时，可以使用同一种颜色。

2）字体

设定统一的字体标准，并使用无衬线字体，以在所有操作系统上获得最佳显示效果。

首先需要设置字体系列，以保证产品界面的最佳显示。

例如（仅用于演示，不建议）：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将色彩对比度等级分为A、AA、AAA三种，等级越高，色彩对比度越高，视觉压力越大。

3）图标

设定统一的图标使用标准，使视觉效果更加和谐。

图标大小

常用的图标尺寸有很多，需要注意的是，相邻两个图标尺寸之间的差异至少要有4px，否则后期使用时会难以选择。同时，功能图标尽量靠近边缘绘制，以保证视觉统一（操作图标除外）。

使用单个图标时，尽量不要将其设置得太小，建议最小值为 12px。

图标热区

图标的热点经常被设计师和开发者所忽视，图标的尺寸通常很小，如果不设置热点，操作体验会极差。

所以一定要设置图标的热区，我建议设置为图标大小的两倍，比如图标大小是14*14px，那么热区大小就是28*28px。

4）尺寸

页面上的布局、模块以及模块内组件之间的距离。

大部分尺寸规范都是用8的倍数，所以不用管，直接用就行。这里有一个公式：Sn = 8px * n，其中n是正整数。特别：支持的最小尺寸是4px。

3. 高级

进入高级阶段，我们不会只按照行业标准来制定规范，也不会按照一些平台标准、常识性问题来制定产品的规范，而是需要投入更多的精力，站在更高的角度去思考，能给产品带来什么价值，价值的体现在于转化、在于管理、在于引导、在于重用、在于创新，不要盲目去做。

高级部分没有单一的标准，需要根据自己产品的业务、产品定位、用户画像来制定。

以下内容只是小编分享的一些比较常见的方法，希望可以帮助到那些困惑的朋友有一个新的思路。

在开始之前，我想再给大家补充三点。这是你们在开始学习高级章节之前需要一起学习的三个方面：

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

指南类型分为新手指南、步骤指南、帮助/操作指南、新功能指南、空白指南五种。

1）新手指南

新手引导是针对新用户的，在新用户初次进入产品的时候，重点向新用户介绍产品的亮点和快捷操作，让新用户在最短的时间内上手使用我们的产品。

入门指南应该简短，如果没有必要，给用户一个直接关闭的按钮，让用户有选择的权利。我非常讨厌一些产品的入门指南，要求用户完成整个流程才能关闭。这太恶心了。

2）步骤指南

分步引导一般用于操作步骤固定的场景，引导用户一步步达到想要的结果，建议常规分步引导的步骤数在3~5步之间。

3）帮助/操作指南

帮助/操作指南的展现方式比较多样，可以是提示、辅助文字、工具提示等，其作用是帮助用户了解并知道如何操作该功能。

这也是产品中最常使用的方法，如果运用得当，你的产品可以达到事半功倍的效果。

4）新功能指南

它常用于新功能上线后，用户第一次登录相关页面时的引导，目的是告诉用户我们创造了一个新东西，让他们来尝试一下。

5) 空白导板

空白页面引导一般用在默认页面，为用户提供一些操作上的指导，让没有信息的页面变得更有价值。比如百度就把一些失踪儿童的信息放在了一些默认页面，也正是因为这样的引导，帮助了数千万家庭找到了走失的孩子。

2.产品角色设计规范

这一章的重要性在很多平台往往被忽视，一款产品的扩展性、通用性、易用性、亲切感都离不开良好的角色设计规范，角色设计的底层逻辑就是产品权限的制定。

目前主流产品对于权限的建立都有一套标准规范，小编负责的产品也是借鉴了主流产品建立权限的方式进行设计的，本章主要是将小编的方法分享给大家。

我的权限设置对象是角色，不是用户，就开个小玩笑吧web标准的制定者是，我们做的是规范产品角色设计，不是管控用户权限。接下来我们来梳理一下权限设置时常见的问题。

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个公众账号。

前提条件限制：如果用户想获得更高级别的角色，必须先获得较低级别的角色。

例如，PM需要从专员做起，然后晋升为产品经理，再晋升为产品总监。

这种条件限制在人员较大的团队里很常见，人越多越需要严格明确的制度，防止个别人走捷径，影响大局的稳定。

动态职责分离

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

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

一个常见的例子是招聘网站，用户既可以招人，也可以找工作。不同的角色显示完全不同的信息，因此只能激活一个角色。

四、结论

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

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

概括起来可以分为以下8点：

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