iOS Human Interface Design Guideline Part 2 Topics - Icons and Images - Bars - Views - Controls - UI Design Do’s and Don’ts - Technologies - Resources

1. iOS Human Interface Guideline
Part 2

2. Topics
Overviews
User Interactions
System Capabilities
Visual Design
Icons and Images
Bars
Views
Controls
UI Design Do’s and Don’ts
Technologies
Resources

3. Icons and Images
Image Size and Resolution

4. Image Size and Resolution

5. 320 × 568
375 × 667
1125 × 2001
At the beginning,
coordinates of all
drawings are specified in
Points are abstract units,
they only make sense in
this mathematical
coordinate space.
Points
Point-based drawings are
rendered into pixels. This
process is known as
rasterization.
Point coordinates are
multiplied by scale factor
to get pixel coordinates.
Higher scale factors result
in higher level of detail.
Rendered Pixels
iPhone 6, 6s, 7 iPhone 6+, 6s+, 7+
4.7″
5.5″
points.
render at 3×render at 2×
Display Zoom Display Zoom
414 × 736
1242 × 2208
(pixels)
(points)
iPhone 6+, 6s+, 7+
5.5″
render at 3×
375 × 667
750 × 1334
iPhone 6, 6s, 7
render at 2×
320 × 568
640×1136
iPhone 5, 5s, SE
render at 2×
4″
320 × 480
640 × 960
render at 2×
(pixels)
iPhone 4, 4s
3.5″
320 × 480
render at 1×
(pixels)
iPhone 2G, 3G, 3GS
3.5″
(points)(points)
(points)(points)
(points)(points)
downsampling × 0.96 downsampling / 1.15
(pixels)
(pixels)
(pixels)
320 × 480
4.7″
640×1136
(pixels)
upsampling × 1.171875
320 × 568
375 × 667
1125 × 2001
At the beginning,
coordinates of all
drawings are specified in
Points are abstract units,
they only make sense in
this mathematical
coordinate space.
Points
Point-based drawings are
rendered into pixels. This
process is known as
rasterization.
Point coordinates are
multiplied by scale factor
to get pixel coordinates.
Higher scale factors result
in higher level of detail.
Rendered Pixels
iPhone 6, 6s, 7 iPhone 6+, 6s+, 7+
4.7″
5.5″
points.
render at 3×render at 2×
Display Zoom Display Zoom
414 × 736
1242 × 2208
(pixels)
(points)
iPhone 6+, 6s+, 7+
5.5″
render at 3×
375 × 667
750 × 1334
iPhone 6, 6s, 7
render at 2×
320 × 568
640×1136
iPhone 5, 5s, SE
render at 2×
4″
320 × 480
640 × 960
render at 2×
(pixels)
iPhone 4, 4s
3.5″
320 × 480
render at 1×
(pixels)
iPhone 2G, 3G, 3GS
3.5″
(points)(points)
(points)(points)
(points)(points)
downsampling × 0.96 downsampling / 1.15
(pixels)
(pixels)
(pixels)
320 × 480
4.7″
640×1136
(pixels)
upsampling × 1.171875

6. 1125 × 2001
4.7″
5.5″
The device screen may
have lower pixel resolution
than the image rendered
in previous step.
Before the image can be
displayed, it must be
downsampled (resized) to
lower pixel resolution.
Physical Pixels
rasterization.
Point coordinates are
multiplied by scale factor
to get pixel coordinates.
Higher scale factors result
in higher level of detail.
Finally, computed pixels
are displayed on the
physical screen.
The PPI number tells you
how many pixels fit into
one inch and thus how
large the pixels appear in
the real world.
Physical Device
750 × 1334
(device pixels)
1242 × 2208
1080 × 1920
5.5″
show at 401 PPI
(pixels)
(device pixels)
4.7″
1080 × 1920
(device pixels)
4″
3.5″3.5″
downsampling × 0.96 downsampling / 1.15
(pixels)
show at 401 PPIshow at 326 PPIshow at 326 PPIshow at 326 PPIshow at 326 PPIshow at 163 PPI
upsampling × 1.171875
320 × 568
375 × 667
1125 × 2001
At the beginning,
coordinates of all
drawings are specified in
Points are abstract units,
they only make sense in
this mathematical
coordinate space.
Points
Point-based drawings are
rendered into pixels. This
process is known as
rasterization.
Point coordinates are
multiplied by scale factor
to get pixel coordinates.
Higher scale factors result
in higher level of detail.
Rendered Pixels
iPhone 6, 6s, 7 iPhone 6+, 6s+, 7+
4.7″
5.5″
points.
render at 3×render at 2×
Display Zoom Display Zoom
414 × 736
1242 × 2208
(pixels)
(points)
iPhone 6+, 6s+, 7+
5.5″
render at 3×
375 × 667
750 × 1334
iPhone 6, 6s, 7
render at 2×
320 × 568
640×1136
iPhone 5, 5s, SE
render at 2×
4″
320 × 480
640 × 960
render at 2×
(pixels)
iPhone 4, 4s
3.5″
320 × 480
render at 1×
(pixels)
iPhone 2G, 3G, 3GS
3.5″
(points)(points)
(points)(points)
(points)(points)
downsampling × 0.96 downsampling / 1.15
(pixels)
(pixels)
(pixels)
320 × 480
4.7″
640×1136
(pixels)
upsampling × 1.171875

7. Bars
• Status Bars
• Navigation Bars
• Search Bars
• Tab Bars
• Toolbars

8. Bars
Status Bars
Light Dark

9. Bars
Status Bars
Translucent

10. Bars
Status Bars

11. Bars
Navigation Bars

12. Bars
Navigation Bars

13. Bars
Navigation Bars

14. Bars
Search Bars
Prominent Minimal

15. Bars
Search Bars
Placeholder text Clear Button Cancel Button

16. Bars
Search Bars

17. Bars
Search Bars
Scope Bar

18. Bars
Tool Bars

19. Bars
Tool Bars
Give text-titled buttons
enough room

20. Bars
Tool Bars

21. Bars
Tool Bars

22. Bars
Tab Bars

23. Bars
Tab Bars

24. Bars
Tab Bars

25. Bars
Navigation Bar

26. Views
• Action Sheet
• Activity Views
• Alerts
• Collections
• Split Views
• Table Views

27. Views
Action Sheet

28. Views
Activity Views

29. Views
Alerts

30. Views
Alerts

31. Views
Collections

32. Views
Collections

33. Views
Split View

34. Views
Split View
iPhone 6Plus, 7Plus Landscape

35. Views
Table Views
Plain Group

36. Views
Table Views
Table Rows Default Table Rows Subtitle

37. Views
Table Views
Table Rows Value 1 Table Rows Value 2

38. Views
Table Views

39. Views
Table Views

40. Views
Table Views

41. Views
Modal

42. Controls
• Buttons
• Page Controls
• Pickers
• Segmented Controls
• Sliders
• Steppers
• Switches
• Text Fields

43. Controls
Buttons
44pt for buttons
Use verbs in titles.
Use title-case for titles.
Keep titles short.
System Button
Keep Titles Short.

44. Controls
Buttons
Info Button Add Contact Buttons

45. Controls
Page Controls

46. Controls
Pickers

47. Controls
Segmented Controls

48. Controls
Sliders

49. Controls
Steppers

50. Controls
Switches

51. Controls
Text Fields

52. Controls
• Buttons
• Page Controls
• Pickers
• Segmented Controls
• Sliders
• Steppers
• Switches
• Text Fields

53. UI Design Do’s and Don’ts
• Formatting Content
• Touch Controls
• Hit Targets
• Text Size
• Contrast
• Spacing
• High Resolution
• Distortion
• Organization
• Alignment

54. UI Design Do’s and Don’ts
Formatting Content

55. UI Design Do’s and Don’ts
Touch Controls

56. UI Design Do’s and Don’ts
Hit Targets

57. UI Design Do’s and Don’ts
Text Size

58. UI Design Do’s and Don’ts
Spacing

59. UI Design Do’s and Don’ts
Contrast
Demo http://webaim.org/resources/contrastchecker/

60. UI Design Do’s and Don’ts
High Resolution

61. UI Design Do’s and Don’ts
Distortion

62. UI Design Do’s and Don’ts
Organization

63. UI Design Do’s and Don’ts
Alignment

64. UI Design Do’s and Don’ts
• Formatting Content
• Touch Controls
• Hit Targets
• Text Size
• Contrast
• Spacing
• High Resolution
• Distortion
• Organization
• Alignment

67. Tetchnologies
• Apple Pay
• HealthKit
• iCloud
• In-App Purchase
• Live Photos
• ResearchKit
• Social Media
• Wallet

68. Tetchnologies
Apple Pay

69. Tetchnologies
HealthKit

70. Tetchnologies
iCloud

71. Tetchnologies
In-App Purchase

72. Tetchnologies
Live Photos
Demo
https://developer.apple.com/live-photos/

73. Tetchnologies
ResearchKit

74. Tetchnologies
Social Media

75. Tetchnologies
Wallet

76. Tetchnologies
• Apple Pay
• HealthKit
• iCloud
• In-App Purchase
• Live Photos
• ResearchKit
• Social Media
• Wallet

77. Resources
• iOS Apps
• watchOS Apps
• tvOS Apps

78. Resources

79. Resources

80. Resources