More than a year ago, I published the iOS Design Cheat Sheet, a collection of useful data about iOS devices and things you have to keep in mind when designing something for iOS. Since the last update of my Cheat Sheet, a lot has changed in the world of Apple’s mobile devices. Designers now have to deal with a retina resolution iPad (aka. “The new iPad”), and a new 16:9 format iPhone 5.
Instead of a bulky PDF, the new Cheat Sheet is right here on this site. This way, people can find it more easily and won’t need to download anything if they just want to know a specific icon size. If you have spotted some wrong data or if you think there is something important missing, just let me know and I will quickly update the cheat sheet.
Resolutions
| Devices | Portrait | Landscape |
|---|---|---|
| iPhone 5 | 640x1136 px | 1136x640 px |
| iPhone 4/4S | 640x960 px | 960x640 px |
| iPhone &iPod Touch 1st,2nd and 3rd Generation | 320x480 px | 480x320 px |
| Retina iPad iPad 3,iPad 4 | 1536x2048 px | 2048x1536 px |
| iPad Mini | 768x1024 px | 1024x768 px |
| iPad 1st and 2nd Generation | 768x1024 px | 1024x768 px |
Displays
| Devices | PPI | Color Mode | Color Temperature |
|---|---|---|---|
| iPhone 5 | 326 | 8bit RGB | Warm |
| iPhone 4/4S | 326 | 8bit RGB | Cool |
| iPhone & iPod Touch 1st, 2nd and 3rd Generation | 163 | 8bit RGB | Warm |
| Retina iPad iPad 3, iPad 4 | 264 | 8bit RGB | Warm |
| iPad Mini | 163 | 8bit RGB | Unknown |
| iPad 1st and 2nd Generation | 132 | 8bit RGB | Warm |
Icons
| Devices | App Icon PIXELS RADIUS | Appstore Icon PIXELS RADIUS | Spotlight Icon PIXELS RADIUS | Document PIXELS | Tab Bar PIXELS |
|---|---|---|---|---|---|
| iPhone 5 | 114x114 20px | 1024x1024 180px | 58x58 10px | 44x58 | 60x60 |
| iPhone 4/4S | 114x114 20px | 1024x1024 180px | 58x58 10px | 44x58 | 60x60 |
| iPhone & iPod Touch 1st, 2nd and 3rd Generation | 57x57 10px | 512x512 90px | 29x29 5px | 22x29 | 30x30 |
| Retina iPad iPad 3, iPad 4 | 144x144 24px | 1024x1024 180px | 100x100 20px | 128x128 | 60x60 |
| iPad Mini | 72x72 12px | 512x512 90px | 50x50 9px | 64x64 | 30x30 |
| iPad 1st and 2nd Generation | 72x72 12px | 512x512 90px | 50x50 9px | 64x64 | 30x30 |
Commonly used design elements
| Devices | Height of Status Bar | Height of Nav Bar | Height of Tab Bar | Width of Tables |
|---|---|---|---|---|
| iPhone 5 | 40px | 88px | 98px | 604px / 1100px |
| iPhone 4/4S | 40px | 88px | 98px | 604px / 924px |
| iPhone & iPod Touch 1st, 2nd and 3rd Generation | 20px | 44px | 49px | 302px / 462px |
| Retina iPad iPad 3, iPad 4 | 40px | 88px | 98px | dynamic |
| iPad Mini | 20px | 44px | 49px | dynamic |
| iPad 1st and 2nd Generation | 20px | 44px | 49px | dynamic |
출처:http://ivomynttinen.com/blog/the-ios-design-cheat-sheet-volume-2/
댓글 없음:
댓글 쓰기