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

事半功倍 轻松制作可交互移动原型 写在前面 先讲个场景 ，看看有多少人躺枪 ，你在一个 有专职的交互设计师的公司做客户端的产品 ，基本上 产品和交互的活儿你全承包了 ，当你准备好一切需要向领导和项目团队一起讲新版本的设计 ： 做过W EB产品的老手 ，或多或少都会用Axure来实现简单到复杂的可交互原型 ，但到了移 动端 ，Axure的适用性就显得有点捉急 ，而且想学好Axure是需要一定的时间成本 ，而且即便是精 通Axure ，制作一个移动端的可交互原型也会很花时间 ，大多数只能用文字或图标来注释 ，遇到理 解力强的RD还好 ，遇到懒得动脑子想的 ，就只能一遍遍讲。 那有 有简单易学 ，效果能满足需要 ，更重要的是几乎免费的工具呢 ，答案是有的 ，下面要介绍 的invisio n就是这样一款神器。地址 ：ht t p://www.invisio napp.co m/ 1.注册 点击右上角的sign up f ree来完成注册 ，注册方式是邮箱注册。 2. 菜单 成功注册并登录后会进入这个页面 ，这里有3个DE O可以看看。先介绍下顶部的菜单。 标红1部分是三个主要功能 ，project s （项目）、A ct ivit y （历史 ）、peo ple （成员 ）。 project s ：大部分时间都会耗在这里 ，稍后会细讲。 A ct ivit y ：以时间轴的形式记录历史。 peo ple ：成员 ，invisio n支持多人协作共同完成项目 ，一人搞不定可以拉同事下水。 标红2是项目排序 ，接着标红3是创建项目。 3.创建一个项目 点击绿色的“creat e new project ” ： 会弹出一个浮层 ： 两个输入域 ，上面的是项目名称 ，支持中文。下面的是设备选择 ： invisio n支持的设备类型很多 ，从图上可以看出支持桌面、ipho ne （横竖屏 ）、A ndro id （横 竖屏 ）、ipad和anro id t ablet （横竖屏 ）。这次主要是以ipho ne为例做个小教程 ，因此选 择ipho ne （竖屏 ）后点击creat e project 。 4 .上传原型 首先说下文件要求 ，不管是用axure还是o mnigraf f le或者sket ch设计的原型 ，把每个页面单独导出 为图片 ，文件格式可以是PNG、J PG、GIF、A I、PSD。 另外invisio n对原型尺寸大小也做了限制 ，目的是为了最佳的显示效果。 对该做多大尺寸有疑问的 ，可以点击help w it h mo bile screen sizes来查询 需要注意的是 ，如果原型上已有了手机状态栏的话 ，可以勾选my design includes t he st at us bar。 上传图片目前只能单张上传 ，如果图片多比较麻烦。invisio n也可以批量上传 ，如果有国外网盘服 务dro pbox的话可以做文件连接。 有 A C电脑更好 ，下载安装inviso n的 A C A PP ，直接把图片拖到文件夹里后不用管了 ，会自动 上传。 另外需要注意的是 ，上传的原型不能带有原型机身。 5.开始第一步 上传了全部文件后 ，找到你的原型的第一页 ，点击下就会进入编辑模式。在这之前如果有可能 把loading page和ico n也上传了比较好 ，后面会用到。 看到底部四个按键了吧 ，从左侧分别为预览模式、编辑模式、标注模式、历史模式。 每次点击切换都会弹出系统帮助提示 ，但在开始制作前 ，我们先把显示样式改的赏心悦目一些。 点击右下角的齿轮图标 ，打开细节配置。 iPho ne skin ：可以更改iPho ne机型 （4和5 ）以及颜色 （黑、白 ） St at us Bar st yle （状态栏样式 ） my design st art s below t he st at us bar ：如果原型上已经添加了手机状态栏 ，勾选后就会关 闭invisio n自带的状态栏。 backgro und （背景 ） t ransparent ：勾选后状态栏就会变为iO S7的透明样式。 f o regro und ：状态栏字体样式 ，与iO S7一致有黑和白两种样式 ，当然也可以自定义颜色。 6、正式开工 进入编辑模式后按顺序首先要固定页头和页尾 ，图中两个标红框就是锚定工具 ，上下拖动到合适的 位置 ，否则在长页面下就会出问题。例如下面这情况 ： 错误1视频 ： ht t p://v.yo uku.co m/v