产品经理高保真原型制作与规范
产品原型讲解
产品原型讲解摘要：1.产品原型的概念2.产品原型的分类3.产品原型的制作流程4.产品原型的重要性5.产品原型的实际应用案例正文：【1.产品原型的概念】产品原型是指在产品设计初期，通过视觉、功能、交互等方式对产品进行初步的构建和展示。
产品原型可以帮助产品经理、设计师和开发人员更好地理解产品的功能、结构和用户体验，为后续的产品开发提供指导和参考。
【2.产品原型的分类】根据表现形式的不同，产品原型可以分为低保真原型、中保真原型和高保真原型。
低保真原型通常使用简单的线条和图形进行表示，主要用于初期的产品概念验证；中保真原型则在低保真原型的基础上增加了更多的细节和交互效果，能够更加准确地展示产品的功能和界面；高保真原型则几乎接近最终的产品界面，可以提供用户进行实际操作和体验。
【3.产品原型的制作流程】产品原型的制作流程主要包括以下几个步骤：需求分析、原型设计、原型评审和原型修改。
需求分析是理解用户需求和产品功能的过程，原型设计则是根据需求分析的结果进行原型的构建，原型评审是让相关人员对原型进行评估和提出改进意见，原型修改则是根据评审结果对原型进行调整和优化。
【4.产品原型的重要性】产品原型在产品开发过程中具有重要的作用。
首先，原型设计可以提高产品的开发效率，帮助开发人员更好地理解产品需求，避免不必要的返工和修改；其次，原型设计可以提高产品的用户体验，通过模拟实际的使用场景，原型设计可以帮助产品经理更好地理解用户需求和操作习惯，从而设计出更加符合用户需求的产品；最后，原型设计可以帮助产品经理和设计师更好地沟通和协作，提高产品的设计质量和开发效率。
【5.产品原型的实际应用案例】例如，苹果公司的iPhone 产品，其在设计初期就会通过原型设计来模拟和展示产品的功能和界面，包括手机的解锁方式、应用程序的排列和操作方式等。
产品原型标准
产品原型标准在产品开发的过程中，原型是一个至关重要的环节。
通过原型，可以使开发团队更好地理解产品需求，准确地表达设计想法，并能及早发现和解决潜在问题。
因此，制定产品原型的标准是非常重要的。
本文将探讨产品原型标准，并介绍一些关键要素。
1. 原型设计要素1.1 外观设计原型的外观设计应该符合产品的整体风格和品牌形象。
一般来说，原型应该具备简洁、美观和易于理解的特点。
在原型设计中，可以使用视觉效果、颜色、布局等手段来突出产品的特点，并保证用户体验的一致性。
1.2 功能设计原型的功能设计是保证产品能够实现预期功能的关键。
在设计原型时，应根据产品的功能需求，确保每个功能在原型中都能够得到准确的呈现。
同时，原型需要考虑用户的操作流程和交互方式，以提供便捷的用户体验。
1.3 数据设计在产品原型中，数据设计指的是原型所使用的数据类型、数量和来源等。
根据产品需求，确定原型所需的数据，并保证数据的真实性和准确性。
在原型设计中，可以使用填充数据或模拟数据来展示产品功能，以帮助用户更好地理解和评估产品。
2. 原型标准制定要点2.1 清晰明确的标准制定原型标准时，应确保各项要求都明确清晰，并能够准确地表达设计意图。
标准应该包含外观设计、功能设计和交互设计等方面的要求，以及页面布局、色彩搭配和组件规范等具体细节。
2.2 易于理解和遵守原型标准应该以用户和开发人员为中心，易于理解和遵守。
标准应该采用简洁明了的语言，避免含糊和歧义，以便开发人员能够准确地理解和实施。
同时，标准应该与实际开发过程相结合，符合开发人员的工作习惯，并能够提高开发效率。
2.3 灵活适应变化产品开发过程中，需求和设计常常会发生变化。
因此，原型标准应该具备一定的灵活性，能够适应需求和设计的变化。
在标准中，应该明确变更的规范和流程，并建立相应的沟通和评审机制，以确保变更的及时性和准确性。
3. 原型评审和修改3.1 定期评审在原型开发的不同阶段，应定期进行评审，以检查原型是否符合标准和需求。
从零开始教你做高保真原型图+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的绿⾊与棕⾊的搭配⽅案。
在颜⾊这个领域分为代表⾊、辅助⾊、搭配⽅案这三⽅⾯的内容。
⼀般配⾊⽅案是，⼀种彩⾊作为重要信息的突出⾊彩，配上不同深浅的⿊⽩灰或者蓝、棕⾊等⽆⾊彩或者⾊彩感⽐较弱的搭配⽅案。
这样的搭配⽅案，在信息呈现⽅⾯会⽐较清晰。
⽽在做设计⽅案中，还需要考虑的是，设计出不同底⾊的搭配⽅案，⽅便在不同场景的⽅案进⾏统⼀。
关于制作产品原型时需要注意的几点!
加入了明暗对比之后，界面元素的重要级关系更直观，我们不再需要跑过去跟视觉说：这N个模块中这个最重要，那个其次…… 视觉的工作效率也大大的提高了。
但需要注意的是：深色并不意味着比浅色更重要，要看色块之间的对比关系。
比如下图“全部商品分类”是非常重要的，在深色块上用了浅色，是希望把它突出出来，让人更容易注意到。
但是视觉设计师有可能会误以为浅色代表不那么重要，这个一定要提前沟通好。
修改前：修改后：二、不使用截图与颜色很多产品人员为了能更清楚的表现想法，拼凑各种竞品的截图，组成一个页面。
这样做一来不规范，二来对视觉设计师也有一定的干扰。
另外不太建议在线框图上使用色彩，这样同样会对视觉设计师造成不必要的干扰。
如果真的有一些关于图案的想法，可以告诉视觉设计师需要营造什么样的氛围，达到什么效果，而不是直接告诉他“画几个铜钱飞出来的样子，配一个皇榜……”三、标记第一屏高度第一屏高度至关重要，最重要的内容、尤其是重要的操作按钮尽可能在第一屏内显示完全，不然会对转化率有较大的影响。
第一屏高度在什么位置？在1024*768分辨率下，极限情况下可定为570px ；如果不那么严格的话，第一屏高度也可以定为600px。
在原型稿上标明即可，这样可以给视觉设计师一个参考。
但不要为了保持第一屏高度而让内容过度拥挤，这样会给视觉设计师带来不小的麻烦。
四、严格遵守栅格规范很多产品人员或新人交互设计师都比较容易忽略这一点，没有按照栅格规范来布局，这样容易导致的结果就是：视觉设计师在按照栅格排版时，发现在交互稿中能排下的内容，在视觉稿中排不下了，这样就还得返回去改交互稿，或是修改需求内容。
影响效率不说，可能还会影响最终的质量。
所以在制作原型时，一定要注意这一点，同时也要保证交互稿中的字号、间距尽量符合视觉要求（比如间距最小10像素等），以免给视觉造成不必要的困扰。
但建议在确定栅格布局时，一定提前和视觉沟通商量好，以免影响视觉的发挥。
五、合理的布局及间距很多产品人员完全不考虑布局标准及美观程度，随便就把想要的内容堆到一起。
产品高保真原型的制作与规范
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: 低保真原型
低保真原型能够准确的 传达界面的布局和交互 方式，但是美观、效果 欠佳。可以理解为介于 纸面原型和高保真原型 之间的输出的统称，往 往也可以作为需求设计 稿输出。
高保真原型制作规范
把看原型的人想象成对产品一无所知的人，怎么图文并茂的展示产品的逻辑 和功能；怎么让她通过原型来理解这个产品，使用这个产品。
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. 易用性原则：原型设计应遵循用户友好的原则。
用户界面应简单直观，操作流程应合理顺畅，以提供良好的用户体验。
2. 一致性原则：原型设计中的各个界面和元素应保持一致。
例如，相同类型的按钮要具有相同的样式和功能，相同类别的页面要使用相似的布局和配色方案。
3. 可读性原则：文本内容在原型设计中非常重要，需要注意文字的字体、大小、颜色等方面。
确保文本易于阅读，避免使用过小的字体或浅色的字体。
4. 反馈原则：用户操作后，界面应给予适当的反馈。
例如，当用户点击按钮时，按钮可以发生一些变化或者由点击动画，以提供明确的操作结果。
5. 可访问性原则：原型设计应考虑到各种用户需求，包括残障人士的需求。
例如，设计时要确保界面中的文本可以被屏幕阅读器正确识别和朗读。
6. 导航原则：原型设计中的导航要简单明了，易于理解和操作。
用户应能够轻松找到所需内容，并能够随时返回上一页或者回到主页。
7. 图像优化原则：在原型设计中使用图片时，要进行优化处理，以确保图片加载速度快，同时保持高质量。
避免使用过大的图片或者使用过多的图片。
8. 响应式设计原则：原型设计应考虑多种设备和屏幕尺寸的适应性，以提供良好的跨平台体验。
确保界面可以在不同屏幕尺寸下自适应或者提供不同的布局。
9. 安全性原则：原型设计应考虑到数据的安全性和隐私保护。
例如，要确保用户输入不被他人窃取，以及数据传输过程中的安全性。
10. 测试原则：在完成原型设计后，需要进行充分的测试和调试，以确保界面的功能正常，流程无错，并且在不同环境下均能够正常展示。
以上是一些常见的原型设计规范，不同的项目和需求可能会有所不同，因此在进行原型设计时，还需要根据具体情况进行相应的调整和细化。
明确设计目标、充分理解用户需求以及与团队成员合作也是进行原型设计的关键。
产品经理究竟该如何进行原型设计
经历了漫长的产品设计流程，我们终于来到了最后一个环节，也就是根据之前梳理的产品流程来进行产品的界面设计了。
产品经理其实都知道，在这样一个看重颜值的时代，一个赏心悦目的（或者APP）是多么重要。
每一个产品经理，也都希望自己的创造的产品是与众不同的，在茫茫的互联网产品海洋里，能够闪出耀眼的光芒，就好比每个人都希望自己是人群中独一无二的那一个。
嗯，这么说来，其实每一个产品经理的内心深处，都有着一颗文艺青年的心灵，也正是拥有了这样一颗感受丰富、细腻的产品之心，才使得我们能够对产品设计的细节有着更为透彻和深入的理解。
在大公司内部，通常来说不需要产品经理去进行具体的界面交互设计，多数是由产品团队与UED团队合作进行产品原型的设计，出具的交付物是产品原型和页面交互图，而产品经理则需要产出产品需求文档（PRD文档）。
但是在绝大多数创业公司团队里面，则没有配置那么豪华的产品设计、交互设计团队，常见的搭配往往是一个产品经理加上一个UI设计师，所以一般都是产品经理自己身兼交互设计的工作职责，输出交互设计稿，也就是产品原型。
什么是产品原型说的简单一点，产品原型是设计方案的表达，是产品经理、交互设计师的重要产出物之一，也是项目团队的其它成员（尤其是设计师、开发人员）的重要参考和评估的依据。
结合我们前面了解的知识，产品界面原型其实就是页面级别的信息架构、文案设计、及页面和页面之间的交互流程，它是产品功能与内容的示意图。
直接上几个原型图，可能会更加清晰明了，如下图：产品设计原型按照精细程度来分，可分为低保真产品原型和高保真产品原型、设计成品低保真产品原型：所谓低保真原型，其实是对产品较简单的模拟，它只是简单的表述了下产品的外部特征和基本功能构架，很多时候都是用简单的设计工具迅速出来，用来表示最初的设计概念和思路。
比如用纸和笔进行的手绘，用画图软件做出的简单线框图，都算是低保真产品原型。
这样的原型图有几个好处：1.可以快速产出：有时候一个需求的开发周期很短，低保真原型可以快速满足同事的时间要求。
产品经理一篇文章搞懂「低保真原型与高保真原型」
在当今快速成长的产品行业中，用户体验(UX)设计变得越来越重要。
很明显，以设计为导向的公司相对于其他公司更有竞争力。
“原型”对创造成功的用户体验至关重要。
但是对许多产品团队来说，原型仍然是UX设计过程中最令人困惑的部分之一。
毫无疑问，原型可以是任何东西，从一系列代表app的不同界面或状态的纸质草图，到功能齐全、像素完美的app。
在本文中，我将回答以下与原型开发相关的问题:什么是原型，什么时候需要设计原型？什么是“原型保真度” ?低保真原型和高保真原型的区别是什么？哪些技术支持原型制作？我们经常在不同的背景里看到“原型”这个词。
由此，我们很可能已经混淆它的真正含义。
它最基本的含义：原型是设计想法的表达。
原型让设计师们得以展现他们的设计，以及模拟真实的使用场景。
在数字化的背景下，原型能够模拟用户与界面之间的最终交互行为。
根据产品团队的需求，原型可以模拟整个app或仅单个交互行为。
原型可以模拟最终产品的运作方式。
它支持产品团队测试其设计的可用性和可行性。
也有很多人将原型与草图，线框图和模型混淆，实际上它们不同于原型。
“交互性”这个概念是原型的根本，因此这就是为什么草图，线框图和模型不能被视为“原型”的理由。
做原型主要是为了在做实际产品之前测试设计（和产品创意）。
是否进行测试与产品的成功直接相关。
不用想，当产品在市场上上市，人们开始使用它时，你的设计将被用户测试。
如果这是首次测试，则很有可能会有来自用户的负面反馈。
因此，在低风险的研究阶段和公开发布之前收集产品反馈，总是更好。
以下是需要原型的两种情况：确保设计理念按预期进行。
在大多数情况下，让实际用户测试产品概念是相对容易的。
一旦用户拿到一个可以交互的产品原型，产品团队就能够看到目标受众是如何使用该产品。
根据这些反馈，可以调整初始理念。
确定用户能够顺利地使用产品。
原型的必要性是在产品发布前发现和解决可行性问题。
它能测试出产品需要改进的地方。
这也是之所以那么多产品团队创建原型，让用户测试它们，并迭代设计直到它足够好的原因。
制作原型以及实施方案
制作原型以及实施方案一、制作原型。
在进行产品设计和开发之前，制作原型是非常重要的一步。
原型是产品设计的初步呈现，它可以帮助设计师和开发人员更好地理解产品的功能和外观，也可以帮助客户更好地了解产品的特点和优势。
因此，制作原型是产品设计和开发过程中不可或缺的一环。
1.1 确定需求。
在制作原型之前，首先需要明确产品的需求。
这包括产品的功能、外观、用户体验等方面的要求。
只有明确了产品的需求，才能有针对性地制作原型，确保原型能够满足产品的需求。
1.2 选择合适的工具。
制作原型需要使用相应的工具，例如Axure RP、Sketch、Adobe XD等。
选择合适的工具可以提高原型制作的效率和质量，同时也能更好地满足产品的设计要求。
1.3 制作原型。
在确定了产品的需求和选择了合适的工具之后，就可以开始制作原型了。
制作原型需要根据产品的功能和外观设计相应的页面和交互效果，确保原型能够真实地呈现产品的特点和优势。
二、实施方案。
制作原型完成之后，下一步就是实施方案的制定。
实施方案是指产品的开发和推广计划，它包括产品的开发周期、开发成本、推广渠道、推广策略等方面的安排。
一个好的实施方案可以帮助产品更好地被市场接受和认可，提高产品的竞争力。
2.1 确定开发周期和成本。
在制定实施方案时，首先需要确定产品的开发周期和成本。
开发周期和成本直接影响产品的上线时间和市场竞争力，因此需要合理地安排开发周期和成本，确保产品能够按时上线并具有竞争力。
2.2 确定推广渠道和策略。
产品的推广渠道和策略也是实施方案中需要考虑的重要因素。
选择合适的推广渠道和制定有效的推广策略可以帮助产品更好地被市场认可和接受，提高产品的知名度和销量。
2.3 制定实施计划。
在确定了开发周期、成本、推广渠道和策略之后，就可以制定实施计划了。
实施计划需要包括产品的开发进度安排、推广活动的时间节点、推广效果的评估等内容，确保实施方案能够顺利地执行和落实。
综上所述，制作原型以及实施方案是产品设计和开发过程中非常重要的一环。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
把看原型的人想象成对产品一无所知的人，怎么图文并茂的展示产品的逻辑 和功能；怎么让她通过原型来理解这个产品，使用这个产品。
11
1原型的定义 2原型的种类 3原型的工具 4高保真原型
STEP 1: 建立控件库 控件是指界面中所有的 最小元件。比如：按钮、 文本框、下拉框、单选 按钮、复选框、图片占 位符等等。
示 例
12
1原型的定义 2原型的种类 3原型的工具 4高保真原型 Accordion(手风琴)
STEP 2: 建立组件库
Tag Cloud(标签云)
能够完成一个功能点，形成一种模块，能够被重复使用，从而降低开发成 本，实现界面的一致性，规范性，突出界面的风格特征。
13
1原型的定义 2原型的种类 3原型的工具 4高保真原型
Fireworks、Illustrator、PS、Pencil、UIDesigner、GUI Design Studio、 ＷPF、Silverlight、Expression Design、Prototype Composer、Lucid Spec、Irise Professional Edition、AdobeReader......
2: 低保真原型 低保真原型能够准确的 传达界面的布局和交互 方式，但是美观、效果 欠佳。可以理解为介于 纸面原型和高保真原型 之间的输出的统称，往 往也可以作为需求设计 稿输出。
7
1原型的定义 2原型的种类 3原型的工具 4高保真原型
3: 高保真原型 高保真原型通常指高保真灰度线 框图或产品演示Demo。界面布 局和交互效果与实际产品完全等 效，体验上也与真实产品接近。 而为了达到完整的效果，很大程 度上就要求交互设计师有较好的 视觉审美的能力，对界面比较敏 感，有控件和组件的概念，注重 界面的规范性和一致性。
组件库示例
示 例
14
1原型的定义 2原型的种类 3原型的工具 4高保真原型
STEP 3: 绘制流程图
1. 流程图表达的是一个用户用例，通常是HappyFlow 2. 流程图有一个起点和一个终点 3. 流程图中相同的元件代表相同的意思 4. 结构清晰，易于理解 5. 不要用一个流程图展示所有的流程 6. 逻辑完整，清晰 7. 每一个用户的决策都是DecisionPoint 8. 流程图的作用在于梳理流程和规范流程
示 例
20
1原型的定义 2原型的种类 3原型的工具 4高保真原型
STEP 6: 原型注释
1. 注释的是界面元素的功能 2. 界面与人的交互方式 3. 控件的状态以及在什么情况下会出现什么状态 4. 操作的结果 5. 链接的指向 6. 报错信息及其展示方式 7. 对于界面中不便于展示的元素的描述，比如页面切换方式 8. 全面、细致、清晰 9. 充分考虑交流的效率和效果
3
1原型的定义 2原型的种类 3原型的工具 4高保真原型
原型是对一个产品的可视化呈现，主要传达 一个产品的信息架构、内容、功能和交互方 式。
4
1原型的定义 2原型的种类 3原型的工具 4高保真原型
保真度
介质种类
原型的工具
低 保 真 原 型
高 保 真 原 型
纸 面 原 型
电 子 原 型
Axure Visio Fireworks ……
8
1原型的定义 2原型的种类 3原型的工具 4高保真原型
Axure 快速eb界面
Visio 适用性广 控件库强大 便捷的模板套用 支持绝大多数格式 擅长桌面程序界面
Mockflow 在线软件 基于web的存储 适合虚拟团队 丰富的控件库 丰富的控件模式
5
1原型的定义 2原型的种类 3原型的工具 4高保真原型
1: 纸面原型 纸面原型就是指画在纸 上、白板上的界面原型。 便于修改和绘制，不便 于保存和展示。能让所 有人参与其中，创造很 多附加信息和价值。通 过绘制的过程，你可以 更清晰的传递界面的布 局和逻辑。
6
1原型的定义 2原型的种类 3原型的工具 4高保真原型
9
1原型的定义 2原型的种类 3原型的工具 4高保真原型
制作步骤 建立组件库 绘制流程图
建立控件库
故事版
设计辅助页
设计关键页
原型注释
10
1原型的定义 2原型的种类 3原型的工具 4高保真原型
高保真原型注意事项
1. 灰度线框图： 颜色会干扰视觉设计，效果会影响大家对易用性的判断。 2. 清晰地展示流程： 好的操作流程是易用性的最基本标准。 3. 关键功能要有故事版： 更好的、更快的理解产品。 4. 要有注释： 图只能展示界面元素，图文并茂才能准确全部传达设计思想。 5. 有一致性： 一致性会降低用户对界面的学习和识别成本。 6. 有规范性： 好的软件或者网站绝对是规范的。
原型制作与规范
产品部
杨成云
1
目录
1 原型的基本定义及原型的要点
1原型的定义 2原型的种类 3原型的工具 4高保真原型
2 常见的原型分类方法 3 常用的原型工具及其特点 制作高保真原型的方法 4 用Visio Visio制作高保真原型的方法
2
1原型的定义 2原型的种类 3原型的工具 4高保真原型
原型是对一个产品的可视化呈现，主要传达 一个产品的信息架构、内容、功能和交互方 式。
15
1原型的定义 2原型的种类 3原型的工具 4高保真原型
流程图示例
示 例
16
1原型的定义 2原型的种类 3原型的工具 4高保真原型
STEP 4: 设计关键页面
示 例
17
1原型的定义 2原型的种类 3原型的工具 4高保真原型
STEP 4: 设计辅助页面
示 例
18
1原型的定义 2原型的种类 3原型的工具 4高保真原型
STEP 5: 关键功能 Storyboard 展示 1 关键功能Storyboard Storyboard展示 展示1
示 例
19
1原型的定义 2原型的种类 3原型的工具 4高保真原型
STEP 5: 关键功能 Storyboard 展示 2 关键功能Storyboard Storyboard展示 展示2
1原型的定义 2原型的种类 3原型的工具 4高保真原型
原型注释示例
示 例
22
Thank U
产品部：杨成云
23