導語：即便是精通Axure，制作一個移動端的可交互原型也會很花時間。那有沒有簡單易學，效果能滿足需要，更重要的是幾乎免費的工具呢，答案是有的
寫在前面
先講個場景，看看有多少人躺槍，你在一個沒有專職的交互設計師的公司做客戶端的產品，基本上產品和交互的活兒你全承包了，當你準備好一切需要向領導和項目團隊一起講新版本的設計：
做過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、正式開工
進入編輯模式后按順序首先要固定頁頭和頁尾，圖中兩個標紅框就是錨定工具，上下拖動到合適的位置，否則在長頁面下就會出問題。例如下面這情況：
錯誤1視頻： http://v.youku.com/v_show/id_XNzYwODM3MDYw.html
接下來設置正確的固定頁頭和頁尾，看看效果會如何：
正確1視頻：http://v.youku.com/v_show/id_XNzYwODM3MjY4.html
在做好這個基礎準備工作后，接下來就是做頁面跳轉。
在原型上用鼠標托出一個藍色區域，這個藍色區域就是操作熱點，隨著建立一個操作熱點后，頁面跳轉選項會一起出現。
點擊select a destination彈出的下拉菜單里是選擇要跳轉到哪個頁面?？梢愿鶕Q搜索和預設值，也可以自由選擇頁面。鼠標挪動到頁面名稱上時還可以提供預覽。以下是常用到的兩個預設值。
another point on this screen:錨定到當前頁某位置
External URL：打開一個URL
選擇好頁面跳轉方式后，接下來是設置觸發手勢。invision支持的手勢基本涵蓋了所有常用手勢。
選擇好手勢后，接著是設置頁面如何跳轉。
instant：當前頁發生變化
Push Right：向右推出
Push Left：向左推出
Slide up: 向上彈出
Slide Down：降下
Flip Right:向右翻轉
Flip Left:向左翻轉
Dissolve:淡化
我們設置一個基本的點擊熱點后頁面向左推出新頁面，這也是APP中常見的。設置好后要進入預覽模式才可以看到效果。
插入跳轉1視頻：http://v.youku.com/v_show/id_XNzYwODM3MjAw.html
有點要注意的是跳轉到新頁后還要重新設置好固定頁頭和頁尾以及跳轉返回。invision沒那么智能……
后說說錨定和淡化，直接用視頻來解釋更快些：
插入錨定視頻：http://v.youku.com/v_show/id_XNzYwODM3Mzcy.html
插入淡化的視頻：http://v.youku.com/v_show/id_XNzYwODM4ODA4.html
7.發布
在做好交互原型后就要發布給其他人預覽了，選擇shareinvision提供多種發布方式，就實用性來講發布在線預覽URL和發布到手機更符合工作需求。
其他人打開這個網址會進入invision的在線預覽，PC或手機均可以打開這個地址。
發送到手機是將預覽URL包含在一條系統短信里，其他人打開短信里的URL地址根據提示就可以將原型像APP一樣安裝在手機上，但每次使用必須要在有網絡下才可以。
另外有兩個注意事項：
1、必須要點開advanced options設置start the share link at（原型起始頁）
否則會默認為后編輯的頁面為起始頁。（我犯過這錯誤好幾次了）
2、制作哪個設備的原型就只能用對應的設備預覽，iPhone的原型只能在iPhone上使用。
后說下大家關心的錢的問題，只創建一個項目的話，invision是完全免費的，如果創建了第二個項目，會有30天的試用期倒計時。
invision的收費并不貴，升級為高級用戶的費用為包月25美元或包年的264美元，付費后還能開通其他一些增值功能。如果用的順手就花點兒錢吧，至于這錢誰付就看你了……
本文作者量產型（公眾號：Lostman_D），原文鏈接http://www.woshipm.com/rp/102473.html
本站文章版權歸原作者及原出處所有 。內容為作者個人觀點， 并不代表本站贊同其觀點和對其真實性負責，本站只提供參考并不構成任何投資及應用建議。本站是一個個人學習交流的平臺，網站上部分文章為轉載，并不用于任何商業目的，我們已經盡可能的對作者和來源進行了通告，但是能力有限或疏忽，造成漏登，請及時聯系我們，我們將根據著作權人的要求，立即更正或者刪除有關內容。本站擁有對此聲明的最終解釋權。
