如果你做过任何严肃的创造性工作，你都太熟悉创造性障碍了. 感觉就像撞上了一堵砖墙: 你能想象到的想法都不够好，或者不能在现实生活中发挥作用.
对于设计师来说，这种感觉太熟悉了. 然而, 就像任何没有明确解决方案的复杂问题, 一个聪明的流程可以让一切变得不同. 这就是UX草图的用武之地.
用户体验草图是用户体验设计中一个至关重要但又经常被忽视的方面. 草图是传达设计的一种非常有效的方式，同时允许设计师在确定一个想法之前尝试大量的想法并进行迭代.
在这个UX设计草图教程, 我打算涵盖所有你需要知道的UX设计草图, 包括以下几点:
在设计中必须考虑许多选项，这导致了选择和执行 最好的一个. 设计师考虑他们的选择, 然后着手解决细节问题, 因此，UX设计是一个两步的过程:
在初始阶段, 产生了多种想法, 但由于它们不能完全成形, 一些元素不完整或缺失的情况并不罕见. 最重要的是要考虑不同的方法，并决定在你的任务和项目的各种限制的背景下，哪一个是最有效的.
一步一步地, 您选定了一些有希望的变体，并着手解决具体问题, 因此，有些想法是不合适的.
您的线框图可能会根据所需的细节级别等因素而有所不同, 颜色和风格, 你是否要把它们给别人看, 等等.......
我挑选了以下几种素描类型:
这些是最初的草图. 较低级别的细节被简单地记录下来. 使用的颜色数量有限.
我画了很多基本的草图，从不同的角度考虑问题，考虑不同的解决方案. 在绘制这些草图的同时，我也在努力生成尽可能多的解变体.
在这个特定的步骤中, 不完整解放了我的思想, 这就是为什么在这个阶段避免陷入细枝末节如此重要的原因吗. 我的目标是产生尽可能多的想法，并选择最有前途的.
我通常会挑选一些有希望的草图，然后仔细检查细节, 然后，我选择最好的变体，并更详细地研究它.
然而，这确实 不是指每一个细节. 显而易见的事情可能会被注意到. 此外，有些方面将难以在纸上描述.
在这一步，我画出所有的 重要的细节，但我还没有画线框图 Balsamiq. 在纸上完成一切后，我开始在素描中绘画.
数字工具提供了比纸张更多的创作自由，你可以很容易地将注意力转移到次要的事情上. 例如，你可以专注于“像素抛光”而不是设计.
这是一种很少使用的方法，但有时会很有帮助. 在项目的早期阶段考虑了各种视觉解决方案, 但要为所有人制作数字草图可能需要很长时间. 这就是为什么我首先在纸上画设计草图, 考虑不同的选项，选择一个视觉设计方向.
当我已经有了一个大致的想法，并且我正在考虑一个特定的页面功能或接口组件的组成部分时，我发现这种技术很有用. 我绘制不同的页面元素, 讲细节, 然后绘制页面元素的不同可能位置.
元素, 即使是最简单的, must have a state; a button can be pressed and it has a hover text block that may or may not be empty. 它越复杂，它的状态就越多.
现在，你都准备好了，可以开始了:
画出边缘. 绘制框架、浏览器或手机窗口、部分界面等.
添加最大或最基本的元素: 菜单，页脚，主要内容.
添加细节. 添加相关细节，但在这个阶段保持简单.
添加注释和注释. 只有当你打算分享这些草图时才需要这些. 然而，即使你只是为了自己的眼睛而做，它们也是有用的.
草图方案. 为您的解决方案勾勒出一些快速的替代方案.
选择最佳解决方案. 选择最好的选项.
添加阴影和斜面. 这对于共享目的尤其重要. 添加阴影，使你的草图在视觉上吸引人, 如果你打算与团队成员和/或客户分享，哪一点是重要的.
保存草图. 拍张照片或把它放在文件夹里. 我桌上有几个纸盘，用来放草图.
找到或画一个合适的草图，然后添加以下细节:
Title. 有时，添加标题是一个不错的选择. 如有必要，在草图的顶部写上描述和日期. 标题将帮助你理解你正在看什么，以及草图是否相关. 如果你有很多草图，或者你要给别人看，这是特别有用的.
注释. 注解是放置在元素附近的名称和注释, 解释其内容或其他属性. 他们添加细节来澄清其他元素，通常很难画出来. 例如, 也可以是街区的名字, 一些交互细节, 对图片的解释, 对未来设计变化的一些想法, 等等....... 你可以 看看我的一个UX草图示例 看看注释草图是什么样子的.
数字. 为你的草图或草图本身的元素编号. 你可以决定如何订购.g.，通过交互流程，您创建它们的顺序等.). 它在讨论(尤其是远程讨论)期间可能也很有用。, 因为你的同事和客户可以在他们的反馈中指出草图编号，你就会明白他们的评论指的是哪一个.
箭头. 您可以使用箭头来指示屏幕转换. 它们也可以用来连接草图的不同部分, 指示一系列的动作, 等等....... 因为箭头的含义可以变化, 就在箭头的上方，你可以添加一个描述或解释箭头的意思. 这里有一个 例子 一个基本的草图显示了一个过渡和几个不同的状态.
笔记. 和注释一样，注释是用来解释概念的. 但是，注释与注释的位置不同. 它们不附属于某一元素或位于所述元素附近; 类似于这个例子. 注释可以放在页面的顶部或底部. 它们甚至可以描述设计中没有包含的元素, 你们可能有问题, 一般的解释, unsketched想法, 等等.......
手势. 手势在触控设备设计中很重要. 画一个手势可能需要练习. 手势有几种变体，用来表示不同类型的动作, 所以最好提前决定如何指定一个特定的动作(如果不是很明显的话), 当然)，并练习绘制它.
反馈. 在将草图展示给他人后，您可能会收到修复或改进草图的建议, 或者在你自己再看一遍之后. 用不同的颜色标记这些反馈通常是有用的，这样有助于将反馈与原始草图区分开来.
您可以为不同类型的元素使用不同的颜色. 有时, 我用黑色画画, 蓝色表示链接, 深绿色为笔记, 红色代表标题和反馈. 试着在你的草图中使用不同的颜色，但要确保你选择的颜色是一致的!
不要担心质量问题. Don’t look at the sketches on Dribbble; they are about something 完全不同的. 记住，草图的主要目的是帮助你更清晰地思考, 寻找更好的解决方案, 节省时间.
实践. 首先，你可以尝试画一些应用程序. 打开一个网页或移动应用程序，试着复制屏幕，描述笔记中的元素. 只要你有空闲时间，就练习画出你设计的基本构件. 总的来说，熟能生巧. 过不了多久，它就会成为你设计师自我的一部分.
买一个文件夹. 我经常不在办公室工作，而是在咖啡馆或家里工作. 纸上的草图很容易损坏，所以买一个简单的文件夹来保护它们的安全.
无论走到哪里，都要随身携带工具. 这有助于确保你可以随时在纸上捕捉到你的想法, 否则，你可能会失去这个想法，或者无法记住足够的细节. 我总是带着一个记事本，几张A4纸和笔.
与他人分享. 让其他人参与进来并与你的团队进行沟通是非常重要的. 让其他人参与进来，并得到他们的反馈, 尤其是在早期, 从长远来看，有助于节省时间和资源. 你也可以鼓励其他人按照他们设想的设计方式来画.
纸托盘. 想象一下在你的工作台上放一个纸托盘. 举个例子，我有三个:用来记录即将到来的任务、草图和干净的纸张.
实验和定制. 我的建议是基于我的经验. 在时间, you’ll find out what suits you best; which methods, 步骤顺序是什么?, 怎样才能真正发挥你的创造潜力. 只有不断尝试新事物，你才会成功, 这就是为什么尝试不同的格式很重要吗, 风格, 尝试新的模板.
使用模板. 模板将节省时间，并隐式地考虑格式限制, 腾出更多的时间来专注于重要的事情.
这些不一定是技巧和诀窍, 但它们是方法的集合, 工具, 以及可以提高你的工作效率或提高你的草图质量的建议.
原型. 制作一个可点击的原型来评估你的设计. 试着获得关于某些元素的反馈. 当你使用模板时，这种方法尤其有效——你的草图大小相同. 显然，如果使用模板，绘制相同大小的草图会容易得多. 我将尝试通过提供一些您可以下载和使用的模板，使它更容易: 移动, 多窗口浏览器, 浏览器滚动, 角色.
使用打印机和扫描仪. 手工绘制框架(可以用尺子画得更准确), 然后只需使用扫描仪或移动应用程序扫描即可, 然后打印出来. 您可以在打印之前在图像编辑器中编辑模板. 您可以删除不必要的细节或复制某些元素. 您还可以打印现成的站点页面、照片和其他描述性元素. 你可以把剪纸粘贴到你的草图中.
使用印象笔记扫描. Evernote是一个很棒的设计工具. 你可以保存和分享你的草图, 你可以创建主题, 用标签来组织你的草图. “扫描”模式的能力尤其令人印象深刻. 你把你的草图放在它面前，它“扫描”它，所以你得到了草图的副本. 然后你可以邀请你的同事到Evernote并给他们你的笔记链接. 因为平板电脑和手机上有一个移动应用程序，你可以随时把你的草图放在手边.
混合的草图. 为了在你的草图中加入一些生活和现实主义，你可以将它们与照片结合起来. 这意味着你必须拍一张照片然后在上面画一些带有界面元素的故事. 这还可以帮助您注意到一些交互问题和细节.
线流本质上是系统流的一个序列, 一遍又一遍, 有分支和决策点. 我们应该考虑用户如何处理他们的任务, 它们从一个屏幕移动到另一个屏幕, 以及他们对产品的整体体验.
Wireflow, 或者你在画什么以及它们之间的联系, 可按以下方式组织:
我通常尝试定义以下线流类型, 根据组织和实际用途:
映射整体流和高级流. 及时勾勒出屏幕切换，并绘制出产品使用的总体过程. 这里可以包含一些上下文，还可以选择性地显示一些用户交互. 例如, 电子商务购物服务是一个相当长的旅程，可能包括许多步骤:用户如何找到商店, 他们订购产品的步骤, 他们如何付款, 等等.......
屏幕流. 这侧重于通过系统的特定功能流. 它可以是一个简单的屏幕序列，也可以是一个带有分支的旅程. 例如，用户上传一些照片或视频.
导航方案. 画出你的屏幕和它包含的选项. 这不是用来描绘旅程的. 此步骤包括显示用户可以选择的选项的信息, 用户的指示, 以及各种应用程序部件. 我通常在项目开始时创建一个导航方案. 它有助于理解导航应该如何构建(应该包含哪些点), 需要多少个关卡?.
屏幕状态. 绘制屏幕或元素状态(例如文件上传对话框). 例如，在这种情况下，屏幕将具有以下状态:
线流设计过程与线框设计过程类似. 许多步骤是相似或相同的，但有一些重要的区别:
定义你需要画什么. 确定你想画什么(e).g.(一般历史或设计的片段). 你是想产生不同的选择，还是想仔细考虑一次旅行的细节? 决定你是否要把你的草图给别人看.
定义绘图中应该包含的关键帧和过渡. 如果你添加了所有的屏幕和转换，你的流程将会很长很复杂. 考虑您应该显示哪些关键屏幕来传达有助于完成任务的交互的本质. 换屏也是一样. 你需要选择在表达你的想法时，哪种转换更有用. 看看 这个例子 供参考.
定义起点. 你旅程的起点是什么? 您可以从入口点i开始.e.例如，用户登录你的应用时看到的内容. 另外, 你可以从中点开始，或者从最有趣/困难/重要的屏幕或过程步骤开始. 或者你可以从最后开始, 最终结果由用户实现, 并描述用户采取的步骤，以达到这一点.
决定接下来要做什么. 在画出开始的步骤后，通过回答以下问题来决定下一步要做什么:
勾勒出替代路线，条目. 考虑用户进入每个步骤的其他方式:
考虑可选流程. 分析历史，设计备选流程，并绘制草图.
添加注释、注释、细节. 添加解释性元素来澄清不明显的细节.
保存. 制作一个草图的数字副本.
分享. 分享草图(e).g.(通过Evernote或InVision)。.
先起草一份无线流. 如果你要考虑相当长的一段旅程, 你最好做一个快速的草图，以便了解你需要多少空间，为了不错过一些重要的步骤或细节. 之后很难将它们添加到纸上草图中.
不要创建一个有太多细节的大地图. 纸上的草图没有 撤销 按钮，因此很难进行更改. 你可能把细节画得太精确了，这会分散你对生成不同高级变体的想象. 而不是创建一个庞大的方案来说明整个系统, 尝试专注于关键脚本，并尝试为每个脚本专门一个页面.
删减不必要的细节，结合各种细节层次. 没有必要绘制所有的交互描述, 所以尽量只使用你旅程中的关键元素. 在绘制一个巨大的交互图时，您不需要详细地绘制每个屏幕. 有些屏幕可以只用几个方块来表示, 和其他, 关键屏幕, 可以详细地算出来吗.
尝试不同的纸张尺寸. 尝试不同的纸张格式，A3或A5. 纸张大小会限制你，并以不同的方式影响你的过程. 一张小纸不能让你添加很多屏幕或细节, 但它可以帮助你集中在主要思想上. 用一张大纸，你可以画一个大的旅程，很多细节，和额外的笔记. 或者，您可以在上面放置一些小的旅程.
便利贴也有帮助. 你也可以尝试使用便利贴. 你可以在上面画单独的屏幕或一些脚注, 或者您可以绘制草图元素的其他状态. 它们的优点是很容易被替换, 你也可以简单地把纸条移到别的地方. 例如，如果流程发生变化，您可以更改便利贴的顺序.
使用模板. 尝试使用模板. 它们将节省时间，并使您能够创建更多可点击的高质量原型.
尝试使用白板. 白板有很多优点. 它变得越来越受欢迎，因为它可以让你画一个巨大的旅程与许多分支. 你可以在纸上画很多应用组件，然后用磁铁把它们粘在白板上, 将它们添加到旅程中.
画阴影. 阴影可以帮助你标记重要的元素，并为你的草图增加视觉吸引力. 我使用 三种不同类型的阴影:
画组件. 像这样的反对 “我画得不太好” 可能会扼杀你的主动性. 这实际上比听起来容易. 即使是最复杂的草图通常也由许多基本块组成，比如 这个例子. 如果你能画一个点, 一条线, 一个三角形, 一个正方形, 还有一个圆, 然后你就有了基本的构建块，你需要为你的草图画任何东西.
把它们放在一起. 基本元素、按钮、单选按钮和下拉菜单都是由基本元素组成的. 学会绘制这些元素后，你就可以 把它们 并绘制复杂的块和组件.
这篇文章的目的并不是要创造终极, 一刀切的UX草图指南, 或者一般的素描, 因为设计师有不同的需求和个人喜好.
如你所见，这是 很多 覆盖. 设计师使用无数的工具, 技术, 以及制作UX草图的方法, 这是相当主观的. 某些技术可能适用于从事不同项目的不同人员，也可能不适用. 如果你刚刚开始，你一定要多做实验. 不断的练习和实验将帮助你找到适合你的方法.
这取决于您选择最适合您的项目和设计方法的技巧和技术. 你有其他的素描技巧吗 UXers? 欢迎在评论区分享.
加拿大安大略省多伦多
2016年2月8日成为会员
世界级的文章，每周发一次.
世界级的文章，每周发一次.
