事半功倍 轻松制作可交互移动原型

《事半功倍 轻松制作可交互移动原型》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、事半功倍轻松制作可交互移动原型写在前面先讲个场景，看看有多少人躺枪，你在一个没有专职的交互设计师的公司做客户端的产品，基本上产品和交互的活儿你全承包了，当你准备好一切需要向领导和项目团队一起讲新版本的设计：做过WEB产品的老手，或多或少都会用Axure来实现简单到复杂的可交互原型，但到了移动端，Axure的适用性就显得有点捉急，而且想学好Axure是需要一定的时间成本，而且即便是精通Axure，制作一个移动端的可交互原型也会很花时间，大多数只能用文字或图标来注释，遇到理解力强的RD还好，遇到懒得动脑子想的，就只能一遍遍讲。那有没有简单易学，效果能满足需要，更重要的是几乎免费的工具呢，答案是有

2、的，下面要介绍的invision就是这样一款神器。地址：http://www.invisionapp.com/1.注册点击右上角的signupfree来完成注册，注册方式是邮箱注册。2.菜单成功注册并登录后会进入这个页面，这里有3个DEMO可以看看。先介绍下顶部的菜单。标红1部分是三个主要功能，projects（项目）、Activity（历史）、people（成员）。projects：大部分时间都会耗在这里，稍后会细讲。Activity：以时间轴的形式记录历史。people：成员，invision支持多人协作共同完成项目，一人搞不定可以拉同事下水。标红2是项目排序，接着标红3是创建项目。3.

3、创建一个项目点击绿色的“createnewproject”：会弹出一个浮层：两个输入域，上面的是项目名称，支持中文。下面的是设备选择：invision支持的设备类型很多，从图上可以看出支持桌面、iphone（横竖屏）、Android（横竖屏）、ipad和anroidtablet（横竖屏）。这次主要是以iphone为例做个小教程，因此选择iphone（竖屏）后点击createproject。4.上传原型首先说下文件要求，不管是用axure还是omnigraffle或者sketch设计的原型，把每个页面单独导出为图片，文件格式可以是PNG、JPG、GIF、AI、PSD。另外invision对原型

4、尺寸大小也做了限制，目的是为了最佳的显示效果。对该做多大尺寸有疑问的，可以点击helpwithmobilescreensizes来查询需要注意的是，如果原型上已有了手机状态栏的话，可以勾选mydesignincludesthestatusbar。上传图片目前只能单张上传，如果图片多比较麻烦。invision也可以批量上传，如果有国外网盘服务dropbox的话可以做文件连接。有MAC电脑更好，下载安装invison的MACAPP，直接把图片拖到文件夹里后不用管了，会自动上传。另外需要注意的是，上传的原型不能带有原型机身。5.开始第一步上传了全部文件后，找到你的原型的第一页，点击下就会进入编辑模

5、式。在这之前如果有可能把loadingpage和icon也上传了比较好，后面会用到。看到底部四个按键了吧，从左侧分别为预览模式、编辑模式、标注模式、历史模式。每次点击切换都会弹出系统帮助提示，但在开始制作前，我们先把显示样式改的赏心悦目一些。点击右下角的齿轮图标，打开细节配置。iPhoneskin：可以更改iPhone机型（4和5）以及颜色（黑、白）StatusBarstyle（状态栏样式）mydesignstartsbelowthestatusbar：如果原型上已经添加了手机状态栏，勾选后就会关闭invision自带的状态栏。background（背景）transparent：勾选后状态栏

6、就会变为iOS7的透明样式。foreground：状态栏字体样式，与iOS7一致有黑和白两种样式，当然也可以自定义颜色。6、正式开工进入编辑模式后按顺序首先要固定页头和页尾，图中两个标红框就是锚定工具，上下拖动到合适的位置，否则在长页面下就会出问题。例如下面这情况：错误1视频：http://v.youku.com/v_show/id_XNzYwODM3MDYw.html接下来设置正确的固定页头和页尾，看看效果会如何：正确1视频：http://v.youku.com/v_show/id_XNzYwODM3MjY4.html在做好这个基础准备工作后，接下来就是做页面跳转。在原型上用鼠标托出一个蓝

7、色区域，这个蓝色区域就是操作热点，随着建立一个操作热点后，页面跳转选项会一起出现。点击selectadestination弹出的下拉菜单里是选择要跳转到哪个页面。可以根据名称搜索和预设值，也可以自由选择页面。鼠标挪动到页面名称上时还可以提供预览。以下是常用到的两个预设值。anotherpointonthisscreen:锚定到当前页某位置ExternalURL：打开一个URL选择好页面跳转方式后，接下来是设置