Embed Size (px)
Citation preview
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
起始畫面
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⽇日星期四
