你需要了解的有关UX素描的一切 _素描

本文概述

UX草图绘制分为两个步骤
UX草图和线框：简介和分类
基础入门
使用其他元素澄清草图
更具体的技巧和窍门
其他迷你方法可改善草图
线流：概述系统流和分支
速写UX流：快速入门指南
基本UX流草绘技巧和窍门
包起来

如果你完成了认真的创意工作, 那么你对创意广告块就会非常熟悉。感觉就像撞墙一样：你无法想象的任何想法都足够好, 或者在现实生活中行不通。
对于设计师来说, 这种感觉太熟悉了。但是, 就像任何复杂的问题(没有明确的解决方案)一样, 智能流程可以带来所有不同。这就是UX草绘的来源。
UX草图绘制是用户体验设计的关键但经常被忽略的方面。草图绘制是一种非常有效的沟通设计的方式, 同时允许设计师尝试多种想法并在确定一个想法之前对其进行迭代。
在本文中, 我打算介绍你需要了解的有关UX草绘的所有内容, 包括以下几点：

UX草图和线框简介
UX素描的基础知识, 工具和技术
用注释, 注释, 数字澄清草图
UX素描技巧和窍门
旨在提高质量和生产率的迷你方法
你需要了解的所有关于Wireflows的信息
UX流草绘快速指南

UX草图绘制分为两个步骤在设计中必须考虑许多选择, 这导致选择和执行最佳选择。设计人员考虑他们的选择, 然后继续制定细节, 从而使UX设计分两步进行：

文章图片

思想产生

在最初的步骤中, 会产生多个想法, 但是由于它们无法完全成形, 因此某些元素不完整或缺失并不罕见。主要的事情是考虑不同的方法, 并确定哪种方法在你的任务和项目的各种约束中是最有效的。

添加细节和细化

逐步地, 你确定了一些有希望的变体, 然后继续进行具体工作, 从而使某些想法不合适。
UX草图和线框：简介和分类你的线框可能会有所不同, 具体取决于多种因素, 例如所需的详细程度, 颜色和样式, 是否要向他人展示等等。

文章图片
好的草图将帮助你思考得更清楚, 找到更好的解决方案并节省时间。
鸣叫
我选择了以下草图类型：

草图：创意产生

这些是初始草图。较低级别的详细信息只需注明。使用了有限数量的颜色。
我画了许多基本草图, 从不同角度考虑问题并考虑不同的解决方案。在绘制此类草图时, 我也正在努力生成尽可能多的解决方案变体。
在这一特定步骤上, 不完整让我解放了思想, 这就是为什么在这个阶段避免陷入细节中如此重要的原因。我的目标是产生尽可能多的想法并选择最有前途的想法。

线框：规格, 详细阶段

我通常会选择有希望的草图并仔细研究细节, 然后选择最佳的变体并进行更详细的设计。
但是, 这并不意味着每一个细节。显而易见的事情可能只是被注意到。此外, 某些方面将很难在纸上描述。
在这一步, 我绘制了所有重要的细节, 但是我还没有在Balsamiq中绘制线框。在纸上完成所有步骤后, 我开始在Sketch中进行绘制。
数字工具比纸张提供了更多的创作自由, 你可以轻松地将注意力转移到小事上。例如, 你可以专注于” 像素抛光” 而不是设计。

视觉设计稿

这是一种很少使用的方法, 但有时会有所帮助。在项目的早期阶段就考虑了各种视觉解决方案, 但是为所有这些视觉解决方案创建数字草图可能会花费很长时间。这就是为什么我首先在??纸上绘制设计草图, 以考虑不同的选择并选择视觉设计方向的原因。

组件/元素细分

当我已经有了一个大致的想法并且正在考虑特定的页面功能或界面组件的组成部分时, 我发现该技术很有用。我绘制了不同的页面元素, 进行了详细介绍, 然后绘制了页面元素的不同位置。
元素, 即使是最简单的元素, 也必须具有状态。可以按下一个按钮, 它的悬停文本块可能为空, 也可能不为空。它越复杂, 其状态就越多。

文章图片
基础入门

准备工具-找到可能的最方便的地方, 一张有足够空间的大桌子。拿很多纸, 准备一些笔和记号笔。
热身-为了做好准备, 我建议绘制一些线, 圆, 基本模板和图标。
定义目标-确定要绘制的内容。设定目标并决定要讲的故事。确定所需的详细程度。确定你是否准备画很多东西。
定义目标受众-如果你自己进行操作, 则无需担心草图的外观。但是, 如果要向客户显示工程图, 请确保你有一些额外的时间向草图中添加更多细节。
设定时间范围-决定要准备素描的时间(例如30分钟)后, 你将可以专注于工作。

现在, 你已经准备就绪, 可以开始：

绘制边缘-绘制框架, 浏览器或电话窗口, 界面的一部分, 等等。
添加最大或基本元素-菜单, 页脚, 主要内容。
添加详细信息-添加相关详细信息, 但在此阶段使它们保持简单。
添加注释和注释-仅当你计划共享草图时才需要这些注释和注释。但是, 即使你只为眼睛而做, 它们也可能有用。
草绘替代方案-草绘一些快速替代方案。
选择最佳解决方案-选择最佳选项。
添加阴影和斜角-这对于共享目的尤其重要。添加阴影以使草图具有视觉吸引力, 如果你打算与团队成员和/或客户共享该阴影, 则这一点很重要。
保存草图-拍摄照片或将其放在文件夹中。我桌上有几个纸盘供素描。
共享-我通常使用以下共享方法之一：*通过Evernote扫描草图, 并提供与其他团队成员或利益相关者的永久链接。 *拍照并上传到InVision。 *上传图像并将其映射到Realtimeboard。 *或只是通过电子邮件发送照片。
查看草图并添加注释-稍事休息, 稍后再返回草图。再看看他们。草图对你仍然有意义吗？好的草图必须易于遵循。

文章图片
如果你作为设计师无法理解草图中的某些内容, 那么该解决方案将不会成功。草图无法让你很好地形象化你的想法, 或者想法太复杂。
使用其他元素澄清草图查找或绘制适当的草图, 然后向其中添加以下详细信息：

标题-有时添加标题是一个不错的选择。如有必要, 在草图顶部写下描述和日期。标题将帮助你了解所查看的内容以及草图是否相关。如果你有很多草图或要展示给其他人, 这特别有用。
注释-注释是放置在元素附近的名称和注释, 用于解释其内容或其他属性。它们添加了一些细节以阐明其他元素, 并且通常很难绘制。例如, 它可以是块的名称, 一些交互细节, 图片说明, 有关将来设计变更的一些想法, 等等。你可以查看我的示例之一, 以查看注释草图的外观。
数字-为草图的元素或草图本身编号。你可以决定如何排序(例如, 通过交互流程, 创建它们的顺序等)。在讨论(尤其是远程讨论)期间, 它也可能很有用, 因为你的同事和客户只需在反馈中指出草图编号, 你就可以理解他们的评论指的是哪个。
箭头-你可以使用箭头指示屏幕过渡。它们还可以用于连接草图的不同部分, 指示一系列动作等。由于箭头的含义可能会有所不同, 因此可以在箭头的正上方添加对箭头含义的描述或解释。这是显示过渡和几种不同状态的基本草图的示例。
注释-就像注释一样, 注释用于解释概念。但是, 注释的位置与注释不同。类似于此示例, 它们未附加到元素或未位于描述的元素附近。注释可以放在页面的顶部或底部。他们甚至可以描述设计中未包含的元素, 你可能遇到的问题, 一般性说明, 简单的想法等等。
【你需要了解的有关UX素描的一切】手势-手势与触摸设备设计有关。绘制手势可能需要练习。手势有多种变体, 用于指示不同类型的动作, 因此最好事先确定如何指定特定动作(当然, 如果不太明显的话)并练习绘制它。
反馈-向其他人展示草图或亲自查看草图后, 你可能会收到有关修复或改进草图的建议。用不同的颜色标记此类反馈通常很有用, 以帮助将反馈与原始草图区分开。

你可以为不同类型的元素使用不同的颜色。有时我将黑色用于工程图, 将蓝色用于链接, 将深绿色用于注释, 将红色用于标题和反馈。尝试在草图中使用不同的颜色, 但请确保选择的颜色一致！

文章图片
更具体的技巧和窍门

不用担心质量-不要看Dribble上的草图；它们是完全不同的东西。请记住, 草图的主要目的是帮助你更清晰地思考, 找到更好的解决方案并节省时间。
练习-首先, 你可以尝试绘制一些应用程序。打开一个Web或移动应用程序, 然后尝试复制屏幕, 以描述便笺中的元素。每当你有空闲时间时, 请练习绘制设计的基本构建块。通常, 实践是完美的。一段时间后, 它将成为你设计师的一部分。
买一个文件夹-我通常不在办公室工作, 而是在咖啡馆或家中工作。纸质素描很容易损坏, 因此请购买一个简单的文件夹以确保它们的安全和声音。
随身携带工具-这有助于确保你可以随时在纸上捕捉到你的想法, 否则你可能会失去想法或无法足够详细地记住它。我总是有一个记事本, 几张A4纸和笔。
与他人共享-与他人互动并与你的团队进行交流非常重要。从长远来看, 让他人参与并获得他们的反馈, 尤其是在早期就可以帮助节省时间和资源。你还可以鼓励其他人画出他们设想设计的方式。
纸盘-考虑将纸盘放在工作台上。例如, 我有三个：用于接收任务, 草图和干净的纸张。
实验和自定义-我的建议基于我的经验。随着时间的流逝, 你会发现最适合自己的事物；哪种方法, 哪些步骤顺序, 什么才能充分发挥你的创造潜能。仅当你不断尝试一些新事物时, 你才能到达那里。这就是为什么尝试使用不同的格式, 样式并尝试新的模板很重要。
使用模板-模板将节省时间, 并隐式考虑了格式限制, 从而腾出更多时间专注于重要内容。

其他迷你方法可改善草图这些不一定是技巧, 但是它们是方法, 工具和建议的集合, 应该可以提高工作效率或改善草图的质量。

文章图片

创建素描板-使用笔和纸代替数字素描工具的最大好处之一是, 你实际上可以将其粘贴在墙上。你团队中的每个人都可以看到它并参加(尽管我建议你设置审核会议)。 *你将自己看到草图, 这将激发你的思维, 并使你看到全局, 而不是孤立的部分, 而是整个系统。你将看到零件之间的相互作用及其相互配合的方式。 *创建草图板-附加你的白板草图。如果办公室中没有白板, 则可以使用双面胶带或便签纸将草图粘贴到墙上。如果你不想粘在墙上, 可以找一大块硬纸板。我强烈建议你使用草图板, 因为它们是最好的设计工具之一。
使用白板-白板是很棒的绘图工具。它具有许多优点：协作；很容易让其他团队成员参与讨论和绘制图纸。即使他们的想法不合适, 你也会理解他们的思维方式, 这将有助于你保持一致。 *标记不允许你将注意力集中在细节上, 而必须考虑一般性的事情。草图易于解释。 *白板易于清洁和校正。 *空间很大, 你可以轻松地思考整个系统流程。 *你可以使用磁铁附上草图, 打印输出和参考资料。
原型-创建可点击的原型以评估你的设计。尝试获取有关某些元素的反馈。当你使用模板时, 这特别有效-草图的大小相同。显然, 如果使用模板, 则绘制相同尺寸的草图会容易得多。我将尝试通过为你提供一些可供下载和使用的模板来使其变得更加容易：移动, 浏览器多窗口, 浏览器滚动, 角色。
使用打印机和扫描仪-手工绘制框架(可以使用标尺更精确地绘制), 然后仅使用扫描仪或移动应用程序对其进行扫描并进行打印。你可以在打印之前在图像编辑器中编辑模板。你可以删除不必要的详细信息或重复某些元素。你还可以打印现成的网站页面, 照片和其他描述性元素。你可以将切口粘贴到草图中。
使用Evernote进行扫描-Evernote是一款出色的设计工具。你可以保留并共享其中的草图, 可以创建主题, 并使用标签来组织草图。 “ 扫描仪” 模式的功能尤其令人印象深刻。你将草图放在其前面, 然后对其进行” 扫描” , 从而获得草图的副本。然后, 你可以邀请你的同事加入Evernote, 并为他们提供你的便笺链接。由于有一款适用于平板电脑和手机的移动应用程序, 因此你随时可以随手准备草图。
混合草图-要在草图中融入生活和真实感, 可以将它们与照片结合使用。这意味着你必须拍照, 然后在界面上绘制一些带有界面元素的故事。这也可以帮助你注意到一些交互问题和详细信息。
追踪真实世界-如果你需要创建情节提要, 在特定背景下(例如, 在公交车站使用智能手机的人)说明经历, 则需要包括人物, 地点和各种现实对象的描述。这些可能很难绘制, 特别是如果你还没有掌握绘制技巧, 但是这里有个简单的提示：

拍摄对象或情况的照片, 然后使用图像编辑器获取关键对象的轮廓。之后, 你可以在草图中使用生成的轮廓。
当然, 如果你有平板电脑和手写笔, 它将更加容易。
线流：概述系统流和分支线流本质上是一个系统流程的一个序列, 一个接一个屏接一个屏幕, 带有分支和决策点。我们应该考虑用户如何完成任务, 在屏幕之间移动的方式以及产品在一段时间内的整体体验。

文章图片
可以根据以下方法来组织Wireflow或所绘制的内容及其连接方式：

序列-序列是一个接一个屏幕的连续旅程。它也可以是带有决策点的故事。你不仅可以显示旅程, 还可以显示决策点和用户可以选择的不同路径。你可以显示屏幕交互的结构。
状态更改-描述某些元素的不同屏幕状态以及导致这些状态之间转换的条件或动作。
屏幕与屏幕元素-你可以绘制整个屏幕或考虑微交互和交互。
平台-你可以考虑一种平台经验或多种平台。
范围-你将描述用户旅程的一部分还是整个旅程？一个用户与系统的交互, 还是多个用户的交互？

我通常尝试根据组织和实际用途定义以下线流类型：

文章图片

绘制总体流程和高层流程-迅速绘制屏幕偏移并绘制产品使用的总体过程。在这里, 你可以包括一些上下文, 并且可以选择显示一些用户交互。例如, 电子商务购物服务的旅程很长, 可能包括很多步骤：用户如何找到商店, 他们订购产品的步骤, 付款方式等等。
屏幕流程-着重于通过系统的特定功能流程。它可能是一小段直线的屏幕, 也可能是分支的旅程。例如, 用户上传一些照片或视频。
导航方案-绘制屏幕及其包含的选项。这不应该映射旅程。此步骤包括显示用户可以选择的选项, 用户的指示以及各种应用程序部分的信息。我通常在项目开始时创建一个导航方案。它有助于理解导航的结构(应该包括哪些点, 需要多少级)。
屏幕状态-绘制屏幕或元素状态(示例可能是文件上传对话框)。例如, 在这种情况下, 屏幕将具有以下状态：*空白*用户在活动区域??中拉出文件*文件正在上传*文件已上传*错误

速写UX流：快速入门指南线流设计过程类似于线框设计过程。许多步骤相似或相同, 但有一些重要区别：
定义你需要绘制的内容-准确确定要绘制的内容(例如, 一般的历史记录或设计的片段)。你是要产生不同的选择还是要思考一次旅程的细节？确定是否要向其他人展示草图。
定义应在图形中包括哪些关键帧和过渡-如果添加所有屏幕并进行平移, 则线流将非常长且复杂。考虑应该显示哪些关键屏幕, 以传达有助于完成任务的交互的本质。屏幕移位也是如此。你需要选择哪些转变对表达你的想法更有用。查看此示例以供参考。
定义起点-你旅程的起点是什么？你可以从入口点开始, 即旅程的起点, 例如, 用户登录到你的应用时看到的内容。或者, 你可以从中点开始, 或者从最有趣/最困难/重要的屏幕或处理步骤开始。或者, 你可以从最终开始, 直到用户获得最终结果, 然后描述用户达到此点为止所采取的步骤。

文章图片
定义你的方法并制作一般的纸本草图。
决定下一步-确定开始步骤后, 通过回答以下问题来决定下一步：

此步骤以哪种方式引导用户？
你希望他们走哪条路？
他们要做什么才能到达那里？

画出替代路线, 条目-考虑用户可以到达每个步骤的替代方法：

如果用户的Internet连接失败, 将会发生什么？
他们还有什么其他选择？
如果出现用户或应用程序错误, 会出什么问题, 会发生什么？
如果用户在此步骤关闭应用程序, 将会发生什么？
用户下次启动应用程序时将从何处开始？

考虑替代流程-分析历史记录, 设计替代流程, 然后对其进行草绘。
添加注释, 注释, 详细信息-添加说明性元素, 以澄清非显而易见的细节。
保存-制作草图的数字副本。
共享-共享草图(例如, 通过Evernote或Invision)。
基本UX流草绘技巧和窍门首先草拟一个流程-如果你要考虑很长的一段路程, 最好进行快速草图, 以了解你需要多少空间, 并且不要错过一些重要的步骤或细节。之后很难将它们添加到图纸中。
请勿创建包含过多细节的大型地图-纸质草图没有撤消按钮, 因此很难进行更改。你可能会过于精确地绘制细节, 这会使你的想象力分散在生成不同的高级变体中。与其创建一个庞大的方案来说明整个系统, 不如着重于关键脚本并尝试为每个脚本分配一个单独的页面。
减少不必要的细节并组合各种详细级别-不必绘制所有交互描述, 因此请尝试仅使用旅程中的关键要素。在绘制巨大的交互图时, 你无需详细研究每个屏幕。一些屏幕可以仅由几个正方形表示, 而其他关键屏幕可以进行详细计算。
尝试不同的纸张尺寸-尝试不同的纸张格式, A3或A5。纸张尺寸将限制你, 并以不同方式影响你的过程。一小张纸不会让你添加许多屏幕或细节, 但可以帮助你专注于主要思想。使用一张大纸片, 你可以绘制一个巨大的旅程, 许多细节和附加说明。另外, 你可以在上面进行一些小旅行。
便利贴也可以提供帮助-你也可以尝试使用便利贴。你可以在屏幕上绘制单独的屏幕或一些脚注, 也可以绘制草图元素的其他状态。它们的优点是可以轻松更换它们, 也可以将便笺移动到其他位置。例如, 如果流程已更改, 则只需更改便笺的顺序即可。
使用模板-尝试使用模板。它们将节省时间, 并使你能够创建更多可点击的高质量原型。
尝试使用白板-白板有很多优点。它正变得越来越流行, 因为它使你可以使用许多分支机构进行巨大的旅程。你可以在纸上绘制很多应用程序组件, 然后使用磁铁将它们附着到白板上, 从而将它们添加到旅程中。
绘制阴影-阴影可以帮助你标记重要元素, 并且可以增加草图的视觉吸引力。我使用三种不同类型的阴影

沿着光的方向的线-并不总是看起来很漂亮, 但是你可以使用分度线将物体拾取到不同的” 高度”
用深色(仅底部或底部和右侧)勾勒出某些部分的轮廓
使用Pro标记(或用于绘图的应用程序中的等效标记)

绘制组件-诸如” 我不能很好地绘制” 之类的异议可能会扼杀你的主动性。实际上, 这比听起来容易。像本示例一样, 即使是最复杂的草图也通常由许多基本块组成。
如果可以绘制点, 线, 三角形, 正方形和圆形, 则你具有必要的基本构造块, 可以为草图绘制任何内容。
放在一起-基本元素, 按钮, 单选按钮和下拉列表由基本元素组成。学习绘制这些元素之后, 可以将它们组合起来并绘制复杂的块和组件。
包起来这篇文章的目的不是要为UX素描或一般素描创建终极的, 一刀切的指南, 因为设计师有不同的需求和个人喜好。
如你所见, 这涉及很多内容。设计师使用多种工具, 技术和方法来制作UX草图, 这是相当主观的。某些技术可能适用于或可能不适用于从事不同项目的不同人员。如果你只是入门, 那么一定要尝试一下。
不断的练习和实验将帮助你找到最适合自己的方法。
你可以选择最适合你的项目和设计方法的技巧和技术。你是否还有其他UX使用者的素描技巧？随时在评论部分分享它们。
相关：有意义的用户体验设计艺术
? ? ?
在srcmini设计博客上进一步阅读：