工具型产品的设计感想

什么是工具型产品？

工作的这段时间以来，我主要参与了一些电子商务类产品的交互设计，我发现这类产品的设计思路和门户、频道等产品有较大的差异，它们更关注于完成任务及操作，而非内容的分类与展示。之前我通常称这类产品为功能型产品。在去年广州举行的交互设计体验日上，通过和其他交互设计师交流，发现在业内这类产品似乎也没有一个固定的称谓，有的交互设计师称之为“工具型产品”，我觉得倒也很贴切。

为什么要单独定义它？

如果看过《用户体验的要素》，大家一定记得其中讲到的有关用户体验的五个层级。根据产品战略的不同，需要设计师采用不同的设计思维。下图左边代表的是工具型产品（比如电子商务类产品的支付部分），右边代表的是内容型产品（比如门户、部分频道等）。从图中可以看出，左右两边在不同的层级上有明显的差异。

工具型产品与内容型产品的区别

工具型产品关注的是任务——所有的操作都被纳入一个过程，去思考人们如何完成这个过程。在这里，我们把网站看成用户用于完成一个或多个任务的一个或一组工具。

内容型产品关注的是信息——网站应该提供哪些信息，这些信息对用户的意义是什么。在这里，我们把网站看成一个“用户可以穿越的信息空间”。

工具型产品的设计师把每一个问题看成是“应用软件”的设计问题，然后从传统的桌面和客户端软件的角度来考虑解决方案。

内容型产品的设计师以信息的发布和检索的角度来看待网站，然后从传统出版、媒体和信息技术的角度来考虑问题的解决方案。

在五个层级上的区别：

结构层的区别示意图：

表现层的区别示意图：

——————————————————————————————————————————

到底什么是交互设计？

关于这个问题的答案，我想很多专业的交互设计师也未必能说的很清楚。

从《用户体验的要素》上，可以找到“交互设计”所处的位置。这是从客观的角度来定义“交互设计”的概念。

如图所示，工具型产品的结构层即为“交互设计”，这一部分的产出物主要为任务流程图。然而实际上并不存在绝对的工具型产品或是绝对的内容型产品，在每一个层面中，这些要素必须相互作用才能完成该层面的目标。因此也可认为一般产品的结构层为“交互设计”。那么“交互设计”可理解为：主要通过功能规格（业务逻辑）设计任务流程，最后制作出页面原型的过程。

在网上找到了其他比较受认同的解释，这是从交互设计积累的经验得到的：帮助用户高效的完成产品所设想的任务，同时在这个过程中，能让用户感觉到愉悦和不受打扰。但是，到底如何才能高效的完成产品所设想的任务？如何才能让用户感觉到愉悦和不受打扰？如何去衡量和评判？却不好界定。

把这两者相结合，可得到一个更具体的关于交互设计的定义：所谓交互设计，就是通过分析用户心理模型、设计任务流程、运用交互知识，把业务逻辑以用户能理解的方式表达给用户，最终实现产品战略（公司需求和用户需求的最佳平衡点）的过程。

交互设计的四要素

从新的定义中可提炼出交互设计的几点要素：

•业务逻辑是考虑一切问题的关键点。要想做出好的设计，不管在任何一个层面上都不能忽略业务逻辑。

•在业务逻辑正确的基础上，只要任务流程设计的正确，一般来说产品就是可用的；忽视了任务流程的设计（尤其是大型产品），产品将是不可用的。

•分析心理模型对于理解业务逻辑、优化任务流程、提升用户体验都有重要的作用。

•熟悉交互规范可以避免在框架层出现错误

业务逻辑、任务流程、心理模型、交互规范在设计的不同阶段中都起着重要作用。这就意味着对于一个交互设计师来说，只懂交互知识对于做好一个产品的设计是远远不够的。

交互设计四要素的运用

例1：网易宝支付流程

当余额不足时，就会在余额下面再次出现其他付款方式的选项，以补足余额。

1.业务逻辑：除余额可以和其他方式组合外，其余tab下的支付方式是各自独立的。但在第一层tab上，所有的支付方式都是并列的，这显然和业务逻辑不完全对应。

2.心理模型：如果把这个比做用户的钱包，那么用户的钱包里绝对不会出现除余额外其他付款方式的“重影”。

3.任务流程：没发现大问题（所以对用户来说依然是可用的）。

4.交互规范：每个tab下应该都是不同的内容，但目前有大量重复。

综上就能判断出网易宝的支付页面确实有很大问题（也许对用户影响不大，但代码负担重、拓展性差）。再用这四要素去判断支付宝的设计，就会发现好了很多（但也不是没问题）。

例2：支付宝默认勾选余额

当余额不足时，用户会使用余额吗？（和用户心理有关）

心理模型：余额可比作现实生活中的现金，当现金不足时，大部分人会选择通过银行卡等方式支付，而不会选择全部现金加银行卡的方式。所以大部分用户在余额不足时，不会选择使用余额支付。

例3：支付宝红包

1.业务逻辑：红包的支付优先级高于余额，正如同余额的支付优先级高于网银一样。但从界面上看，红包和余额的关系比余额和网银的关系要密切很多。

2.心理模型：和现实生活类比，红包好比优惠券，余额好比现金。那么如果让用户把优惠券、现金和网银支付做个分类的话，很显然现金和银行卡是一类，优惠券是另一类。所以这里把红包和余额放在一起是不符合用户心理模型的，余额和网银的关系反而应该更近一些。

3.任务流程：无大问题（对用户来说可用）

4.交互规范：同一个界面上出现两个同等分量的提交按钮不妥；在该页面上，“下一步”表示的是对于红包和网银信息的提交，所以应该在最外面，而不是从属于网银的区域内。

——————————————————————————————————————————

总结：

设计一个产品就像盖房子一样，要在战略层的基础上一级一级向上垒。对于设计师来说，不管是设计什么类型的产品，不仅要对产品整体有大概的认识，还要特别熟悉下一层级的内容，才能做出符合产品要求的设计。每一个层级的负责人都有权利和义务对上一个层级的不合理之处提出意见和建议。

根据产品的战略不同，可以在理论上将产品分为工具型产品和内容型产品，设计时需要采取不同的思维和方法。但产品多有交叉，也需要综合考虑。

交互设计，就是通过分析用户心理模型、设计任务流程、运用交互知识，把业务逻辑以用户能理解的方式表达给用户，最终实现产品战略（公司需求和用户需求的最佳平衡点）的过程。

业务逻辑、心理模型、任务流程、交互规范是交互设计的四要素，可以通过这四要素快速找出设计中的问题所在。

——————————————————————————————————————————

由于篇幅所限，不得不在原文基础上做了大量删减。如感兴趣请在服务器中查看《工具型产品的设计感想》ppt。