App企劃設計 2

APP 企劃設計課程 (Lesson 2)

梅比斯數位行銷工作室

13年3月7⽇日星期四

APP規劃 (Lesson 1)

UI/UX設計 (Lesson 2)

APP製作 (Lesson 3)

開發者分享 (Lesson 4)

13年3月7⽇日星期四

Android vs iOS

13年3月7⽇日星期四

概念

企劃

設計

製作

測試

上線

宣傳

13年3月7⽇日星期四

設計

13年3月7⽇日星期四

概念

企劃

設計

製作

測試

上線

宣傳

13年3月7⽇日星期四

iPhone 3GS 320*480

iPhone 4 / 4S 640*960

iPhone 5 640*1136

iPad 1/2/mini 768*1024

new iPad / iPad 4 1536*2048

解析度

13年3月7⽇日星期四

iPhone 3GS 320*480

iPhone 4 / 4S 640*960

iPhone 5 640*1136

iPad 1/2/mini 768*1024

new iPad / iPad 4 1536*2048

解析度

13年3月7⽇日星期四

Default.png

Default@2x.png

Default-568h@2x.png

起始畫面

13年3月7⽇日星期四

57 X 57 iPhone114 X 114 iPhone@2x72 X 72 iPad144 X 144 iPad@2x1024 X 1024 iTune29 X 29 Settings bundle58 X 58 Settings bundle @2x50 X 50 Spotlight search results

ICON

13年3月7⽇日星期四

20 X 20 Toolbar and navigation bar icon40 X 40 Toolbar and navigation bar icon@2x48 X 32 Tab bar icon48 X 32 Tab bar icon@2x

PNG

ICON

13年3月7⽇日星期四

ICON光暈?

ICON陰影?

ICON圓角?

13年3月7⽇日星期四

最小碰觸範圍 44 X 44 (from WWDC)

圓角效果

陰影效果

邊線效果

透明效果

基礎

13年3月7⽇日星期四

PNG

JPG

GIF (but....)

MP4

MP3

媒體支援

13年3月7⽇日星期四

字型

http://iosfonts.com/

嵌入字型?

TrueType

OpenType

Bitmap Fonts

13年3月7⽇日星期四

字型

http://www.71squared.com/en/glyphdesigner

Glyph Designer

13年3月7⽇日星期四

UI

http://www.teehanlax.com/downloads/ios-5-gui-psd-iphone-4s/13年3月7⽇日星期四

UI

http://www.teehanlax.com/downloads/ipad-gui-psd-retina-display/13年3月7⽇日星期四

APP Structure

□Single View

□Navigation View

□Tab View

□Reveal Side Viewhttps://github.com/ipup/PPRevealSideViewController

13年3月7⽇日星期四

Single View13年3月7⽇日星期四

Navigation View13年3月7⽇日星期四

Tab View13年3月7⽇日星期四

Reveal Side View13年3月7⽇日星期四

UIView□UIView

□UIScrollView

□UITextView

□UITableView

□UICollectionView

□UIMapView

13年3月7⽇日星期四

UIScrollView

13年3月7⽇日星期四

UITextView

13年3月7⽇日星期四

UITableView

13年3月7⽇日星期四

UICollectionView

13年3月7⽇日星期四

UIMapView

13年3月7⽇日星期四

UI

13年3月7⽇日星期四

UI

13年3月7⽇日星期四

UI

13年3月7⽇日星期四

UI

13年3月7⽇日星期四

UI

13年3月7⽇日星期四

UI

13年3月7⽇日星期四

UI

13年3月7⽇日星期四

Resizable Assets

http://robots.thoughtbot.com/post/33427366406/designing-for-ios-taming-uibutton

13年3月7⽇日星期四

9-PATCH

http://radleymarx.com/blog/simple-guide-to-9-patch/

13年3月7⽇日星期四

APP規劃 (Lesson 1)

UI/UX設計 (Lesson 2)

APP製作 (Lesson 3)

開發者分享 (Lesson 4)

下週預告

13年3月7⽇日星期四

Thank you

梅比斯數位行銷工作室

13年3月7⽇日星期四