本文目录一览：
产品设计 | 6种原型图的优缺点
互联网产品设计过程中，原型图的常用格式，我见过6种以上。
它们的优点和缺点，介绍如下：
可以在另一台电脑上，阅读和编辑Axure原型图；
在Axure预览模式下，可以在浏览器左侧显示网页的目录；
Axure软件有Mac版本和windows版本。
如果接收文件同事的电脑，没安装Axure，就打不开了；
在手机微信聊天窗口上，不能直接阅读Axure原型图；
Axure低版本，不能打开高版本的Axure文件。
可以在另一台Mac电脑上，阅读和编辑Sketch原型图；
Ui设计师，可以直接在Sketch里面，把原型图，做成高保真的Ui设计稿；
可以导出PDF格式的多页面PDF原型图。
只能在Mac电脑上，阅读和编辑。暂时没有windows版本的Sketch软件，不支持windows电脑编辑；
不能在手机微信聊天窗口上，直接阅读Sketch原型图；
Sketch低版本，不能打开高版本的Sketch文件。
可以在Mac或Windows电脑上，阅读和编辑PPT格式的原型图；
在手机微信App聊天窗口上，直接阅读PPT格式的原型图；
可以通过其它软件，将画好的原型图，导入PPT里面。
ppt页面的面积太小，不支持表达多个页面之间的跳转关系；页面的缩放，难以操作；
PPT里面的画图控件太少，画图工具隐藏的比较深，操作起来，不方便；
可以在任何电脑上，用浏览器打开，直接阅读Html原型图；
不能在手机微信聊天窗口上，直接阅读Html压缩包的原型图；
可以先用Axure设计原型图，然后导出Html网页格式。
不支持网页的再次编辑，不支持在浏览器左侧显示网页的目录；
邮件接收Html原型图的压缩包，需要解压，然后还需要在众多网页文件中，一个个点开查看；
页面之间的跳转关系，难以表达清楚。
可以在任何电脑上，阅读和编辑jpg图片格式的原型图；
邮件发送图片格式的原型图，文件可以很小；
可以在手机微信聊天窗口上，直接阅读jpg格式的原型图；
可以先用其它软件设计原型图，然后导出jpg图片格式。
在电脑上，图片格式，比较难操作：比如：调整到100%大小，并左右移动查看页面跳转关系；
在手机上，微信发送的时候，具有流程关系的一大张图片格式的原型图，会压缩，导致微信接收后不清晰。
可以通过其它软件，将画好的原型图，导出为PDF格式；
可以在Windows或Mac上阅读；支持软件：Adobe Reader，福昕pdf，Acrobat；
可以在智能手机上，阅读pdf格式的原型图；支持手机APP软件：WPS，Acrobat，甚至微信app的聊天窗口，直接发送，对方直接打开。
在电脑上，页面容易调整到100%大小，并且左右移动查看页面的跳转关系；
Mac电脑自带的预览pdf软件，可以合并多个pdf，旋转pdf的某一张内页；
电脑版的福昕pdf软件，可以给pdf内页添加标注文本，可以在多页面的pdf左侧添加目录链接。
如果需要重新编辑pdf里面的某一页，那么就要提取多页pdf文件中的某一页，待修改好之后，再合并到多页PDF文件里；
电脑阅读和手机阅读pdf，最好是已经安装了专业的PDF阅读器。
APP产品设计的原型图，重在表达意思，只要意思传达到位了，那么格式可以不必在意。
原型图的格式，属于“道”，“法”，“器”，这3个层次中的“器”。
如果想在用户体验上，走的更远；那么就需要在“道”，“法”，这2个层次上，积累更多的项目经验，以及不同岗位的思维方式和沟通思路。
网站交互设计：线框图，原型和视觉稿的区别
首先，他们都是网站的界面和交互方面的模型，但完成度各不相同。
线框图 —— 更多侧重呈现网页界面的主体结构，极易只要的页面跳转和逻辑关系。一目了然的了解网页设计的大致情况。
原型图 —— 原型添加更多的界面细节以及交互，已然是相当真实的网页设计模型，能够进行初略的产品演示和测试。
视觉图 —— 更进一步丰富视觉、细节以及交互，与最终产品十分接近，方便演示和迭代。
当然，设计师设计过程中，使用的工具也会有所不同。例如，线框图和原型图，一般原型设计工具，例如摹客Mockplus, 几分钟就能快速完成。它新出的在线全新升级版本，提供更多模板、组件、交互以及状态设计选择，高还原度原型设计，轻松打造。
交互设计中原型图和线框图
直白点呢，线框图更多是在设计初级，直接快速勾画的网页或软件产品的主体结构、用户流程或者页面跳转关系等， 方便设计师或团队能够快速决定产品的宏观设计方向，从而尽快开始细节设计。
而原型图，相对线框图，呈现了更多的细节或交互。我们所看到的的往往是一页页呈现的网页或app设计。根据细节的呈现程度以及提供资源的质量，分为低、中、高三种。最值得提及的就是高保真原型，不仅提供丰富的页面细节，还添加大量动画和交互，与产品的真实状态非常接近，能够直接交互并测试。
总之，不管哪种类型，都是为了方便设计团队沟通，加快设计流程的重要资料，是设计们经常使用的设计资源。当然，对他们比较陌生的设计师，也可尝试使用摹客设计工具，快速绘制线框图或原型图，切实的查看他们之间的区别。
网页设计流程，用画原型图吗？逻辑谁来设计
首先要有网页或者说是网站的需求方提供需求内容。
例如页面要包括哪些，如用户登录，注册，信息展示，甚至在线支付之类的东西。
然后还要有一些具体功能需求，如用户注册需要提供哪些资料，如身份证，地址之类的信息。
信息展示具体是哪些。
有需求方先要写明自己的需求，然后根据需求进行下一步的设计，原型图肯定要画，因为没有图就无法制作网页。
先把图画好，然后和对方商定细节，例如logo的大小，段落间距，字体颜色，之类的细节东西。
画好图并确定后就可以按照图来制作网页。
至于内部后台相关也要商定。
具体由谁来做什么要视情况而定。
例如如果对方公司有美工之类的，可能就直接给你一些素材甚至画好的图让你直接制作。
也有可能需要你自己画图或者找人画图。
如何进行web页面原型图设计
最后半天心不在焉拖拖拽拽把各个部分都搭建好了，可是做出来的页面惨不忍睹，自己都没勇气打开。晚上回家后和邻居又讨论了三个小时，最后熬夜把原型图完成。虽然最后原型图也没有被采纳，但是这次原型图居然受到了表扬，领导说我的原型图有了提升。今天就写下这篇文章，为这段时间的工作做一个总结。原型设计前：①�0�2�0�2 重点突出内容：要清楚明了页面需要突出的内容是什么，这个在前期的讨论中一般就已经确定；②�0�2�0�2 第一功能目的：除了内容以外，功能方面需要突出的是什么？如引导注册或像下一级页面引导流量。③�0�2�0�2 如果是改版要考虑改版要解决的问题是什么？对于前一版页面存在什么问题 画原型图要考虑：④�0�2�0�2 内容板块如何划分，页面的内容主要分成几个模块，每个模块内存放的都应该是一些相近的内容；⑤�0�2�0�2 模块与模块之间的关联性：每个模块与其相近的模块之间应该有一些逻辑上的关联性，而不能随意的进行拼接；⑥�0�2�0�2 页面的流程：模块与模块的上下承接关系，模块与模块应该上下存在某些逻辑上的连接性。 页面完成后：完成原型图后一定要进行检查，主要从以下三个方面进行检查：⑦�0�2�0�2 内容是否完整：对比框架中的每一部分内容检查是否完整；⑧�0�2�0�2 第一屏是否把最重要的内容展现出来：页面第一屏以外的内容基本都是辅助内容，如果不能在第一屏就把内容全部展现，基本上就等于内容不完整；⑨�0�2�0�2 功能是否实现：想要表达的功能是否在明显的地方表现出来；⑩�0�2�0�2 流程是否顺畅：把相应的流程走一遍，看是否流畅。 注意tips：①�0�2�0�2 未完成的作品拿出来讨论页面不完整不代表思想不完整，即使是不完整的页面，里面应该也要有一个清晰的逻辑图。通过这种方法可以强迫自己想明白再下手。②�0�2�0�2 理清自己的思路要有属于自己的清晰思路，对内容、功能和流程自己要先想明白，可以列举一些具体的问题来辅助理清自己的思路。③�0�2�0�2 坚持自己的想法每一个人都有自己的想法，只要你理清自己的思路，就一定要坚持下去。用自己的逻辑解答别人的疑惑和质疑，形成自己的思路。 关于工具和作图：之前花了很多时间去研究axure，是学会了一些作图的技巧，可是渐渐发现这些对页面的提高基本不大，我是觉得在掌握基本的工具使用时可以暂时忽略工具。页面最重要的是你的想法，等到想法成熟之后不妨慢慢的考虑工具的深入，太多的考虑技巧方面的问题反而会模糊视线。思考的过程和画图的时间可以在7:3都无所谓，前期的框架和流程思路想好后，后面的原型图也就水到渠成了。
