今天的編程培訓學習就給大家簡單講講如何在iOS設備呈現產品原型吧,現在的互聯網上存在很多iOS組件庫就可以輕松實現控件,即便如此,它仍然有很多UX和PM學生是采用傳統的Axure RP原型制作,畢竟 Axure RP 在 iOS 原型階段還是有優勢的。
好了,開始我們的IOS開發培訓學習:
首先,大致在iOS中原型呈現需要有這個幾個需求:必須全屏;依照場景在線或者離線操作原型;如果導入到 App 內, 使用 iTunes 原生的方式,無需越獄
一. 先前準備工作
1)在原型設置中適配 iOS (v6.5)
在 Generate prototype 中 Mobile/device 對話框
勾選 Include Viewport Tag
上傳 Home screen icon
勾選 Hide browser nav (when launched form iOS home screen)
如何在iOS設備呈現產品原型
2)在原型設置中適配 iOS (v6.0)
如果還在使用 v6.0 你可以需要自己動手改造原型的HTML文件
在其中追加一下兩行代碼實現基礎的 app 全屏和 Home screen icon 支持
如果你原封不動的使用這段代碼, 請把 icon.png 請放置在原型 html 同級目錄
3)原型的頁面命名盡量采用英文,避免中文編碼出錯
如何在iOS設備呈現產品原型
4)訪問原型的時候不要訪問index.html,而是直接訪問具體的頁面
我們在實際工作中總結了2種實踐方案來滿足大部分需求,優劣勢對比:
如何在iOS設備呈現產品原型
二、Web App 方式
如果僅支持在線查看,Axure RP v6.5 原生的 Web App 原型方案就可以了。當然我們手動修改過代碼的 v6.0 原型也支持。
簡單說一下,因為已經設置好了。
只需要:
1) Safari 打開網站
2) 選擇 添加至主屏幕
3) 在桌面點擊主屏幕上的軟件即可
如何在iOS設備呈現產品原型
需要幫助,請點擊這里查看官方介紹,滿足特殊情況下,如手機無法接入辦公網絡,你可以原型的虛擬主機或上傳到云中。
三、Documents in App 方式
如果想用于客戶調研或者私下演示, 可以用 Documents in App 的的方案,這種模式方便用戶研究與客戶訪談時網絡環境千差萬變。
如下圖所示, 修改 Atomic 全屏模式的設置來避免對原型的干擾。
如何在iOS設備呈現產品原型
將原型壓縮為 zip 文件,在 iTunes 中上傳壓縮成 zip 的文檔到 Atomic 當中。
如何在iOS設備呈現產品原型
如何在iOS設備呈現產品原型
在 Atomic 中 unzip 解壓文檔,并訪問主頁面的html文件
如何在iOS設備呈現產品原型
進入全屏模式
如何在iOS設備呈現產品原型
**,您已經可以在iOS設備上實現原型演示了(三個手指向下滑動可以退出全屏模式)
如何在iOS設備呈現產品原型
總結:今天的IOS開發培訓全部內容大致上講完了,相信許多產品和設計師都可以在iOS設備呈現產品原型,對于我們模擬現實生活的用戶體驗,展示設計突出亮點也是有很大的幫助,大家毋須拘泥于工具,選擇自己合適的才是**的,更多編程入門教程的學習可登錄課課家在線學習平臺了解相關資訊。
資訊來源:http://www.kokojia.com/article/4846.html
|