交互学堂
专注分享专业知识

为更好的移动体验画草图

移动用户体验设计成熟。这些是我们常用的工具。 原型设计工具,如Balsamiq、Axure和烟花使我们能够建立线框和click-dummies,帮助我们解释目标的用户体验。 跨浏览器框架,比如PhoneGap Zurb开发基础和jQuery移动帮助我们创建原型使用网络的母语:HTML、CSS和JavaScript。

为什么要草图?

我们似乎在一个更好的位置上比以往好的设计减少了很多时间。 然而,这些工具有一个隐藏的代价:他们吸引我们跳过必要的关键步骤来创建一个精心设计的产品——代价是花时间去理解问题。

这就是为什么我建议开始使用草图理解问题并想出一个概念之不用你最喜欢的软件。

现在,你可能考虑下列之一:

“我们的时间很紧,没有时间进行涂鸦。 我们需要开始。”

在添加你最喜欢的工具是“设计更快的到目前为止。 我需要快速得到结果。”

“我们需要呈现的结果(客户或项目合作伙伴或同事)。 我们不能向他们展示手绘的东西。”

“对不起,但我真的不能画。”

这么说的人很多,我身边就有很多。

定义问题和解决方案

素描,使我们得以探索问题空间和定义解决方案空间在同一时间。 这是我们目前要了解的问题,同时也帮助我们找出可能的解决方案。

虽然我们勾勒出我们的想法,会出现新的想法。模糊和缺乏详细草图培育新的想法。歧义是一件好事,因为我们会自动在我们的头试图填补这一空白。 这就是让草图“生成”:它捕获我们已经出现的想法和新思想的火花。 正如Bill Buxton在草图的用户体验:

“从素描学习是主要基于模糊性质的表示。 也就是说,它们不指定一切,让自己,并鼓励各种解释,没有有意识地融入他们的创造者。”

通过素描不同方法解决一个问题,我们可以探索他们没有立即提交其中之一。 这给了我们新的洞察力并且提出了新的问题。 素描本质上是一个头脑风暴运动。

草图的成本

是最快的方法,我们的头脑是抓起一支笔和一张纸,快速的素描。 如果做同样的事情在我们最喜欢的原型工具需要更多时间:我们必须创建一个新项目,决定正确的库来使用, 在画布上绘制小矩形,绘制小箭头连接我们的小矩形、重新安排一切让它看起来好一点,30分钟或更多时间就消失了。

如果我们不想见到我们所看到的这张纸,我们可以把它扔进垃圾桶,重新开始。 使用我们的原型工具,然而,扔东西的困难,因为我们花了时间和精力创建它,即使不是一个好的设计。 重新开始是困难的。 素描纸,另一方面,是廉价和快速。

Sketching Tools
最快的方法来捕获和评估一个概念是素描。

素描作为一种沟通工具

然而沟通说的是,一张图片、说一千个单词。 草图通过我们目前对项目的理解让我们走我们的同行和利益相关者之前。 我们可以使用各种视觉表示解释项目的不同方面(我们将在下一章涵盖最常见的)。 Don  roam说:

”优秀的图片可以表示复杂的概念和总结大量集的信息,便于我们看到和理解,他们是有用的澄清和解决各种各样的问题。”

在我们的思维过程中我们的同行能够指出差距,并讨论可能的解决方案和备选方案。 他们将最有可能理解我们的速记并能给我们反馈的细节我们的概念。展示我们的想法别人也可以让我们反思我们的概念;我们看到错误,可以找到更好的选择。

素描作为一个协作工具

素描是一种强大的工具,包括利益相关者在设计过程的早期。 下面的问题是典型的在定义过程:利益相关者无法制定一套完整的需求之前就看到了一些解决方案的可视化表示,但我们的设计师不愿意开始之前确定一个解决方案,我们确信神给我们的需求是稳定的,我们想避免不必要的修改,这将导致额外的工作。

走出这一困境的方法是开始一个可能的解决方案在草图协作的车间,如设计工作室会话(见将埃文斯的文章“介绍设计工作室的方法”)。 我们可以走利益相关者通过概念(替代品)一步一步向他们解释他们的需求设计的影响。

草图也有一个较低的准入门槛,允许非设计师参与。 (不管你拿出笔涉众是一个个人品味和有争议的问题。 你必须下定决心)。

因为素描是粗糙和未完成的,也容易给反馈。 有些人阻挡看到一个漂亮的至此版本的页面,因为他们认为所有的工作必须肯定进入它。 高保真的视觉效果也往往分散人——而不是关注概念,它们试图对视觉设计或小细节发表评论。 草图让他们专注于核心概念。

你需要克服的唯一的事就是你不愿意展示你的粗鲁的工作。

画不画

一个常见的误解是,你的草图要漂亮。 但交互设计不是艺术班。你的草图不需要好看,他们只需要传达你的想法。 他们应该讨论和产生创意火花;他们不太可能镶嵌在墙上。 只要你能够画框,箭头,圆圈和简笔画,那就是好的。 约书亚·布鲁尔指出的“素描,速写,素描”:

“素描不是最终目标。 绘画过程的最终目标是你学习素描。 所以不要担心如果你不能素描。”

学习如何素描超出了本文的范围,但是看看下面的介绍,文章和书籍的基本知识:

  • ”草图界面的“艺术””(幻灯片),贾森梅苏特·史密斯和山姆
  • ”101年素描”小狐狸(幻灯片),杰克逊
  • ”用户体验草图的混乱的艺术、“Peiter别克
  • 草图用户体验:工作簿扫罗格林伯格,Sheelagh Carpendale,尼科莱马夸特医生,比尔巴(摩根考夫曼:2011)

如何素描

既然我已经(希望)你相信草图应该是一个工作流程的一部分,让我们谈谈什么素描在移动项目。

不同的草图

在开始的时候,你会想要为你的移动应用程序或网站捕捉不同的想法。 开始素描不同版本的屏幕或部分的一个关键。 你的目标是双重的:产生很多不同的想法,并探讨和评价——在同一时间。 你想出更多的想法,更多的选择你想要选择的。 这个过程通常被称为“发散草图”。

这种类型的草图是一个多页的模板。它提供了足够的空间来画六个不同版本在一个页面上,并且提供了一些指导可用的屏幕空间。 并排通过展示不同的想法, 以后更容易比较和讨论他们。

很多模板是网上(我使用Erik Loehfelm的最常见的)。 选择一个你喜欢的。

six main menu variants
线框图变异为全球导航。 (大版本)

上面的截屏中显示六个不同的想法为一个应用程序的主菜单(加上生动的证明我的草图不漂亮)。 我不经常想出6版本(我喜欢告诉自己,我是一个structure-first人),但我确实试图创建屏幕至少三个变体的一个关键。 因为这是头脑风暴,你会想要很多的选择,讨论后, 在这里数量是你的朋友。

如果你碰巧的想法,浏览一些移动网站(如UI画廊灵感启发UI,Pttrns,可爱的界面和UI游行)。 他们展示的解决方案按主题和分组功能(例如,主菜单,聊天窗口)。 包括把你喜欢的东西画在你的草图,并把它们与自己的想法记录下来。

使用标题是每个素描好的习惯。 这将使它更容易区分他们,指他们。 我添加注释,注释来解释素描和背后的思考过程(如优势,劣势,权衡与其他概念相比,问题,新功能,等等)。 标签也是一个很好的实践。

收敛的草图

一旦你勾勒出多个版本的屏幕,挑选一个最好的解决问题。 不幸的是,一个草图很少会检查所有的线框。 在大多数情况下,你将不得不把想法或部分想法为一个概念。 要做到这一点,你需要更深入地探索通过单个页面上更详细的草图。 在空白的地方使用注释。记下所有的问题,新的想法,重要或不清楚的领域,事情是要讨论的。 这将帮助别人理解你的思路。 这些活动通常被称为“收敛草图”。

发散和收敛的草图的更多信息,见利亚Buley从FailCon 2010年的演讲,“好的设计更快”,布兰登Shauer的文章”Sketchboards:发现更好+更快体验解决方案”。

创建UI

沸腾你的想法到出现一组屏幕,下一步是探索如何一起工作。 为此,创建一些用户界面流(即一系列关键屏幕),展示用户将如何使用你的解决方案来完成一个任务。 UI流突出使用哪些界面元素(例如,单击按钮或使用哪个手势)和系统如何响应(例如,使用一个动画,过渡,弹出对话框或新的屏幕)。 他们主要屏幕还显示在不同的州(例如,最初空,然后充满内容)。

你可以想象不同的结果在UI流(如搜索结果的列表和一个空列表)。 您的流将不再是线性的,不同的分支将显示不同的结果。 但应该试图限制在一个UI流数量的分支。 每个分支增加了复杂性,使您的流难以理解。 这也使得他们难以解释。

A sample UI flow
UI流动可视化用户如何从a到b的(大版本)

你不需要素描所有用例,挑选那些最重要的和将使用到的。 Pareto原则提供了一个很好的经验法则:原型20%的功能,将使用80%的时间

我通常画下了一个关键的用例,试图想出一个方法解决它。 我将强调交互屏幕和(通常)用箭头连接屏幕。 我将解释每个步骤和标签的关键屏幕。 像往常一样,我疯狂地注释。

如何素描移动屏幕上寻找灵感和UI流,看看吉赛尔•穆勒的文章”鼓舞人心的UI线框图示意图”;MOObileFrames一个博客,展示了移动线框图草图;线框图一个网站,Jakub Linowski。 您还可以使用Jakub的“交互式草图符号”(PDF)UI流动。

采取步骤

给你一些更多的上下文,并向您展示如何上面的三个活动相互联系,这是典型的草图会话的步骤:

  • 列出你和你想要捕捉的信息。
  • 做第一套草图(如关键屏幕的变化或初始界面流)。
  • 自己审查草图。
    • 每个变体的优点和缺点是什么?
    • UI元素和数据一致(即相同的元素是用于相同的任务)?
    • 你以同样的方式显示数据?
    • 交互选项明确吗?
    • 从其他人那里获得一些反馈。
    • 他们的第一印象是什么?
    • 他们最喜欢什么? 为什么?
    • 他们不喜欢什么? 为什么?
    • 不清楚是什么在你的草图吗?
    • 他们建议有什么改进? 为什么他们认为他们吗?
  • 迭代的概念。
    • 你能将不同优势的独立概念合并到一个新的概念?
    • 可以澄清的草图吗?
    • 可以减少或简化的步骤吗?
  • 审查结果的初步反馈。
    • 有新问题出现吗?
    • 你获得了什么见解呢?

正如您可以看到的,很多都是“为什么? ”的问题。 这是因为草图是试图理解这个问题同时朝着一个解决方案。 写下所有的问题,自己在旁边画草图。 这将引导你走向正确的概念。

除了素描

在你创建草图的关键屏幕和主要的用例,你会想尝试你的生活在一个真正的概念手机。 应用程序等流行和Protosketch允许您导入的照片,草图把他们变成自己的原型。 这非常快速、简单的方法会给你一个概念的交互。 这两个应用程序允许您定义可点击的热点和页面转换,使原型的交互更为现实。

或者,你的屏幕导入到更高级的工具如Axure和构建一个原型。

无论你选择哪种方法,你的目标是快速测试的概念和一些努力在实现一个真正的电话

外卖

草图可以帮助你更好地了解你想解决的问题,可以让你想象可能的解决方案。 这是一个快速和廉价的方式来头脑风暴和测试之前很多UI的想法。 草图的速度是我们创建和迭代概念阶段,可以得到反馈,更改时很容易。

为您的下一个草图,记住以下原则。 他们会帮助你跟踪:

  • 是懒惰。
    不要重新发明轮子。 使用模板来指导你的草图。
  • 得到启发。
    浏览移动用户界面设计模式库和画廊,看看线框展示。 你喜欢什么,用你自己的想法,提出一些新的东西。
  • 停在不够好。
    草图需要了解你的想法。 不要迷失在细节(不重要)。
  • 帕累托会怎么做?
    一小组将使用您的解决方案的功能。 关注他们。 这20%的解决方案将使用80%的时间吗?
  • 是一致的。
    使用现有的草图符号和/或开发自己的。 这将使您的草图可靠。 同行会明白你的风格和需要更少的时间来浏览一下草图给反馈。
  • 注释所有的事情。
    在素描,会弹出新问题、想法和问题。 写下来,否则,他们就会迷路。
  • 是开放的。
    让你的草图可见。 钉在墙上,总是给别人得到反馈。
  • 有疑问时,草图。
    如果你不确定一个解决方案,开始草图变化。 列出他们的优点和缺点,得到反馈,看看效果最好。

 

赞(0) 打赏
未经允许不得转载:IAMUE » 为更好的移动体验画草图

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏