挺久之前的一篇文章，但质量不错分享给大家。
长文预警，不喜勿喷；一人观点，勿妄估之。
原文地址：https://www.smashingmagazine.com/2013/06/sketching-for-better-mobile-experiences/
原文作者：@ Lennart Hennigs
译文：
为更好的手机交互体验而画草图
手机移动交互设计日益成熟，其中一种评估标准就在于使用工具的配置上面。原型设计工具比如Balsamiq,Axure和Fireworks可以使我们去制作一些线框和虚拟点击操作，帮助我们更直观的解释给目标体验用户。兼容性开发框架比如PhoneGap,Zurb Foundation 和 JQuery Mobile帮助我们利用HTML,CSS和JavaScript网页本地语言去创造原型。
为啥我们要画草图？
我们看起来比以前有更好的条件去设计很棒的体验， 然而，这些工具也带来一个隐藏的代价：它们诱惑我们跳过创造一个优秀的设计产品关键且很有必要的一步——那就是先花费些时间去思考留在我们面前的问题。
这就是为什么我建议开启你最喜欢的工具之前先开始用草图去理解问题和提出概念。
现在，你可能在想下面这些问题：
-------------------------------------------------------------------------------------------------------------------------------
“我们有很紧急的截止日期，根本没有时间去瞎画，我们需要赶紧开始。”
"用我最喜欢的设计工具速度要更快好嘛～我需要快速出图!"
“我们需要把我们的结果展示给我们的【客户或者项目伙伴或者同事】。我们不能给他们看这些手画画的东西。”
“对不起，我真的不能画”
-------------------------------------------------------------------------------------------------------------------------------
前一段时间不仅我听过这些否定的看法，而且甚至我自己也说过这样的话。
定义你的问题和解决方案
画草图可以使我们探索问题和定义解决方案同时进行。不仅勾画出当时对问题的理解，同时也帮助我们去找出解决方案的各种可能性。
当我们画出我们的思路时，新的一个idea将可能又浮现了。这个模棱两可缺少细节的草图孕育了一个新的想法。在这里，模棱两可的东西是好的，因为我们会在我们脑海里下意识的试着去把这个空白填满。这就是草图的所得出的“繁殖性”：它不仅捕捉到了我们已经构思好的想法又生出新的概念。就像Bill Buxton在Sketching User Experience中说的：
-------------------------------------------------------------------------------------------------------------------------------
从草图中学习大部分基于它们本身模棱两可的表述。就是这样，它们并不会描述出所有的信息，而是刺激大脑下意识地整合多样化的理解，最终被作者落实在纸上。
-------------------------------------------------------------------------------------------------------------------------------
通过草图画出不同的问题解决方案，我们可以很快从中探索并提出其中一个方案。这赋予了我们新的洞察力也增加了新的问题。画草图是一项很重要的头脑风暴练习。
画草图的“代价”
实现我们头脑中的一些想法最快的方法是抓起一支笔，抽出几张纸快速的把它画下来。试想用我们最钟意的原型设计工具做同样的事情可能会花费很多时间：我们需要创建一个新项目，选择编辑列表，然后在画布上铺出一个个小矩形，再画小箭头来把这些小矩形链接起来，可能觉得不好看，在把他们排列得更整齐。然后。。。突然你会发现30分钟甚至更多时间已经没了。
如果我们不喜欢我们在纸上所看到的，我们把它丢到垃圾桶重新开始就好了。然而，使用我们的原型工具丢掉这些东西并不是很简单。因为我们花费了时间和精力去创造它，即使这个想法不是最好的那个。重新开始更加困难。换句话说，用纸画草图既快又便宜，何乐不为？
把画草图当做交流工具
不管怎样，说白了就是，一图胜千言。在项目中画草图能使我们与同事和甲方之间的沟通游刃有余。我们可以利用各式各样的视觉表现手法去解释不同方面的项目（我们将会在下一章覆盖最常见的一种）。Dan Roam在The Back of the Napkin中提到：
-------------------------------------------------------------------------------------------------------------------------------
“图像可以描绘出复杂的概念，总结大量的对我们来说简单易懂的信息。它们非常有利于分析和解决各种各样的问题。”
-------------------------------------------------------------------------------------------------------------------------------
我们的同事会在我们思考过程的间隙提出更多可能性的解决方案，以供备选。他们大多数都会理解我们的速记，能够即时在我们概念的细节上提出反馈意见。通过向其他人展示我们的概念的同时，我们自己也会发现不足或者有源源不断的新想法浮现。
把画草图当作协作工具
在设计早期阶段与甲方联系沟通时草图是一个强大的工具。我们用经典的“先有鸡还是先有蛋”的问题来定义这个过程：大部分甲方都在没有看到一些解决方案的展示之前，他们自己也没有完全的构思好他们的需求；然而设计师们更不情愿在没有给出明确稳定的需求之前，开始动手设计解决他们的需求——我们都想避免修改一些不必要的版本，增加自己的额外工作量。
有一种方法可以解决这个尴尬的局面，就是在一个协作工作室用草图的方式画出可能的解决方案，比如设计工作会议室（参考Will Evans's的文章“Introduction to Desgin Studio Methodology"）我们可以通过我们的概念（和备选方案）一步一步引导着甲方，解释在他们那方面需求我们的设计。
绘制草图这种事情门槛很低，随便一个不是设计从业者都可以做到。（不管你递给甲方一支笔是出于个人礼貌还是准备一番争辩，你必须先把自己的思绪整理清楚。）
因为草图毕竟是粗糙的未成品，反馈起来也更加简单。有些人纠结在应该看到一版漂亮的完整的版本，因为他们认为所有的作品理所当然应该是这样。高保真的视觉同样会使人分散注意力——相比专注在设计概念之下，他们更倾向评论视觉方面的设计或者一些次要的细节。所以草图只能让他们保持专注在核心概念上面。
唯一你要克服的就是把你不情愿拿出来未经打磨的作品展示给其他人看。
画草图并不是涂鸦
通常有个误解就是你的草图一定要画的漂亮，但是交互设计并不是艺术课堂。你的草图不需要多么华丽；它们只需要能传达你的想表达的信息。它们应该在讨论终激活灵感，产生想法；它们不像一面墙上设定好的框架，只要你想要，矩形、箭头、圆圈、简笔画随便怎么画都行。就像Joshua Brewer在"Sketch,Sketch,Sketch"中写到：
-------------------------------------------------------------------------------------------------------------------------------
“画草图不是最终目标，最终目标是在你画草图的过程终你学到了什么。所以不要担心你是否会画。”
-------------------------------------------------------------------------------------------------------------------------------
怎么具体学习画草图已经超过了这篇文章的范围，但是看看下面这些文章和书籍可以让你学习到这些基本既能：
怎么画
现在我已经确信（希望）画草图应该是你工作流程终不可缺少的一部分了，那么，我们来谈谈怎么用草图去画一个手机项目。
分散画法（姑且这么译，莫打）
首先，你想为你的手机app或者网站把不同的创意想法捕捉到。开始在一张关键界面或者其中一部分画出不同的版本，你的目标有两个：1，产生更多的创意想法；2，同时对他们进行判断和评估。越多的想法冒出来就会为以后提供更多的选择。这个过程通常叫做“分散画法”。
有一款这种画图方法很有用的工具是一页多屏模版。它提供了足够的空间让你在一张纸上画出6个不同的版本，并且还在屏幕界面提供了一些线框。这样的话就更方便展示一个一个的版本，同时对它们进行对比讨论。
这里有很多在线的可用模版，选择一款你喜欢的吧。
上面的截图展示了6个不同的App主界面的菜单方案(很明显我画的非常的烂)我通常不会想出6个版本（我总是喜欢告诉自己劳资是“一稿过”的人） ，但是我还是会试着为关键页面设计三款风格。因为等头脑风暴的时候你还会有很多选择可以讨论，在这时候质量才是不会说翻就翻的巨轮。
如果你绞尽脑汁都没有好的点子，那就在网上找些灵感吧（比如Inspired UI, Pttrns, Lovly UI和UI Parade）。它们以话题或者专辑的形式组合展示（比如：主菜单，对话框），里面肯定包括你喜欢的东西，把它们在你创意下融合在你的草图里面。
养成为每个草图命名的习惯。这样会很容易辨别也方便以后参考翻阅。我会在这些草图和推导过程的背后添加笔记和注解来解释（比如：优势、劣势、权衡与其他概念的取舍、问题等等）。给表单添加日期贴标签也是很好的习惯。
集中画法
在你曾经画了很多版本里面选择其中最好的一个来解决问题。不幸的是，一张单独的草图很少会全部选择利用。在大多数案子当中，你需要把分散的想法活未成熟的概念合并在一起形成一个成功的设计方案。因此你应该在一张草图上尽可能详细的做深入探索。利用空白区域注解，快速记下所有的问题、新想法、重点或者不清楚的地方，然后继续讨论。这样会帮助其他人理解你的思考过程。这个行为通常称做”集中画法“
想了解更多关于”分散／集中画法”的信息，去看Leah Buley在FailCon 2010年的演讲"Good Design Faster"和Brandon Shauer的文章"Sketchboards:Discover Better+Faster UX Solutions"。
绘制UI流程图
经过你打磨成熟的想法落实到一系列关键界面的时候，下一步要做的就是探索如何让他们协同运转起来。为了这一步，需要绘制一份UI流程图展示给用户如何使用你的方案完成操作任务。UI流程图中要强调界面元素是否被激活（比如，安按钮是否选中状态；手势是否可用），系统如何反应（比如，一个动效、一个过渡、弹出对话框或者新建屏幕） 。它们也要展示出关键屏的不同状态（比如，原始的空状态和填写内容后的状态）。
你可以在UI流程图中看到不同的结果（比如搜索列表对应的搜索结果和空集状态）。你的流程不久就会越来越清晰深入。不同的分支会展示不同的结果，但是试着限制一个UI流程图中分支的数量。因为每多一个分支都会增加流程的复杂度，就使你的流程越来越难理解。也使得它们越来越不好解释。
一步一步来
为了给你一些更多的情境展示如何将以上三点联系起来，这里有几步典型的草图绘制步骤：
如你所见，这里有这么多需要问“为什么”的问题。这是因为画草图实在你解决问题的同时也在试着理解问题。把画草图时冒出的所有的问题记到下一张新的草图上。这样才会引导你朝着正确的方案走下去。
草图之后
当你再草图上完成了大部分页面后，你肯定想把你的图放在真实的手机上体验一把。这里有两个app"Pop"和"Protosketch"可以让你把草图的图片导入手机变成原型图。这是一个能让你体验到你概念的交互非常快速而低保真的方法。这个app不仅可以允许你定义点击热点还能自己定义界面过渡效果。使你的原型交互体验更加真实。
或者，把你的界面导入更加的先进的工具里创作原型，比如Axure(XD,Principle,mockingbot——Joyyamy推荐)
不管你选择哪种方法，你的目标是快速在一个真实的手机上测试你的原型。
谨记
草图可以使你更好的理解你想要解决的问题，让你的解决方案尽可能的形成思维图像。是一个快速高效的头脑风暴的方法，在提交之前可以测试出大量的UI方案，所谓船小易调头，草图可以尽快的得到反馈，发现问题及时修改我们的方案。
为了让你更好的展开工作，保持遵循以下原则，会帮助你不会偏离正轨：
1.懒一点嘛
不要去发明新的规范，使用模版去套你的草图。
2.找一些灵感来
去网上搜索一些设计模版图册和手机UI作品展示，选择你喜欢的，把跟你的想法交集点融合到自己的设计里面，创造出新概念。
3.做“差不多先生”
你的草图的侧重点是创意和概念，不要陷到（不重要的）细节里面。
4.帕累托定律会起到什么作用？
小部分的解决方案有很大的几率会被使用，把焦点放在他们上面，看看哪20%的创意才是那80%的最终定稿。
5.风格统一
使用已有的或者自己设计一系列标记符号，让你的草图看起来更靠谱点，同时们会很容易理解你的风格，并且很快会通过你的草图提出反馈意见。
6.快速记下所有的东西
在你画的时候，新的问题和想法将会一连串的冒出来，快速地把他们记下来，不然，它们就飞了，飞了。
7.莫要害羞
把你的草图拿出来，把它们钉在墙上，时不时地把它们展示给其他人看，收获一些回馈。
8.当你怀疑自己时，多画！
如果你对自己地方案不确定时，开始画不同的风格。列出它们的优势和不足，得到一些建议，比较出哪个才是最好的方案。
Enjoy～：）
小霸王学习机
22
作品
73
粉丝
5
关注
大牛，别默默的看了，快登录帮我点评一下吧！:)
登录 立即注册