解析度與顯示規格
Resolutions & Display Specifications
解析度Resolutions
|
Devices
|
Portrait
|
Landscape
|
|
iPhone 5iPhone
5, 5S, 5C
|
640x1136 px
|
1136x640 px
|
|
iPhone 4/4S
|
640x960 px
|
960x640 px
|
|
iPhone & iPod Touch1st,
2nd and 3rd Generation
|
320x480 px
|
480x320 px
|
|
Retina iPadiPad
3, iPad 4, iPad Air
|
1536x2048 px
|
2048x1536 px
|
|
iPad Mini
|
768x1024 px
|
1024x768 px
|
|
iPad Mini Retina
|
1536x2048 px
|
2048x1536 px
|
|
iPad1st
and 2nd Generation
|
768x1024 px
|
1024x768 px
|
顯示 Displays
|
Devices
|
PPI
|
Color Mode
|
Color Temperature
|
|
iPhone 5iPhone
5, 5S, 5C
|
326
|
8bit RGB
|
Warm
|
|
iPhone 4/4S
|
326
|
8bit RGB
|
Cool
|
|
iPhone & iPod Touch1st,
2nd and 3rd Generation
|
163
|
8bit RGB
|
Warm
|
|
Retina iPadiPad
3, iPad 4, iPad Air
|
264
|
8bit RGB
|
Warm
|
|
iPad Mini
|
163
|
8bit RGB
|
Warm
|
|
iPad Mini Retina
|
326
|
8bit RGB
|
Warm
|
|
iPad1st
and 2nd Generation
|
132
|
8bit RGB
|
Warm
|
App Icons
One of the biggest
changes in iOS 7 is the new dimensions and the visual language used for app
icons. Apple introduced a grid system, increased the general size of icons on
your home screen and also masked icons with a different shape.
圖示尺寸 Dimensions
|
Device
|
App Icon
|
AppStore Icon
|
Spotlight Icon
|
Settings Icon
|
|
iPhone 5iPhone
5, 5S, 5C
|
120x120 px
|
1024x1024 px
|
80x80 px
|
58x58 px
|
|
iPhone 4/4S
|
120x120 px
|
1024x1024 px
|
80x80 px
|
58x58 px
|
|
Retina iPadiPad
3, 4, Air, Mini Retina
|
152x152 px
|
1024x1024 px
|
80x80 px
|
58x58 px
|
|
iPad Mini
|
76x76 px
|
512x512 px
|
40x40 px
|
29x29 px
|
|
iPad1st
and 2nd Generation
|
76x76 px
|
512x512 px
|
40x40 px
|
29x29 px
|
圓角 Rounded corners
The old simple
radii values for rounded corners are gone. Apple introduced a new shape, named
"superellipse". Since Apple did not release an official template of
the shape, you will have to use one of the unofficial templates out there,
which are replicating the shape in more or less accurate ways. The best I‘ve
came across so far is the App Icon
Template, which is definitely a very good starting point when you‘re
designing an app icon for iOS 7. As always, the rounded corners should not be
included in your final exported assets - but you might need them while your
design process if you want to add effects, such as a stroke or shadows, which
are aligned to the corner of the icon.
Grid system
Apple developed a
golden ratio grid system, which can be used to size and align elements on your
icon correctly. Anyways, the grid template got criticized a lot by the design
community, and it seems like designers (even Apple designers) are not following
the grid system very strictly. Feel free to break rules if your icon looks
better without taking care of the new grid system.
User Interface
The biggest change
in iOS 7 is definitely the all new flat user interface design language used
across the whole operating system. While pretty much all gradients and shadows
got removed from UI elements, the sizes of commonly used design elements got
changed in some cases as well.
Commonly
used design elements
|
Device
|
Height of Status Bar
|
Height of Navigation Bar
|
Height of Tab Bar
|
Width of Tables
|
|
iPhone 5iPhone
5, 5S, 5C
|
40 px
|
88 / 64 px
|
98 px
|
640 / 1136 px
|
|
iPhone 4/4S
|
40 px
|
88 / 64 px
|
98 px
|
640 / 960 px
|
|
Retina iPadiPad
3, 4, Air, Mini Retina
|
40 px
|
88 px
|
112 px
|
dynamic
|
|
iPad Mini
|
20 px
|
44 px
|
56 px
|
dynamic
|
|
iPad1st
and 2nd Generation
|
20 px
|
44 px
|
56 px
|
dynamic
|
Status Bar
While the size of
the status bar is the same as in iOS6, the appearance of its content was
slightly changed. You can control the background color to match the look of
your app design or use the default color themes (white and black). In a lot of
the default iOS 7 apps, the status bar is visually connected with the
Navigation Bar without any separations.
Navigation Bar
The Navigation Bar
usually includes a title as well as basic navigation and action buttons (such
as back to previous view, create, edit, etc.). In landscape orientation, the
height of the Nav bar is usually shrunk a bit (to 32pt) to allow more content
to be displayed below it.
Table Views
Tables (or lists)
are using the full width of the display now and are not any longer surrounded
by a container that separates tables from each other. The only visual
separation between different table views are headlines which appear on top of
the table (as known from previous iOS versions) on top of the main app
background texture/color. Items within a table are separated by a simple 1px
line, which has a margin of 15pt to the left side of the screens but connects
directly with the right side of the screen. Each item has an inner padding of
15pt to both sides.
Iconography
Apple makes
massive usage of icons without a fill color but only outlines with a thickness
of 1pt, but "classic" icons with a color fill are still present and
widely used in iOS 7. An often used style for active icons in the tab bar are
inverted colors – while the inactive icon has often only outlines, the active
one get‘s filled with a solid color while some strokes disappear or are
inverted.
Typography
Helvetica Neue is
still the default font in iOS, but normal text is usually displayed in the
Light face instead of Regular or Bold now. Text that should appear more
prominent is often displayed in Medium face (eg. the title in Navigation Bar).
Of course, there are still a lot of alternative font faces available to make
use of instead of Helvetica Neue. You can find the whole list here.
In general (and likely because of the increased usage of Light font faces) the
font size was increased for most design elements. Buttons often appear as
simple colored text links. Now, they are no longer surrounded by a shape, which
supports its metaphor.
預設字體大小 Default
Font Sizes
|
Label Type
|
Default Font Size
|
Default Font Weight
|
|
Navigation Bar Title
|
34 px
|
Medium
|
|
Regular Buttons
|
34 px
|
Light
|
|
Table Header
|
34 px
|
Light
|
|
Table Label
|
28 px
|
Regular
|
|
Tab Bar Icon Labels
|
20 px
|
Regular
|
Further Reading
& Resources
This article will
only provide some basic information to get you started with iOS 7 design. Once
you dig in deeper, you might be interested in some more details. These articles
and resources should help you out:
General
· Starters
Guide to iOS Design by Ben Taylor
· The
iOS Design Cheat Sheet Volume 2 by Ivo Mynttinen
· My
app design workflow by Marc Edwards
Icons
· App
Icon Template by Michael Flarup
· Introduction
to iOS 7 App Icons by Michael Flarup
· Template
for iOS 7 App Icons (FW) by Célio Silva
UI Kits
· iOS
7 GUI PSD by teehan+lax
· iOS
7 template for Sketch by taps+apps
Free Icon Sets
· Tab
Bar Icons iOS 7 by Pixeden
· Tab
Bar Icons iOS 7 Vol. 2 by Pixeden
· Tab
Bar Icons iOS 7 Vol. 3 by Pixeden
· Tab
Bar Icons iOS 7 Vol. 4 by Pixeden
· Streamline
Icon Set by Webalys
Animations & Prototyping
· Origami
Quartz Composer Toolkit by facebook.
· Quartz
Composer Diary by Prabrothers’.
· How
to Prototype in XCode using Storyboard by Meng To.
Reference:
Text Source: ivomynttinen.com
0 留言:
張貼留言