写在前面
先讲个场景，看看有多少人躺枪，你在一个没有专职的交互设计师的公司做客户端的产品，基本上产品和交互的活儿你全承包了，当你准备好一切需要向领导和项目团队一起讲新版本的设计：
做过WEB产品的老手，或多或少都会用Axure来实现简单到复杂的可交互原型，但到了移动端，Axure的适用性就显得有点捉急，而且想学好Axure是需要一定的时间成本，而且即便是精通Axure，制作一个移动端的可交互原型也会很花时间，大多数只能用文字或图标来注释，遇到理解力强的RD还好，遇到懒得动脑子想的，就只能一遍遍讲 。
那有没有简单易学，效果能满足需要，更重要的是几乎免费的工具呢，答案是有的，下面要介绍的invision就是这样一款神器 。地址：
http://www.invisionapp.com/
1.注册
点击右上角的sign up free来完成注册，注册方式是邮箱注册 。
2. 菜单
成功注册并登录后会进入这个页面，这里有3个DEMO可以看看 。先介绍下顶部的菜单 。
标红1部分是三个主要功能，projects（项目）、Activity（历史）、people（成员） 。
projects：大部分时间都会耗在这里，稍后会细讲 。
Activity：以时间轴的形式记录历史 。
people：成员，invision支持多人协作共同完成项目，一人搞不定可以拉同事下水 。
标红2是项目排序，接着标红3是创建项目 。
3.创建一个项目
点击绿色的“create new project”：
会弹出一个浮层：
两个输入域，上面的是项目名称，支持中文 。下面的是设备选择：
invision支持的设备类型很多，从图上可以看出支持桌面、iphone（横竖屏）、Android（横竖屏）、ipad和anroid tablet（横竖屏） 。这次主要是以iphone为例做个小教程，因此选择iphone（竖屏）后点击create project 。
4.上传原型
首先说下文件要求，不管是用axure还是omnigraffle或者sketch设计的原型，把每个页面单独导出为图片，文件格式可以是PNG、JPG、GIF、AI、PSD 。
另外invision对原型尺寸大小也做了限制，目的是为了最佳的显示效果 。
对该做多大尺寸有疑问的，可以点击help with mobile screen sizes来查询
需要注意的是，如果原型上已有了手机状态栏的话，可以勾选my design includes the status bar 。
上传图片目前只能单张上传，如果图片多比较麻烦 。invision也可以批量上传，如果有国外网盘服务dropbox的话可以做文件连接 。
有MAC电脑更好，下载安装invison的MAC APP，直接把图片拖到文件夹里后不用管了，会自动上传 。
另外需要注意的是，上传的原型不能带有原型机身 。
5.开始第一步
上传了全部文件后，找到你的原型的第一页，点击下就会进入编辑模式 。在这之前如果有可能把loading page和icon也上传了比较好，后面会用到 。
看到底部四个按键了吧，从左侧分别为预览模式、编辑模式、标注模式、历史模式 。
每次点击切换都会弹出系统帮助提示，但在开始制作前，我们先把显示样式改的赏心悦目一些 。
点击右下角的齿轮图标，打开细节配置 。
iPhone skin：可以更改iPhone机型（4和5）以及颜色（黑、白）
Status Bar style （状态栏样式）
my design starts below the status bar：如果原型上已经添加了手机状态栏，勾选后就会关闭invision自带的状态栏 。
background（背景）
transparent：勾选后状态栏就会变为iOS7的透明样式 。
foreground：状态栏字体样式，与iOS7一致有黑和白两种样式，当然也可以自定义颜色 。
6、正式开工
进入编辑模式后按顺序首先要固定页头和页尾，图中两个标红框就是锚定工具，上下拖动到合适的位置，否则在长页面下就会出问题 。例如下面这情况：
特别声明：本站内容均来自网友提供或互联网，仅供参考，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。