原型设计
当今快速成长的产品行业中，用户体验(UX)设计变得越来越重要。很明显，以设计为导向的公司相对于其他公司更有竞争力。“原型”对创造成功的用户体验至关重要。但是对许多产品团队来说，原型仍然是UX设计过程中最令人困惑的部分之一。毫无疑问，原型可以是任何东西，从一系列代表app的不同界面或状态的纸质草图，到功能齐全、像素完美的app。
一、什么是“原型”
我们经常在不同的背景里看到“原型”这个词。 由此，我们很可能已经混淆它的真正含义。
它最基本的含义：原型是设计想法的表达。原型让设计师们得以展现他们的设计，以及模拟真实的使用场景。在数字化的背景下，原型能够模拟用户与界面之间的最终交互行为。根据产品团队的需求，原型可以模拟整个app或仅单个交互行为。原型可以模拟最终产品的运作方式。它支持产品团队测试其设计的可用性和可行性。也有很多人将原型与草图，线框图和模型混淆，实际上它们不同于原型。“交互性”这个概念是原型的根本，因此这就是为什么草图，线框图和模型不能被视为“原型”的理由。
二、原型设计工具
墨刀
墨刀是一款在线原型设计与协同工具，借助墨刀，产品经理、设计师、开发、销售、运营及创业者等用户群体，能够搭建为产品原型，演示项目效果。墨刀同时也是协作平台，项目成员可以协作编辑、审阅，不管是产品想法展示，还是向客户收集产品反馈，向投资人进行Demo展示，或是在团队内部协作沟通、项目管理 。
适用范围：为企业级用户高保真原型图，多为移动端app。
优点：组件功能丰富；交互简单快捷；有PC，网页，手机多个客户端；可以使用手机预览原型。
缺点：只能在线操作；免费版内容受限；自由度一般，不是特别灵活。
Axure
Axure RP是美国Axure Software Solution公司旗舰产品，是一个专业的快速原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具，它能快速、高效的创建原型，同时支持多人协作设计和版本控制管理。
适用范围：为企业级用户高保真原型图，多为网页端原型设计，并可以直接导出HTML文件。
优点：自制素材功能强大；交互功能丰富；有较为完备的团队管理功能；制作网页简单，能导出HTML。
缺点：上手难度大，学习成本高；正版软件价格高昂；长期使用容易卡顿；移动端原型设计不如另外两种。
Mockplus
摹客（Mockplus）是成都摹客科技有限公司旗下设计协作品牌，专注于一站式的产品设计和协作平台，为产品开发团队提供全流程协作、高保真设计和设计规范管理支持。摹客可以自产出高保真设计，支持多款主流设计工具（Sketch/PS/XD/Axure等）的设计稿交付，团队成员在产品、设计到开发的各个工作环节，利用多种设计工具，都能使用摹客平台协同工作。
适用范围：为企业级用户高保真原型图。
优点：操作简单，上手容易；组件丰富，预览方式多样。
缺点：不支持手势交互；不支持鼠标悬停。
三、保真度
什么是”保真度“？
原型不一定要看起来像最终产品——它们可以有不同保真度。 原型的保真度指的是它如何传达最终产品的外观（也就是指它的细节和真实感级别）。
保真度可以在以下方面有所不同：
-
视觉设计
-
内容
-
交互性
原型的类型有很多，基本介于这两种类型之间。 -
低保真
-
高保真
产品团队根据原型设计的目的、设计完整性和可用资源来选择原型的保真度。
低保真原型
低保真（lo-fi）原型设计是将高级设计概念转换为有形的、可测试物的简便快捷方法。它首要的也是最重要的作用是——检查和测试产品功能，而不是产品的视觉外观。
以下是低保真原型的基本特征：
- 视觉设计：仅呈现最终产品的一部分视觉属性（例如元素的形状，基本视觉层次等）。
- 内容：仅包含内容的关键元素。
- 交互性：原型可以由真人模拟。 在测试期间，熟悉页面流程的设计师就相当于一个“计算机”，实时手动呈现设计页面。此外，也可以给线框图制作交互效果，这种称为“交互线框图”。
优点:
- 便宜。 低保真原型制作的明显优势在于其极低的成本。
- 快速。 可以在五到十分钟内创建一个低保真纸原型。 让产品团队可以毫不费力地探索不同的想法。
- 协作。 这种原型设计刺激了小组协作。它的设计不需要什么特殊技能，因此更多人可以参与到设计过程。 即使是非设计师也可以在创意过程中发挥积极作用。
- 清晰。 团队成员和利益相关者对将来的项目有了更清晰的期望。
缺点:
-
测试期间的不确定性。 使用低保真原型，对于测试者来说，容易不清楚到底什么本来是有效的，什么不是。另外，低保真原型需要用户充分的想象力，也限制了用户测试的效果。
-
有限的交互性。 使用这种类型的原型想要传达复杂的动画或转场效果是不可能的。
高保真原型
高保真 (Hi-fi) 原型的呈现和功能，尽可能类似于发布的实际产品。 当团队能深入了解产品的预期，需要与真实用户一起测试，或获得利益相关者的最终设计批准时，通常会创建高保真原型。
高保真原型的基本特征包括:
- 视觉设计：逼真细致的设计 – 所有界面元素、间距和图形看起来就像一个真正的app或网站。
- 内容：设计人员使用真实或类似于真实内容。原型包括最终设计中显示的大部分或全部内容。
- 交互性：原型在交互层面非常逼真。
优点:
- 可用性测试期间获取有意义的反馈。对于用户来说，高保真原型通常看起来像真正的产品。这意味着，在可用性测试会话中，测试参与者将更有可能自然地表现——就好像他们正在与真实产品交互一样。
- 对特定 UI 元素或交互的测试。借助高保真交互性，可以测试平面元素，或特定交互, 比如动画过渡和微交互。
- 轻松获得客户和利益相关者的认同。这种类型的原型也适合向利益相关者演示。它使客户和潜在投资者清楚地了解产品应该如何工作。一个优秀的高保真原型让人们对你的设计感到兴奋，但低保真的原型则不然。
缺点:
- 成本较高。 与低保真原型相比，创建高保真原型意味着更高的时间成本和财务成本。
四、 原型设计实战—在线蒸汽波播放器
近年来，亚文化越来越流行，甚至已经成为了一种主流。其中的一种文化——蒸汽波是一种由艺术运动延伸出的音乐形式，其多从20世纪80—90年代的歌曲中采样，复古动感，舒缓流畅，有水汽弥蒙之感。对于大多数音乐平台，蒸汽波这种小众曲风十分难以寻找。因此，我设计了在线蒸汽波播放器，它将实现蒸汽波的播放，下载，保存喜欢的歌曲、歌单，根据喜欢的歌曲智能推荐蒸汽波歌曲。该原型使用墨刀来制作，包括四个界面：
主页
主页可以看到所有功能并且能推荐一些蒸汽波歌曲，可以进入其他页面。
私人FM（推荐）
该功能会智能的为用户推荐蒸汽波歌曲，可以对歌曲进行下载或收藏等功能。
我的喜欢
该界面为记录我的喜欢的界面，可以实现播放歌曲，添加或删除歌单中喜欢的音乐。
播放界面
播放界面有基础音乐功能的同时，可以查看歌词，勾选音乐为我的喜欢，下载，收藏，分享等功能。
