产品经理与交互设计师的对话——需求是如何变成产品原型的
在一个互联网公司的工作流程中,产品经理(主要指偏向产品设计的产品人员)和交互设计师是这个流水线上最起点的环节,也是关系最暧昧的两个环节。说其暧昧,是因为在很多互联网公司里面,这两个环节所做的事情是有重合的,这就意味着,他们或许也是整个流程中合作最紧密的两个环节。
相对比之下,产品经理更关注的是产品的内部逻辑、操作流程、策略等;而交互设计师更关注的是产品的易用性、流畅度和操作感受。总的来看,似乎可以认为,产品经理是从一个更加宏观的角度去设计产品,而交互设计师,则是从更多的细节出发,去提升用户体验。这两种不同的视角决定了只有产品经理和交互设计师密切配合,深入沟通,才能够最高效最合理的将产品策略转化为产品原型,从而为流水线的后面环节提供精确的参考资料。
下面以人人网广告平台的一些产品和交互细节为例,使用对话的形式来分享一下我个人在做交互设计过程中的一些体会和想法。
在广告平台其中一个投放系统中,有一个产品需求,是要根据用户所在的地区做广告的定向投放。也就是说,可以控制广告只展示给固定地域的用户。这就意味着,需要设计一个「区域选择器」,供用户选择区域。产品经理的原始需求是这样的:
产品经理:“我们这次的投放系统需要设计一个区域选择器,就是让用户选择广告定向投放的区域的。可以精确到城市,可以多选。另外,区域作为一个投放广告的限制条件,如果用户没有选择任何选项,那就代表用户忽略该条件,则该广告会面向全国投放。”
交互设计师:“哦。”
产品经理:“嗯,我能够想到的这个东西的原型,可以提供两个下拉框,让用户分别选择省和城市。当用户在第一个下拉框里面选定了省以后,第二个下拉框中会显示该省下面的地级市。我做了一个简单的框图,大家看一下。”

在一个互联网公司的工作流程中,产品经理(主要指偏向产品设计的产品人员)和交互设计师是这个流水线上最起点的环节,也是关系最暧昧的两个环节。说其暧昧,是因为在很多互联网公司里面,这两个环节所做的事情是有重合的,这就意味着,他们或许也是整个流程中合作最紧密的两个环节。

相对比之下,产品经理更关注的是产品的内部逻辑、操作流程、策略等;而交互设计师更关注的是产品的易用性、流畅度和操作感受。总的来看,似乎可以认为,产品经理是从一个更加宏观的角度去设计产品,而交互设计师,则是从更多的细节出发,去提升用户体验。这两种不同的视角决定了只有产品经理和交互设计师密切配合,深入沟通,才能够最高效最合理的将产品策略转化为产品原型,从而为流水线的后面环节提供精确的参考资料。

下面以人人网广告平台的一些产品和交互细节为例,使用对话的形式来分享一下我个人在做交互设计过程中的一些体会和想法。入门级文章,高手请绕行。

在广告平台其中一个投放系统中,有一个产品需求,是要根据用户所在的地区做广告的定向投放。也就是说,可以控制广告只展示给固定地域的用户。这就意味着,需要设计一个「区域选择器」,供用户选择区域。产品经理的原始需求是这样的:

产品经理:“我们这次的投放系统需要设计一个区域选择器,就是让用户选择广告定向投放的区域的。可以精确到城市,可以多选。另外,区域作为一个投放广告的限制条件,如果用户没有选择任何选项,那就代表用户忽略该条件,则该广告会面向全国投放。”

交互设计师:“哦。”

产品经理:“嗯,我能够想到的这个东西的原型,可以提供两个下拉框,让用户分别选择省和城市。当用户在第一个下拉框里面选定了省以后,第二个下拉框中会显示该省下面的地级市。我做了一个简单的框图,大家看一下。”

产品经理:“大概就是这个样子。每选定一个城市,点击后面的添加按钮,可以将该城市添加到下面的列表中。同时,如果点击已经添加的城市名称后面的「删除」链接,则会将该城市从已选列表抹去。”

交互设计师:“等一下,我有一个问题。按照产品的策略,如果用户一个城市都不选,那么就会默认投放全国。但是这个概念很难表达给用户,比如说,如果在「区域选择器」旁边放提示,估计没有多少人会注意到。”

产品经理:“一个都没选,就是等于忽略条件啊。因为这些都是限制条件。”

交互设计师:“问题是用户很难意识到是这样。在中国人的观念中,大家都是觉得,选上的,是我要的。但是大家没有「不选就等于全要」这种思维习惯。”

交互设计师:“我觉得可以这样。我们在现在的「区域选择器」上面放两个单选按钮。一个叫「全国」,另一个叫做「指定」。打开页面时,默认选中「全国」项,并隐藏「区域选择器」。只有用户选择「指定」项时,区域选择器才会出现。这样表达就很明确了,你不是「全国」就是「指定」。”

产品经理:“哦~听起来不错。试试。”

于是得到了下面这个版本的原型图:

交互设计师:“嗯,我想,现在这个版本已经基本上从界面的层面解决了全国投放的选项问题,我想,用户应该不会因为不知道怎么选而卡在这里了。”

交互设计师:“我看下一步,需要对一些关键的元素做一定的视觉设计,以便于引导用户操作。比如「添加」按钮,应该更明显些。我觉得可以请UI设计师出一个简单版本的UI了。”

产品经理:“稍等一下,我看咱们还是把细节再讨论清楚一些再去找UI吧。比如,字的颜色啊什么的都没定呢。而且,我觉得选中的区域中,每个城市名称后面都跟着一个删除链接,很奇怪。”

交互设计师:“嗯。的确。我的想法是这样,字的颜色,就用黑色吧,或者是深一些的灰色也行。虽然从视觉设计的角度来看,视觉设计师觉得稍浅一些的灰色比较养眼,可能黑色太‘抢’。但是咱们的系统毕竟是给人用的,灰色的话,可能会让人误认为这些选项是不可操作的。你看如何?”

产品经理:“同意。”

交互设计师:“关于已经选中的区域列表。我看可以把删除链接换成×,事实上,用户对于×这种符号比汉字更敏感。你看,大家不论是用Windows还是Mac,关闭窗口的时候都是×,早就习惯了。另外,为了让所选定的城市名称看起来是一个整体,并且跟其他城市名称区分开。我看,可以给每一个城市加上背景色,每个城市一个色块,这样也一目了然。”

产品经理:“颜色呢?”

交互设计师:“蓝色吧,人人网都是蓝色的风格。”

产品经理:“ok”

于是,配合UI设计师,得到了下面的界面:

产品经理:“我看现在这个地方已经基本上成型了。咱们也已经讨论很很久了。该问问别人的意见。”

———-时间分割线———-

产品经理:“Hi~ 各位。我收集了一些内部测试的意见。有用户提出,搞不太清楚两个下拉菜单和「添加」按钮之间的关系。”

交互设计师:“什么意思?”

产品经理:“就是说,有人意识不到选完了省,选完了城市以后,还得点「添加」。他们觉得,选完了就完事了。”

交互设计师:“晕。”

交互设计师:“可能是已选列表框再空着的时候长得太秀气了,大家没意识到它是用了装东西的。”

交互设计师:“好吧,我有两个方案。1、把「添加」按钮上面加一个向下的箭头。指向已选列表框。2、在已选列表空着的时候,添加一条提示语,来提示用户他并没有完成区域选择操作。”

产品经理:“提示语那个,你的意思是说,当用户添加了城市以后,会自动消失是吧?”

交互设计师:“是的。”

产品经理:“我觉得加提示吧。感觉放箭头有点儿傻。”

交互设计师:“嗯,而且,可能放了箭头以后,用户依然不知所云。”

产品经理:“那提示语怎么说呢?您尚未添加任何区域,请选定城市后,点击上面的「添加」按钮,该城市会被添加到…”

交互设计师:“停!太长了,大部分人不会认真看完的。”

产品经理:“的确…”

交互设计师:“我看就一句话就可以。写‘您尚未添加任何区域。’”

交互设计师:“你看。下拉列表后面的按钮叫「添加」。提示中又明确的传达出了尚未「添加」的状态。这样既说明了这个框框是用来放东西的,又可以告诉用户,这个东西是可以选多个的。因为「添加」的概念就是一个一个往里面放。如果只能放一个,那应该叫「选择」。”

产品经理:“顶。”

交互设计师:“而且,我觉得这个控件最初的原型你设计的不错。嗯,用户只要成功的进行一次操作,以后就可以非常高效的进行操作了。这个东西的学习成本和认知成本都比较低。”

产品经理:“oh,yeah~”

那么,现在的UI是这样的:

产品经理:“哎,对了。话说,我最开始的策略是,用户如果不选,相当于全选,要全国投放的。你说如果用户选了「指定」,但是并没有添加具体的城市,直接提交表单,怎么办?系统是应该直接把用户的广告设置成全国投放,还是报错,阻止用户继续?”

交互设计师:“我看啊,报错吧。因为现在「全国」和「指定」这两项,已经明确的把整体和局部给分开了。我觉得你那个策略没必要再应用了,因为现在这种已经达到了你最初的目的,而且还好理解。再有就是,咱们的平台是涉及到钱的,是要让用户花钱的,如果让用户不明不白花了冤枉钱,本来想投北京的投了全国,那我们会被用户骂死的。虽然感觉上报错会让用户有挫败感,但是在这种细节上,还是用户利益应该放在第一位,用户体验,可以稍微往后放一放了。”

产品经理:“好吧。”

交互设计师:“呵呵,你看,这个故事告诉我们,不能每件事情都听产品的。产品提的只是需求,但是如何实现需求,还是得从多个角度来讨论。”

产品经理:“好吧。那么,技术兄弟们,下面的工作就拜托你们了。”

个人观点:

1、产品经理和交互设计师需要时刻密切配合,深入沟通。

2、有时候,产品策略和用户体验会发生冲突,这时应该从多种角度去考虑和探讨最终决定方案,不应该有谁一定比谁重要的说法。

3、优秀的产品经理,相当于半个交互。同样,优秀的交互设计师,相当于半个产品。二者虽然职位不同,但是应该在一定程度上考虑对方的工作内容。

4、产品提出的只是策略和需求,并不是一定要按照产品人员所描述的细节去设计具体的产品细节。交互设计师以及团队中其他所有成员,有义务有权利对产品需求提出自己的见解和更好的设计方案。有不同意见可以讨论,但是最终决定权,应该依然属于产品经理。

THE END

标签:
评论:
人人网招聘 前端架构师、Javascript开发工程师

前端架构师

工作地点: 北京

性别/年龄:不限

学历:本科及以上

工作职责:

1. 负责网站整体前端框架的设计、搭建
2. 负责前端开发标准、规范的制定
3. 能够深入了解后端架构,为项目提供最优化的技术解决方案
4. 关注性能,能够为全站性能提升、技术运用合理性给出专业指导意见,勤于技术创新
5. 勤于布道

职位要求:

1. 3年以上web开发和前端开发经验,有大型网站的前端架构实践经验
2. 精通各种前端框架,深入了解其开发思想以及应用范围,有独立开发框架经验
3. 至少精通一门web前端脚本语言,有项目经验,熟悉Linux,了解设计模式
4. 善于沟通,乐于分享

JavaScript开发工程师

工作地点: 北京

招聘人数:2人

性别:不限

年龄:22-30

学历:本科及以上

要求:

1. 精通HTML DOM对象的Javascript编程,熟悉对象化Javascript编程
2. 有使用js框架经验,了解不同浏览器之间的差异,写出的代码具有良好的兼容性
3. 掌握XHTML、CSS,对W3C有较深理解
4. 了解web后端开发,熟悉至少一门后端语言
5. 熟练阅读英文技术文档

申请职位请发邮件到:qiang.yan(at)opi-corp.com 抄送 hanyu.liu(at)opi-corp.com

如果你有以上没有提到的任何技能,都是你的优势。如果你觉得自己够强大,够靠谱,够热情,你可以忽略以上描述,直接来和我们面谈。我们注重技术,但更注重人。

评论:
我读大学那会儿原创的段子~

昨天晚上翻硬盘翻出来滴…

纪念大学中的人和事~

1、鄙视舍委会是每一个师大学生的基本义务。

——这个很通俗易懂,不用解释了。舍委会是某师大专门负责查寝室的“学生组织”,擅长装逼以及装逼。这个句式中的“舍委会”可以换成任何被鄙视的学生组织。常用的有“学生会”和“社团联合会”。

2、十年啊… 就算当服务员估计也早就升为大堂经理了吧?

——这是我得知某系某导员的恶行(比如强迫学生买窗帘、办信用卡什么的)后,对其进行讽刺的一段话。这是个神奇的导员,他自从来到某师大,就一直在当导员,一直升不了官。据说已经当了10多年的导员了。名词解释:导员,全称政治辅导员,是大学里面除清洁工和食堂服务人员外最低级别的职位。但由于其对于学生有直接管理权,所以经常会站在学生权益的对立面。

3、这就像是你走在路上遇到了一坨大便,你会选择踩它一下?还是绕着走?

——这句话是用来劝说那些受了学校欺负的同学的,劝他们先忍耐一下。在某师大,经常欺负人的组织和个人主要包括:导员、舍委会、系学生会、公寓阿姨等。
阅读这个条目剩下部分 »

标签:
评论:
新域名启用 henryl.net

由于众所周知的原因,Henry已经决定废弃现有的hplus.org.cn域名。目前新域名 henryl.net 已启用。(Henry Lau,就是我的英文名字缩写) 如果有朋友订阅了blog的话请更改链接。hplus.org.cn这个域名下面的所有内容将停止更新,直到自动废弃(也可能手工废弃,不解析)。从现在起,请大家使用新域名访问~

各位好运~

评论: 2条
人人网FED团队博客正式上线

start2

欢迎各位朋友参观指导,交流经验。

http://fed.renren.com

标签: , ,
评论: 1条
使用GAppProxy建立自己的代理服务器

最近经常需要翻墙去研究国外某些网站的交互设计,但是随着我们科技实力的不断发展,我发现好用的代理服务器越来越少了,甚至一度没有可用的翻墙方法。今天从华大师那里得知世界上存在一种叫做GAppProxy的东西(我之前真的没听过,不要鄙视我…),于是上网翻了一些相关资料,终于成功的跨过了万里长城。

在跨越之前,我想有必要了解一下文中涉及到的相关概念:

1、Google app engine 是什么?

这个,就是 Google 的一个服务。(废话~)简单的说,使用它我们可以编写一些在线的应用,可以使用 Python 写的程序,由 Google app engine 提供网络空间和带宽。

2、GAppProxy 是什么?

GAppProxy 是基于 Google app engine 的免费国际代理。据说本意是提供给教育网用户的,但是由于使用了 Google 的服务器,公网用户也可以使用。

3、GAppProxy 能做什么?

能做什么?看本文标题啊~~

好~~ 概念了解完了,让我们开始伟大的跨越之旅吧。 阅读这个条目剩下部分 »

标签: , ,
评论: 2条
人人网招聘前端javascript开发工程师

fedblog

先插个广告:人人网FED团队博客近期上线,敬请关注 http://fed.renren.com

(以下内容是帮同事转的~~)

招聘贴发过不少,但都不是自己写的,没有诚意,偶这次忙里偷闲,自己写一个,先说点题外的~

1 . 关于人人网的前端组

人人网现有前端12名同学,其中js组5人(偶也在其中了,咔咔~)css组7人,其中绝大部分同学为08和 09界应届毕业生,大牛没有,菜头一堆。

2 . 我们的主要工作内容

负责人人网主要产品的前端开发和优化,包括主页,日志,相册,分享等等。

3 . 对工作的一点感受

在这里工作绝对不会让你觉得压抑,早上10点前到班即可,俺以前住宿舍,早上9:30起床不晚~。由于年龄相仿,所以大家都比较“本色”,刚来的新人可能会不太适应,哈哈。工作内容基本上不会让你觉得觉是在重复性的劳动,产品同学会想出各种点子折磨你(不要以为vip模板也是我们搞啊,那个是外包地)。恩,还有就是成就感,记得入职后开发的第一个home页的产品:状态框,上线之后灰常激动,心想:偶的代码要被下载上G的流量,n多用户(包括大学同学)都要通过这个框框改状态。

阅读这个条目剩下部分 »

评论: 2条
简历中的交互设计

每年的10月和11月是各大公司校园招聘的高峰期,今天没事的时候在同事收到的一箱子简历里面翻了一会,突然意识到,其实书写求职简历的过程,就是一种典型的交互设计过程。

我们一般所说的交互设计,都是指用户通过软件等手段与机器之间的交互,这从交互设计的前身“Soft Face”这个名字中,或许就可以窥知一二。但是事实上,交互设计在生活中是无处不在的。对于人机交互来说,用户需要通过设计师所设计的用户界面(UI) 来与机器交互,UI的好坏直接影响着用户体验。同样,作为一个求职者,他们所面对的“用户”,实际上就是公司的HR,而求职简历这薄薄的两张纸,就是求职 者的UI,而这个“UI”的好还则直接决定了其是否能够得到面试机会。本文试图从交互设计的角度来探讨一下如何书写求职简历(因为校园招聘中的简历问题比较明显,本文以校园招聘为例)。

r3

阅读这个条目剩下部分 »

评论: 11条
基于vertical-align的表单元素垂直对齐方式研究

(本文的标题叫做“方式研究”,是因为,我最终也没有想通原理,只猜出了方法,但是,的确是实现了效果。)

最近的项目涉及到很多表单的制作,特别是复选框(checkbox)和单选框(radio)。但是在前端开发过程中发现,单(复)选框和它们后面的提示文字在不进行任何设置的情况下,是无法对齐的,而且在Firefox和IE中相差甚大。即使设置了vertical-align:middle,也依然不能完美对齐。如下图所示:

01

于是上网查看了一些网站,发现这个问题是普遍存在的,如下图(FF3.5):

error

阅读这个条目剩下部分 »

评论: 7条
彼岸

铁路旁的信号灯
伴着晚风
不断的闪过
像是火照之路上的曼珠沙华
为迷途的亡灵指引着道路

毕业那天很匆忙
10点多下了火车
接近中午才到学校
匆匆的领了毕业证
就又踏上火车
远去

阅读这个条目剩下部分 »

标签: ,
评论: 6条