你如何设计交互?

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

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

我一直是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

相关推荐

  • 总结了一套完整的设计分析思路

    本文主要是根据个人在各个大大小小的项目中总结而来的一套做设计分析的参考思路,应用于常规的项目场景基本是够用了。“需求是业务方的几句话描述,只能管中窥象的了解他们一些零零碎碎的想法,没理解到本质需求就开始画界面,然后不断的随着他们想法的转产而反复被动修改交互稿…”
    “PM已经画好完整的demo,交互看着似乎能做的只是根据demo做细节优化和完善,做着做着就迷茫了,设计的价值到底在哪呢?”“在公司中作为职能部门的UED团队,需要站在用户的角度思辨业务,通过服务内部客户进而服务我们的最终用户,用设计专业帮助业务成功,与业务一起成长”。Tips: 跟需求方沟通挖掘需求,最重要的注意点是需求方对我们来说是快速了解行业现状和市场需求的绝佳伙伴,所以要更多的聊这些,而不要很快就陷入页面具体细节的讨论。(如果需求方主动要说,可引导至挖掘背后目的是什么,为啥要这样做,具体表现形式可以后面在细化页面时再考虑)某家居用品商要制造一款家用钻孔机,继续往下深挖用户诉求:
    “用户需要的并不是一台钻孔机,他们需要的是墙上有几个孔”
    “用户需要的并不是墙上的几个孔,他们需要的是墙上显示家人照片”
    “用户需要的并不是挂了照片的墙,他们需要的是一个更温馨生动的家”
    ……通过「某策略」,帮助用户实现「某价值」,以完成「价值变现」。

    2017-05-02
  • 针对产品UI国际化提出的7条建议

    近年来,越来越多的国内开发者将目光从国内转移到国外,纷纷投入到移动大航海时代的浪潮之中。在产品国际化的过程中,产品UI是否也跟上了国际化的步伐?Dropbox 设计师 John Saito 针对产品设计国际化中出现的问题进行了分析并提出了 7 条建议,值得一看。

    2017-05-09
  • 用户体验 | 6个细节成就了今天的X1 Carbon 2018(上篇)

    时光穿梭回到2012年,第一代ThinkPadX1 Carbon发布的时候的心情我清晰的记得。Think的意志清晰而明确,效率大屏+高强度轻薄+黑色商务气质。对于未来移动办公的理解,高端ThinkPad是什么样?如今的ThinkPad X1 Carbon 2018(Gen6)便是答案。Yonemochi San曾经坦言,曾经打造的ThinkPad X300正是如今X1 Carbon系列的“祖父”。碳纤维材料的应用,如出一辙的轻薄,不一味...

    2018-03-10
  • iOS 9人机界面指南(三):iOS 技术 (中)

    文章索引译者注:本文译自苹果官方人机界面指南 iOS Human Interface Guidelines (2015年10 月21日),由腾讯ISUX设计师翻译整理,非发文者一人之作。译文首发于ISUX博客,如在阅读过程中发现错误与疏漏之处,欢迎不吝指出。后续章节会陆续更新,敬请期待。

    2017-05-29
  • 学交互设计,怎样选择到适合自己的学校?

    欢迎关注弗斯特国际艺术教育出国留学选择学校,哪些会成为你的考虑因素?学校名气超大,排名都是top级?明星校友超多,都是艺术大佬?学校位置超好,正居于市中心?校园环境超美,好似旅游学习?不得不说这些会成为许多学生和家长,在选择目标院校时经常考虑的一些因素。排名、明星校友、地理位置,可以作为参考依据。BUT!这些不能是最终的决定因素,最重要的还是自己对专业的最终追求。交 互 设 计 详 解交互设计又称互动设计,英文名称为Interactio...

    2018-04-03
  • 看似平淡无奇的Icons,到底什么才是它的正确使用方式?

    了解食材是厨师的基本功课之一,了解器材是摄影师的基本功课之一,了解城管的时间表是卖热干面大叔大妈的基本功课之一,了解各个组件的设计模式和属性是交互设计师的基本功课之一。

    2017-05-08
  • 用户体验之 iPhone X

    Hello,everybody。今天给大家带来一篇关于iPhone X的用户实际测评。虽然iPhone X已经在国内上市有一段时间了,但是因为其价格也是让许多人叹为观止,今天小编在得到以为苹果手机顾客的同意后将其用户体验整合以后推送给大家,希望大家会满意。好,话不多说,我们马上开始。首先小编先来介绍一下iPhone X的优点吧。iPhone X 首次在手机行业中采用异形全面屏,相对于之前的iPhone,手握尺寸更小,首次采用OLED现实...

    2018-04-13
  • 在交互稿完成前,记得开一场需求评审会

    需求评审会是交互稿完成之前,最为重要、参与成员最多的一次会议。

    2017-05-11
  • APPLE WATCH 中文手册:APPLE WatchKit Apps--界面导航

    本文翻译自Apple Watch Programming Guide:Interface Navigation,敬请勘误。 对于内容超过一屏的WatchKit app来说,您必须在设计时选择一个导航类型。您所选择的导航类型定义了如何在应用程序中展示和管理界面控…

    2015-06-15
  • 国服筹备进度公开 将重点打造用户体验和品牌社会影响力

    4月22日UP2018腾讯新文创生态大会(以下简称UP大会)当晚,腾讯于北京举办了一场《绝地求生》国服生态交流会。本次交流会邀请了来自各大硬件厂商和直播平台的代表与《人民日报》、《解放军报》、中央广播电视总台等十余家主流媒体的嘉宾参加。腾讯游戏副总裁黄凌冬、PUBG公司中国区总经理郑秀英、PUBG开发室室长李昌浩、PUBG公司创意总监Brendan Greene、腾讯互动娱乐合作市场部总经理朱峥嵘、腾讯互动娱乐PGame合作产品中心总经...

    2018-04-25