本文目录一览：
用PowerPoint 制作高保真原型，有哪些技巧
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. 顶部条有轻微的上移渐隐效果。3. 第二页的标题，文字等上移4. 麦克风出现5. 头像背后的圆放大并持续一小段时间当然，哪个象征光标的圆圈也是有一个移入，并进行 Pop 效果的。Keynote 里的 Magic Move(神奇移动)，真的很 Magic，兼职就是无缝衔接。当你运用 Magic Move 时，注意要是相同的两个对象。比如说在这个 Demo 里，你把第一页中的蓝色圆背景，复制，黏贴到第二页，同时放大尺寸，那么在运用 Magic Move 之后，过渡就会非常自然。同时，Build Order(构件顺序)也是非常重要的，你在此选择动效的持续时间，是否运用延迟，在点击还是在某构建之后开始。其中的妙处是需要自己去把玩的，说一百遍不如实地做一遍。优化一下1. 复制第二页的标题和文字到第一页的画布底下。1. 把首页中底部的矩形背景复制到第二页，然后调整其高度为450，这样，运用 Magic Move 的时候，就会更自然了。最后几句其实页面还有很多可以进化的地方，各位可以再试试。现在有很多的工具可以帮助我们展现 Demo，比如说 Origami, Form，Framer Studio，InVision，Adobe Effects，Xcode，等等等等。这些工具各有各的优势，也各自存在缺点。比如说同样这个 Demo，用 Framerjs 来做的话，都快200行代码了(前提还是你得画好图)，但是用 Keynote 去做，连画图带动效，也就两页。按照时间和要求的不同，选择合适的工具，才是最好的。更为重要的是你的想法，毕竟，这些都只是用来实现你得想法的。
产品经理必备技能 | 如何画原型
产品经理当然要会画原型啦~
聊聊怎么画原型吧！
在画原型之前，更重要的事情，就是画 页面流程图 和 信息架构图 ！假如你没有这些东西，就开始画原型，那么等着你的就是没完没了的改改改。
页面流程图是以用户视角，看流程合理性。通常适合于跳转比较复杂的产品功能，如电商、社交产品。
为什么要画页面流程：
（1）是交互设计/原型设计的基本依据，是逻辑基础。如果你都没想好页面流转的顺序，那么你画的原型一定不是可以确定下来的版本
（2）代表了用户的操作过程，先画页面流程图能迅速发现体验问题。有了页面流程图，你可以设身处地想象用户在使用产品时的操作流程，发现其中可能出现的问题
（3）突出页面重点元素与逻辑关系，提升原型的设计效率。很多页面不是全新页面，而是在原有页面做一些修改，如果你知道页面流转顺序，那么会给你画原型减轻很多工作量
页面流程图包含：
（1）四方形：业务流程中的四方形部分，异常流程或弹层通常用菱形表示
（2）流向：主干流向和辅助流向
（3）重点元素：每个流程中，重点要体现和表达的内容是什么
画页面流程图的工具：
（1）Axure：画了页面流程图可以紧接着画原型
（2）ppt：方便讲解
需要注意的地方：
（1）回归业务流程，明确主线：页面流程一定来自于业务流程，一般为业务流程中的方形部分。异常流程一般为弹层或弹窗提示。业务流程画的好，页面流程就简单。
（2）明确页面中的重点元素：功能在页面中，有哪些是需要表现元素。增加异常流程的处理逻辑。增加辅助的帮助页面。考虑下游触发点（按钮/链接/滑动...)。
（3）沟通与优化：首先要尽可能穷举涉及的页面，然后做减法，有些页面合并或删除。通过原型草图，优化调整页面关键元素。与UI、UE、前端研发多沟通会有更好的效果。
页面流程图一般规则：
页面流程图例：
一个具体案例：
业务流程：
页面流程：
主要是分离出了普通用户的操作流程，加异常处理。
对于普通用户的关键页面和关键流向：
页面流程图：
（1）分离出5个页面，确定流程流向
（2）固定元素，例如在“1购物车”中，“提交订单”就是下游触发点，点击后流向下一个页面；在“2输入优惠码”中有关键元素“填写优惠码”，另外还有下游触发点“确认订单”...
（3）针对每个页面去画对应的原型图
信息架构图，以产品视角，看包含多少功能点。适合于层级分明的，如音乐产品、新闻客户端、阅读类产品等。
信息架构图例1：
有了页面流程图或信息架构图，现在终于可以开始画原型啦。首先，什么是产品原型设计？
产品原型 ，俗称 线框图 ，大概就是草图的意思吧。它是产品落地的关键点，是从虚拟概念到用户接触的节点。同时也是产品经理产出的关键内容，上传下达，上给老板，下给UI、UE同事。
产品从原型到上线的流程：
大公司的产品经理只需要做手绘和低保真的部分，小公司可能还要兼职交互设计...
案例：
好的原型有什么特点：
（1）整体：页面结构清晰、跳转关系明确、与业务流程一致、完整表达用户需求
（2）独立页面：功能元素明确有序、位置关系清晰、不同状态变化清晰
（3）交互设计：清晰的交互逻辑、一致交互方式、界面统一
常用工具：
（1）纸笔：自己画画，快速学习和定位
（2）白板：多人讨论
（3）软件Axure/Sketch/墨刀：产出正式文档
案例：
（1）研究流程：业务流程-页面流程
（2）确定页面框架：大概确定页面布局和大的框架
（3）画原型：画模块，确定交互细节
注意事项：
（1）尽可能用真实比例、真实文案，使元素更真实，也避免在需求评审时被之一。尽可能真实模拟极端情况，并示例清楚。
（2）紧扣需求主体，不横生枝节。如果原型需要增加新功能，一定要是来源于需求，并且要考虑后端数据来源。
（3）不要上颜色！原型就用黑白灰，不要给UI、UE挖坑
（4）目录树清晰，阅读流畅
（5）保存修改记录，关键修改重新保存文件
画/改原型的时间尽量控制在20%工作时间之内，否则就要问问自己是不是哪里出问题了哦。
产品需求想明白了没？？？
产品流程理清楚了没？？？
手绘草图画了没？？？
手绘草图和Boss确认了没？？？
用ppt怎么制作圆形图片
打开一个需要把图片做成圆形的ppt。
单击菜单栏“插入”中的“图片”。
选择要做成圆形的图片，单击“打开”按钮。
第四步：单击图片右侧的“裁剪图片”按钮。
第五步：在“按形状裁剪”中选择圆形。
第六步：按住shift键图片拖成圆形即可。
