寫在前面

先講個場景，看看有多少人躺槍，你在一個沒有專職的交互設(shè)計師的公司做客戶端的產(chǎn)品，基本上產(chǎn)品和交互的活兒你全承包了，當(dāng)你準(zhǔn)備好一切需要向領(lǐng)導(dǎo)和項目團隊一起講新版本的設(shè)計：

做過WEB產(chǎn)品的老手，或多或少都會用Axure來實現(xiàn)簡單到復(fù)雜的可交互原型，但到了移動端，Axure的適用性就顯得有點捉急，而且想學(xué)好Axure是需要一定的時間成本，而且即便是精通Axure，制作一個移動端的可交互原型也會很花時間，大多數(shù)只能用文字或圖標(biāo)來注釋，遇到理解力強的RD還好，遇到懶得動腦子想的，就只能一遍遍講。

那有沒有簡單易學(xué)，效果能滿足需要，更重要的是幾乎免費的工具呢，答案是有的，下面要介紹的invision就是這樣一款神器。地址：http://www.invisionapp.com/

1.注冊

點擊右上角的sign up free來完成注冊，注冊方式是郵箱注冊。

2. 菜單

成功注冊并登錄后會進入這個頁面，這里有3個DEMO可以看看。先介紹下頂部的菜單。

標(biāo)紅1部分是三個主要功能，projects（項目）、Activity（歷史）、people（成員）。

projects：大部分時間都會耗在這里，稍后會細(xì)講。

Activity：以時間軸的形式記錄歷史。

people：成員，invision支持多人協(xié)作共同完成項目，一人搞不定可以拉同事下水。

標(biāo)紅2是項目排序，接著標(biāo)紅3是創(chuàng)建項目。

3.創(chuàng)建一個項目

點擊綠色的“create new project”：

會彈出一個浮層：

兩個輸入域，上面的是項目名稱，支持中文。下面的是設(shè)備選擇：

invision支持的設(shè)備類型很多，從圖上可以看出支持桌面、iphone（橫豎屏）、Android（橫豎屏）、ipad和anroid tablet（橫豎屏）。這次主要是以iphone為例做個小教程，因此選擇iphone（豎屏）后點擊create project。

4.上傳原型

首先說下文件要求，不管是用axure還是omnigraffle或者sketch設(shè)計的原型，把每個頁面單獨導(dǎo)出為圖片，文件格式可以是PNG、JPG、GIF、AI、PSD。

另外invision對原型尺寸大小也做了限制，目的是為了最佳的顯示效果。

對該做多大尺寸有疑問的，可以點擊help with mobile screen sizes來查詢

需要注意的是，如果原型上已有了手機狀態(tài)欄的話，可以勾選my design includes the status bar。

上傳圖片目前只能單張上傳，如果圖片多比較麻煩。invision也可以批量上傳，如果有國外網(wǎng)盤服務(wù)dropbox的話可以做文件連接。

有MAC電腦更好，下載安裝invison的MAC APP，直接把圖片拖到文件夾里后不用管了，會自動上傳。

另外需要注意的是，上傳的原型不能帶有原型機身。

5.開始第一步

上傳了全部文件后，找到你的原型的第一頁，點擊下就會進入編輯模式。在這之前如果有可能把loading page和icon也上傳了比較好，后面會用到。

看到底部四個按鍵了吧，從左側(cè)分別為預(yù)覽模式、編輯模式、標(biāo)注模式、歷史模式。

每次點擊切換都會彈出系統(tǒng)幫助提示，但在開始制作前，我們先把顯示樣式改的賞心悅目一些。

點擊右下角的齒輪圖標(biāo)，打開細(xì)節(jié)配置。

iPhone skin：可以更改iPhone機型（4和5）以及顏色（黑、白）

Status Bar style （狀態(tài)欄樣式）

my design starts below the status bar：如果原型上已經(jīng)添加了手機狀態(tài)欄，勾選后就會關(guān)閉invision自帶的狀態(tài)欄。

background（背景）

transparent：勾選后狀態(tài)欄就會變?yōu)閕OS7的透明樣式。

foreground：狀態(tài)欄字體樣式，與iOS7一致有黑和白兩種樣式，當(dāng)然也可以自定義顏色。

6、正式開工

進入編輯模式后按順序首先要固定頁頭和頁尾，圖中兩個標(biāo)紅框就是錨定工具，上下拖動到合適的位置，否則在長頁面下就會出問題。例如下面這情況：

錯誤1視頻： http://v.youku.com/v_show/id_XNzYwODM3MDYw.html

接下來設(shè)置正確的固定頁頭和頁尾，看看效果會如何：

正確1視頻：http://v.youku.com/v_show/id_XNzYwODM3MjY4.html

在做好這個基礎(chǔ)準(zhǔn)備工作后，接下來就是做頁面跳轉(zhuǎn)。

在原型上用鼠標(biāo)托出一個藍色區(qū)域，這個藍色區(qū)域就是操作熱點，隨著建立一個操作熱點后，頁面跳轉(zhuǎn)選項會一起出現(xiàn)。

點擊select a destination彈出的下拉菜單里是選擇要跳轉(zhuǎn)到哪個頁面?？梢愿鶕?jù)名稱搜索和預(yù)設(shè)值，也可以自由選擇頁面。鼠標(biāo)挪動到頁面名稱上時還可以提供預(yù)覽。以下是常用到的兩個預(yù)設(shè)值。

another point on this screen:錨定到當(dāng)前頁某位置

External URL：打開一個URL

選擇好頁面跳轉(zhuǎn)方式后，接下來是設(shè)置觸發(fā)手勢。invision支持的手勢基本涵蓋了所有常用手勢。

選擇好手勢后，接著是設(shè)置頁面如何跳轉(zhuǎn)。

instant：當(dāng)前頁發(fā)生變化

Push Right：向右推出

Push Left：向左推出

Slide up: 向上彈出

Slide Down：降下

Flip Right:向右翻轉(zhuǎn)

Flip Left:向左翻轉(zhuǎn)

Dissolve:淡化

我們設(shè)置一個最基本的點擊熱點后頁面向左推出新頁面，這也是APP中最常見的。設(shè)置好后要進入預(yù)覽模式才可以看到效果。

插入跳轉(zhuǎn)1視頻：http://v.youku.com/v_show/id_XNzYwODM3MjAw.html

有點要注意的是跳轉(zhuǎn)到新頁后還要重新設(shè)置好固定頁頭和頁尾以及跳轉(zhuǎn)返回。invision沒那么智能……

最后說說錨定和淡化，直接用視頻來解釋更快些：

插入錨定視頻：http://v.youku.com/v_show/id_XNzYwODM3Mzcy.html

插入淡化的視頻：http://v.youku.com/v_show/id_XNzYwODM4ODA4.html

7.發(fā)布

在做好交互原型后就要發(fā)布給其他人預(yù)覽了，選擇share

invision提供多種發(fā)布方式，就實用性來講發(fā)布在線預(yù)覽URL和發(fā)布到手機更符合工作需求。

其他人打開這個網(wǎng)址會進入invision的在線預(yù)覽，PC或手機均可以打開這個地址。

發(fā)送到手機是將預(yù)覽URL包含在一條系統(tǒng)短信里，其他人打開短信里的URL地址根據(jù)提示就可以將原型像APP一樣安裝在手機上，但每次使用必須要在有網(wǎng)絡(luò)下才可以。

另外有兩個注意事項：

1、必須要點開advanced options設(shè)置start the share link at（原型起始頁）

否則會默認(rèn)為最后編輯的頁面為起始頁。（我犯過這錯誤好幾次了）

2、制作哪個設(shè)備的原型就只能用對應(yīng)的設(shè)備預(yù)覽，iPhone的原型只能在iPhone上使用。

最后說下大家關(guān)心的錢的問題，只創(chuàng)建一個項目的話，invision是完全免費的，如果創(chuàng)建了第二個項目，會有30天的試用期倒計時。

invision的收費并不貴，升級為高級用戶的費用為包月25美元或包年的264美元，付費后還能開通其他一些增值功能。如果用的順手就花點兒錢吧，至于這錢誰付就看你了……

本文為作者量產(chǎn)型（公眾號：Lostman_D）投稿發(fā)布，轉(zhuǎn)載請注明出處并附帶本文鏈接