iOS中可交互原型的最佳實(shí)踐
在互聯(lián)網(wǎng)上可以很方便能夠找到各種 iOS 組件庫(kù)來(lái)實(shí)現(xiàn)控件，所以本文中并不包含如何實(shí)現(xiàn)與 iOS 相同的交互方式。但解決一個(gè)困惑， 即如何在 iOS 設(shè)備上優(yōu)雅的呈現(xiàn)原型呢?
很多 UX 和 PM 同學(xué)還是習(xí)慣使用傳統(tǒng)的 Axure RP 制作產(chǎn)品原型，作者覺(jué)得 Axure RP 在 iOS 原型階段還是有優(yōu)勢(shì)的，比如可以很方便交互模式的創(chuàng)新和細(xì)節(jié)，不拘泥原生控件。
首先大致在iOS中原型呈現(xiàn)有這個(gè)幾個(gè)需求：
必須全屏
依照?qǐng)鼍霸诰€或者離線操作原型
如果導(dǎo)入到 App 內(nèi), 使用 iTunes 原生的方式
無(wú)需越獄
1. 先前準(zhǔn)備工作
1)在原型設(shè)置中適配 iOS (v6.5)
在 Generate prototype 中 Mobile/device 對(duì)話框
勾選 Include Viewport Tag
上傳 Home screen icon
勾選 Hide browser nav (when launched form iOS home screen)
2)在原型設(shè)置中適配 iOS (v6.0)
如果還在使用 v6.0 你可以需要自己動(dòng)手改造原型的HTML文件
在其中追加一下兩行代碼實(shí)現(xiàn)基礎(chǔ)的 app 全屏和 Home screen icon 支持
如果你原封不動(dòng)的使用這段代碼, 請(qǐng)把 icon.png 請(qǐng)放置在原型 html 同級(jí)目錄
3)原型的頁(yè)面命名盡量采用英文，避免中文編碼出錯(cuò)
4)訪問(wèn)原型的時(shí)候不要訪問(wèn)index.html，而是直接訪問(wèn)具體的頁(yè)面
我們?cè)趯?shí)際工作中總結(jié)了2種實(shí)踐方案來(lái)滿足大部分需求，優(yōu)劣勢(shì)對(duì)比：
Web App 方式
如果僅支持在線查看，Axure RP v6.5 原生的 Web App 原型方案就可以了。當(dāng)然我們手動(dòng)修改過(guò)代碼的 v6.0 原型也支持。
簡(jiǎn)單說(shuō)一下，因?yàn)橐呀?jīng)設(shè)置好了。
只需要:
1) Safari 打開(kāi)網(wǎng)站
2) 選擇 添加至主屏幕
3) 在桌面點(diǎn)擊主屏幕上的軟件即可
需要幫助 點(diǎn)擊這里 查看官方說(shuō)明，遇見(jiàn)特殊的情況，比如手機(jī)無(wú)法訪問(wèn)辦公網(wǎng)，你可以把原型上傳到虛擬主機(jī)或者云上。
Documents in App 方式
如果想用于客戶調(diào)研或者私下演示, 可以用 Documents in App 的的方案，這種模式方便用戶研究與客戶訪談時(shí)網(wǎng)絡(luò)環(huán)境千差萬(wàn)變。
購(gòu)買 Atomic Web Browser 軟件， 售價(jià)僅 $0.99 (RMB 6.00)
如下圖所示， 修改 Atomic 全屏模式的設(shè)置來(lái)避免對(duì)原型的干擾。
將原型壓縮為 zip 文件,在 iTunes 中上傳壓縮成 zip 的文檔到 Atomic 當(dāng)中。
在 Atomic 中 unzip 解壓文檔，并訪問(wèn)主頁(yè)面的html文件
進(jìn)入全屏模式
至此，您已經(jīng)可以在iOS設(shè)備上實(shí)現(xiàn)原型演示了(三個(gè)手指向下滑動(dòng)可以退出全屏模式)
希望上面兩種方式能夠?qū)δ切├_于如何在iOS平臺(tái)實(shí)現(xiàn)可交互原型的同學(xué)們有所幫助。
