TK2323 Lecture 4 - UI, Material Design
TK2323 Lecture 4 - UI, Material Design
[email protected] (G-02-04)
2 Outline
Style
▹ Color
▹ Icon
▹ Typography
▹ Imagery (Optional)
▹ Writing (Optional)
User Interface &
User Exprience
3
4 User Interface
UI Design -
Formatting
Content
10
UI Design -
Text Size,
Contrast,
spacing
11
UI Design -
Text Size,
Contrast,
spacing
12
http://www.msfw.com/Services/ContrastRatioCalculator
13
UI Design -
Text Size,
Contrast,
spacing
14
UI Design -
Alignment
15
UI Design -
Organization
16
UI Design -
Touch
Controls
17
UI Design -
Hit Targets
UI Design
(ios) - High
Resolution
Distortion
21
UI Design
(ios) - Image
Distortion
and Quality
22 UI Design (ios)
Alignment Organization
Align text, images, and buttons Create an easy-to-read layout
to show users how information that puts controls close to the
is related. content they modify.
Android Common UI
Component
26
27 App bars: top
▹ Comfortable
Small screen
Reading Experience
▸45-70 Character
37
▹ Unbalanced Content
Small screen
▸Content allocate at
the top left of the
screen
38
Master-Detail View
▹ a master screen contains a list of items in a collection, and a
▹ detail screen shows detailed information about a specific
item within that collection.
39 Macro Reflow
▹ Taking the major building
blocks of your application
and reflowing or
rearranging them on the
screen to make better use
of the space.
41
42 Android Material Design
47
Android Material Design -
48 3D world
▹ On the web, the z-axis is used for layering and not for
perspective.
▹ The 3D world is emulated by manipulating the y-axis.
Light and shadow
50
51 Light and shadow
54
55 Android Material Design
▹ Physical properties
▸Varying x & y dimensions & uniform thickness (1dp)
▸Material casts shadows
▸Content is displayed on material, in any shape and color.
▸Content does not add thickness to material
▸Content can behave independently of the material, but is limited within the
bounds of the material.
▸Material is solid.
▸Multiple material elements cannot occupy the same point in space
simultaneously.
▸Material cannot pass through other material.
56 Android Material Design
▹ Transforming material
▸ Material can change shape.
▸ Material grows and shrinks only along its plane.
▸ Material never bends or folds.
▸ Sheets of material can join together to become a single sheet of
material.
▸ When split, material can heal. For example, if you remove a
portion of material from a sheet of material, the sheet of
material will become a whole sheet again.
Android Material Design-
57 Movement of material
▹ Movement of material
▸Material can be spontaneously generated or destroyed
anywhere in the environment.
▸Material can move along any axis.
▸Z-axis motion is typically a result of user interaction
with material.
58
Android
Material Design-
Physical
properties
Do Don’t
Android
Material Design-
Physical
properties
Android
Material Design-
Physical
properties
Android
Material Design-
Physical
properties
▹ Material is solid.
▹ Input events cannot pass through material.
62
Android
Material Design-
Physical
properties
Android
Material Design
- Transforming
material
Android
Material Design
- Transforming
material
Android
Material Design
- Transforming
material
Android
Material Design
- Transforming
material
Android
Material Design
- Transforming
material
Android
Material Design
- Transforming
material
Android
Material
Design -
Elevation
(Android)
72
Android
Material
Design -
Elevation
(Android)
73
Android
Material
Design -
Elevation
(Android)
74
Android
Material
Design -
Elevation
(Android)
Android Material Design -
75 Shadows
Android
Material
Design -
Shadows
77
Android
Material
Design -
Shadows
78
▹ App Bar
Android ▸4dp
Material
Design -
Shadows ▹ Raised Button
▸Resting state: 2dp
▸Pressed state: 8dp
Android
Material
Design -
Shadows
Android
Material
Design -
Shadows
▹ Snackbar
▸6dp
▹ Switch
▸1dp
82
• Refresh indicator ▹ Quick Entry/Search bar
Android • Resting state: 2dp ▸Resting state: 6dp
Material ▸Pressed state: 12dp
• Pressed state: 8dp
Design -
Shadows
Android Design
Support Library
• http://android-developers.blogspot.my/2015/05/android-design-support-library.html
• http://android-developers.blogspot.my/2016/02/android-support-library-232.html
• https://android-developers.googleblog.com/2015/06/more-material-design-with-topeka-
for_16.html
84 Android Material Design