河源企业网站建设：构建点击原型以支持参与式设计

作为UX专业人士，我们经常与利益相关者（包括直接团队成员和外部客户）一起领导设计练习。在这些头脑风暴会议中，参与者发现了改进设计的机会，从而使每个人的愿景和项目期望保持一致。河源企业网站建设

在此类活动期间，团队将生成纸质或白板草图等概念。虽然这些文物给出了一万英尺的新设计视图，但我认为它们不能整体呈现这些作品，因为它们限制了参与者对交互性和系统流程的可视化。这是点击原型进入图片的地方。

本文将介绍使用Prototyping on Paper（或POP）应用程序在iPhone上进行点击原型设计。我还将介绍原型设计如何适合参与式设计以及为什么草图绘制是先决条件。我的目标是介绍该工具，分享我的原型制作经验并讨论竞争对手。为了说明应用程序的功能，我为假设的新闻网站设计了一个简单的移动Web体验（您可以在本文末尾找到链接）。让我们来探索POP吧！

原型的重要性

线框在捕获流动，交互和动画等动态元素方面效果不佳，参与者被迫消化数十个（如果不是数百个）PDF页面。Todd Warfel在Prototyping：A Practitioner's Guide中提到原型设计可以为项目增加协作。我想补充一点，原型设计可以为设计注入活力，为其提供方向。它的迭代性使我们能够加速多个概念的测试，以便最好的设计能够在多轮头脑风暴中存活下来。

原型设计可以通过各种技术和工具完成，一些是专门建造的，另一些是必要的。在他的书“ 草绘用户体验：工作手册”中，Bill Buxton 在书写和数字化草图的背景下解释了原型技术。原型设计还具有不同级别的交互式保真度：素描和纸质模型将演变为点击原型，这将成为具有复杂事件模型的高保真原型。有关原型制作工具的深入分类，请参阅Ritch Macefield的文章“ 你还在使用早期的原型制作工具吗？”

用户体验从业者的示例原型工具包。大视图。

高保真原型不足

参与式设计很快，中断很多。个人提出他们的想法，意见飞得很高，设计也在不断修改。因此，可以安全地询问如何有效地使用原型来捕获所创建的概念设计。高保真原型是答案吗？

高保真原型需要前期规划，对软件内部工作的深入了解以及最佳实践方面的专业知识，这对于技术上不合理的参与者来说是一个障碍。复杂性越大，实施结构变革所需的时间和金钱就越多。在参与式设计过程中更新复杂的原型可能是一场噩梦。相反，通过使用依赖点击体验的简单原型，我们可以轻松地将头脑风暴会议产生的草图拼接在一起，有助于更清晰地传达设计概念。

点击原型是答案

许多用户体验设计应用程序都支持它，但是什么是点击原型？点击原型通过热点链接多个屏幕（热点是一个屏幕区域，一旦通过点击或点击进行交互，将用户重定向到目标屏幕）。屏幕可能有多个其他屏幕的热点，允许您将复杂的流程放在一起，而无需专注于交互性。

点击原型有两种类型。在第一篇（本文的重点）中，将白板或纸模板的照片加载到原型制作软件中，然后链接在一起。第二个使用交互式软件小部件重现相同的草图，具有内置的UI交互性（例如，滑动检测，表单定制等）。一个很好的例子是LessCode的界面应用程序（适用于iPhone和iPad）。

第二种点击原型的示例说明了热点链接。大视图。

首先草绘想法

在使用POP数字化我们的原型之前，我们需要先绘制草图。点击原型设计需要素描，因为它有助于组织原型并提供可链接的资产。在参与式设计中，草图记录了构成项目的站点地图，UI屏幕，用户旅程和其他早期工件。素描没有进入的技术障碍，即使是经验最少的人也可以学习以这种方式进行视觉交流。它还使您不必以几种方式返回点击原型：首先，通过创建可修改的一次性资产; 其次，通过产生许多想法; 第三，通过让参与者扩展彼此的想法。

我已经接触过三种绘制草图的方法，每种方法都在UX武器库中占有一席之地：

• 白板素描作为一个团队，

• 通过纸质模板单独捕捉想法，

• 使用移动应用程序进行头脑风暴。

参与式设计素描的方法

白板

智能白板（如eno）可促进本地团队成员与地理分布式资源之间的协作。资产可以保存为数字图像，并在会议后重新分配。非数字白板非常实惠; GOwrite的干擦片带将任何表面变成白板。虽然设备价格低廉，但需要相当大的空间，因此最适合于小组会议。

这款eno智能白板展示了草绘的移动设计。大视图。

纸模板

当想法生成期间需要避免集体思考时，单个纸质模板是最合适的。纸模板提供了可移植性，这有助于将屏幕组织成流和优先级活动。这些纸张设计可通过影印机轻松再现，便于重复使用和注释。这种方法几乎没有成本，因为大多数模板都是免费的PDF文件（请参阅本文末尾“有用的资源”部分中的iPhone 5草图模板）并且绘图耗材很便宜。然而，设计可以通过相机或扫描仪数字化，这是耗时的。

纸质模板适用于每个平台。这里展示的是UI Stencils的iPhone 5模板。大视图。

在电话上画草图

最不常见的方法是直接在手机上绘图。考虑到指尖的大表面积，人类输入对于数字绘图并不理想。因此，为了提高精度，必须使用Jot Pro（30美元）等电容式触控笔。在进行数字绘制之前，请考虑一些事项。草图将如何出口？其次，你是针对特定的分辨率吗？第三，需要多少合作。不需要数字化，但需要付出代价：所有参与者都必须拥有智能手机和手写笔。此外，必须将诸如SketchBook Pro（$ 1）之类的应用程序加载到设备上。

手写笔适用于透明外壳，但为了获得最佳效果，请取下保护盖。大视图。

草图绘制成本低，数字化快，易于重现，是在移动设备和平板电脑上创建点击原型构建模块的完美方式。让我们看看草图如何用于使用POP在iPhone上构建交互式流程。

使用POP的基于草图的点击原型

假设我们已经在小组头脑风暴会议中描绘了一些移动Web设计。现在，我们希望将它们连接在一起，而无需启动Axure等复杂工具。我们怎么做？使用POP。

POP是一个iOS和Android应用程序，使您能够将纸张设计链接到一个交互式点击原型。目前，它是免费的，用户可以免费获得5到20个项目。根据应用程序开发人员Woomoo的说法，付费计划即将推出，但尚未提供任何信息。

与您的社交网络共享POP可以增加您创建更多项目的机会。

要使用POP，请使用电子邮件地址创建帐户。该帐户需要在Woomoo的服务器上存储原型，并将其他POP成员添加到项目中（稍后将详细介绍）。

创建一个项目

确定要捕获的体验路径以及用于导航这些路径的控件。在头脑风暴会议中草绘时解决这些问题，这反过来将简化在POP中构建原型的过程。

创建新项目容器是第一步。单击“项目”屏幕菜单栏中的“+”图标以输入项目的信息。创建项目的容器将更新菜单栏中现有项目的数量。您可以通过标题中的“编辑”按钮编辑现有项目; 可以删除项目，也可以通过更改项目图片，添加成员等来修改其信息。此外，您还可以控制要显示的项目类型。根据我的经验，当在一长串条目中搜索特定项目时，此选项会派上用场。为此，请单击“项目”下拉菜单，该菜单允许您按“所有项目”，“收藏夹”或“共享项目”进行过滤。

此屏幕显示现有项目的列表。

在此屏幕上输入有关项目的信息，例如名称和可见性状态。私有原型只能由被邀请参与项目的POP用户查看，而公共的原型可以被任何人查看。

默认情况下，新项目设置为“公共”。

加载草图

创建项目的容器后，添加将链接在一起的可视资产。这是一个迭代过程。您可以使用相机图标（菜单栏中的第一个选项）捕捉草图的图片，也可以使用横向图标（菜单栏中的第二个选项）加载设备中已存在的草图。如果您选择加载图片，请按照导航流程的顺序一次性完成，这有助于以后识别链接目标的资产。

尚未在项目中加载草图。

图像在框架中对齐后，您可以使用红色按钮捕获图像。“B＆W”切换灰度模式，以防您需要在没有太多样式的情况下呈现点击原型。

使用良好的照明并稳定手臂以获得清晰的照片。

保存新照片，或重新拍摄以纠正对齐或模糊。确保您的纸张模板与目标设备的分辨率相匹配，这将使您不必大幅调整图片的大小。如果图片不完美，那就没问题，只要捕获了主要的UI组件。

调整大小可帮助您捕获导航和其他UI控件。

如果您已经拍摄了草图（例如，通过默认的相机应用程序），则可以直接加载这些图像。选择相关的加载选项以查看现有图像相册和POP图像的单独“纸屏幕”相册。

顶部条目始终是设备的相册，其中包含所有可用图片。

添加热点

接下来，添加交互性以链接屏幕图像。单独访问每个屏幕，并在相关UI区域上创建热点。点击菜单栏中的“+”图标以创建红色热点，然后可以将其移除或链接到屏幕。

使用菜单栏气泡图标可以输入屏幕的注释和标题。

点击“链接到”选项以选择目标屏幕。热点不是条件的：您无法根据UI流中指定的事件将同一热点链接到多个屏幕。POP目前不提供此类功能。但是，该应用程序支持内置转换列表，如“链接到”屏幕的菜单栏中所示。这些将帮助您模拟预期的用户体验。默认情况下选择“无”。

左右滑动菜单栏，浏览可用转换列表。

将热点链接到屏幕后，它将变为绿色，表示它处于活动状态。您可以通过点击并按住热点的主要区域来自由移动热点。此外，您可以使用四个点手柄之一在任何方向调整大小。这将帮助您调整必要UI控件的蒙版大小，从而为您提供更大的灵活性。

现有热点具有“复制”选项，这对于复制类似大小的UI控件的热点非常有用。没有改变热点深度的方法（在z轴上）。最近创建的热点将始终位于顶部。作为最佳实践，避免堆叠热点，否则它们将相互掩盖，这将需要您进行大量故障排除以识别破坏的交互！

玩原型

“播放”图标从当前屏幕开始演示原型。

一旦所有屏幕草图都与相应的热点链接，原型就可以进行测试了。在导出之前播放原型以解决任何问题（例如，热点链接到不正确的屏幕，错误的热点大小或位置，缺少热点等）。

从主项目屏幕或任何单个屏幕播放原型。无论哪种方式，“播放”图标都将位于菜单栏中。点击图标以全屏启动原型。点击热点以使用指定的过渡加载链接的屏幕。如果您点击远离任何热点的屏幕，则应用程序将短暂突出显示屏幕上的所有可用热点。

全屏模式消除了POP的镶边，仅显示草图。

POP不包括热点中的目标信息（例如屏幕名称），因此作为最佳实践，如果您正在向其他人演示原型，请熟悉流程以避免演示问题。目前，POP没有说明如何退出播放原型。此信息隐藏在应用程序的FAQ部分的“帮助”菜单项下，这很难找到。让我省去找到它的麻烦：要退出播放模式，请按iPhone的音量降低键。按音量增大键允许查看者向当前屏幕添加注释。

如果项目与其他成员共享，则可以在此处添加注释。

分配选项

一旦您确认点击原型正常工作，您就可以分发它了。您有几个选项，可以通过点击项目容器屏幕上的箭头图标（菜单栏中的最后一项）来访问它们。

如果存在许多图像，您可以垂直滚动以访问其他条目。

第一个选项是发送电子邮件。选择此选项将创建一个电子邮件草稿，其中包含指向Woomoo服务器上POP原型的链接。由于添加收件人是您的责任，因此请尝试事先将其信息添加到设备的联系人应用程序中，或者至少掌握相关信息。收到电子邮件后，收件人可以在移动设备或计算机上访问原型。如果他们在移动设备（如iPhone）上访问，则他们可以在浏览器中查看原型或在主屏幕上添加快捷方式。如果您与参与式设计会话之外的人共享原型，则电子邮件方法最有效。

该电子邮件包含POP网站的链接。

下一个选项是通过社交网络分享。POP提供Facebook和Twitter。您可以在社交网络上公开广播带有原型链接的消息（必须授予POP访问社交网络应用程序的权限）。我没有找到这个选项的好用途，因为我的大部分工作都是专有的，必须留在公司内部。根据您团队的文化和项目需求，此选项可能值得探索，但请先咨询项目经理！

在Twitter或Facebook帖子中分享您的项目。

最后，您可以将原型与其他POP成员共享，将其添加到已批准的查看者列表中。如果您正在使用也使用POP的大型设计团队，这将非常有用。单击“+”图标以搜索POP网络中的成员。如果设计过程中的许多参与者已经在他们的移动设备上加载了POP，则这种方法很方便。但是，他们需要创建一个POP帐户才能查看原型。

搜索结果包括姓氏和姓氏的匹配。

虽然不是分发方法本身，但最后一种方法使您能够通过将其加载到连接到投影仪的计算机上的网页中来向设计会话中的参与者显示原型。此外，您可以使用Reflector（一个使用AirPlay协议将数据从iOS设备流式传输到计算机的应用程序）将手机屏幕镜像到连接到投影仪的台式计算机上。有关使用Reflector的更多信息，请访问应用程序的网站。

相关解决方案

POP不是唯一支持从纸质草图创建点击原型的工具。iPhone上有更多应用程序可供使用。以下是POP最强劲的两个竞争对手。

发射

Launch有一个免费的单项目计划以及Android和iPhone的付费月度计划。它共享许多POP的功能，包括屏幕转换，导出和反馈功能。此外，该应用程序使设计人员能够使用Dropbox图片，以及指定目标设备。发布是非常新的（2014年2月发布），因此看看它如何对抗POP的发展将会很有趣。

PROTOSKETCH

UI Stencils提供适用于iPhone的Protosketch（4.99美元），具有相似的功能。虽然对此工具的完整讨论超出了本文的范围，但足以说POP目前具有更丰富的功能。在撰写本文时，Protosketch不支持转换，并且具有较少的分发选项。尽管有这些限制，Protosketch仍然是一个很棒的工具，可用于构建基于公司纸质模板设计的iOS体验。

小贴士

POP的优点

• 学习曲线短

• 多平台支持

• 利用设备的相机捕捉草图

• 提供丰富的转换和导出选项

POP的缺点

• 活动模式仅限于一次点击

• 由于大量图像，复杂原型难以维护

• 变化需要单独的图像，因为不支持动态状态

• 公共设计元素（例如顶部导航）的单独图像不能在多个屏幕草图中用作主模块

• 应用程序很年轻，并且有增长功能的空间

闭幕思考

POP最适合捕获设计概念的流程和整体组织，而不是用于说明详细的交互。此外，该工具的易用性使UX设计人员能够在参与式设计会话中快速提供点击原型，使其成为任何设计工具包的有价值的补充。我希望你发现这个小应用程序是有用的。试一试，快乐原型！

河源企业网站建设