iOS / Android / HTML5 (Javascript)

2013.12.21 @淡江大學

Taien Wang<taien_wang@hiiir.com>

時間軸科技股份有限公司

大綱

• 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

Xcode 5 下載

資料來源:

https://developer.apple.com/xcode/

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

POP – Prototyping on Paper

更多資料: https://popapp.in/

不建議的流程設計

功能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 模擬器

• 官方模擬器

• Bluestacks

• Genymotion

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

PhoneGap 支援

資料來源:http://phonegap.com/about/feature/