TO C和TO B产品需深知的差异化设计理念(三)

作者: a彪哥 | 来源:发表于2021-08-02 10:39 被阅读0次

导语

上一期的文章中，我们较深入的讲述了TO B和TO C产品在产品调研如调研目标、调研对象、调研方法等以及业务设计如设计起点、MVP思路、模块划分等的差异性，以给各位设计人员在处理TO B和TO C产品设计时提供参考。那么，在本期的文章里，我们将继续讲述TO B和TO C产品的交互原则以及在用户体验设计上的差异，希望能继续给大家带来一些启发。

移动互联网产品不管是TO B还是TO C用户体验的本质是不变的，即保持产品的易用/易学性、保持设计的一致性，优秀交互体验等等，要抓住产品的特性，不忘记设计的本质才更能做出优质的产品，在设计上都应遵循尼尔森10大交互原则。

尼尔森的十大交互原则

尼尔森（Jakob Nielsen，人机交互学博士）通过研究分析两百多个可用性问题，提炼出了十项通用型原则，并于1995年1月1日发表，直到现在它依旧是产品设计与用户体验设计的重要参考标准。

1、系统可见性原则（Visibility of system status）

系统应该让用户知道发生了什么，在适当的时间内做出适当的反馈，指的是用户的每次操作，都给他一个反馈，成功了就告诉他成功了，失败了就告诉他失败了。绝不能在用户操作后毫无反应，让用户猜测到底发生了什么，如果长时间没有任何反馈，用户则认为产品存在问题，进而对产品产生抱怨和失去信心。

图1系统对用户操作结果的反馈示意

在适当反馈原则的设计上，案例也很多，比如①、安装程序时显示进度条，并预估还需要多久结束；②、上传文件时显示进度条，并提示预估剩余时间；③、提交表单时，如果校验失败，则在填写有误的内容旁边提示错误原因；④、程序未响应时，系统会让用户选择是关闭程序还是等待程序响应等等。

同时，如果系统处理时间比较长，也需要用“进度条”、“等待动画”或者“下载动画”等形式告诉用户当下的情况。

2、隐喻原则（Match between system and the real world）

系统要采用用户熟悉的语句、短语、符号来表达意思。遵循真实世界的认知、习惯，让信息的呈现更加自然，易于辨识和接受。在人机交互设计中，程序的沟通和表达、功能的呈现，都要用最自然的、用户容易理解的方式，避免采用计算机程序语言的表达方式。设计时要采用符合真实世界认知的方式，让用户通过联想、类比等方法轻松地理解程序想表达的含义。例如，在云音乐播放界面，没有文字描述，只有图形表达，但用户也很容易理解每个按钮的含义。

图2 云音乐播放界面的播放器截图

3、用户的控制性和自由度（User control and freedom）

用户在界面上操作时，会经常因手指过粗、意识转移等等原因而导致操作错误，在这个情况下，需要有一个简单的功能，让界面迅速恢复到之前的状态。那么对于系统而言，应该尽量提供“撤销”、“重做”等类似的功能，这可以有效减少用户焦虑、失落等情绪。

在现实软件设计里，这也原则也普遍应用，比如①、编辑类软件都提供撤销功能，例如Word、AXURE等；②、在点击删除或关闭按钮后，会让用户进行二次确认；③、电商平台允许在一定的规则下取消订单等等措施，实际上都是增加用户的控制性和自由度。

图4 系统的“撤销”操作设计示意

4、一致性和标准化（Consistency and standards）

在同样的情景、环境下，用户进行相同的操作时，UI界面的风格设计、系统的处理结果应该一致、以及用户感受等都应该一致，目的是为了沿用用户习惯，避免因重新学习而产生的不适。在业内，虽然没有明文规定，但大家都在遵守，不要盲目地标新立异。因为用户重新学习的成本是巨大的，甚至因为这个原因而我们被淘汰。

比如一个返回按钮，在同一个app内，不同页面不一样，达不到用户体验上一致性。

图5 APP内返回按钮设计样式

5、防错原则（Error prevention）

是指通过系统的设计、重组或特别安排，防止用户出错；并且在出错时，系统应提供纠错和修改的功能。意思是，我们在进行设计时，同时需要模拟用户可能出现的错误做操，并对这些操作进行规避和预防，其次再考虑当错误发生时，该如何检查、校验异常。这样做一方面可以让问题更简单，另一方面可以让用户避免或减少无谓操作，从而提升了体验。

例如，获取验证手机验证码按钮，点击发送后，一般会倒计时，一段时间之后才能发，因为验证发送需要运营商响应时间，防止用户以为没有收到验证码，一直点击触发发送。

图6 用户登录界面验证码再次触发时间示意

再比如，对于一些删除等重要的操作，为了防止用户顺手误点，可以进行二次确认，并且删除是慎重操作，用红色标识，提醒用户，不要误删！

图7 删除操作的二次确认弹窗

6、识别比记忆好（易取原则）（Recognition rather than recall ）

系统在进行界面切换或用户进入相关新的界面时，系统需要将相关的重要信息重新展示出来，减轻用户的记忆负担和焦虑。例如，微信小程序会保留的用户最近使用过的小程序。

图8 微信小程序入口界面截图

再例如，在所有的电商购物流程中，在用户提交订单后，都会出现一个核对页面，让用户再次核对填写是否正确。

图9 订单交易确认界面截图

7、灵活高效原则（Flexibility and efficiency of use）

系统应为大多数人设计，同时兼顾少数人的需求，做到灵活易用。灵活易用原则不仅是一个交互设计原则，也代表了一种软件产品设计理念：系统既要做得简单、易用，让所有人用户用起来得心应手。例如：中燃crm移动APP，首页常用微应用，可以根据用户使用习惯自行编辑修改。

图10应用及编辑界面截图

8、优美且简约原则（Aesthetic and minimalist design）

对话中不应该除本次想表达的核心内容外的信息，重点太多，会导致没有重点；同时，采用增加或强化一些信息就意味着会弱化另一些信息。所以在视觉设计中，要掌握好“突出标记”的度，以及内容的呈现方式。例如，所示是一份停机通知示例，左图只突出了停机这件事和停机时间，右图突出标记了更多内容，但是用户反而无法一下子抓住真正的重点。

图11 停机通知文案示例

再例如网易云音乐及QQ音乐播放页面，特别是QQ音乐的设计，在音乐的播放界面，可以说除了播放相关的功能做了突出外，其他都以较弱的视觉呈现着。这恰恰可以突出界面的核心内容，同时兼顾了功能主次分明、美观简约，如下图：

图12 网易云音乐和QQ音乐的播放界面截图

9、容错原则（Help users recognize， diagnose， and recover from errors）

当用户操作APP出现错误的时候，要提示给予提示和解决建议，并通过简洁明了的语言表达出来。那么，这其实就要求产品经理提前对用户各自错误操作事先做一个预判并做相应的校验逻辑，并实时检测用户当下的行为。当用户出现错误时，系统就可做到及时提示，并给予相应的解决方案来引导用户。如果无法帮助用户从错误中恢复，也要尽量提供帮助，把损失降到最低。例如，在一些表单填写时往往会做校验，如手机号、身份证号输入时的自动检查，当出错时也会提示异常。

图13 系统自动检查用户输入的示意

10、人性化帮助原则（Help and documentation）

即使系统是不需要使用帮助文档是最好的，但我们也应该提供一份帮助文档，以防用户遇到真正问题时没有渠道寻求帮助，在京东、淘宝、微博等各大APP都存在类似的设计。而且，在入口设计上，需要提供进入帮助文档的快速入口或者检索框；再文档内容的设计上，要以以用户的任务为核心，列出相应的步骤，避免因太多文字而增加用户的阅读成本。

图14 淘宝等APP的帮助入口设计

虽然TO B和TO C产品在交互设计上，都尽量遵循尼尔森的十大交互原则，但在具体的设计落地上，还会因两者产品的本质差异带来的一些思维的、细节的差异，体现在用户体验需求差异以及用户体验设计差异上。

用户体验需求差异

体验需求差异

TO B产品，用户需要的是解决业务问题、提高效率，交互体验并不是最在意的，而且复杂的界面和交互设计会增加研发的工作量,只需要满足用户集中精力完成具体工作事项、不被打扰地进行严谨的流程操作，所以在视觉体验上多是保持干净简单的简洁风，不需要花哨的前端界面，也不需要充满创意的控件。很多产品新人喜欢在界面设计或交互设计上做太多的创新，实际上大可不必，因为B端客户更在意的是功能本身是否能解决业务痛点。