原型图的格式，属于“道”，“法”，“器”，这3个层次中的“器”。如果想在用户体验上，走的更远；那么就需要在“道”，“法”，这2个层次上，积累更多的项目经验，还有不同岗位的思维方式和沟通思路。
互联网产品设计过程中，原型图的常用格式，我见过6种以上。
它们的优点和缺点，介绍如下：
1. axure格式的原型图
优点：
可以在另一台电脑上，阅读和编辑axure原型图；在axure预览模式下，可以在浏览器左侧显示网页的目录；axure软件有mac版本和windows版本。
缺点：
如果接收文件同事的电脑，没安装axure，就打不开了；不能在手机微信聊天窗口上，直接阅读axure原型图；axure低版本，不能打开高版本的axure文件。
2. sketch格式的原型图
优点：
可以在另一台mac电脑上，阅读和编辑sketch原型图；ui设计师，可以直接在sketch里面，把原型图，做成高保真的ui设计稿；可以导出pdf格式的多页面pdf原型图。
缺点：
sketch软件，目前只有mac版本，没有windows版本；在手机微信app的聊天窗口上，不能直接阅读sketch原型图；sketch低版本，不能打开高版本的sketch文件。
3. ppt格式的原型图
优点：
可以在mac或windows电脑上，阅读和编辑ppt格式的原型图；在手机微信app的聊天窗口上，直接阅读ppt格式的原型图；可以通过其它软件，将画好的原型图，导入ppt里面。
缺点：
ppt页面的面积太小，不支持表达多个页面之间的跳转关系；页面的缩放，难以操作；ppt里面的画图控件太少，画图工具隐藏的比较深，操作起来，不方便；
4. html网页格式的原型图
优点：
可以在任何电脑上，用浏览器打开，直接阅读html原型图；不能在手机微信聊天窗口上，直接阅读html压缩包的原型图；可以先用axure设计原型图，然后导出html网页格式。
缺点：
不支持html网页原型图的再次编辑，不支持在浏览器左侧显示网页的目录；邮件接收html原型图的压缩包，需要解压，然后还需要在众多网页文件中，一个个点开查看；页面之间的跳转关系，各种中间状态的逻辑判断，html难以表达清楚。
5. 一大张jpg图片格式的原型图
优点：
可以在任何电脑上，阅读和编辑jpg图片格式的原型图；邮件发送jpg图片格式的原型图，文件可以很小；可以在手机微信聊天窗口上，直接阅读jpg格式的原型图；可以通过其它软件，将画好的原型图，导出为jpg图片格式。
缺点：
在电脑上，jpg图片格式的原型图，比较难操作：比如：调整到100%大小，并左右移动查看页面跳转关系；在手机上，微信发送的时候，具有流程关系的一大张jpg图片格式的原型图，会压缩，导致微信接收后不清晰。
6. pdf格式的原型图
优点：
可以通过其它软件，将画好的原型图，导出为pdf格式。可以在windows或mac上阅读；支持软件：adobe reader，极速pdf，福昕pdf，acrobat；可以在智能手机上，阅读pdf格式的原型图；支持手机app软件：wps，极速pdf，福昕pdf，acrobat，甚至微信app的聊天窗口，直接发送，对方直接打开。在电脑上，页面容易调整到100%大小，并且左右移动查看页面的跳转关系；mac电脑自带的预览pdf软件，可以合并多个pdf，旋转pdf的某一张内页；电脑版的福昕pdf软件，可以给pdf内页添加标注文本，可以在多页面的pdf左侧添加目录链接；
缺点：
如果需要重新编辑pdf里面的某一页，那么就要提取多页pdf文件中的某一页，待修改好之后，再合并到多页pdf文件里；电脑阅读和手机阅读pdf，最好是已经安装了专业的pdf阅读器。
总结：
app产品设计的原型图，重在表达意思，只要意思传达到位了，那么格式可以不必在意。
原型图的格式，属于“道”，“法”，“器”，这3个层次中的“器”。
如果想在用户体验上，走的更远；那么就需要在“道”，“法”，这2个层次上，积累更多的项目经验，还有不同岗位的思维方式和沟通思路。
五年时间转瞬即逝，在自己小窝的最后一个周末;眼看着家当和心情都被打包的差不多了，整个人却终于感冒发烧腹泻垮了下来，这是闹哪样呢。所幸本周前面几天可以抽出些时间做掉这篇译文，今天发掉先。接下来的两个月，大概要集中业余零散精力放在一本ios书的翻译上了;希望还能有些时间分给这边。杂七杂八就到这里，我们直接进入正文——草图原型实战技巧，没有务虚的大道理，每个内容要点都很实用。走着。
在如今的用户体验及产品圈子里，越来越多的人开始了解到草图及相关的原型工作对于整个设计流程的重要意义;不过在实际工作中，真正会拿起纸和笔的人貌似不是很多。作为一名用户体验设计师，我(英文原文作者)每天都会画草图，我还霸着办公室的一整面墙，在上面铺满草图，标注着各种上下文情景脚本。
确实，使用电脑中的原型设计软件代替纸和笔，在很多时候是一种省时省力的做法，不过从可视化与实体化的角度来看，这并不是最好的解决方案。当你正在构思网站页面或是移动应用的布局，琢磨着功能流程及上下文情景脚本的时候，拿起笔画画草图才是更加直接有效的方式——它可以帮助你集中精力解决眼前的问题，尽情的勾勒各种想法，而不必为工具软件的使用方法或功能限制等方面的因素分散注意力。
很多文章都会告诉你草图这东西有多给力，但是基本不会从实战的角度进行深入而细致的讲解;本文则不然，我会实打实的从具体执行的角度，向大家介绍一些常用技巧及其背后的道理，这些都是我和其他很多用户体验设计师在每天的工作中所要用到的。
草图 ≠ 绘画
从视觉角度上讲，即使最完美的草图作品，与真正意义上的“绘画”相比也是相距甚远的。如同你的思维与灵感，草图应该处于一种持续变化的状态，随时可以根据需求进行调整。你确实不必掌握那些真正的绘画技能，不过有相关经验的话自然更好。
那么草图的本质到底是什么呢?简单来说：
草图是思维的表达方式，用来解决问题。
草图是一种可视化的、更加清晰有效的沟通方式。
画草图是一种技能，实践的越多，能力越强。
不要太在意草图在“绘画”方面的视觉效果，试着把它当作海报来审视——你第一眼看到的是什么?细节信息在什么地方?记住，人的目光总会被细节与强烈的对比所吸引。
就像语言表达能力可以决定人与人之间互相了解的程度，草图的表现力也会直接影响到产品设计流程中的信息沟通。好在，我们有一些不错的方法可以学习和运用，在实践中逐渐提高自己的草图表达技能。
分层作业
技巧
初期，使用浅灰色的马克笔(大约20%到30%的灰度)勾画轮廓和布局结构;在进入界面元素的细节部分之后，逐渐使用颜色更深的马克笔或钢笔。
解释
从浅色开始初步的框架工作，会让事情变的容易些;在这个阶段，犯些错误也无妨，你可以逐步评估和调整想法。把线画的凌乱些也没太大所谓，在接下来的阶段，使用颜色更深的线条逐步完善草图之后，没人会注意到这些早期的浅色轮廓。
随着灵感落实成为确定的想法，并不断的跃然纸上，我们使用的颜色也可以逐步加深了，必要的时候可以使用钢笔来勾勒细节。通过灰度的差异来体现界面的逻辑，整个草图的层次感会非常鲜明。
分层的做法还可以帮助我们在初期将注意力放在内容结构与视图继承等方面，不至于一开始就被各种细节问题和想法纠缠。如果你知道眼下的界面中需要一个列表，但不清楚列表项中的具体内容，那么就使用浅色笔随便画些曲线来代替文案;在之后的细节阶段，再回过头来用深色笔添加一些具体的范例内容。
注意
如果你更习惯于使用圆珠笔起草，并且打算接下来用马克笔做辅助的话，记得将圆珠笔的墨迹晾干先，否则会被马克笔中的酒精成分污浊掉。
经过越来越多的实践，你也许开始变的更有把握，而逐渐忽视浅色底层绘制;最终结果也许不会很坏，但我个人仍然建议保留这一步骤，因为你可以在这个阶段里做很多实验性的摸索，一点点评估和落实头脑中的想法。
放松肢体
技巧
在画长线条的时候，试着让自己的手与胳膊跟随着肩膀移动，而不是通过腕子或手肘来用力;只有当你需要快速的画短线条，或是处理一些局部细节的时候，手肘的驱动才更加有效。
解释
肩膀的旋转驱动，可以帮助你画出更长更直的线条。如果只借助手腕的力量，你会发现画出的直线通常是弯的…另外，还可以在画长线之前，先在起点和终点的位置各做一个标记，以增强目标感。
　绘制多边形
技巧
对于那些由长线条组成的、用来表示页面或设备轮廓的矩形和其他多边形，可以通过旋转纸面的方法依次画出边框线，而自己的姿势与落笔的角度可以保持不变。
解释
要在每个方向上都画出很漂亮的直线，确实不是容易的事情。只会画横线不会画竖线?把纸面旋转90度好了——这样无论什么角度的直线，对我们来说其实都是一个方向的，我们自己最习惯的姿势和落笔的角度就可以保持不变了;简单又实用。
注意
如果你正在使用白板，这种技巧显然不适用;还是多练习竖线的画法吧。
对交互方式的体现
　技巧
以普通草图为基础，将便签贴纸附着在图纸的相关位置上，用来表示那些具有交互性质的界面元素，比如提示气泡、弹出层、模态窗口(modal windows)等。
我们可以在一张草图上使用便签贴纸同时定义多个交互元素，然后按照具体的交互规则，取下一些，再对包含剩余交互元素的草图进行扫描和复印，最终就可以得到一套完整的交互示意草图。
使用不同颜色的贴纸来表示不同类型的交互元素。
一张贴纸的尺寸难以完整的表示模态窗口?在旁边拼一张好了。
一张贴纸的尺寸对于提示气泡来说太大了?裁掉一部分也无妨。
解释
这种方法可以帮助我们在不修改草图框架的情况下快速的定义页面元素的交互方式。便签贴纸的位置可以很方便的被调整，我们还可以在上面勾画该界面元素中的细节内容。
复印与模板化
有时，对于某些ui元素，你也许要重画并调整很多次。这不能算是坏事，你可以把这样的需求看作重新构思并快速迭代的机会。这种情况下，扫描仪或复印机可以帮助我们提升一些效率。
技巧
使用扫描仪或复印机，将稳定版本的草图复制多张作为框架模板，在其中绘制那些变动需求比较多的ui元素。另外：
界面中的某个部分画败了吗?用一片白纸覆盖住，复印一下，使用影印稿继续。
如果你需要在草图中使用浏览器窗口或是移动设备作为背景，那么可以找来一些现成的图片素材，复印多张为我所用。smashing magazine的这篇文章中提供了很多典型的背景框架，包括浏览器、手机等。
如果你需要改变某些已完成草图中的侧边栏，可以用一张白纸画一个新的，复印几张，直接粘贴到这些需要被修改的草图中，覆盖掉旧版的。
解释
复印机就是传统版的“ctrl+c”和“ctrl+v”，它能帮我们快速生成模板;这种方式不仅能提升效率，而且可以减少我们在实验和摸索过程中的顾虑——如果把某些ui元素搞乱套了，换一张模板重新来过就是了。
另外，如果你需要使用其他色彩的马克笔来标注重要内容或是绘制特定的界面元素，那么我建议你画在影印稿上，这样可以有效避免不同种类墨水之间的污浊作用。
勾画细节
在细节方面，可以使用直尺作为辅助工具。特别是印有刻度的透明直尺，可以让我们清楚的观察到正在画的直线与周围元素的相对位置关系。
技巧1
使用直尺和浅灰色马克笔绘制辅助线。
解释
这种方式特别适用于规划那些需要等距分隔的细节元素，包括列表项、图表、按钮等;我们可以基于这些辅助线进一步绘制这些元素，在细处体现优雅与严谨。
技巧2
在前文“分层作业”的部分，我们提到了首先使用浅灰色的马克笔绘制界面轮廓及布局结构;而进入细节部分之后，可以使用颜色更深的马克笔或是圆珠笔、钢笔，配合直尺来勾画。
解释
在“分层作业”的最后阶段，我们会希望最终成型的界面整体以及其中的ui组件能够清晰的突显出来，而不要融汇在各种辅助线等干扰元素当中。使用深色笔和直尺，我们可以画出长而笔直的浓重线条，有效的突出重要部分的边界。
与“绘画”不同，我们完全不用回避对直尺的使用;重要的是，要知道怎样正确的运用这个工具——不要在草图工作的一开始就使用直尺，它应该在细节部分与最终突出呈现的阶段发挥价值。
技巧3
我们还可以使用直尺来快速整齐的裁纸，例如将便签贴纸裁成更加贴近其所要模拟的ui元素的形状。
jkjkkj
这比从工具箱里再拿一把剪刀出来要省事儿些，因为尺子已经在我们手边了…而且过机场安检时也不会惹什么麻烦…
把故事讲的更加完整
技巧
试着在上下文环境中构思和绘制草图，展示出�...