史上最全B端产品的交互规范来了

从业B端产品7年+，大大小小公司对交互规范有着不同的要求，但是万变不离其宗，交互总有其底层规范要求，那么接下来跟大家详细说明一下交互规范细则，超级详细的交互规范来啦！

WHAT：交互规范是什么？

产品交互规范，也称为界面交互规范或用户界面规范，是一套规定产品如何与用户进行交互的规则和标准。它包括设计元素的布局、动作反馈，以及对产品的使用流程和功能逻辑等各个方面的设定和控制。

交互规范重点在于人机交互的友好性和流畅性，用起来顺手且符合商业目的就是交互规范最好的诠释。

WHY：目的及意义

提高用户体验：好的交互规范能够帮助用户更好地了解和使用产品，从而提高用户体验。

提升开发效率：通过制定交互规范，可以使得设计师和开发者在开发过程中有明确的指导。

提升品牌形象：通过统一的交互规范，可以使得品牌的各个产品在交互方式上保持一致，从而提升品牌形象。

WHO：适合哪些读者

产品经理，产品开发人员，交互设计师，产品UI设计人员。

一、色彩

1. 色彩体系

分成两个层面：系统级和产品级。

1）系统级色彩体系可参考蚂蚁的交互组件https://ant.design/docs/spec/colors-cn，蚂蚁组件对整体交互规范有着细致且顺滑的操作演示。假设公司内部有专门的设计部门，可以设计部门整体定义公司色系以及字体等等。

2）产品级色彩体系进一步去突出产品本身色彩调性以及功能属性。

2. 产品级色彩体系

1）品牌色的应用

品牌色体现产品以及品牌特色，加深使用者对品牌的印象。比如支付宝系列操作均是蓝色为主，微信主色调为绿色和白色，抖音是黑色系。

2）功能色

功能色代表了明确的信息以及状态，比如错误提示，失败提醒，成功提示等等。在一套产品体系下，功能色尽量保持一致，比如新增，删除等功能按钮色彩需要跟主题色保持一致。

3. 系统建议

公司重要对外宣传系统以及内部主系统均使用品牌色，突出公司特色；

另外一个页面尽量不要超过3种颜色，并且是在同一标准色彩体系内，尽量不要自己去色彩库随意选取色彩。

二、字体

1. 字体定义

字体是体系化界面设计中最基本的构成之一。

在中后台视觉体系中定义字体系统，我们建议从下面四个方面着手考虑：主字体，字阶与行高，字重，字体颜色。

2. 主字体

为了保证在多数常用显示器上的用户阅读效率最佳，根据电脑显示器距离舒适度以及用户观感舒适度，确认导航为16px，标题为16px，正文为14px，说明为12px。

3. 字阶与行高

字阶是指不同尺寸的字体。行高就是一行字的高度，包装在字体外的边框盒子的高度。

建议的主要字体为14，与之对应的行高为 22。其余的字阶的选择可根据具体情况进行自由的定义。建议在一个系统设计中，字阶的选择尽量控制在 3-5 种之间，就跟衣服搭配一样，颜色不要过多，简洁舒适为宜，字体字号在一个区间范围内。

4. 字重

字重为字体的粗细程度，建议用regular 以及 medium 的两种字体重量。

5. 字体颜色

黑色为主，正文建议选用#333333到#666666 之间的颜色。注释类的文字建议选用#999999。

三、对齐

文案类最好为左对齐，数字类最好为右对齐，表单类间距建议8px，文字右对齐，结尾没有冒号。

四、按钮

市面上比较主流的为这四种按钮，主按钮，线性按钮，次按钮和纯文字按钮。具体使用规则和使用场景如何呢？我们应该从哪些方面下手去设计按钮？下面给大家一一进行解答。

1. 主按钮

主按钮为主要的按钮。引导用户进行点击操作，一个按钮区域最多使用一个主按钮。

场景应用：可应用于确认、新增、保存等等，你想引导用户做何操作，就可以把视觉焦点集中在哪个按钮上。比如退款操作时，商家本质希望用户不退款，主按钮为返回或是再想想的按钮。

需要注意的是不要在同一个表单中使用多个主按钮，1-2个即可，次按钮或是线性按钮多于5个时可以向上折叠收起。

2. 线性按钮&次按钮

线性按钮&次按钮两种按钮均可点击，但是功能均弱于主按钮。如果希望引导用户进行点击，可以选择线性按钮；若希望用户尽可能少点击或是不点击可以选择次按钮。

场景应用：一般在大表单页面批量导入，下载均为次按钮或是线性按钮。

3. 纯文字按钮

纯文字按钮就是有颜色的文字按钮，可进行点击。

场景应用：一般应用于表单中大面积需要点击的操作，比如查看，删除，编辑等等，对表单中每一行进行的操作。

4. 谨慎按钮

谨慎按钮用于特殊情况下防止误操作的按钮。

场景应用：一般应用于删除/付款/退款/修改权限/移除等危险操作，大部分都需要再次确认才可以。

5. 按钮顺序

前面介绍了那么多种按钮以及应用场景，那么按钮应该如何进行排列，需要遵循何种规则呢？

1）阅读习惯

大家可以闭着眼睛想一下，正常我们阅读的习惯是从左到右，从上到下，表单信息阅读完毕后需要进行操作，最好都放在右上方。

2）相关性原则

让相关的操作按钮更相近，比如上一步和下一步，保存和取消，增删改查，让这些兄弟按钮距离挨得更近一些。

五、导航

导航是B端系统的地图索引，帮助用户可以顺利到达目的地。导航对于B端产品交互而言，是系统之眼，一方面清晰展示系统结构，另一方面帮助用户快速找到他们想要的信息。好的导航清晰操作顺滑，差的导航会让用户没有二次进入的想法，所以好的导航是系统成功的一半。

市面上主流的导航交互为全局导航和页内导航，好的导航如何进行设计，我们需要选取哪种导航模式？继续一起探索吧。

1. 全局导航

1）侧边竖向导航

使用规则：

适用于企业级产品，尤其是较为复杂且操作较为繁琐的系统，比如人力系统，CRM系统，ERP系统等等；

建议1-3个层级使用，可以承载多个层级；

建议6-8以上菜单使用，可以承载多个菜单。

需要特别注意竖向导航的排列顺序，较为复杂的企业级系统从上到下一般依次为：

首页（工作台、驾驶仓）：主要展示整体系统主要功能入口以及一些主要数据，内容信息等等。

主要功能菜单：主要展示系统较为重要的功能菜单，比如人力系统展示入职管理，活水管理，离职管理等等。

数据统计（数据记录）：主要展示较为重要的数据统计或是数据记录，比如客服系统的在线会话记录，在线会话统计，外呼记录、外呼统计等等。

系统配置：主要展示系统内部的功能配置，权限配置等等，比如人力系统的人员配置，菜单配置等等。

消息中心（帮助中心）：主要展示系统内部消息，意见反馈，帮助中心等等，比如发货系统中连接上下游的发货信息，数据下载消息通知，服务更新通知等等。

优点：

多层级，拓展性较好，可以支持多栏目多菜单；

导航为固定形式，用户在操作和浏览时可以快速定位和回到首页，操作效率高；

左侧导航可以进行收缩，可扩大页面宽度。

缺点：

层级入口较多时，用户下钻纵深体验稍差。

2）顶部横向导航

使用规则：

适用于较为简单的企业级系统或是官网，栏目较少，可以给用户更好的沉浸式体验；

建议1-3个以内层级使用，可以承载多个层级；

建议2-6以内菜单使用，菜单字数需要去适应整体屏幕的宽度；

需要特别注意的是横向菜单从左到右，权重依次减少。

优点：

整体页面排版较为简单，方便用户轻便操作；

用户能做沉浸式体验，体验感较好。

缺点：

承载内容有限，层级拓展性较差；

横向中文或是英文命名需要受整体屏幕宽度的限制。

2. 页内导航

1）面包屑

面包屑帮助定位菜单以及返回菜单，可以显示当前页面的路径，是比较常用的导航方式。

使用规则：

显示当前页面路径，方便用户进行返回操作，最好大于等于3个层级进行使用；

产品交互规范的内容模块还是较多的，希望这篇文章对你的产品交互能力有所提升，欢迎屏幕前的你点赞收藏支持一下。另外交互规范是产品架构的基础的地基，具体楼房盖成什么样还需要用心去思考以及借助公司内部UI和UE的力量。