完善你的UX设计流程-原型设计指南 _原型设计

本文概述

原型设计-原型适用于什么
如何开始原型制作过程
绘制原型
转向数字(低保真原型)
有目的的原型

从创建简单的线框到测试功能齐全的模型, 进行原型制作的过程是任何设计师都可以掌握的最有力和最强大的技能之一。在工作流程被跳过而不是仅仅将” 设计原型” 作为简单交付给下一个要建立的部门的工作场所中, 它也充满了危险。无论你的企业在原型制作上有多努力, 实际的过程通常都会制造或破坏你的最终产品。
如何以及为什么要实际构建原型通常是一个谜。问很多设计师, 他们会像困惑的小狗一样歪头。 “ 你什么意思？你只要做, “ 他们会说。确实如此：我们都知道如何创建原型。我们只是不知道我们怎么知道。
考虑到原型通常是最有价值的交付物, 这一点尤其重要。客户和经理想看看你所做的, 无论是网站还是实物产品。他们想尝试一下, 检查各种元素, 并了解工作流程。他们想看看” 它是如何工作的” 。
仅仅建立一个原型还不够。我们必须了解构建产品初稿所涉及的过程。本文将深入探讨设计人员为实现该目标所需要知道并要做的一切。
原型设计-原型适用于什么人类是高度视觉化的。实际上, 我们大脑皮层的30％纯粹用于视觉。因此, 当你看到原型时, 最重要的是看到它！当客户可以查看并了解产品所涉及的所有过程, 尤其是将来测试的争议领域时, 该原型就可以使用。
那么什么是原型？原型是用于可视化交互式设计工作的工具。实际上, 原型(几乎在任何阶段)都是将以前完成的所有工作合并成一个单一的, 可见的, 有功能的作品。这种视觉表示方式展示了产品在任何给定时间点在做什么, 交互元素是什么以及产品在现实世界中的功能。
尽管原型设计的各个方面都有很多机制(例如创建草图), 但很容易遗漏东西并犯错误。
这使得构建原型的工作非常有价值, 因为它以多种方式描述了如何实现产品的目的。并非总是如此, 而且在大多数情况下绝对不够准确, 但是顾名思义, 原型并不是最终的。

文章图片

他们放慢了我们的速度来加快我们的速度。通过花时间对我们的想法进行原型制作, 我们避免了代价高昂的错误, 例如过早变得过于复杂, 以及长期坚持一个拙劣的想法。 IDEO首席执行官兼总裁Tim Brown

考虑原型的一种简单方法是作为一种演示功能的机制。
关于事物如何运作的实用解释具有许多高价值的好处, 包括：

使其真实–在制造任何原型之前, 产品都是完全概念性的！暂时还可以, 但最终必须成为利益相关者和用户最终理解和欣赏的东西。原型是从概念到实际的第一步。
解决问题–有时, 我们面临设计难题, 而没有解决方案。作为一项技能, 原型制作是可视化问题并快速引入解决方案的好方法。如果不起作用, 请扔掉原型, 然后重试。
迭代–原型设计分阶段进行, 但结果是相同的：发展你的想法。从草图到高保真音响, 每个新的迭代都提供大量的行为和功能进行测试。有了更多的数据, 我们可以更快, 更智能地进行迭代。
检测意外情况–一旦发现可见的东西, 我们就可以使用产品的局限性进行研究, 这也为可能存在的内容和不应该存在的内容提供了更好的环境！
检测可用性问题–这是许多设计师的工作所在：产品具有任何类型的原型后, 可用性挑战突然变得易于发现和修复。
演示–在任何阶段, 原型都是演示的标准。无论是测试页面的版本还是向客户展示产品, 都应该以某种形式提供原型。如果不是, 你可以打赌有人会问它在哪里以及为什么不包含它。

文章图片
送货卡原型(通过Ramotion)
绘制原型利用我们可用的数据并组织起来, 下一步就是开始绘制。许多设计师在绘制图形之前就已经对布局, 结构, 甚至视觉设计的特定元素所属的位置有了想法。很好, 但是初始草图的目的是探索可用空间, 以突出显示可能的事物, 更重要的是, 不可能的事。
【完善你的UX设计流程-原型设计指南】收集你选择的书写工具, 无论是铅笔和纸还是白板和记号笔。素描过程类似于作家的自由写作或音乐家的弹奏。根据预先完成的所有工作, 得出你的感受, 并考虑以下内容：
01 |用户流–遵循识别用户流。查看用户如何实现他们的目标以及他们如何在系统内进行交互。
02 |信息实体–每个用户流将显示一些用户输入和输出。识别它们是什么, 它们与用户行为和期望之间的关系, 它们所涉及的交互以及它们如何工作。
03 |初稿–在了解谁将使用该系统, 他们将要做什么以及使用什么之后, 现在该看看如何使用该系统了。绘制用户流程草图-无需创建布局, 只需解决功能即可。
04 |草绘基本结构–草绘用户流程后, 你将对产品的最佳布局有了更好的了解。其中包括内容(文字, 照片, 视频等), 将以基本框或涂鸦的形式显示。手工书写时, 它们不适合大小, 因此所有结构和内容仅用于可视化, 而不是实际使用。

文章图片
作者的基本草图示例
另外一个技巧是使用素描垫, 特殊配制的纸或工具在素描时使线框更清晰。它们提供了相关视口的基本布局, 而且成本很低, 并且使用适当的模板还可以使草图更加清晰。如果你的抽屉很乱, 这些功能将非常有用, 因为它们为智能手机和网络浏览器提供了正确的长宽比和网格线。

文章图片
尽早开始测试草图, 以尽早清除所有错误或用户关注的问题。 (图片由用户测试)
该过程可以持续任意长的时间, 但是一旦用户流程完成并且完成该流程的过程很明确, 就该移至下一步了。在草图绘制和构建数字线框之间来回跳动是个好主意, 主要是为了保持过程的创意。随着流程的发展, 产品会变得更加具体, 你自然会从素描中转移。
转向数字(低保真原型) 一旦有足够的完整草图可以前进, 就可以将它们数字化了。无论是使用Adobe XD还是Sketch, Framer或Flinto或完全其他方式, 创建数字版本的草图都是对其进行形式化的第一步。因此, 重点从创造性地添加必要的元素转变为在设计中组织资产和结构。
随着原型变得更加实用和元素更加结构化, 产品逐渐成形。当转向数字原型时, 保真度取决于交互性, 视觉设计和内容的水平。尽管高保真音色在最高级别融合了所有这三个特征, 但是在这些区域上, 原型可以分别具有低保真度或高保真度。
考虑满足用户需求的层次结构。每个草图都与用户流程和故事相关, 并且草图是确定产品布局和结构的第一步。当今的数字工具可以大大加快这一过程, 例如, 设置适用于所有页面的主元素以及页面类型的模板。

文章图片
Justinmind的原型制作
每次进行新的连接和迭代时, 都要问两个主要问题：此页面是否可以满足较大用户流的目的？交互是否有意义(意味着用户是否了解如何完成操作)？我们经常问这些问题。我们做的越多, 每次新迭代就越有可能使原型更接近最终草案。
数字原型不仅易于辨认, 而且可以更快地进行批量复制和迭代, 因此测试起来也容易得多。这就是诸如InVision和Proto.io之类的UX原型设计工具在创建可点击原型时非常方便的地方。单击该按钮后, 可以轻松测试各个方面的可用性, 从单个按钮到整个流程。
在过去的几年中, 由于易于使用InVision等程序, 可点击原型已变得特别流行。对于移动设备而言, 它甚至更有价值, 因为现在每个主要的原型制作工具都提供了某种途径, 可以直接在测试设备上查看或测试移动线路。
借助某些工程知识或功能更强大的工具(如Justinmind或Axure), 还可以构建功能性原型, 这些功能性的交互性不仅限于单击。用户可以测试诸如填写表格, 完成简单或复杂的任务以及实际使用应使用的应用程序之类的事情, 而无需实际构建它。接受过人机交互(HCI)设计培训的设计师(包括许多srcmini设计师)会定期使用功能原型进行构建和测试。
交互式原型非常适合测试动画, 应用程序内的用户操作以及有时无法执行功能性动作才能测试的高级功能。

文章图片
作者开发的功能原型
有目的的原型原型的美丽和挑战正在不断发展。我们几乎可以对所有内容说同样的话, 但是原型是有目的地开始和结束的。在不知道为什么特定屏幕需要以某种方式运行, 功能应如何运行, 或者用户是否需要漏斗的情况下, 所开发的原型并未开发出来；它被绘制, 然后临时创建。
然而, 即使每一个构建的线框都如此智能, 沿途提出的问题, 考虑到每个相关的用户故事以及将信息体系结构用作地图, 仍然有可能遗漏任何东西。那就是原型设计的挑战：客户, 经理甚至设计师都忘记了原型不是最终的。它们只是草稿, 是新版本的迭代。这都是用户体验设计过程的一部分。
因此, 在构建下一组原型时, 请记住至少要问一个非常重要的问题：这会产生预期的结果吗？如果没有, 那么这是另一个起草新版本的机会。
? ? ?
在srcmini设计博客上进一步阅读：