总监出品！做好B端产品交互设计的15条好方法

我们在设计 B 端产品界面的时候，绕不过去要进行原型设计。交互我一直认为，设计只有在原型层先尽可能想明白  ，好方才能在设计层和研发层有好的总监做好结果。

假如原型层没考虑明白，出品产品随便就给到研发同学进行开发
，端的条中间来回修改就非常费时费力，交互这并不是设计一个好现象 。所以，好方我们要提升自己的总监做好原型绘制能力。

今天啊，出品产品就和你分享下原型设计中的端的条交互设计吧。

我们先来看看原型设计的定义。

其定义了设计 B 端数字界面需要涉及的一系列关于界面构建的方式方法，指导如何将碎片化的需求 、功能转化为界面原型的能力 ，从而达到数字界面信息展现清晰、流程操作顺畅的结果，最终达成为用户提供友好的用户体验的目标。

这里主要从 4 部分展开，包括信息架构、任务流程 、布局结构、交互设计。

每一个部分作用分别是：

①信息架构 ：B 端产品信息架构设计就是将内容规划层级
，并逐渐引导用户快速找到其想要的内容。

这就好比商场里面的导航地图 ，我们通过导航地图可以知道每层楼有什么 。

②任务流程
：设计任务流程，即设计用户行为动线。任务流程设计的好，会极大提升用户的操作效率，并达到产品设计的目的
。

这就好比宜家的购物路径设计
，让大部分消费者进入宜家，就会按照宜家的动线设计
，被默默引导着走完全程，并购买了商品。

③布局结构 ：布局结构是指对 B 端产品框架层面和页面层面的布局设计。

我以前是学美术出身
，老师告诉我们在动笔画具体的物体前，需要先对画面进行构图 ， 也就是经营画面内容大致呈现的位置，是上下结构，还是左右结构，亦或者是对角线结构
、 环形结构
、正三角结构
。

在完成画面构图后，再开始铺大调子、画物体、填色
、上细节等， 从整体到局部层层推进去做
。B 端产品的布局结构也大致是这么回事儿哈 。

④交互设计：交互设计是定义 、设计人造系统行为的一种设计 。

具体怎么回事儿呢？假设你要分别进入两个房间拿东西，两个房间均黑乎乎的，现在你需要打开每个房间的灯，才能拿到东西。其中 A 房间的灯开关就在门口
，你按一下就可以打开，但 B 房间的灯开关在屋子深处 ，且在墙壁较上方，很难够着，并且你需要将开关连续按三下才能打开灯。

听下来 ，你觉得哪个房间的灯开关交互好呢?

我想你心中自有答案。

那么，今天
，我将重点和你分享交互设计，这是一件有趣的事儿。

为什么说交互设计很有趣呢 ，咱们来看看这个例子。

这是我在网上找的一张图——这是一个公园的场景
 ，设计师规划了用户行走的路径 ，可是，在用户真正行走的过程中 ，并没有按照设计师原本规划的路径来
，而是自己开辟了一条小道，这是为什么呢？我想，一个很重要原因就是 ：设计师原先的设计，不符合用户模式 。

再看这个例子。这是一个苹果手机接听电话的交互方式。你发现没，竟然苹果有两种接听电话的交互方式 ，这是怎么回事呢？

原来啊，苹果考虑到了用户接听的场景。当用户将手机放在口袋里面时，如果有了来电，那么很容易误触 ，所以采用了左图滑动接听的方式
。而手机放在桌面的时候，就不存在误触，那么就可以通过快速点击的方式接听（右图）。这就是苹果在交互上考虑得非常细致 ，符合用户的心理预期 。这个交互方式，用户的认可度还是很高的。

所以，我们想要把交互设计好，可以从以下几个方面展开：

由面到点 、符合用户常识、不干扰用户、直观性、交互规则统一
、一致性、状态可见、环境贴切 、用户可控
、防错容错 、易取原则、灵活高效、易扫原则、容错原则、帮助原则

那我们一个个展开吧。

1. 由面到点：

是指逐层打开去设计，依次是页面间交互、模块间交互 、组件间交互 、组件内交互、微交互
。如果反着来设计交互，会让我们思绪凌乱，提升不了根本性的用户体验。但如果本次就是做微交互的，那么另说
。

2. 符合用户常识：

基于用户经验 、观察、智力和直觉的设计方式 ，不要违背用户的经验和常识。比如 ，大部分用户都习惯于点击一下触发某事件 ，而你的交互设计是点击三下 ，那么就和用户习惯违背了
，这就会让用户抓狂和吐槽。

3. 不干扰用户：

不干扰用户是指我们不要设计一些过度的交互来影响用户正常的操作  。例如 ，频繁使用弹窗设计，打断用户当前操作流程；再例如，在不该加微交互的地方加了各种微交互， 导致用户无法将视线定位在重要数据上 ，总被无效交互干扰 。

4. 直观性：

B 端产品交互设计要以直观为主，尽量避免使用隐藏式交互 ，并不是说完全不能用 ， 但要尽可能少用。比如需要通过鼠标 hover 上去才出现的功能就属于隐藏式交互。

5. 交互规则统一：

交互规则统一是指依据我们所支持的 B 端产品实际情况，制定一些交互上的通用规则，避免同一个功能，又重新衍生一个新的交互。

6. 一致性：

一致性原则的范围比较广，一般我们从单个产品内部来说
，一致性包括：文案描述的一致性 、色彩的一致性、大小的一致性 、反馈的一致性 、操作的一致性等。一致性可以让产品看起来更加专业，让用户体验更加舒适 。

7. 状态可见：

状态可见原则分为静态和动态两种。

• 静态：用户通过看界面就明确地知道自己所处的位置
  ，及处于何种状态
  。
• 动态：用户在进行界面操作的时候 ，如删除 、新增等 ，系统应该即刻给予用户反馈，让用户知道自己的操作是有效的
  ，目前处于何种状态 。

8. 环境贴切：

环境贴切原则是指界面上内容的展现和表达
，尽可能地贴近用户所在的环境，从生活中来到生活中去，使其贴近用户的行为和习惯，这样可以减少用户的学习成本 ，提高产品的易用性 。

9. 用户可控：

用户可控原则是指用户对自己操作了的事情，可以撤销或重做。比如钉钉发送的消息可以被撤回
，发送出去的邮件可以被撤回 。

10. 防错原则：

防错原则是指设置防错机制，防止用户在界面操作中犯错，它有二类 ：一是在用户操作之前，就要防止用户犯错 ，这个在交互体验上是最好的；二是在用户操作过程中，设立有防错机制 。

11. 易取原则：

有的小伙伴在设计界面的时候，经常用一些较为隐藏的交互方式
，或者把一些关键的功能隐藏起来，让用户通过在界面上划划、搜搜去取得 。这固然把我们的交互技能用出来了
，但这对用户不友好 。用户喜欢的是直接、容易获得，而不是隐藏。我们应该尽量减少用户的记忆负担，将操作和内容明明白白的展现给用户。

12. 灵活高效 ：

现在
，大家的时间都很宝贵，只有灵活高效的产品才能深得用户的喜爱。页面加载速度够不够快，不够快有提示吗 ？新的产品好不好理解和快速上手 ？功能会不会让用户难以理解 ，是不是专业术语要给予说明和提示？……一个高效灵活的产品是以上诸多因素影响的。

13. 易扫原则：

页面视觉设计需要层次 ，真正的目的不仅仅是为了好看，更是为了让用户在繁杂的信息中迅速获取重要的信息 。比如重要的功能是否突出？重要的内容是否够明显  ？弱化和剔除不重要信息，突出重点，能让用户心情愉悦。

14. 容错原则：

用户每次使用界面功能 ，不仅希望界面操作减少出错频率
，也很希望人机交互是有温度的。当用户操作出现问题的时候 ，界面给出除了“错误”两个大字以外的信息，比如能告诉他们哪里错了，接下来用户该如何做
，则会更好。

15. 帮助原则
：

我们每次设计产品，要考虑到产品本身未必能准确的表达出产品经理要表达的意思 。用户在使用过程中，也可能会出现疑问
。这时候用户该怎么办呢？我们如果能提前考虑到应对方案，那么对于用户来说再好不过了。

比如有帮助文档 、比如给予即时提示和反馈 、比如贴上客服电话  、比如有 24 小时智能语音助手等。当然，最好的还是无需提示用户就懂啦 。

好啦，15 条好的交互设计原则讲完啦，你对交互有没有了更加深层次的理解呢。你可以在实际的产品设计中，去针对性的使用 ，巩固自己的理解。

如果你对 B 端体验设计有兴趣，或者想系统性提升你所负责产品的用户体验 ，可以够买我的新书《B 端体验设计：企业级视角的系统化方法》一书 。书中用我的亲身经历讲解了如何做好 B 端体验设计 ，很多公司也买了去让设计师与产品经理学习。

最后的话

最后，我想说说自己这些年在一线做交互的小思考。

交互 ，是一件很有意思的是事情，它可以给我们的工作带来美好的感觉 ，也能让我们陷入自我怀疑的状况 。

当一个交互的优化，带来用户和团队的点赞时，那种感觉太棒了 。

当一个需求很复杂，交互特别难做的时候，就常常让我觉得自己怎么搞不定它，到底要怎么办（特别是临近必须要定稿了）。

然后我发还发现，交互这东西和每个人的习惯有一定关系。前些日子我们讨论一个很简单的表格数据呈现交互，就分成了两派，一派喜欢翻页器，一派喜欢滚动加载。

而对我们来说，这两种交互都很常见，此时，要怎么取舍 ，就不是简单的二选一了，而是我们需要对现有业务场景有深刻地理解。

交互 ，学起来不难，理论和方法现在网上一搜一大把 ，但真正用到产品中，提升产品价值，用户满意度 ，就不简单了。

下篇文章，我想分享下，这些年我做交互的一些实际心得，那些踩过的坑，后来都怎么样了。作为设计师做交互和作为产品经理做交互的区别在哪里
 。

作者：知果日记