你如何设计交互?

进行界面设计时,很显然我们一上来就会想着画出整个流程。但这真的是最好的方法吗? 我曾偶然进行了编写一个具有想象的人机对话,之后我再继续使用画流程的方式。

编写人机对话的方法改变了我的思维方式,我再也没有上来就先画流程图。这篇文章将解释我作这种决定背后的原因。

我一直是Basecamp的设计师们的崇拜者。前一段时间,我阅读了其中一位叫Jason Zimdars的设计师的推特内容:

interactiondesign01

“UI设计始于对话。 “他不是在开玩笑。转发及评论有很多,也获得了很多赞。每个人都明白他的意思——除了我以外。

编写对话

当我不得不设计一个界面交互组件时,我习惯地一上来就使用草图来画出所以可能的解决方案。 (产品设计是由许多层构成,例如Jesse James Garrett的对讲机结构层(PDF),在这里单指交互层。)

interactiondesign02

对讲机的产品设计层

我习惯于使用一种我知道的或通过复制别人的问题或类似问题的解决办法的这种模式。想象一下,你要设计一个网站的注册表单。你可以先“偷”其他设计师的解决方案。或者,如果你有信心,你可以阅读需求,然后画画草图。

我呢就是使用画这种方式。

曾经我设计一个电子商务的网站设计的购物车过程。 虽然我不知道为什么,但当时,在研究可能的解决方案之前,我想象着如果是我在超市中进行付款时我应该做什么。我想在网络上复制一个类似的经验,以此通过利用web的数字能力可能改善它。我在超市收银台写下来会发生什么:

收银员:您好,你有会员卡吗?

:是的,有。 (我把它给她。)

收银员:谢谢。

:谢谢你。

收银员:请问需要袋子吗?

:是的,两个。

(等等。)

我意识到想象谈话比白色的画布上画要容易得多。 我不确定,但我想,对大多数人来说:对话是人性的一个内在部分。并且我们已经进化成为一个可以说话的物种。

而且,当我想象一个谈话,我运用了我的真实体验,更少的抽象对设计是有益的。如果用户与计算机交互的类似于现实生活中的经验那样,那么界面可能会被认为易于使用,难道不是吗?

此外, 当我写的时候,我更多的关注是对话及其意义。这样做的好处是,当我画草图时,在副本中我会犯更少的错误。因为复制是界面中极其重要的一部分,这也是写出对话的一个伟大的附加作用。

一个真实的例子

想象对话是很容易的,想象一个不同对话也很容易。回到超市的例子:我可以很容易地想象收银员询问我的优惠卡后会问我是否需要袋子。很容易能够想象到收银员会问我不同的问题。这也许会也许不会改变界面的草图。现在如果这不能改变什么也不重要了,重要的是,我已经考虑进去这些。我能想到的演变越多,我会觉得在我的最终设计中更有信心不会遗漏什么。

通常从产品需求到用例列表再到mockup(即低保真草图或高保真线框图,根据情况而定),这成为HTML原型的基础。理想情况下,这个过程是线性的,在现实中,这是一个循环,每一步为我提供反馈,并改变之前步骤中的一些事宜。

interactiondesign03

我的设计步骤

因为写作使我看到更多的变体,它提高了“用例”和“草图”之间循环的有效性。

让我们来看看这个例子。以下对话来自于一个实际的项目,一个名为Mediaddress的web应用程序,一款新的新闻办公室软件。这是一个记者的档案地址。项目的要求之一是,人们应该能够发送电子邮件到一个或多个接受者。

我正在考虑的用例是这样的:用户错误地从100人的列表中选择5人并忘了取消他们,而是想发送电子邮件至100人的整个列表。

演变1

人类:我想发送一封电子邮件。

应用程序:您选择的五人或所有这些吗?

人类:所有。

应用程序:写邮件,你喜欢使用你的电子邮件程序还是更喜欢自带的编辑器?

interactiondesign04

流程图演变1

interactiondesign05

草图演变1

演变2

人类:我想发送一个电子邮件。

应用程序:好吧,我将给您选择的5人发送一封电子邮件。写电子邮件,你会更喜欢使用你的电子邮件程序还是自带编辑器?

人类:不,等等! 我想发送一个邮件给100人不仅仅是我选中的5人

应用程序:好的,没有问题,我将这样做。那么写电子邮件,你会更喜欢使用你的电子邮件程序还是自带编辑器?

interactiondesign06

流程图演变2

interactiondesign07

草图演变2

基于用例,我写一个对话,可以很容易地转化为流程与草图。然后,我想象着谈话的一个演变,于是产生了不同的流程与草图。为了更好地理解流程与草图,我对用例进行比较。

假设用户从列表中选择5人但他想要给整个列表中的人发电子邮件。这是最常见的情况吗? 我不这么认为。不为这些真正想给5人发送邮件的用户做优化难道更有意义吗?

设计包括权衡,我们不得不在用户选择的成本和收益间进行权衡。但是我不想细讨论哪种决定是最好的解决方案。这里有很多标准,我的观点只是展示对话场景是一个有用的设计工具。

我在对话,流程图和草图之间来回跳转,但是指导工具是书面谈话。我觉得这是去想象一个交互最简单的工具,图表和草图(或线框)随即而来。对话可以创造秩序并帮助我看清楚步骤,同时也是一个与开发人员和其他利益相关者沟通的更好的工具。

总结一下我的观点:

  • 想象一个人机对话,然后画草图比直接绘制界面更容易。
  • 想象的对话是来自现实生活的经验,而直接画草图更多是源自于记忆中的设计。
  • 复制是任何界面的基础,先写后画能够使我们在正确的时间专注于它。
  • 想象不同的谈话比想象不同的草图要容易得多,这使得它更容易想出更多的设计选择。
  • 写的时候我更有创造性(因为我可以想象更多的变化),我倾向于少复制别人的解决方案。

那么杰森的观点呢?

最后,我明白杰森在他的推特上写得那句话的意思了吗? 为什么不直接问他呢? 我写一个电子邮件询问他关于我这种方法的意见。他非常友好地回答我:

“我阅读了这篇文章,我认为你非常了解我想说什么。想象一个用户和计算机之间的谈话是一个简洁的思考方式。在我的工作中有一些稍微不同的地方。除了电脑,我试着想象我会怎样给朋友解释功能。这种明确和有帮助的会话具有重要意义。我认为不考虑计算机也是特别有用的,因为它很容易进入我们都见过的模式”电脑说“,这很简洁,让单词听起来不像任何人们实际上说的那样。我希望我的UI读起来像我说的那样,这意味着它具有自然语言和完整的句子。

我肯定会修改很多次草图的形式,继续完善在整个过程。比起一开始就写很少的话,更好的做法是先写后期再去调整和优化。这就是为什么我更喜欢这种方法去画草图。画时,你过早地考虑布局和可用的空间,及太久了以至于不能合适地画上一个按钮。那些都是当前需要处理的限制,而我发现最好就是立即写对话,然后再想视觉设计。

这有个简单的例子,首先是你可能画的电脑对话版本:

  • “删除文件”
  • [好][取消]

现在你可能会有另一个版本:

  • “你确定你要删除这个文件吗?”
  • (是的,永久删除它)或者(不,我想把它)

这有点做作,但你懂的。我觉得当你一开始画的时候电脑对话版本就是一个简单的陷阱。如果空间是非常有限的,我当然可以查看第二个,但是为什么不从一开始就出你最好的版本,然后再考虑其他原因呢?

我从中得到的是:

  • “我认为一开始不考虑计算机是特别有用的,因为它很容易使我们落入我们都见过的模式中”; 简洁的“电脑说”脱离语句并且听起来不像任何人们实际上说的。
  • “这就是为什么我更喜欢这种方法画图。 当你画时,过早地思考布局…我觉得当你一开始画的时候电脑对话版本就是一个简单的陷阱。”
  • “比起一开始就写很少的话,更好的做法是先写后期再去调整和优化。”

紧接着我又问杰森一个问题,就是如果这个方法确实奏效,那它如何帮助他找出流程:

比方说你有一个功能并且开始写,写作是否让你想想流程或功能,正因为你改变了流程或特性? 或者是一个单独的流程或功能的思考过程?或许通过一个例子我可以让自己更清楚些。想象一个书签应用:

:保存这个网络地址。

电脑:好的。

第二个版本:

:保存这个网络地址。

电脑:我保存它之前,你想改变页面的标题吗? 你想添加一个简短的描述页面的内容吗? 你想标记页面(这样很容易检索)吗?

第二个版本改变了流程。现在,当我想保存一个网址,会有个弹窗。在第一个版本中,我就只看到确认反馈。

杰森的回答是:

所以,流程如何有效取决于场景。很多时候功能并不完全隔离,它们融入现有的流程和屏幕——或者至少从那里开始。所以,我脑中对流程已经有一些想法。 但如果写作让我通向另一个方向我总是乐于提高。但是,即使这是一个全新的时代,我将还是从写开始,因为它帮助我理清流程。如果向你的朋友解释流程需要很多步骤,那么它在软件中需要分解成类似的文字结构步骤。所以,就像我提到的流程,典型的写作草图可能包括几块的副本。我认为联系的重要部分是指出在现实世界中你是如何认为的,而不是简单地认为这纯粹是一个软件问题。所有的这些将导致新的见解。

这两个邮件似乎验证我的方法,它们也给我新的见解。并且来自高级设计师的反馈让我非常高兴。

原创文章,作者:Tinadmin,如若转载,请注明出处:https://www.iamue.com/7939/

(0)
TinadminTinadmin
上一篇 2015-08-12 16:54
下一篇 2015-08-12

相关推荐

  • 【视频】Sketch第一课(公开课)

    引言移动UI设计神器Sketch第一课出来了,大家抓紧时间体验吧!视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频...

    2018-03-19
  • 欧洲刮起性爱机器人风,用户体验称比真人舒服;马化腾减持腾讯200万股,套现超6.4亿港元 | 早报

    语音版早报9.109月10日邦妹读新闻来自创业邦00:0004:09不可不知1、马化腾减持腾讯200万股 套现超6.4亿港元香港交易所资料显示,马化腾于9月5、6及7日,连续三天合计减持腾讯200万股,每股平均价介于321.64港元至323.521港元之间,持股量由8.71%降至8.69%,合共套现逾6.4亿港元。此时正值腾讯股价高点。马化腾今年4月连续4天减持,套现42.27亿元,其今年已合共套现近46亿元。2、传WePhone开发者...

    2018-01-31
  • 交互设计师的60日计划之第二天

    此次分享的[button type="info" text="交互设计师的60日计划" url="https://www.iamue.com/tag/interaction-designers-of-60-days" open_new_tab="false"] 来自 Killa.G 让我们一起跟着学习和并学会做自己的总结与…

    交互专题 2015-08-20
  • 从事交互设计3年多,聊聊交互设计师的核心价值

    很多同行说交互设计 师就是要对用户体验负责,这点我当然是非常认同的。但是交互设计 师并不是独立的个体,虽然我们时常和产品、运营、开发因意见不同而产生争论,但站在公司层面来说,我们和产品、运营、开发等部门是一个大团队,我们既服务于用户又服务于大团队,服务于公司的商业价值。如果你只谈用户体验可能会不赚钱,只讲商业目标则会失去用户,用户体验和商业目标是需要保持平衡的。

    2017-09-16
  • 不要做椅子上的设计师

    事件一:某巨头公司L开会,产品的老大C带头发言:“我觉得吧,用户不会喜欢这个设计、他们……”。相信在各位设计师的工作历程种这种发言都不是第一次听。

    2017-05-28
  • 【优秀作业展示】交互设计基础(三)

    《交互设计基础》是学习交互设计的重要课程,在大三上学期开课。任课教师是工业设计系的华梅立老师,通过老师的认真指导和对该课程的学习,大家对交互设计有了进一步的了解,在老师的引导下,同学们对高铁取订票界面设计进行了深入的分析和再设计,并选取了感兴趣的小方向进一步拓展。接下来就看看学完本课程后同学们的优秀作业。优秀学生作业第三期陆晗产品设计15201高铁购票界面设计搜索目的地如果没有没有您想要的目的地可以选择搜索功能选择日期如果选择三天以后出...

    2018-05-08
  • 一只交互设计喵在工作过程中的几种思维方式

    这篇文章来自于《为真实的世界设计》读书笔记。文中罗列了设计师的几种思维方式,但是在实际的过程中,这几种方式是交错出现的,在本喵实际的搬砖过程中发现,不同的思维方式会出现在不同工作流程中。先简述一下,…

    交互设计 2016-07-01
  • 美国交互设计“综合类&艺术类”院校申请差异对比?

    回复【交互】,获得专业老师一对一专业指导随着现今数字智能等高科技的发展,交互设计成为近些年众多艺术留学生的热门首选专业。但热门并不代表很多同学都对交互设计有所了解,比如,根据向汉艺咨询的学生情况分析,90% 的同学都分不清什么是到底什么是交互,只是很表面的认为交互就是各种“APP”、“UI设计”或者VR/AR。实际上,即使国外最顶级的院校,你也找不到一所专门设立“APP”的专业,“UI设计”严格上来说只能算是“平面设计”,而设立VR/A...

    2018-04-30
  • 腾讯设计通道晋升的过程

    作者:干货君@干货札记   本人有幸能有机会作为通道助理观摩了腾讯2016年上半年D族交互通道晋升的过程,受益匪浅。 注:D族通道是指“Tencent Design腾讯设计通道”,设计通道成立于2006年,隶属于腾讯职业发展通道设…

    交互专题 2017-08-15
  • Apple Watch APP设计第一课:了解Apple Watch视觉和设计原则

    在我们可以开始设计一个Apple Watch应用之前,要先理解其背后的视觉和设计原则。Apple Watch有三个重要主题:个人,整体,轻量级。如果想设计一个具有惊奇体验的应用,还有一个你应该考虑但苹果公司没有提及的,即 …

    2015-09-29