以场景为中心的产品设计:突破你的大脑然后像用户一样思考

标签: 交互视觉 场景 用户 设计 | 发表时间:2015-01-11 16:08 | 作者:人人都是产品经理
出处:http://www.woshipm.com

当第一次开始设计交互式产品时,我是非常挣扎的。小的项目都还好,但是当交互变得复杂时,我注意到工具、团队的交流甚至是我自己的思考都开始失效了。我看到今天许多创业公司面临着同样的问题。所以我想(和大家)分享一些方法,利用这些方法我已经在过去的几年中改变了处理复杂大型产品的设计过程。

过去常常进行页面设计

回顾大学,我们主要设计海报,图书封面,(网站)主页和很多其它页面。我们使用 Adobe Illustrator 和 Photoshop 软件,它们在设计页面时表现都非常棒。同行的批评是非常有用的,因为批评本身就非常类似于使用产品:一个普通的观众走到他们之前没有见过的事物面前,然后看上几分钟。在一个设计工作室看到一张海报就好像走在大街上看到这张同样的海报。

以页面为中心的设计不是服务于 APP 的

一旦你将要处理一个拥有十多个页面和数百个状态的APP时,你不能像(设计)一张海报一样在大脑中 Hold 住整个产品。我注意到我们团队在围绕着单个页面发邮件,讨论着单个页面,给所有页面命名时仅仅只是记录(keep track)。但是我们对如何把页面和特征组合在一起(这件事)没有任何的关注。

我们把产品当作一组页面来思考。但是这种工作方法有一个问题:人们怎样在现实生活中体验这款产品是不重要的。在任何地方人们都在很短的时间流里使用产品,大概从30秒到几分钟。

一个用户可能在一个搜索结果中首先注意到你的产品,花一分钟的时间大概浏览一下这款产品,然后离开。他们可能回来,注册,然后再次离开。他们可能打开来自这款产品的邮件,回来,购买产品,然后离开。每一个这样的小故事都是人们实际情况下体验你的产品的一种方式。

一个产品不是(简单的)一组页面——它是这些页面组成的使用场景。

如果你的团队没有关注这些使用场景,如果你孤立地思考每个页面,那么你的想法将和实际使用你的产品的用户完全不同。

以场景为中心的设计

一旦我意识到使用场景是我们实际上设计的东西,一切都变得简单起来。但是我对保持关注的故事仍然有困惑——我不断地发现自己在思考个别页面。

所以我开始通过不同的方式来突破我的设计过程。我改变了工具,可交付成果,以及如何和我的团队一起工作。这里有我发现的最好的四种可以专注于故事的方法。

方法一:在画线框图之前使用故事板

在开始设计产品之前我会思考它的一个使用场景,这对于产品的成功是至关重要的。产品的核心很有可能是由十几个或是更多的使用场景组成的,但是我只选择一个开始。然后我构建了一个故事板——很像漫画。如果我已经在脑海里有了线框图,那么故事板的每个框架在界面上都会有一个对应的页面。有时候我得到的更多是抽象的使用场景,每个框架都是一个小型交互数据块:用户阅读或点击的任何区域。

好吧,这不是火箭科学,但这门学科在很多方面都有帮助:

1、故事板帮我同样专注于我们需要设计的所有屏幕——其中一些甚至可以被搜索引擎用来搜索信息片段或电子邮件。

2、故事板强迫我去思考用户目标,因为它们显示了如何在产品中完成任务。

3、一旦我们认同故事板是对公司最重要的东西,它们能够帮忙选定所有功能在屏幕上的优先级。

4、故事板真的能够帮助我专注于屏幕之间的切换,一个按钮在屏幕上要有它的意义,但它也需要设定好用户将在接下来的屏幕上看到什么。

而且最棒的部分是,我可以反复使用这些相同的故事板,所以它大幅加快了我的其它工作速度。当我向团队展示UI设计稿时,我需要向他们展示一个故事板。当用户开始使用产品的时候,我们可以在一组屏幕上向用户展示相同的故事板。如果我们做出了一个可交互的demo或者完成了一个产品的介绍视频,就如你猜测的那样——我们需要一个故事板。

方法二:用 Fireworks 渲染整个使用场景

我知道大多数的设计师都使用 Photoshop 或 Illustrator ,况且是视觉设计,没有什么软件比它们更好了。但是如果我们正在设计故事板,那么设计标准应该是将来用户会看到的高保真页面。这些故事板可能需要20~30个页面,如果用 Photoshop 去设计它们会变得很艰难,所以大部分的设计师不会找这麻烦,我们又再次回到设计单个页面。幸运的是, Fireworks 有一些巧妙的功能能够使设计尽可能地保持以故事为中心:

1、内置网页:您可以在一个文件中建立一个完整的故事。上下方向键可以很容易地翻阅故事班,看看到底用户将看到什么。

2、母版:如果页眉或图标出现在多个页面,你可以把它做成一个母版。然后,如果你需要在用户测试之修正一个图标,你不必单独修改20个文件。

3、查找和替换:团队可以在设计进程的中途修改一个功能的名字吗?没问题。

4、高保真:您可以在同一个工具中把一个粗糙的线框图变成一个好看的线框图,一旦故事板是固化的(solid),你可以为了更好的细节设计而回到 Photoshop 软件中。

方法三:在纸上回顾整个使用场景

当我们团队到了需要审查设计稿的时候,我几乎从来不展示孤立的一个个页面,相反,我将会把一个故事板里的所有页面都打印出来,然后把他们铺在很长的会议桌上或者用胶带把它们贴在墙上。

这样的工作方法非常好,因为团队人员可以近距离地看到一个页面上的所有细节。他们可以往后退一步,看到相邻的页面,想想页面之间的交互切换。甚至他们可以后退更多以看到整个故事板,这有助于让每个人对页面上需要有的内容的用户目标和任务保持相同观点。

当我向其他设计师展示工作内容时,我将跳过图纸仅仅是在电脑上点击屏幕——他们将获得所需信息。而且我发现打印的这种方法对工程师和PM们来说是非常有帮助的,他们不会像我一样花整天的时间来研究交互设计。哦对了,在设计的时候你可以直接用纸做笔记,并且可以把他们带回你的办公桌上作为下次的迭代素材。

方法四:不要发送 mockups ,记录屏幕录像。

这是我所知道的最奇怪又是最有帮助的设计交付物。我过去常常通过电子邮件来解释交互细节。我会附上一组页面,然后努力去解释它们是如何组合在一起的。这写起来很痛苦,而且阅读起来也不是那么轻松。所以我开始用ScreenFlow录制故事板的视频。由于每个页面已经建在Fireworks中,我只需要假装去点击用户会点击的地方,跳转到下一个页面,然后对着相机描述正在发生什么。第一个视频我花了很长的时间去录制,并且通过实践的方式克服了我的怯场,不久之后,我录制视频的速度要比写邮件快得多了。

我常常惊讶于真正的产品是如何从这些视频当中感受到的。因为它们可以很好地模拟最终的产品是什么样的。它会成为收集反馈的一个很好的工具,它几乎像再次批判了一个简单的海报。

以上这些仅仅是一些我已经改变的工作方法,它们能让我和我的团队专注于故事场景。我很好奇是否其他人已经注意到了以页面为中心的设计和以场景为中心的设计之间的不同?你有学到什么方法可以让你在设计过程中专注于故事这些故事场景吗?

译文地址: 点击查看

本文由 @沈晓马投稿发布,本文禁止在本人未允许的情况下,任何形式的全文转载和部分转载。

 


互联网从业者必备微信公众号:woshipm,如果你已经关注了,证明你已经很牛逼了。

相关 [中心 产品设计 突破] 推荐:

以场景为中心的产品设计:突破你的大脑然后像用户一样思考

- - 人人都是产品经理
当第一次开始设计交互式产品时,我是非常挣扎的. 小的项目都还好,但是当交互变得复杂时,我注意到工具、团队的交流甚至是我自己的思考都开始失效了. 我看到今天许多创业公司面临着同样的问题. 所以我想(和大家)分享一些方法,利用这些方法我已经在过去的几年中改变了处理复杂大型产品的设计过程. 回顾大学,我们主要设计海报,图书封面,(网站)主页和很多其它页面.

产品设计流程

- - 互联网分析
新的一年到了,分享个大的东西,这个是之前团队总结的一套「产品设计流程」,里面包含了3大模块,产品前期分析,设计环节,上线总结反馈,基本上涵盖了,从需求到上线的经过的流程,相较于大型UED团队会“轻”一些,适合中小型团队. 如果所在公司内部还未有设计流程,可以参考此流程,也可以拿去在这个基础上进行改进.

移动产品设计之设计

- crystal - 互联网的那点事
移动产品设计最大的差异点在于用户使用场景的变化,场景的变化引发了交互方式巨大的变化,从而也使得信息呈现方式有所不同,再加上硬件设备的差异,最终使得2者千差万别了. 所以,移动产品设计之设计应该首先从用户的使用场景出发,同时考虑用户的硬件设备差异,综合以上2点去帮助用户完成某个任务. 按照我的理解,场景、任务、用户可以称之为设计的三要素,每一个设计实际上都是试图去帮助用户在某个场景下完成某个任务的.

Siri引发的产品设计变革

- Jerry - 月光博客
  Siri的发布,在iphone 5的失望之后,为苹果带来了言之不尽的话题,其热度甚至超过了ios 5这个重大操作系统更新. 但是,今天希望论述的却不是这些讨论,而是设计者有意或无意之间,为某一类工具的设计产生了重大性的基础定位变革.   笔者不知道大家称Siri为何,或许会被称为“语音交互工具”吧,因为它绝对已经突破了“语音识别工具”这种“声音到文字,文字到命令”的范畴,而直接使用语音实现人机交互.

PM札记:产品设计这两年

- - 所有文章 - UCD大社区
做产品差不多也两年左右了,基本上这条路是磕磕绊绊,迷迷糊糊,但好歹大方向是正确的,有空回想总结起来,唏嘘不已,看看以前对产品的看法,再看看今天对产品的认识,不仅感叹自己当初的幼稚,如今,更多的是了解了自己的无知与渺小,怀着一颗谦卑的心,继续学习,在产品这条路上寻找自己的价值. 产品职责包含很多东西,产品设计只是其中的一种职责,只是简单的描述一下我在产品设计上的弯路,回想起我的产品设计生涯,目前走过了三个阶段:.

手机产品设计禁忌

- - 落花流水——elya妞╰_╯
在做手机产品设计的过程中,遇到很多看似很小,且很容易被忽略的问题,正是这些小问题,一次次的撩拨用户的耐心,让用户对你的产品心生怨念. 刚出道的朋友没有经过实战,对细节注意不多,往往都会遇到类似的问题,强调多次后,觉得不如写下来,给新人共勉. 一般按钮会有四态,不可点击效果、可点击效果、聚焦状态、按下状态.

移动产品设计新思路

- - 互联网的那点事
随着时代的变迁,移动产品的设计也有了更多的变化. 用户的需求越来越多、使用的场景也更加复杂. 也因此移动产品就有了更多设计的新思路. 当然,手机的玩法虽然不再被局限在有限的领域,但是对于那些更喜欢用手机拍核桃、钉钉子以及起瓶盖的各位童鞋,还是看看本次由朱坤 @kentzhu 分享的移动产品设计真正的新思路.

移动平台上的产品设计

- - 雷锋网
【编者按】本文由 @淘宝UED 团队所撰. 随着智能手机的产生,人们对它们的使用时间与粘性迅速加大,移动互联网的发展越来越迅猛,越来越多的PC端产品开始把注意力集中在转移到方寸之间的屏幕之上时,有如潮水般汹涌. 我们需要的就是适应在移动平台设计一个好的APP,以此获得自己的席位. 当下的移动互联网产业,已经从单纯的以实现单一功能为主,到平台的转移,再到各个APP之间的产业链的形成,还有广告植入的各种运营手段产生各种盈利.

产品设计原则有那些?

- - 知乎每日精选
产品设计的原则有点太泛哈,这里想结合自己的工作心得来小结一下手机无线设计8原则:. 原 则 1 :用 户 界面 应该 是基于用 户 的心里模型,而不是基于工程 实现 模型. 就是把后台本来很复杂的事情通过设计符合用户日常生活中常用的浏览方式或操作方式. 其实这一点是设计师把生活中的细节和数据结合的凝聚点,用户的心理模型抓的越准,界面就会越优秀.

从Mailbox看产品设计火花

- - 优设(UISDC)
Mailbox是个基于Gmail的任务管理类的应用,任务即邮件,可以让邮件完成,删除,设为稍后提醒,放入待办项目中,推行Inbox Zero理念,是个最近比较火的产品,不过坑爹的是Mailbox下载后不能马上用,需要排队开通,本人在上周终于排到了队,经过了几天的试用,把Mailbox和热门邮件客户端Gmail,Sprrow做对比,顺便记录一些感想.