大綱
• iOS
– 技術架構
– 設計
• Android
– 技術架構
– 設計
• HTML5/JavaScript Framework
iOS
開始開發 iOS
• MAC 環境
– 買台 MAC
– VMWare: os-x-mountain-lion-10.8.3-vmware-image
• 同時支援 AMD/Intel
• i7 等級以上順暢, i5 稍微 Lag
資料來源: http://www.hankcs.com/appos/amd_mac_vmware.html
iOS 架構
資料來源:
https://developer.apple.com/library/IOs/documentation/Miscellaneous/Conceptual/iPhoneOSTechOverview/Introduction/Introduction.html#//apple_ref/doc/uid/TP40007898-CH1-SW1
XCode5 開發
資料來源:
http://www.takobear.tw/12/post/2013/10/-bear-xcode-5-ios.html
更多資料http://www.apple.com/ios/whats-new/
iOS 7 UI Transition Guide
資料來源:
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/TransitionGuide/index.html
UX 與動線設計
App 設計流程
資料來源:
https://developer.apple.com/library/ios/referencelibrary/GettingStarted/RoadMapiOS/index.html
Storybroad
資料來源:
https://medium.com/design-ux/62b643a3a0f7
不建議的流程設計
功能A 功能B 功能C 功能….
功能A-列表 功能B-列表 功能C-列表
功能A-內頁 功能B-內頁 功能C-內頁
Click
ClickClick
Click
Return?
*Menu Bar
Return?
Cross
*功能列表頁與功能內頁是有Menu bar的….冏
建議的流程設計
功能A 功能B 功能C 功能….
功能A-列表 功能B-列表 功能C-列表
功能A-內頁 功能B-內頁 功能C-內頁
Click
Click
Return
*Menu Bar
ClickClick
Click Click Return
Return
ReturnReturn
Return
Cross
Cross
*功能列表頁與功能內頁沒有Menu bar
建議的流程設計—範例
iOS 學習資源
• iOS Developer Library
• iOS Developer Library - Getting Started
• iOS Developer Library – Sample Code
• iOS Developer Library - iOS 7 Design Resources
– iOS Human Interface Guidelines
• Learning Xcode 5 As a Designer
• App Review
– 送審(中譯)
Apple給的聖誕節禮物….
送審時間要提早了…..
Android
開始開發 Android
• Android Developer Tool
– Eclipse
– Android Studio
• IntelliJ
如果你想玩更核心的…
• 請準備 Ubuntu
– Android Source
• 可以做整合原 Android 系統
– 原通訊錄
– Pre-Install
資料來源:Taien’s Blog – 編譯 Android 原始嗎
整合通訊錄(2.2 範例)
Andorid 藍圖
資料來源:
Android Apps Security, Sheran A. Gunasekera, 2012
Eclipse 開發
Android 最麻煩的事情 – 尺寸太多
• 目前大致上的手機不跳脫這 7 類
螢幕大小 大小
QVGA 240*320
WQVGA400(WQVGA) 240*400
WQVGA432(FWQVGA) 240*432
HVAG(HVGA-P/HVGA-L/QVGA-L) 320*480
WVGA(WVGA800) 480*800
WVGA854 480*854
WXGA 1280*800
資料來源:http://developer.android.com/guide/practices/screens_support.html
多尺寸螢幕類型
• Google 將這 7 類分成四類與四個解析度
資料來源:http://developer.android.com/guide/practices/screens_support.html
解決方案
• 使用
– FreeLayout
– XML
• 熟悉布局
• 搭配自動圖片轉檔
Android 布局
• Layouts
– Linear Layout
– Relative Layout
– List View
– Grid View
資料來源:http://developer.android.com/guide/topics/ui/declaring-layout.html
另一個問題是版本也很多
系統改版時不要擔心如果所有東西都沒不改變,你就失業了
Android 學習資源
• Google Play 開發人員計畫政策
• Android Design Principles
• Android Develop - API Guides
• 深入淺出 Android -- Google 手持設備應用程式設計入門
• Android Developer Tool 安裝完內建範例專案
不寫程式的人有福了
除了 Xcode 的故事情節
免寫程式碼產生 App
ConduitApp.net
還有其他類似的產品, 請自行找初學者建議可以多了解系統架構與基礎
HTML5
更多資料:W3C – HTML5Wiki – HTML5
HTML 5 案例整理
• http://html5demos.com/
• http://html5gallery.com/
• http://blog.teamtreehouse.com/23-essential-html-5-resources
馬克說: HTML 5 是個錯誤
資料來源:http://vimeo.com/55486684#at=15
Jamie Avins’fastbook:https://github.com/extjs/fastbook
Facebook HTML5:http://fb.html5isready.com/
HTML + CSS + JS => App
• PhoneGap
• Tianium
到底這種 Framework 是什麼?以 PhoneGap 為例
資料來源:http://www.youtube.com/watch?v=wOH4aGows40