高保真原型制作规范
教你用KEYNOTE快速制作高保真交互原型
Keynote 在一定程度上，制作高保真原型是非常快速的。
比如我下面的这个例子，在 Framerjs 的官网有用 Framer.js 的样例，我用 Keynote 重做了一遍。
在这个例子里，相比用 Framerjs 的令设计人员忘而生畏的一两百行代码，Keyonte 可谓简单快速便捷。
我把一些资源也放在GitHub 上了：infodavid/keynote-prototype GitHub。
用 Keynote 制作交互动效设计- 硬件准备：Mac- 软件准备：Keynote- 素材资源(如果你想自己画的话，也没问题)：Google Logo，Avantar，Android L Icons，Roboto 字体第一步，基本设置新建一个 Keynote 文件，然后在 **文档** 的 **幻灯片尺寸** 中选择 **定制幻灯片尺寸**，并在输入框中输入宽为：640，高为：1136。
我一般选择使用 iPhone5 的分辨率，以免尺寸过大导致的投影效果欠佳。
在 **格式** 中选择 **背景颜色**，输入 H:238 S:0 B:94。
RGB 对机器友好，但 HSB 是对人更友好的色彩模式，推荐使用 HSB 模式。
第二步，画图我图方便，顶部条部分直接在 Sketch 里画了图，导成 PNG 放在 Keynote 里。
其实Keynote 里也同样可以完成这个操作，下面就介绍下 keynote 里如何完成：1. 自行绘制。
Keynote 中的钢笔工具非常强大，你可以绘制任何你想要的图形，同时也可以让图形之间合并，相减相交。
但是缺点是无法导成单独的图片。
2. 运用资源：图标字体，IconFont，安装此图标字体，即可使用。
优点是你可以任意放大缩小不失真，缺点也很明显，要导出图片是麻烦的事情。
其他都较为简单，就不多赘述。
唯一需要注意的是在第二页中，并不是简单的一个矩形背景，而是由圆和矩形拼接成的。
稍后介绍动效时，会介绍到 Magic Move 的运用。
原型规范
原型设计规范（初稿）更新记录1.编写目的建立基本的通用的原型设计规范，提升低保真、高保真原型的制作效率。
2.主要内容基础素材；对常用的控件库和组件库的建立，降低开发时间成本，提高一致性和规范性，保持良好的界面风格。
原型制作：划分为流程、关键页面、辅助页面和原型注释。
对原型制作的关键步骤进行规范。
原型发布：1）用于迭代用户评估。
2）用于开发前审核合理性和开发后验证相符性。
界面规范：遵循一些基本的界面设计规范，增强原型的可用性和制作效率。
3.基础素材3.1常用控件定义：控件是指界面中所有的最小元件。
比如：按钮、文本框、下拉框、单选按钮、复选框、图片占位符等等。
文本类控件定义：对原型中文本元素的推荐控件及参数版本：文本类 V1.0播放类控件作用：播放按钮的推荐控件和参数。
菜单和按钮作用：常用菜单和按钮推荐和参数。
版本：菜单和按钮控件 V1.0表单元素作用：提供表单及元素的推荐尺寸版本：表单元素控件库 V1.0图表和表格作用：提供图标和表格基本样式版本：图表和表格 V1.0常用图标控件作用：界面中常用的按钮图标。
版本：各类图标控件 V1.0弹出面板作用：提供弹出面板（窗口）的基本样式。
版本：弹出面板 V 1.0浮层窗口尺寸作用：提供弹出窗口的尺寸规格。
版本：浮层尺寸 V1.0视频窗口尺寸作用：提供视频窗口的尺寸规格版本：视频窗口尺寸 V1.0图片尺寸作用：提供引用界面的尺寸规格（待定）版本：1.03.2常用组件定义：能够完成一个功能点，形成一种模块，能够被重复使用，从而降低开发成本，实现界面的一致性，规范性，突出界面的风格特征。
布局作用：使用栅格作为布局的摆放参考。
版本：栅格布局V 1.0示例：日期选择作用：提供日期选择的原型组件版本：日期选择 V1.0导航作用：提供导航页签的组件。
版本：导航 V1.0表单处理作用：对表单等数据的多种处理方式，如搜索，格式化、总览和浏览。
版本：1.0树状列表作用：提供树状列表组件的包括机构树、搜索及相关操作。
从零开始教你做高保真原型图+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高保真原型
建立控件库
制作步骤 建立组件库
故事版
设计辅助页
原型注释
绘制流程图 设计关键页
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: 低保真原型
低保真原型能够准确的 传达界面的布局和交互 方式，但是美观、效果 欠佳。可以理解为介于 纸面原型和高保真原型 之间的输出的统称，往 往也可以作为需求设计 稿输出。
高保真原型的这几个秘密，你知道吗?
高保真原型不是一个人可以做的事情，高保真原型需要交互、视觉、产品的配合；高保真原型不是必须的，但有它更好，请在合适的时间和场景下制作高保真；高保真原型是一个最小化的MVP产品之一，它可以帮助你快速验证市场；高保真原型的阅读人群更加广泛，它不仅可以被视觉、开发、产品阅读，还可以被市场、运营、boss和种子用户阅读；原型的保真程度可以分为：低保真、高保真低保真原型（纸面原型、物理原型），下图为低保真下图图为高保真原型原型常被称为线框图、mockuo、demo，原型制作是在正式开始视觉设计和开发之前最具有成本效益的可用性手段之一。
高保真原型可以真实的模拟产品最终的视觉效果、交互效果和用户体验感受。
高保真原型也是最小可行性产品，即MVP产品。
一个登陆页的栗子：二、为什么要做高保真原型？高保真原型是团队成员沟通的有效工具，它也是获取前期用户反馈数据的重要手段之一。
那么，我们来看看一幅关于软件产品的漫画，带着问题继续阅读。
一千个人眼中有一千个哈姆莱特，每个人对需求的理解都不尽相同。
如何让不同的人对与需求，有一个统一的认识？高保真原型无疑是一个很好的选择。
1，它能清楚的告诉你的团队成员，要做的产品是什么样子；2，它能清晰的体现产品的用户体验；它能准确的模拟后台数据的大部分交互效果；3，它能让你的团队成员（市场、运营等）都能更好的理解需求；4，它更加容易的被修改；它还能让目标用户直接参与测试，告诉你他们是否需要；高保真原型对不同人员的影响对于公司1，保证产品质量。
低成本高质量的高保真原型为真正产品提供了保障；2，工作量具体化。
设计、开发、测试等环节评估工作量变得有据可依；3，节约时间成本。
大多会影响产品的隐患，都会在产品原型的时候被发现，在开发阶段之前被解决；4，快速检验产品设计。
用高保真原型去验证产品的市场，获取最早期的市场信息，它是真实产品的试金石；5，加深各个团队对产品需求和具体工作的理解；注：创业公司的首要任务应该是确定开发什么样的产品，千万别在浪费了100W刀之后才醒悟，已经开发了一个用户不需要的产品。
原型设计的基本原则和方法
原型设计的基本原则和方法随着移动互联网时代的到来，原型设计作为网站、应用程序、产品设计中必不可少的环节，逐渐成为设计师们的常见工具。
但是，对于很多初学者而言，原型设计的基本原则和方法还比较模糊，因此，本文将从以下几个方面来详细介绍原型设计的基本原则和方法。
一、什么是原型设计？在创意设计中，原型设计是一项旨在构建产品实物原型的过程，这种原型经过一系列测试、评估和改进，以保证所有客户需求都得到满足的过程。
这种过程从概念到实现的转变，是一个非常关键的环节，它瞄准的是用户的需求和最终产品的可用性。
二、原型设计的方法1、确定设计原则在原型设计之前，一定要确定自己在设计方案中所需要遵守的设计原则，如色彩、图形、排版、内容结构、交互方式等。
了解并遵守这些原则有助于设计师更快、更准确地完成设计。
2、定义用户需求明确用户需求是原型设计的前提条件。
通过用户调研、竞争分析、使用场景开发等方式了解用户的需求和痛点，并将这些信息用于原型设计中，可以让我们的产品更具备针对性和可用性。
3、创建草图创建草图是原型设计的一个必要步骤，这种草图可以帮助您快速理解产品的交互和布局，并对设计方案进行调整和改进。
草图的目的在于概述产品的基本结构，而不是讨论细节。
4、制作低保真原型低保真原型是原型设计的关键环节，这种原型通常由手绘图或设计软件制作而成。
它通常不会包含任何交互或动画效果，主要用于表达网站或应用程序的基本结构。
5、制作高保真原型高保真原型是低保真原型的进一步发展，它提供了完整的用户界面和交互设计，可以在用户测试和各种评估中使用。
三、原型设计的基本原则1、基于用户需求原型设计的基本原则之一是以用户需求为中心。
设计师应在设计的早期阶段就设法了解用户需求，不断地与他们进行交流和沟通，并将这些信息用于我们的原型设计中。
2、设计易用性在原型设计中，易用性是一个非常重要的因素。
设计师们需要构建一个设计简单、互动性高、面向用户的环境来确保用户体验良好。
详细设计与高保真原型设计教学内容
详细设计与高保真原型设计物理设计本系统界面采用b/s模式，显示内容以浏览器为框架，其界面提供登录或者免费注册界面。
可进入个人中心管理个人信息，若没有登录，则跳转到登录界面。
该界面设有一条导航栏，包括四个导航选项卡，分别为首页、书店区、最新消息、讨论区。
点击对应导航选项卡会进行对应页面跳转。
本文档为在低保真原型设计的基础上改进的高保真原型，描绘了每个模块的详细界面。
主页选项卡提供搜索框，可根据输入的图书名或作者名进行搜索，也可进行高级搜索。
搜索框下方提供筛选条件，如图书区未售、图书区已售等，点击了搜索按钮之后，进行页面跳转，进入搜索结果显示页面。
主页下方主体主要分为四部分，一类是左侧图书的分类部分，方便用户对图书进行筛选，中间部分是四个大类，分别是”销售排行”、”综合书店排行”、”书摊排行”、”新加盟书店排行”。
右侧上半部分为在线客服，下半部分为公告、新手指南和交易规则。
书店区选项卡中同样提供搜索功能，不过搜索方式略有不同，更加侧重图书区的特点，下方的主体是各种图书的分类，其中有选项卡，选择不同类的图书，选择具体选项卡之后就是相应类别的图书，图书以九宫格的形式展示，每一个格子是一本书，格子中提供图书的图片和图书名以及价格。
右侧提供书店搜索框，可根据书店名进行搜索，也可点击下方按钮查看书店排行榜。
最新消息区选项卡提供最新的热点新闻、市场动态和访谈。
左上角为最新的热点图片以及其标题。
左下角陈列出热点与新闻动态标题。
左上角为最新访谈、往期访谈以及专家介绍。
左下角为今日热卖商品的简介。
讨论区选项卡类似于贴吧，提供搜索功能，通过输入关键词来搜索帖子，也可选择书店区搜索和拍卖区搜索。
下方为行业小动态的帖子标题、作者、回复/阅读数量以及最后发表人和时间。
●高保真原型图◆主页◆书店区◆最新消息区◆讨论区●评估本高保真原型针对大学生图书交易平台进行交互界面的简短设计，以浏览器为显示框架，涉及网页超文本基本元素，如超链接、图片等。
原型法的步骤
原型法的步骤原型法的步骤：一、确定需求在进行原型设计之前，首先要明确产品或系统的需求和目标。
通过与客户、用户的沟通和讨论，了解他们的需求和期望，确定产品的功能和特性。
二、收集信息收集与产品相关的信息，包括市场调研数据、竞争对手分析、用户反馈等。
这些信息可以帮助设计师更好地理解用户需求和行业趋势，为原型设计提供依据和参考。
三、绘制草图在草图阶段，设计师可以用简单的线条和形状勾勒出产品的大致布局和结构。
通过草图，可以快速地尝试不同的设计方案，发现问题并进行修正。
四、制作低保真原型低保真原型是指使用简单的工具（如纸笔、演示软件等）制作的初步原型。
它可以模拟产品的基本功能和交互流程，帮助设计师和用户更好地理解产品的使用方式。
五、评审和修改在制作低保真原型后，设计师应邀请相关人员（如客户、用户、开发人员等）参与评审。
他们可以提出建议和意见，帮助设计师发现问题并进行修改和优化。
六、制作高保真原型高保真原型是指使用专业设计工具（如Sketch、Axure等）制作的具有较高交互和视觉还原度的原型。
它可以更真实地呈现产品的外观和交互效果，帮助用户更好地理解产品的功能和特性。
七、测试和优化在制作高保真原型后，设计师可以邀请用户参与测试。
通过观察用户的行为和反馈，设计师可以发现潜在问题并进行优化。
不断地测试和优化是原型设计的重要环节，可以提高产品的用户体验和满意度。
八、交付和实施当原型设计完成后，设计师可以将原型交给开发人员进行实施。
设计师应提供详细的设计文档和说明，确保开发人员可以准确地理解和实现设计意图。
九、反馈和改进产品上线后，设计师应与用户保持沟通，收集他们的反馈和意见。
根据用户的反馈和市场的变化，设计师可以不断改进和优化产品，提高用户的满意度和忠诚度。
十、总结与复盘在原型设计完成后，设计师应总结和复盘整个设计过程。
回顾设计的成功和不足之处，总结经验教训，为以后的设计工作提供参考和借鉴。
通过以上的原型法步骤，设计师可以更好地理解用户需求，快速验证设计方案，优化产品体验，提高设计效率。
产品经理高保真原型制作与规范
产品经理高保真原型制作与规范产品经理在产品设计过程中，高保真原型制作与规范的重要性不言而喻。
高保真原型能够提供给开发人员清晰明确的设计需求，减少沟通成本，规范则能够保证产品最终的用户体验与设计初衷的一致性。
本文将从高保真原型制作和规范两个方面展开讨论。
一、高保真原型制作的重要性1.规避需求误解和沟通成本：高保真原型能够让产品经理将设计思路、交互流程等用更具可视化的方式呈现给开发人员和其他相关人员，减少了口头沟通时由于信息传递不明确导致的需求误解和沟通成本。
通过高保真原型，开发人员可以更加清楚地了解产品的功能和交互逻辑，从而更加准确地实现产品设计。
2.提前发现问题和迭代优化：高保真原型在制作过程中，能够让产品经理和设计师发现设计中存在的问题，进行迭代优化。
在产品还未花费大量开发成本之前，就能够通过高保真原型发现并解决问题，降低后期修改成本。
此外，高保真原型也能够用于用户测试，在用户群体中进行反馈和调整，从而减少产品上线后的用户体验问题。
3.加快开发进度：高保真原型能够提供给开发人员尽可能详细的设计需求和交互细节，避免了在开发过程中频繁与产品经理和设计师沟通，加快了开发进度。
开发人员可以根据高保真原型进行代码实现，而不需要进行额外的设计决策，提高了开发效率。
二、规范的重要性1.统一视觉和交互风格：规范能够确保产品在视觉和交互上的一致性，让用户在使用产品时感受到一种统一的风格和体验。
当产品内不同功能模块的设计都遵循同一套规范时，用户可以快速熟悉和理解新功能，提高了用户的使用效率和满意度。
2.提高产品可维护性：产品经理在制定规范时可以考虑到产品的扩展性和可维护性，如模块化的设计和文档化的规范可以帮助开发人员快速理解和维护代码。
规范也能够约束开发人员的行为，减少不必要的重复开发和低效的代码实现。
3.保证产品质量：规范可以确保产品在设计和开发过程中遵循最佳实践和行业标准，减少潜在的错误和缺陷。
规范也能够帮助产品团队进行代码审查和设计评审，发现潜在问题并及时改进，提高产品的质量。
一个好的产品原型必备的4点
一个好的产品原型必备的4点曾经有人说，由于原型是直接拿给客户看的，因此最好做成高保真。
对此我不赞同。
首先，给客户或开发讲解原型时，产品的交互其实是重点，至于细节，首先在对用户体验的影响上占的权重没有人们想象中大，其次，细节在客户，开发和真实的用户眼里的效果是不一样的。
因此我们自己心里要有一套标准，而不是一味地跟着不断变化的客户需求走，否则就无法判断什么是好的原型了。
其实在我看来，功能完整，思路清晰，交互明白的原型就是好的原型。
那么，做到这些的原型都具有什么样的特点呢？一、功能分布合理（利用脑图进行设计）一个产品的功能多种多样，在进行原型设计时，要根据这些功能规划出各个页面，这非常考验产品经理的思维能力。
如何合理地布置这些功能呢？首先要对产品有宏观的了解，其次就是保证功能设计过程中思路清晰。
一个很好的方法就是使用脑图，来快速地反应思路，规划需要的模块（页面）。
脑图的好处不仅仅在于此，它还方便产品经理对产品的整体功能进行演示和讲解。
其次，如果原型工具能做到随时导出基于脑图的文档，也便于筹划PRD文档。
二、逻辑清晰的流程图原型，脑图，项目树，流程图这些看似是相互独立的个体，但我觉得后三者都应是原型的一部分，就好像一本小说的写作背景，目录，主体和结语，其实都是构成小说的部分。
这其中，流程图反应了不同页面之间的逻辑关系，一个逻辑清晰，意义明确，简洁明了的流程图不仅有利于帮助客户了解产品的结构，也有利于设计师不断完善产品的逻辑。
三、必要的页面批注及充分的交互说明正如开头所说，原型不是必须做到高保真才好，很多情况下，我们没有足够的时间去精雕细刻，此时为了准确地表达想法，就要用到批注或文字说明。
虽然产品原型中的图片、功能和交互能够很好的表达产品经理的思路和观点，但是一些特殊场景下，简单的文字说明，能够让产品团队成员，更快、更好的理解产品经理的想法。
有些原型工具会提供各式各样的批注组件，方便设计师或产品经理在原型图的基础上进一步说明自己的想法。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
把看原型的人想象成对产品一无所知的人，怎么图文并茂的展示产品的逻辑 和功能；怎么让她通过原型来理解这个产品，使用这个产品。
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高保真原型
真
原
原
型
型
介质种类
纸
电
面
子
原
原
型
型
原型的工具
Axure Visio Fireworks ……
5
1原型的定义 2原型的种类 3原型的工具 4高保真原型
1: 纸面原型
纸面原型就是指画在纸 上、白板上的界面原型。 便于修改和绘制，不便 于保存和展示。能让所 有人参与其中，创造很 多附加信息和价值。通 过绘制的过程，你可以 更清晰的传递界面的布 局和逻辑。
原型制作与规范
产品部
余代军
1
目录
1原型的定义 2原型的种类 3原型的工具 4高保真原型
1 原型的基本定义及原型的要点 2 常见的原型分类方法 3 常用的原型工具及其特点 4 用Visio制作高保真原型的方法
2
1原型的定义 2原型的种类 3原型的工具 4高保真原型
高保真原型通常指高保真灰度线 框图或产品演示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......
9
1原型的定义 2原型的种类 3原型的工具 4高保真原型
建立控件库
制作步骤 建立组件库
故事版
设计辅助页
原型注释
绘制流程图 设计关键页
10
1原型的定义 2原型的种类 3原型的工具 4高保真原型
高保真原型注意事项
1. 灰度线框图：颜色会干扰视觉设计，效果会影响大家对易用性的判断。 2. 清晰地展示流程：好的操作流程是易用性的最基本标准。 3. 关键功能要有故事版：更好的、更快的理解产品。 4. 要有注释：图只能展示界面元素，图文并茂才能准确全部传达设计思想。 5. 有一致性：一致性会降低用户对界面的学习和识别成本。 6. 有规范性：好的软件或者网站绝对是规范的。
Hale Waihona Puke 151原型的定义 2原型的种类 3原型的工具 4高保真原型
流程图示例
16
1原型的定义 2原型的种类 3原型的工具 4高保真原型
STEP 4: 设计关键页面
17
1原型的定义 2原型的种类 3原型的工具 4高保真原型
STEP 4: 设计辅助页面
18
1原型的定义 2原型的种类 3原型的工具 4高保真原型
1原型的定义 2原型的种类 3原型的工具 4高保真原型
原型注释示例
22
Thank U
产品部：余代军
23
原型是对一个产品的可视化呈现，主要传达 一个产品的信息架构、内容、功能和交互方 式。
3
1原型的定义 2原型的种类 3原型的工具 4高保真原型
原型是对一个产品的可视化呈现，主要传达 一个产品的信息架构、内容、功能和交互方 式。
4
1原型的定义 2原型的种类 3原型的工具 4高保真原型
保真度
低
高
保
保
真
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. 充分考虑交流的效率和效果