产品经理与交互设计师的对话：需求是如何变成产品原型的.pdfVIP

产品经理与交互设计师的对话 ：需求是如何变成产品原型的 在一个互联网公司的工 流程中 ，产品经理 （主要指偏向产品设计的产品人员 ）和交互设计师是这 个流水线上最起点的环节 ，也是关系最暧昧的两个环节。说其暧昧 ，是因为在很多互联网公司里面 ，这两个环节所做的事情是有重合的 ，这就意味着 ，他们或许也是整个流程中合 最紧密的两个 环节。 相对比之下 ，产品经理更关注的是产品的内部逻辑、操 流程、策略等 ；而交互设计师更关注的是 产品的易用性、流畅度和操 感受。总的来看 ，似乎可以认 为 ，产品经理是从一个更加宏观的角度 去设计产品 ，而交互设计师 ，则是从更多的细节出发 ，去提升用户体验。这两种不同的视角决定了 只有产品经理和交互设计师 密切配合 ，深入沟通 ，才能够最高效最合理的将产品策略转化为产品 原型 ，从而为流水线的后面环节提供精确的参考资料。 下面以人人网广告平台的一些产品和交互细节为例 ，使用对话的形式来分享一下我个人在做交互设 计过程中的一些体会和想法。入门级文章 ，高手请绕行。 在广告平台其中一个投放系统中 ，有一个产品需求 ，是要根据广告受众所在的地区做广告的定向 投放。也就是说 ，可以控制广告只展示给固定地域的受众。这就意味着 ，需要设计一个 「区域选 择器」 ，供用户选择区域。产品经理的原始需求是这样的 ： 产品经理 ：“我们这次的投放系统需要设计一个区域选择器 ，就是让用户选择广告定向投放的区域的 。可以精确到城市 ，可以多选。另外 ，‘区域’ 为一个投放广告的限制条件 ，如果用户没有选择任何 选项 ，那就代表用户忽略该条件 ，则该广告会面向全国投放。” 交互设计师 ：“哦。” 产品经理 ：“嗯 ，我能够想到的这个东西的原型 ，可以提供两个下拉框 ，让用户分别选择省和城市。 当用户在第一个下拉框里面选定了省以后 ，第二个下拉框中会显示该省下面的地级市。我做了一个 简单的框图 ，大家看一下。” adi1 产品经理 ：“大概就是这个样子。每选定一个城市 ，点击后面的添加按钮 ，可以将该城市添加到下面 的列表中。同时 ，如果点击已经添加的城市名称后面的 「删除」链接 ，则会将该城市从已选列表 抹去。” 交互设计师 ：“等一下 ，我有一个问题。按照产品的策略 ，如果用户一个城市都不选 ，那么就会默认 投放全国。但是这个概念很难表达给用户 ，比如说 ，如果在 「区域选择器」旁边放提示 ，估计没有 多少人会注意到。” 产品经理 ：“一个都没选 ，就是等于忽略条件啊。因为这些都是限制条件。” 交互设计师 ：“问题是用户很难意识到是这样。在中国人的观念中 ，大家都是觉得 ，选上的 ，是我 要的。但是大家没有 「不选就等于全要」这种思维习惯。” 交互设计师 ：“我觉得可以这样。我们在现在的 「区域选择器」上面放两 个单选按钮。一个叫 「 全国」 ，另一个叫做 「指定」。打开页面时 ，默认选中 「全国」项 ，并隐藏 「区域选择器」。只有 用户选择 「指定」项时 ，区域选择器才会出 现。这样表达就很明确了 ，你不是 「全国」就是 「 指定」。” 产品经理 ：“哦~听起来不错。试试。” 于是得到了下面这个版本的原型图 ： 交互设计师 ：“嗯 ，我想 ，现在这个版本已经基本上从界面的层面解决了全国投放的选项问题 ，我想 ，用户应该不会因为不知道怎么选而卡在这里了。” 交互设计师 ：“我看下一步 ，需要对一些关键的元素做一定的视觉设计 ，以便于引导用户操 。比 如 「添加」按钮 ，应该更明显些。我觉得可以请UI设计师出一个简单版本的UI了。” 产品经理 ：“稍等一下 ，我看咱们还是把细节再讨论清楚一些再去找UI吧。比如 ，字的颜色啊什么的 都没定呢。而且 ，我觉得选中的区域中 ，每个城市名称后面都跟着一个删除链接 ，很奇怪。” 交互设计师 ：“嗯。的确。我的想法是这样 ，字的颜色 ，就用黑色吧 ，或 者是深一些的灰色也行。 虽然从视觉设计的角度来看 ，视觉设计师觉得稍浅一些的灰色比较养眼 ，可能黑色太‘抢’。但是咱们 的系统毕竟是给人用的 ，灰色的话 ， 可能会让人误认为这些选项是不可操 的。你看如何 ？” 产品经理 ：“同意。” 交互设计师 ：“关于已经选中的区域列表。我看可以把 「删除」链接换成× ，事实上 ，用户对于×这种 符号比汉字更敏感。你看 ，大家不论是用W indows还是 Mac ，关闭窗口的时候都是× ，早就习惯了 。另外 ，为了让所选定的城市名称看起来是一个整体 ，并且跟其他城市名称区分开。我看 ，可以给 每一个城市加上背景 色 ，每个城市一个色块 ，这样也一目了然。” 产