iOS設備上高效演示APP原型的方法總結

相信許多產品和設計師童靴都可以用原型設計工具製作製作出逼真的產品交互原型,如果能方便、直接地在iPhone上演示這些APP原型,對於我們類比使用者真實體驗,展示設計亮點都有很大説明。壯壯結合自己這幾天閱讀資料和摸索實踐,總結了一下個人認為最高效的方法,希望對在iPhone上演示APP交互原型有困擾的童靴們有所説明。 首先,簡單介紹下我瞭解到的製作及演示APP原型的工具:

tools

1.上手難易度:POP、快現最輕巧簡單,用手機拍下腦暴、手繪草圖,添加熱區,立即可以在iPhone上演示原型,並且POP內嵌的交互動作如側滑、展開、消失,快現的搖一搖等,即可滿足一般的動態演示需要;iMockups、Mockop、Grafio Lite等工具內嵌iPhone 控制項庫,可導入設計稿圖片,在產品構思階段使用較方便;Flash、Fireworks需要一定的程式設計or代碼基礎;Axure入門簡單,熟練精通有門檻~~~

2.功能性:功能最強大全面的當屬Axure,用好動態面板,多數交互效果都可實現,PC端、移動真機上都可演示原型。

3.使用效率:個人來言還是Axure,日常設計稿通常用Axure完成,原型素材導入、更改十分方便;UIDeigner內置了大量的iPhone控制項,自訂模版的使用對於團隊協作十分高效,用UIDPlayer即可在iOS設備上演示移動原型,只期待UIDeigner儘快增加更多的交互動作;Keynote、 PPT添加連結過於繁瑣,而且不易更改。

鑒於自己的使用經驗,我的總結主要針對如何在IOS設備上高效地演示Axure(v6.5)製作的高保真原型。按演示原型的查看方式分,演示方式分為兩種:Web APP模式和APP打開模式,對比兩種模式的使用條件、使用方法及演示效果如下表:



VS-Table

綜合以上幾點,個人比較推薦「APP打開模式」,雖然需要花費6.00元購買Atomic Web APP,但離線也可以演示,不受網路環境限制,並且原型導入、頁面打開、更新的速度都比較快,不擔憂原型線上被盜等安全問題。而Web APP模式最贊的一點是能夠在桌面生成圖示,還原初始進入體驗,但是線上演示原型的資訊安全讓人覺得不靠譜。補充一點,支援「APP打開模式」的APP還有iZip、GoodReader、Mercury,但它們在全屏顯示、頁面跳轉等方面都不及Atomic理想。無論哪種模式,想要在iOS設備上完美地、高效地演示app原型,先要做好生成原型時設置工作,完成原型介面與螢幕解析度的適配。

打開Generate(F5)生成原型對話方塊,選中Mobile/Device

generate-prototype720

下面詳細介紹下兩種演示模式的應用:

APP打開模式

(6.00元購買Atomic Web作為演示原型的工具)

step12
step3

Web APP模式

step012step034
原型製作時還有幾點注意事項:

1.頁面命名最好都用英文,以防中文在解壓時出現亂碼;

2.APP主頁面不要用index來命名,否則打開Index時預設隱藏側邊欄,後續無法複製URL;

3.設計尺寸大小取決於選擇的演示方式:a).Web APP模式:螢幕高度-ios設備狀態列高度,eg:設計尺寸=480-20px=460px;b).APP打開模式:採用設備預設尺寸

寫在最後:

原型設計、演示相關的工具&應用的增長和更新的速度實在太快,本人接觸使用地很有限,大家有更好的推薦歡迎留言交流;原型演示僅僅只是產品設計師表現想法的手段,毋須拘泥于工具,所以挑自己最順手的,走起吧~

參考文獻

1.App are alive whenViewing on Your iPhone

2.Desining apps using the iPhone App Template

3. 把axure生成的html原型導入到iPad或iPhone的方法

4. iOS 中可交互原型的最佳實踐

5.用 Axure 製作的 app 原型生成後放到手機上,如何演示效果最佳?

6:移動App原型設計神器 – POP(Prototyping on Paper)

7.Web Applications 開發技巧(一)

8.Changing the Viewport Width and Height

  • (本文出自Tencent CDC Blog,轉載時請注明出處)

 

特別注意:本站所有轉載文章言論不代表本站觀點,本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯繫,文章轉自alibuybuy

Comments are closed.