产品高保真原型的制作与规范
从零开始教你做高保真原型图+UI设计规范
从零开始教你做⾼保真原型图+UI设计规范编者按：《从零开始设计App》系列到这篇已经是第三期了，上期是低保真原型图，这期聊聊如何从零开始制作⾼保真原型图和UI 。
往期回顾：1.2.Hi-fi 输出上篇⽂章提到，在Hi-fi阶段⼤概可以分为前期、中期和后期三个阶段。
这篇⽂章就是对Hi-fi阶段的详细解说。
前期前期的主要任务是hero screen（主功能页⾯）的尝试设计，通过它进⾏视觉风格上的确定。
APP进⼊视觉风格确定的时期，主要确定的内容包括颜⾊、字体、图标三⼤块。
1. 颜⾊确定的过程先做好⼼理准备，很⼤程度上会来回折腾，改来改去。
着⼿点可以从产品点位出发，结合企业视觉系统进⾏统⼀形象设计。
如果企业有⾃⼰的logo和产品线，那视觉出发点可以在保持现有产品线的基础上，进⾏APP个性定位。
通俗点说，就是保持统⼀的前提下，有所区别。
打个⽐⽅，Nike+系列的产品，有Nike+RunClub、Nike+Move、Nike+Training、Nike+，从整体上来看，他们都⽤统⼀的带有运动感的荧光绿作为主⾊调，然后⽤⿊⽩灰进⾏搭配。
三者⼜有⼀定的区别，⽐如说Nike+RunClub的header是绿⾊，Nike+Training的header 是⿊⾊，前者更有活⼒运动感，户外使⽤阅读更⽅便，后者对室内体验更友好。
如果没有企业视觉系统，⼀切从0开始的话，建议从竞品分析开始，市⾯上做得⽐较成功的产品进⾏分析，以及从⾃⾝产品特性和⾏业特性进⾏出发。
⽐⽅说餐饮⾏业代表⾊是橙⾊，运动⾏业蓝⾊，⾼科技领域不同⾊值的篮等等，也可以另辟蹊径做出个性化的尝试，⽐如keep的绿⾊与棕⾊的搭配⽅案。
在颜⾊这个领域分为代表⾊、辅助⾊、搭配⽅案这三⽅⾯的内容。
⼀般配⾊⽅案是，⼀种彩⾊作为重要信息的突出⾊彩，配上不同深浅的⿊⽩灰或者蓝、棕⾊等⽆⾊彩或者⾊彩感⽐较弱的搭配⽅案。
这样的搭配⽅案，在信息呈现⽅⾯会⽐较清晰。
⽽在做设计⽅案中，还需要考虑的是，设计出不同底⾊的搭配⽅案，⽅便在不同场景的⽅案进⾏统⼀。
原型设计的基本原则和方法
原型设计的基本原则和方法随着移动互联网时代的到来，原型设计作为网站、应用程序、产品设计中必不可少的环节，逐渐成为设计师们的常见工具。
但是，对于很多初学者而言，原型设计的基本原则和方法还比较模糊，因此，本文将从以下几个方面来详细介绍原型设计的基本原则和方法。
一、什么是原型设计？在创意设计中，原型设计是一项旨在构建产品实物原型的过程，这种原型经过一系列测试、评估和改进，以保证所有客户需求都得到满足的过程。
这种过程从概念到实现的转变，是一个非常关键的环节，它瞄准的是用户的需求和最终产品的可用性。
二、原型设计的方法1、确定设计原则在原型设计之前，一定要确定自己在设计方案中所需要遵守的设计原则，如色彩、图形、排版、内容结构、交互方式等。
了解并遵守这些原则有助于设计师更快、更准确地完成设计。
2、定义用户需求明确用户需求是原型设计的前提条件。
通过用户调研、竞争分析、使用场景开发等方式了解用户的需求和痛点，并将这些信息用于原型设计中，可以让我们的产品更具备针对性和可用性。
3、创建草图创建草图是原型设计的一个必要步骤，这种草图可以帮助您快速理解产品的交互和布局，并对设计方案进行调整和改进。
草图的目的在于概述产品的基本结构，而不是讨论细节。
4、制作低保真原型低保真原型是原型设计的关键环节，这种原型通常由手绘图或设计软件制作而成。
它通常不会包含任何交互或动画效果，主要用于表达网站或应用程序的基本结构。
5、制作高保真原型高保真原型是低保真原型的进一步发展，它提供了完整的用户界面和交互设计，可以在用户测试和各种评估中使用。
三、原型设计的基本原则1、基于用户需求原型设计的基本原则之一是以用户需求为中心。
设计师应在设计的早期阶段就设法了解用户需求，不断地与他们进行交流和沟通，并将这些信息用于我们的原型设计中。
2、设计易用性在原型设计中，易用性是一个非常重要的因素。
设计师们需要构建一个设计简单、互动性高、面向用户的环境来确保用户体验良好。
高保真原型制作规范
把看原型的人想象成对产品一无所知的人，怎么图文并茂的展示产品的逻辑 和功能；怎么让她通过原型来理解这个产品，使用这个产品。
11
1原型的定义 2原型的种类 3原型的工具 4高保真原型
STEP 1: 建立控件库
控件是指界面中所有的 最小元件。比如：按钮、 文本框、下拉框、单选 按钮、复选框、图片占 位符等等。
组件库示例
14
1原型的定义 2原型的种类 3原型的工具 4高保真原型
STEP 3: 绘制流程图
1. 流程图表达的是一个用户用例，通常是HappyFlow 2. 流程图有一个起点和一个终点 3. 流程图中相同的元件代表相同的意思 4. 结构清晰，易于理解 5. 不要用一个流程图展示所有的流程 6. 逻辑完整，清晰 7. 每一个用户的决策都是DecisionPoint 8. 流程图的作用在于梳理流程和规范流程
6
1原型的定义 2原型的种类 3原型的工具 4高保真原型
2: 低保真原型
低保真原型能够准确的 传达界面的布局和交互 方式，但是美观、效果 欠佳。可以理解为介于 纸面原型和高保真原型 之间的输出的统称，往 往也可以作为需求设计 稿输出。
7
1原型的定义 2原型的种类 3原型的工具 4高保真原型
3: 高保真原型
12
1原型的定义 2原型的种类 3原型的工具 4高保真原型
STEP 2: 建立组件库
Accordion(手风琴)
Tag Cloud(标签云)
能够完成一个功能点，形成一种模块，能够被重复使用，从而降低开发成本， 实现界面的一致性，规范性，突出界面的风格特征。
13
1原型的定义 2原型的种类 3原型的工具 4高保真原型
真
原
原
原型样件方案及管理制度范文
原型样件方案及管理制度范文原型样件方案及管理制度一、前言原型样件是产品开发过程中非常重要的一个环节，它是产品设计、功能验证、生产工艺调试等阶段的必要工具。
一个高质量的原型样件可以帮助企业更好地展示产品的特点和优势，同时也可以为生产和市场测试提供有力的支持。
因此，建立科学合理的原型样件方案及管理制度，对企业的产品研发和管理具有重要意义。
二、原型样件方案1. 方案制定的目的和原则方案制定的目的是为了确保开发出满足需求的原型样件，并在开发过程中保证质量、进度和成本的控制。
制定方案的原则如下：（1）明确需求：在制定方案之前，需要充分了解需求，包括产品功能、外观要求、尺寸限制等。
（2）合理设计：根据需求，制定出合理的设计方案，能够满足产品的功能要求和外观要求，并兼顾生产成本和工艺。
（3）确定材料和工艺：根据设计方案，确定适合的材料和工艺，以保证原型样件的质量和性能。
（4）严格控制进度：制定合理的开发进度表，对每个开发阶段的任务和时间进行评估和安排，并做到按时交付。
2. 方案制定的步骤（1）需求分析：了解产品的功能要求、外观要求和尺寸限制等。
（2）设计方案制定：根据需求分析的结果，制定出合理的设计方案，包括产品的结构、尺寸和材料等。
（3）制造工艺确定：根据设计方案，确定适合的制造工艺和工艺参数，以保证产品的质量和成本。
（4）制定开发进度表：根据设计方案和制造工艺确定的结果，制定出开发进度表，并按照进度表进行开发。
（5）样件制作：根据设计方案和制造工艺确定的结果，进行样件的制作和加工。
（6）样件测试和评估：对制作好的样件进行测试和评估，确保其满足需求和要求。
（7）修改和改进：根据测试和评估的结果，对样件进行修改和改进，直至达到预期的效果。
3. 方案制定的要求方案制定需要满足以下几个方面的要求：（1）可行性：方案制定需要确保可行性，即技术上可行、经济上可行和市场上可行。
（2）稳定性：方案制定需要考虑产品的稳定性和可靠性，确保产品在不同环境和工况下能够正常工作。
产品经理一篇文章搞懂「低保真原型与高保真原型」
在当今快速成长的产品行业中，用户体验(UX)设计变得越来越重要。
很明显，以设计为导向的公司相对于其他公司更有竞争力。
“原型”对创造成功的用户体验至关重要。
但是对许多产品团队来说，原型仍然是UX设计过程中最令人困惑的部分之一。
毫无疑问，原型可以是任何东西，从一系列代表app的不同界面或状态的纸质草图，到功能齐全、像素完美的app。
在本文中，我将回答以下与原型开发相关的问题:什么是原型，什么时候需要设计原型？什么是“原型保真度” ?低保真原型和高保真原型的区别是什么？哪些技术支持原型制作？我们经常在不同的背景里看到“原型”这个词。
由此，我们很可能已经混淆它的真正含义。
它最基本的含义：原型是设计想法的表达。
原型让设计师们得以展现他们的设计，以及模拟真实的使用场景。
在数字化的背景下，原型能够模拟用户与界面之间的最终交互行为。
根据产品团队的需求，原型可以模拟整个app或仅单个交互行为。
原型可以模拟最终产品的运作方式。
它支持产品团队测试其设计的可用性和可行性。
也有很多人将原型与草图，线框图和模型混淆，实际上它们不同于原型。
“交互性”这个概念是原型的根本，因此这就是为什么草图，线框图和模型不能被视为“原型”的理由。
做原型主要是为了在做实际产品之前测试设计（和产品创意）。
是否进行测试与产品的成功直接相关。
不用想，当产品在市场上上市，人们开始使用它时，你的设计将被用户测试。
如果这是首次测试，则很有可能会有来自用户的负面反馈。
因此，在低风险的研究阶段和公开发布之前收集产品反馈，总是更好。
以下是需要原型的两种情况：确保设计理念按预期进行。
在大多数情况下，让实际用户测试产品概念是相对容易的。
一旦用户拿到一个可以交互的产品原型，产品团队就能够看到目标受众是如何使用该产品。
根据这些反馈，可以调整初始理念。
确定用户能够顺利地使用产品。
原型的必要性是在产品发布前发现和解决可行性问题。
它能测试出产品需要改进的地方。
这也是之所以那么多产品团队创建原型，让用户测试它们，并迭代设计直到它足够好的原因。
Axure 的使用方法和原型制作规范详述
动态面板
Axure RP基本操作
组件区域——图片控件
使用方法： 图片控件的操作比较简单，双击图
双击
片组件，选择一张图片打开即可。 需要重新添加图片是，在原来的图
片上双击再选择。
Axure RP基本操作
组件区域——其它控件
矩形、占位符、输入框、形状按钮、按 钮
使用方法：选中某个组件后，直接 拖入到工作区域使用即可。另外，可以 对这些组件的尺寸、颜色、边框、文字 进行编辑。
Axure RP高级交互
动态面板
动态面板有7种动作： 1. 设置面板状态为指定状态 2. 显示面板 3. 隐藏面板 4. 切换面板可见性 5. 移动面板 6. 将面板置于顶层 7. 将面板置于底层
Axure RP生成网页原型
菜单生成法 发布——预览——创建文件夹
Axure RP生成网页原型
直接按键盘F5可预览原型效果
1.生成的网页原型，存放路径，可以自定义，我 们在网络上下载的一些原型文件，有时候无法 生成，只需要设置以下默认就可以了 2.选择浏览器或者打不开，一般选择默认浏览器 3.点击生成按钮，生成网页原型，如果选择了浏 览器，软件会直接启动浏览器打开生成的原型 页面
Axure RP原型制作规范
名词解释，制作规范,动作规范，注释规范
流程：可完整的模拟用户体验流程，有可逆流程 逻辑：清晰明确，判断有提示 界面：规范，整洁 说明：明确，易理解
原型制作规范——文件命名规范
RP文件统一新建文件夹，命名为【name.RP】文件，存放各阶段版本的RP 文件，各版本RP文件必须后缀日期和序列号，产品名+特性+子项目+日期 +序号，如cosmentics_newindex_2010032201.rp
产品原型设计的参考步骤
产品原型设计的参考步骤1.确定产品目标：明确产品的目标和定位，了解产品的核心功能和用户需求，以此为基础进行原型设计工作。
2.用户研究：通过市场调研、用户访谈等方式深入了解用户的需求和行为模式，收集用户反馈和建议，为原型设计提供有效的参考。
3.制定用户故事板：将用户需求转化为用户故事板，明确产品的各个功能点和用户使用场景，以此为基础进行原型设计。
4.构思设计思路：根据用户故事板和产品目标，团队成员可以进行头脑风暴，产生一些初步的设计思路。
5.绘制草图：根据初步的设计思路，快速绘制草图，概括产品的各个界面和功能，草图可以是手绘或电子绘制的。
6. 创建低保真原型：利用专业原型设计工具（如Axure、Sketch 等），将草图转化为低保真原型，设计界面布局、交互流程等。
7.迭代优化：将低保真原型分享给相关利益方和用户，收集反馈并进行优化，重复这个过程多次，直到满足用户需求和产品目标。
8.创建高保真原型：在低保真原型的基础上，逐步完善界面设计和交互细节，创建高保真原型，并增加适量的动画效果和交互细节。
9.进行用户测试：通过将高保真原型提供给用户进行测试，收集用户的使用体验和反馈，评估产品的可用性和用户满意度，为产品优化提供参考。
10.输出设计规范：根据高保真原型的设计结果，总结出产品的设计规范，包括色彩、字体、图标等，确保产品的一致性和可维护性。
11.与开发团队对接：将设计规范和原型交给开发团队，与开发团队紧密协作，确保设计能够被准确地实现。
12.完善文档：根据最终的原型和设计规范，完善产品的相关文档，包括界面交互说明、用户使用手册等，确保产品的可理解性和易用性。
总结起来，产品原型设计是一个循序渐进的过程，需要不断与用户和团队成员进行交流和迭代优化。
通过参考上述步骤，可以帮助团队更好地进行产品原型设计，并最终打造出用户满意的产品。
产品经理高保真原型制作与规范
产品经理高保真原型制作与规范产品经理在产品设计过程中，高保真原型制作与规范的重要性不言而喻。
高保真原型能够提供给开发人员清晰明确的设计需求，减少沟通成本，规范则能够保证产品最终的用户体验与设计初衷的一致性。
本文将从高保真原型制作和规范两个方面展开讨论。
一、高保真原型制作的重要性1.规避需求误解和沟通成本：高保真原型能够让产品经理将设计思路、交互流程等用更具可视化的方式呈现给开发人员和其他相关人员，减少了口头沟通时由于信息传递不明确导致的需求误解和沟通成本。
通过高保真原型，开发人员可以更加清楚地了解产品的功能和交互逻辑，从而更加准确地实现产品设计。
2.提前发现问题和迭代优化：高保真原型在制作过程中，能够让产品经理和设计师发现设计中存在的问题，进行迭代优化。
在产品还未花费大量开发成本之前，就能够通过高保真原型发现并解决问题，降低后期修改成本。
此外，高保真原型也能够用于用户测试，在用户群体中进行反馈和调整，从而减少产品上线后的用户体验问题。
3.加快开发进度：高保真原型能够提供给开发人员尽可能详细的设计需求和交互细节，避免了在开发过程中频繁与产品经理和设计师沟通，加快了开发进度。
开发人员可以根据高保真原型进行代码实现，而不需要进行额外的设计决策，提高了开发效率。
二、规范的重要性1.统一视觉和交互风格：规范能够确保产品在视觉和交互上的一致性，让用户在使用产品时感受到一种统一的风格和体验。
当产品内不同功能模块的设计都遵循同一套规范时，用户可以快速熟悉和理解新功能，提高了用户的使用效率和满意度。
2.提高产品可维护性：产品经理在制定规范时可以考虑到产品的扩展性和可维护性，如模块化的设计和文档化的规范可以帮助开发人员快速理解和维护代码。
规范也能够约束开发人员的行为，减少不必要的重复开发和低效的代码实现。
3.保证产品质量：规范可以确保产品在设计和开发过程中遵循最佳实践和行业标准，减少潜在的错误和缺陷。
规范也能够帮助产品团队进行代码审查和设计评审，发现潜在问题并及时改进，提高产品的质量。
产品经理——产品原型设计规范
产品经理——产品原型设计规范1 术语与解释表 1 1术语表2 概述2.1 前言由于多种因素，在需求分析阶段得到完全、一致、准确、合理的需求说明存在困难。
在获得一组原始需求后，如何快速地使其“实现”，通过原型反馈，加深对系统的理解？如何满足用户基本要求，使用户在试用过程中受到启发，对需求说明进行补充和精确化，消除不协调的系统需求，逐步确定各种需求？如何获得合理、协调一致、无歧义的、完整的、可行的需求说明？图 2 1不同角色认为的需求随着计算机辅助设计的应用，产品设计和生产能力得到极大提高，然而在产品设计、研发和生产前，快速获取产品设计的反馈信息，如何对产品用户价值、可行性、可用性和交互体验等快速地做出评估、论证和改进，这是软、硬件产品生产的痛点。
快速原型技术的出现，为这一问题的解决提供了有效途径，不仅解决了需求阶段的一致性问题，还能很好地将这种一致性的传递到产品研发过程中的系统设计阶段、视觉设计阶段、编码和测试阶段等过程。
快速原型是非常有效的需求可视化呈现、传递和解释手段。
2.2 定义快速原型（特指IT领域，下同）常被称为线框图、mockuo、demo，是对产品可视化的呈现，主要表达一个产品的信息架构、页面布局、内容、功能和交互方式，可以真实的模拟产品最终的视觉效果、交互效果和用户体验感受。
快速原型，按照仿真效果划分为：低保证原型和高保真原型；按照业务流程划分为：水平原型和垂直原型。
目前，主流的产品原型设计软件/工具有：POP（Prototyping on Paper）是由来自台湾的Woomoo公司推出的一款界面原型设计工具，适用于iOS和Android平台。
摩客（Mockplus）是一款简洁、快速、免费的原型图工具，适合软件团队、个人在软件开发的设计阶段使用。
该工具具有低保真、无需学习、快速上手等功能特点，可以帮助用户轻松的做出专业化的原型设计。
Briefs是Mac最新上架的专业App设计工具，提供了成熟的交互设计功能，堪称移动App上的“Axure RP”，设计师可以利用Briefs 设计完整的iPhone、iPad应用交互模型，并利用模拟器即时体验设计的成果，或者利用BriefsLive，将作品同步到装有Briefscase的iOS 6设备上。
一个好的产品原型必备的4点
一个好的产品原型必备的4点曾经有人说，由于原型是直接拿给客户看的，因此最好做成高保真。
对此我不赞同。
首先，给客户或开发讲解原型时，产品的交互其实是重点，至于细节，首先在对用户体验的影响上占的权重没有人们想象中大，其次，细节在客户，开发和真实的用户眼里的效果是不一样的。
因此我们自己心里要有一套标准，而不是一味地跟着不断变化的客户需求走，否则就无法判断什么是好的原型了。
其实在我看来，功能完整，思路清晰，交互明白的原型就是好的原型。
那么，做到这些的原型都具有什么样的特点呢？一、功能分布合理（利用脑图进行设计）一个产品的功能多种多样，在进行原型设计时，要根据这些功能规划出各个页面，这非常考验产品经理的思维能力。
如何合理地布置这些功能呢？首先要对产品有宏观的了解，其次就是保证功能设计过程中思路清晰。
一个很好的方法就是使用脑图，来快速地反应思路，规划需要的模块（页面）。
脑图的好处不仅仅在于此，它还方便产品经理对产品的整体功能进行演示和讲解。
其次，如果原型工具能做到随时导出基于脑图的文档，也便于筹划PRD文档。
二、逻辑清晰的流程图原型，脑图，项目树，流程图这些看似是相互独立的个体，但我觉得后三者都应是原型的一部分，就好像一本小说的写作背景，目录，主体和结语，其实都是构成小说的部分。
这其中，流程图反应了不同页面之间的逻辑关系，一个逻辑清晰，意义明确，简洁明了的流程图不仅有利于帮助客户了解产品的结构，也有利于设计师不断完善产品的逻辑。
三、必要的页面批注及充分的交互说明正如开头所说，原型不是必须做到高保真才好，很多情况下，我们没有足够的时间去精雕细刻，此时为了准确地表达想法，就要用到批注或文字说明。
虽然产品原型中的图片、功能和交互能够很好的表达产品经理的思路和观点，但是一些特殊场景下，简单的文字说明，能够让产品团队成员，更快、更好的理解产品经理的想法。
有些原型工具会提供各式各样的批注组件，方便设计师或产品经理在原型图的基础上进一步说明自己的想法。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
1原型的定义 2原型的种类 3原型的工具 4高保真原型
建立控件库
制作步骤 建立组件库
故事版
设计辅助页
原型注释
绘制流程图 设计关键页
10
1原型的定义 2原型的种类 3原型的工具 4高保真原型
高保真原型注意事项
1. 灰度线框图：颜色会干扰视觉设计，效果会影响大家对易用性的判断。 2. 清晰地展示流程：好的操作流程是易用性的最基本标准。 3. 关键功能要有故事版：更好的、更快的理解产品。 4. 要有注释：图只能展示界面元素，图文并茂才能准确全部传达设计思想。 5. 有一致性：一致性会降低用户对界面的学习和识别成本。 6. 有规范性：好的软件或者网站绝对是规范的。
12
1原型的定义 2原型的种类 3原型的工具 4高保真原型
STEP 2: 建立组件库
Accordion(手风琴)
Tag Cloud(标签云)
能够完成一个功能点，形成一种模块，能够被重复使用，从而降低开发成本， 实现界面的一致性，规范性，突出界面的风格特征。
13
1原型的定义 2原型的种类 3原型的工具 4高保真原型
原型是对一个产品的可视化呈现，主要传达 一个产品的信息架构、内容、功能和交互方 式。
3
1原型的定义 2原型的种类 3原型的工具 4高保真原型
原型是对一个产品的可视化呈现，主要传达 一个产品的信息架构、内容、功能和交互方 式。
4
1原型的定义 2原型的种类 3原型的工具 4高保真原型
保真度
低
高
保
保
真
6
1原型的定义 2原型的种类 3原型的工具 4高保真原型
2: 低保真原型
低保真原型能够准确的 传达界面的布局和交互 方式，但是美观、效果 欠佳。可以理解为介于 纸面原型和高保真原型 之间的输出的统称，往 往也可以作为需求设计 稿输出。
7
1原型的定义 2原型的种类 3原型的工具 4高保真原型
3: 高保真原型
15
1原型的定义 2原型的种类 3原型的工具 4高保真原型
流程图示例
16
1原型的定义 2原型的种类 3原型的工具 4高保真原型
STEP 4: 设计关键页面
17
1原型的定义 2原型的种类 3原型的工具 4高保真原型
STEP 4: 设计辅助页面
18
1原型的定义 2原型的种类 3原型的工具 4高保真原型
原型制作与规范
产品部
余代军
1
目录
1原型的定义 2原型的种类 3原型的工具 4高保真原型
1 原型的基本定义及原型的要点 2 常见的原型分类方法 3 常用的原型工具及其特点 4 用Visio制作高保真原型的方法
2
1原型的定义 2原型的种类 3原型的工具 4高保真原型
1原型的定义 2原型的种类 3
Thank U
产品部：余代军
23
真
原
原
型
型
介质种类
纸
电
面
子
原
原
型
型
原型的工具
Axure Visio Fireworks ……
5
1原型的定义 2原型的种类 3原型的工具 4高保真原型
1: 纸面原型
纸面原型就是指画在纸 上、白板上的界面原型。 便于修改和绘制，不便 于保存和展示。能让所 有人参与其中，创造很 多附加信息和价值。通 过绘制的过程，你可以 更清晰的传递界面的布 局和逻辑。
组件库示例
14
1原型的定义 2原型的种类 3原型的工具 4高保真原型
STEP 3: 绘制流程图
1. 流程图表达的是一个用户用例，通常是HappyFlow 2. 流程图有一个起点和一个终点 3. 流程图中相同的元件代表相同的意思 4. 结构清晰，易于理解 5. 不要用一个流程图展示所有的流程 6. 逻辑完整，清晰 7. 每一个用户的决策都是DecisionPoint 8. 流程图的作用在于梳理流程和规范流程
STEP 5: 关键功能Storyboard展示1
19
1原型的定义 2原型的种类 3原型的工具 4高保真原型
STEP 5: 关键功能Storyboard展示2
20
1原型的定义 2原型的种类 3原型的工具 4高保真原型
STEP 6: 原型注释
1. 注释的是界面元素的功能 2. 界面与人的交互方式 3. 控件的状态以及在什么情况下会出现什么状态 4. 操作的结果 5. 链接的指向 6. 报错信息及其展示方式 7. 对于界面中不便于展示的元素的描述，比如页面切换方式 8. 全面、细致、清晰 9. 充分考虑交流的效率和效果
高保真原型通常指高保真灰度线 框图或产品演示Demo。界面布 局和交互效果与实际产品完全等 效，体验上也与真实产品接近。 而为了达到完整的效果，很大程 度上就要求交互设计师有较好的 视觉审美的能力，对界面比较敏 感，有控件和组件的概念，注重 界面的规范性和一致性。
8
1原型的定义 2原型的种类 3原型的工具 4高保真原型
Axure 快速上手 丰富的控件 丰富的脚本模式 自定义控件库 擅长Web界面
Visio 适用性广 控件库强大 便捷的模板套用 支持绝大多数格式 擅长桌面程序界面
Mockflow 在线软件 基于web的存储 适合虚拟团队 丰富的控件库 丰富的控件模式
Fireworks、Illustrator、PS、Pencil、UIDesigner、GUI Design Studio、 ＷPF、Silverlight、Expression Design、Prototype Composer、Lucid Spec、Irise Professional Edition、AdobeReader......
把看原型的人想象成对产品一无所知的人，怎么图文并茂的展示产品的逻辑 和功能；怎么让她通过原型来理解这个产品，使用这个产品。
11
1原型的定义 2原型的种类 3原型的工具 4高保真原型
STEP 1: 建立控件库
控件是指界面中所有的 最小元件。比如：按钮、 文本框、下拉框、单选 按钮、复选框、图片占 位符等等。