交互设计在后台系统中的应用

“后台重逻辑，前台重体验”。这套说法在互联网算是广泛流传的一种认知，笔者最近又反复重读了一些视觉/交互设计和产品相关的书籍，同时结合自己的工作经验，认为大道至简，万流归宗；后台一样可以看交互，前台一样可以看逻辑，前后台的产品设计在底层上归属一致，只不过侧重点不同；

而今天，笔者想在本篇中总结一下笔者认为后台产品经理所必须熟知的一些交互设计上的原则性的知识，以及对应知识的在后台系统中的应用案例，方便大家未来在工作中可以快速应用和设计后台产品（前台产品沿用其实也是可以的，逻辑是一致的）。

一、交互设计方法

为什么第一段要先开始讲交互设计的方法论，是因为这是框架性的思考方法，相比起后续介绍的交互原则，介绍框架性理论会让我们能更多时候站在全局的角度去思考如何把交互做好。如果单单只是依赖原则类知识，失去大局观，很容易在设计中迷失自我，最终你的用户会用脚给你的产品投票。因而最好一开始的时候便能从设计思维方法上去看交互，指导完整的设计流程。

1、UCD设计法

User-centered Design，直译过来就是以用户为中心的设计，相对于ACD(Activity-centered Design)，UCD设计方法更加关注用户体验与用户长期目标，而非侧重在完成用户当前要完成的特定任务。

理想情况下，设计人员在UCD的应用中应该持续寻求用户的参与，用户可以看做是产品的共同创造者。因而在互联网产品的不断迭代中，产品经理应该思考如何尽量打开与用户沟通产品改良的交流通道（用户反馈，核心种子用户群体等），确保不断获取来自用户的信息。在UCD当中目标非常重要，产品经理应该关注用户最终想完成什么，特别是用户的长期目标。产品设计过程中，产品经理需要重点思考让自己对产品的偏好转向用户的需求和目标。

在最佳或者说至少是最彻底的UCD方法中，我们应该考虑在项目的每个阶段都引入用户。会在项目开始时咨询用户（或者潜在用户）拟议中的项目是否符合用户需求。开展全面研究以明确当前情况下的用户需求。然后产品经理开始构思，用户被引入以帮助产生概念。

2、ACD设计法

Activity-centered Design，以活动为中心的设计，以用户任务流程为基本设计依据，相对于UCD更加关注用户目前使用产品的核心任务，以达到用户所想要完成的活动为基本终结点；ACD不关注用户目标和偏好，而主要针对围绕特定任务的行为。ACD在梳理流程和功能上极为明确，也更加易于设计师掌握。

今天我们用到的很多现实生活中的产品起始都来自于以活动为中心的设计，特别是一些功能性工具例如家电和汽车。可以思考一下，大提琴肯定是通过活动为中心的设计产生的，UCD设计会认为它太难而无法学习。因而在对UCD和ACD的甄别上，关注点应该是用户体验二字，UCD会更多时候考虑用户的使用体验，而ACD更多时候会关注用户是否能够完成特定的活动。

在互联网产品的设计中，后台系统可以说更多时候会偏重ACD的设计思考方法，大量的后台系统功能是为了帮助业务部门完成业务指标而制作的，前期很多时候功能流程的实现以完成业务任务为侧重，因而功能上线的同时可能出现较多的系统培训与讲解。而互联网前端产品，则会更加偏重UCD的思考方法，产品经理没有那么多的机会去培训用户，用户也没有那么多时间耐心听讲，因而整体的设计思路必须尽量顺从用户自然而然的思维习惯，制造优良的使用体验。

3、系统设计 (混合)

系统设计方法在概念上相对于UCD和ACD并不是一个层级上的概念，更具独立性，之所以拆出来讲，是因为系统设计很多时候更像是UCD和ACD的结合，而系统设计能完成更加复杂的整体的系统制作，面对的用户也很可能是多元的多群体的，因而需要在不同用户群体之间权衡用户体验，权衡用户操作流程和目标、任务 (想想互联网外卖平台比如饿了么、美团外卖，要同时权衡用户、骑手、商家的体验、目标和任务)，是需要一种较好的能将UCD和ACD结合运用，同时又能覆盖复杂规划的设计方法来完成整体的设计任务的，而此时系统设计就能很好地满足。

另外值得一提的是，其实还有一类所谓的天才设计法，正如乔布斯级别的设计思维可能会忽略很多倾听市场声音的方法而自行创造产品。这类设计方法其实也可以单独归类，但是知识体系较深，笔者尚在研究中，不便解构大神，因而本篇不做阐述。

二、交互设计原则

网络上已经有较多的交互设计法则类文章（例如尼尔森十原则），对各类交互设计的原则也做了较为全面的陈列，本篇的意图主要为对这些交互设计原则进行挑选和重组，总结出笔者认为的6大使用频度较高的交互设计原则，且尽量配套了示意图案例，或者延伸阅读，方便各位产品经理在工作实战中能够信手拈来，牢记于心。

不过同时也希望各位产品人能够对这些原则多多举一反三，在实际工作中的其他设计场景中进行运用。

1、操作经济性原则（少做原则）

－所谓操作的经济性，顾名思义，就是说用户操作时，产品应该为用户提供最方便的一个操作路径；在很多产品设计的场景当中，可以很好地帮助产品经理解决布局设置，例如”这个按钮应该放在哪里呢”此类命题。

比如笔者在做后台产品设计的时光里，就会遇到后台系统Web页面，搜索框下方的搜索按钮应该放在哪里的问题；试想用户在点击“搜索”之前，往往大概率是在做完筛选项的操作之后，此时的鼠标位置，往往在筛选选项一带，搜索按钮的最佳位置，应该是贴近最后一项筛选选项的，这样能够做到最大概率地贴近用户的鼠标位置，优化用户鼠标的移动路径长度，缩小操作时长，降低用户操作负担。

图示：

搜索按钮位置示意

2、【反馈&前馈原则】

【反馈】：

操作反馈，相信这一个知识点，很多产品经理在早期就有积累，甚至在很多日常App的使用或者竞品调研的观察中就能意识到凡是操作，必有反馈；无论反馈的类型、性质是什么，以及反馈所在的流程节点。

这一类例子可以说是不甚枚举，比如一个提交表单的操作，基础的反馈类型应该划分为<提交中>、<提交成功>和<提交失败>，在这3类类型之后，延伸出来的分支反馈流程，产品经理亦可以在文案中展示出来，例如提交失败可以提供提交失败的原因。

图示：

反馈：提交成功

另外，在操作提交的<提交中>状态里，很多时候我们可以给到一个类似进度条的视觉展示，类似于<进度反馈>，而至于进度条所展示出的百分比的真实性，可以依产品的实际情况而定；

至于为什么这么做，大家需要清楚一项研究结论，就是人类对于系统操作反馈所消耗的时间的不同，会有不同的操作决策。而3个经典的参数是0.1s、1s和10s。

<反馈及时 Immediate>:

0.1秒以内 - 当一个操作反馈在0.1s以内的时候，人类大脑是会认为这是一个及时的操作反馈，不会感知到所谓的延迟

<反馈延迟 Stammer>:

0.1-1s之间 - 用户会注意到延迟，但是如果此类延迟并不频繁，会很快被用户忽略。而频繁的出现则会让产品展现出一种迟钝特性，时间一长就会给用户带来巨大的沮丧感和糟糕的使用体验。

<反馈中断 Interruption>:

1s-10s之间 - 当一个操作反馈在1s之后的时候，人类大脑会认为这是一个进入中断的操作，如果反馈形式和内容表达不到位，可能会造成较为糟糕的用户体验，以及错误的用户后续决策。

<反馈异常终止 Disruption>:

10s之后 - 反馈超过了10s之后，人类大脑以为该流程已经彻底中断，会开始思考如何主动地对任务进行干预。

因而无论是反馈及时、反馈延迟、反馈中断亦或是反馈异常终止，系统如果能对操作用户进行当前任务状态的持续反馈，会大大提升用户使用体验，同时帮助用户保持使用产品期间的正确决策。

尤其是对于一些处理时长相对来说要长一些的操作任务（例如文件上传），此时一个基本的反馈设计就是进度条实时反馈。相比只是一段简单的文案描述<上传中......>，进度条能给到用户更多的决策信息（包括进度百分比等等），也会降低等待且不知当前状态的焦虑。

图示：

持续反馈案例（经典案例就是进度条）

【前馈】：

既然有反馈，那么自然也有前馈这一环，将问题掐断在产生之前，防患未然。前馈设计相对于反馈设计，会需要设计师对于流程有更深入的理解和感知。而前馈的基本准则，就是将原本在反馈一环展示出来的信息，部署到用户开始操作之前，达到对用户心理预期的控制目的。用户在有了心理预设之后，对应地做出设计师预期之内的操作流程，则可以认为很好地完成了前馈设计。

一个前馈案例就是用户注册流程中的Placeholder提示文案。用户在你的网站上注册账号时，为了防止用户自行设定的密码与你的密码规则不符，导致用户反复输入新的设定密码被报错，你可以在Placeholder当中展示出限定的密码规则 (例如图示的请输入6-20个字符的密码的英文提示Please enter password of 6-20 digits)，将规则信息前置，用户可以一次性输入完成，加速注册流程。

图示：

注册/登录页的placeholder前馈式设计Demo

3、【简洁原则】

保持产品的简洁何其之难。想象一下淘宝、京东、拼多多，电商的所要展示的内容含量如此之大，要在一个App当中一屏全部展示，那么这一屏会变得极其恐怖而难于操作。因而以简洁的原则去控制一整套App的组织梳理，就显得十分重要。而所谓的简洁原则背后，其实需要一整套的组织理论来控制，简而言之，有业内著名的四大法则（有时间的同学，推荐阅读《简约至上：交互式设计四策略》）帮助归纳，即:

<组织>:

将UI元素重新排列组合进井井有条的一个状态，视觉上让用户觉得足够的干净，有条理，容易理解而又容易定位。

一些基本遵循原则包含分块组合、围绕用户操作流程和行为进行前后组织、利用字母表或时间或空间作为依据进行排列、分层组合、利用色标进行区分。

<隐藏>:

将用户使用频度相对较少的功能隐藏收纳进特定的视觉区域。例如饿了么App的登录密码的设置，就被收纳在我的->设置->账户与安全->登陆密码当中。

<删除>:

将不必要的功能直接进行删除，给产品做减法。这一项非常的考验产品人的设计功力。

删除功能以保持产品的简洁，不是让你不做功能，而是让你关注功能的深度，而不是功能的广度。实现得不理想的功能，可以考虑着手删除。同时也要避免错删功能。

<转移>:

功能转移，将功能交给其他载体或者第三方来实现。

大家可以想想看当初iphone的设计，手机键盘就是一个很好的转移处理。iphone将实体键盘直接删除，最大化了屏幕的展示占比，只有在用户需要的时候，通过软件键盘的形式，来将键盘露出。再到后续的iphone X的设计，则直接将Home按键也以同样逻辑转移给到了手势载体上，将屏幕做了进一步的展示优化。

本原则有一定内容深度，笔者还是推荐各位阅读上边推荐的内容源书籍（《简约至上：交互式设计四策略》），进行延伸阅读，方便深入理解本块内容，这里就不做额外的阐述了。

4、【错误容防】

人非圣贤，孰能无过。而你作为产品经理，一定要预设你的用户在操作流程当中会因为各种原因犯下操作错误，而对错误的处理，基本可以分为两种，一种是前置处理，即预防，是为防错；另一种就是后置处理，错误已犯下之后的反馈、补救和撤销，即容错。所以会有这样一个标题，即错误容防，错误的容与防。

<防错>:

防错概念与反馈前置概念比较接近，可以说是反馈前置概念中的一种分支类型。依然引用注册/登录环节的案例，但是我们变换一下设计细节（请大家务必注意设计没有死的方案，只有灵活多变不断升级改造的更优方案），当用户在你的网站上注册账号时，为了预防用户自行设定的密码与你的密码规则不符，用户聚焦输入时你可以在输入框右侧利用箭头文案框展示出密码规则 (至少有8位字符，需要含有数字等等)，将规则前置，用户可以一次性输入完成，避免反馈报错，加速注册流程 (登陆流程不建议展示，从安全性方面考虑)。

防错设计，Facebook的注册便采用这种类似提示方法

<容错>:

而容错概念，则是经典的一个反馈流程。关键仍然在于产品经理在梳理用户的操作流程时，对于各大分支流程的深入思考，用户什么样的操作会发生什么，如何反馈用户。反馈之后，用户是否可以修改，撤销。

笔者做后台系统产品的时候，有碰到的一种情况是后台系统编辑和发送到前端用户的全平台通告的消息或者点对点推出的定制消息，会有出现业务部门希望可以将消息撤回的需求，而且这种情况发生不止一次。

无论实际案例的情况是怎么样的，大家需要知道的是凡是人都有犯错的时候，因而流程需要考虑容错。那么无论是领导高层出现决策失误，需要将通知撤回或者予以修改(中小公司当中出现这类情况可能多一些，大公司的决策流程会让决策更加小心一些)，亦或是业务部门的小范围的定制化通知出现撤回或者修改的需求，产品经理都要对这类情况有充分的准备。产品设计的初期就应该考虑到这方面的保障。例如通知消息的前端展示上与后台编辑连通，允许后台实时编辑内容，也增加删除按钮可以撤销消息。

增加删除按钮可以撤销消息

5、【统一原则】

统一原则可以具体划分为对内统一和对外统一。

<外统一>是一种关联性原则，主要内容为尽量依照用户的已有认知方式和操作习惯沿用已有设计，这样会消除用户的需要重新认知和学习操作的负担。

一个比较经典的应用就是后台系统的布局了，基本上全行业都在沿用着较为统一或者类似的布局设计，即左边放置菜单导航样，右边上部为页面的搜索选项区域，在边下部为页面的表格区域。而大量的从业人员在心智层面也早已习惯此样布局，因而后台产品经理在对系统进行设计的时候，可以直接沿用这样的布局设计，无论你的用户来自于哪家互联网公司，对于用户来说这都是能最快进行认知和操作的。

图示1：

后台系统常见布局，左菜单，右顶搜索区域，右下表格区域，右底页码条

<内统一>指的是系统产品自身不同页面之间的展示和操作上的一致性，底层的思想其实是与以上一致，沿用用户在本产品内的已有的认知方式和操作习惯。

也就是说，比如你在一个大系统之内，一个功能性页面设计了单选选项超过7个就收纳成下拉式菜单，那么在另外一个功能性页面遇到同样的问题，应该就沿用同样的设计，而不是将来10个单选选项全部平铺，除非有特殊的考虑。

这里值得一提的是，很多时候对于后台系统的设计，控件套件方面可以选择外部第三方供应(例如element等等)，可以大大加速内统效率，反馈消息的展示方式等等可以较好地保持全系统的一致。本处就不加截图示例以避免广告嫌疑，大家可以自行百度搜索上边提到的例子，前往网站观摩。

6、【对称原则】

对称原则的一个基本理念是从哪里来的就可以回哪里去，即流程的对称。用户可以完成这个操作，那么他也有对应的流程可以回退/撤销这个操作。

比如用户在打开一个后台的编辑弹出层之后，必然有一个取消键或者右上X键便于用户退出当前弹出层，回到原来的页面。

再打个比方，在标签系统内，在打入标签保存之后，重新编辑，可以看见一个叉叉标识，用于撤销此个标签（如下图所示）。

图示：

视频标签行，所有输入的标签都可以快捷按X删除

结语：

希望大家在阅读了本篇分享之后，能够有所收获并在工作实战中运用到相关的知识。另外，交互相关的原则可以做更多的分类扩展和细化，案例量其实也是非常大的，建议是大家尽量要不断扩展这方面的知识，来方便对自己的设计感觉进行不断打磨和熟练，将书面上的知识进行内化，才能称得上是真正的掌握。