原型的设计是一件很严肃的事情。
如果认为原型只用来理解一下界面、业务或帮助开发就陷入了一个很大的误解。

原型有什么作用？

• 帮助团队迅速了解业务和需求；
• 帮助开发迅速理解模型；
• 奠定了项目的基础，包括交互和项目架构；
• 原型也是视觉稿的基础；

产出 Prototype（原型）的流程

Background > Schedule > History > Including Architecture > Framework > Wireframe > Mockup

此流程来自别的设计团队，以下进行解释：

1. Background：项目背景；
2. Schedule：项目日程管理，包含着各种安排和 DDL；
3. History：历史版本（协作和历史版本这对于设计来说其实是挺头疼的两件事）；
4. Including Architecture：项目分析。解决需要什么内容和输出什么的问题，例如网站的构建必须需要 Site Map，Experience Map 的需要与否；
5. Framework：框架。不需要太多的内容细节，建立通用化的模型，建立起项目的骨，主要考虑的是需要多少页面和模块，各个页面和模块分别完成什么作用，页面的层次设计，模块的架构设计等，基本作为后面设计定下方向；
6. Wireframe：低保真模型（线框图）。在 Framework 的基础上，建立起项目的肉，考虑每一个场景的所有使用情况和可能的交互，同时文案也必须确定，逐渐往视觉稿接近，所以也必须考虑到栅格等设计因素。简单的概括，可以说这是去除了配色，图标，细节等的视觉稿；
7. Mockup：高保真模型，选择主要的场景进行完整视觉效果图的输出。

类似的流程在台湾设计师 Akane Lee 的工作流程讲解中也有提到，暂时找不回文章，只找到一小段她写的关于 UX 的作业流程：

Functional Map > UI Flow > Wireframe > Mockup

此流程中的 Functional Map 和 UI Flow 都相当于 Site Map 一样的作用，但是 Functional Map 相当于功能上的 Site Map，UI Flow 相当于页面规划上的 Site Map，同时也包含了以上的 Framework 这一步流程。

问题来了

并不是每一家公司都能有规范的流程和定位分明的职位，在大的公司可能会有专门的交互设计师来进行原型的设计，但是在小的公司如何分配任务呢？或者当原型对设计并没设计有基础的情况呢？结合以上的流程以及最近公司的工作，可以把以上作简化流程：

1. Background：原型直接参与到项目的需要讨论中去，可以有助于对项目背景的了解；
2. Schedule：skip 不做讨论
3. History：设计上对于版本的回滚和版本的记录的问题很令人头疼，现在暂时的方法是在原型中另开页面纪录；
4. Including Architecture：重要最好附上交互自查表，方便后面 Framework 或者 Wireframe 阶段自行评审；
   4.5. Simple Framework：新增的一项。原型一个很重要的功能是向没有参与到需求会议的成员快速展示业务，在时间紧张的情况下，选择参考相近类型的成熟项目，快速进行原型的输出。注意，是原型的 输出，并不是原型的 设计。此步的目的仅在于展示业务。再次注意，个人认为，增加此步从时间上来说是增加了工作时间的，目的应该集中于展示业务和产品特色；
5. Framework：放弃 Simple Wireframe，与视觉设计师协同完成新的 Framework 的设计，原型主要根据前期的输出，负责页面和模块的功能性设计（接近需求的内容），设计负责交互的考虑（设计方面），后原型（或需求）再评审功能是否能完成业务要求（再次返回需求方向）；
6. Wireframe：由视觉设计师主要完成，原型同时（完善）撰写交互自查表，完成后原型（或需求）对的 Wireframe 对照表格进行功能和交互的检查。
7. Mockup：同上。

此方案可以大程度的回避没有交互设计师以及没有基础的原型进行设计的情况，当然这也是建立在有一个会画原型的需求（或单纯的原型）以及一个（略）会交互的设计存在的情况。

延伸

继续延伸，假设公司里有如下五个员工：
A 交互设计师 B 不会设计的原型（需求） C 会交互的视觉设计师 D 不会交互的设计师 E 会画原型（用工具）会交互的设计师（以上的会交互，也包括略会）
出现以下的情况：只有 A/只有 B/只有 C/只有 E/只有 D/有 BD/有 BC/有 AD，根据上面的讨论会出现什么解决方案呢？

• 只有 A：放低对视觉稿的要求，按照流程输出，基本能达到要求；
• 只有 B：止步于 4.5 吧。
• 只有 C：参加需求会议，学会用工具，努力成为 E，然后累死。
• 只有 D：淡化交互，参加需求会议，学会用工具，成为不会交互的 E，然后累死。
• 只有 E：累死。
• 有 BD：淡化交互，不要出现基本重点页面的逻辑问题，往标准流程发展。
• 有 BC：上一节的情况；
• 有 AD：基本完美。

其他的情况基本可以按照这样的思考方式考虑原型设计的工作流程和工作重点。

输出

那么一个完整的原型设计流程中需要输出怎么的东西呢？此处有参考 Akane Lee 的讲解。

• 需求报告书
• 工作进程安排 (Schedule)
• 历史版本记录 (History)
• 项目分析（Including Architecture）
  • 功能列表
  • 页面列表
  • Site Map
  • Experience Map
• Functional Map：根据功能列表输出
• UI Flow：根据页面列表输出
• Framework：参考 UI Flow 输出
• Wireframe
• Mockup
• 交互自查表
• 其他

工具

• 文档
  • Word（-pdf）
  • Excel
  • PowerPoint/Keynote（-pdf）
  • Xmind/MindManager
• 静态页面
  • Keynote
  • Axure
  • Cacoo
• 涉及动效（Mockup 或效果图）
  • Keynote
  • QC
  • Pixate
  • AE

另外，原型很重要的一点是对基本控件的设计，这要求对基本控件有全面的认识。例如 iOS 的 Alert View 和 Action Sheet 该用在什么情况？

产品的诞生必然会经历反复调整过程，标准的工作流程有助于减少后期的修改过程。

所以说，原型设计是一件很严肃的事情。