0% found this document useful (0 votes)
40 views86 pages

TK2323 Lecture 4 - UI, Material Design

The document discusses UI and UX design principles for mobile apps. It covers topics like Android common UI components, material design guidelines, and iOS UI design best practices. Suggestions are provided for UI design on small screens including using a comfortable reading width and balancing content allocation. The master-detail view pattern and macro/micro reflow techniques for resizing content are also covered.

Uploaded by

bavitran
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
40 views86 pages

TK2323 Lecture 4 - UI, Material Design

The document discusses UI and UX design principles for mobile apps. It covers topics like Android common UI components, material design guidelines, and iOS UI design best practices. Suggestions are provided for UI design on small screens including using a comfortable reading width and balancing content allocation. The master-detail view pattern and macro/micro reflow techniques for resizing content are also covered.

Uploaded by

bavitran
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 86

UI,UX, Simple ListView

TK2323 Mobile Programming


Sem 1 2020/2021

Lam Meng Chun

[email protected] (G-02-04)
2 Outline

UI Android Common UI Material Design


▹ Design Tips Components ▹ Environment
▹ Material Propertis
▹ Elevation and
Shadows

Style
▹ Color
▹ Icon
▹ Typography
▹ Imagery (Optional)
▹ Writing (Optional)
User Interface &
User Exprience

3
4 User Interface

▹ Basically is the appearance of an app/system


▹ is the space where interactions between humans and
machines occur
5 Use Experience

▹ the overall experience of a person using a product such


as a website or computer application, especially in terms
of how easy or pleasing it is to use.
6
7
UI Design
(https://developer.apple.com/design/tips/)
9

UI Design -
Formatting
Content
10

UI Design -
Text Size,
Contrast,
spacing
11

UI Design -
Text Size,
Contrast,
spacing
12

▹ The W3C recommends the following contrast ratios for body


UI Design
(ios) - Text text and image text:
Size, ▸Small text should have a contrast ratio of at least 4.5:1 against
Contrast, its background.
spacing ▸Large text (at 14 pt bold/18 pt regular and up) should have a
contrast ratio of at least 3:1 against its background.

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

▹ Touch targets include


the area that responds
to user input.
UI Design - Hit Targets
18

▹ Touch targets ▹ separated by 8dp ▹ The recommended


extend beyond the of space or more, target size for
visual bounds of to ensure balanced touchscreen
an element: An information objects is 7-10mm
element like an density and
icon may be usability.
appear to be 24 x ▹ A touch target of
24dp but the 48 x 48dp results in
padding a physical size of
surrounding it about 9mm,
comprises the full regardless of
48 x 48dp touch screen size
19

▹ Font not consistent


UI Design
(ios) - Font ▹ Caution, this kind of
UI is suitable for
Game but not others
20

UI Design
(ios) - High
Resolution
Distortion
21

UI Design
(ios) - Image
Distortion
and Quality
22 UI Design (ios)

Formatting Content Touch Controls Hit Targets


Create a layout that fits Use UI elements that Create controls that
the screen of an iOS are designed for touch measure at least 44
device. Users should gestures to make points x 44 points so
see primary content interaction with your they can be accurately
without zooming or app feel easy and tapped with a finger
scrolling horizontally. natural
▹ .
23 UI Design (ios)

Text Size Contrast Spacing


Text should be at least Make sure there is Don't let text overlap.
11 points so it's legible ample contrast Improve legibility by
at a typical viewing between the font color increasing line height
distance without and the background so or letter spacing.
zooming. text is legible.
24 UI Design (ios)

High Resolution Distortion


Provide high-resolution (@2x) Always display images at their
versions of all image assets. intended aspect ratio to avoid
Images that are not @2x will distortion.
appear blurry on the Retina
display.
25 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

▹ The top app bar provides content and actions related to


the current screen. It’s used for branding, screen titles,
navigation, and actions.
28 Floating Action Button

▹ A floating action button


(FAB) performs the primary,
or most common, action on
a screen. It appears in front
of all screen content,
typically as a circular shape
with an icon in its center.
FABs come in three types:
regular, mini, and extended.
29 Tab

▹ navigation between groups of content that are related


and at the same level of hierarchy.
30 List

▹ Lists are a continuous group of text or images. They are


composed of items containing primary and supplemental
actions, which are represented by icons and text.
31 Card

▹ Cards contain content


and actions about a
single subject.
32 Navigation Drawer

▹ Apps with five or more top-level destinations


▹ Apps with two or more levels of navigation hierarchy
▹ Quick navigation between unrelated destinations
33 Bottom navigation

▹ display three to five destinations


34 Bottom navigation

▹ display three to five destinations


UI Suggestion
36

▹ 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.

▹ Moving a larger header image to be horizontally stacked instead of


vertically stacked to make full use of the screen estate to show off the
image better as well as to avoid excessive line lengths in a landscape
device
40 Micro Reflow

▹ Focusing on the individual


blocks within your design
and delegating
responsibilities to these
individual blocks to
optimize themselves given a
certain amount of space.
▹ The list view of a mobile app on the left is adapted into grid view past
a certain width to avoid excessive length and unbalanced view. On
the right, there is no way to put in more content on a form type
application on a larger screen, so a margin point is introduced.
Android Material
Design
https://developer.android.com/design/material/index.html
http://android-developers.blogspot.my/2016/02/android-support-library-232.html
https://www.youtube.com/watch?v=rrT6v5sOwJg
https://www.google.com/design/spec/material-design/introduction.html#introduction-goals

41
42 Android Material Design

▹ Material design is a comprehensive guide for visual, motion, and


interaction design across platforms and devices.

▹ Android now includes support for material design apps.

▹ Android 5.0 (Lollipop)


▸November 3, 2014

▹ Android Design Support Library


▸29 MAY 2015
▸24 February 2016
▸Nov 2018 (AndroidX.)
Android Material Design-
43 Material is the metaphor

▹ A material metaphor is the unifying theory of a rationalized


space and a system of motion.
▹ The material is grounded in tactile reality, inspired by the
study of paper and ink, yet technologically advanced and
open to imagination and magic.
Android Material Design-
44 Material is the metaphor

▹ Surfaces and edges of the material provide visual cues that


are grounded in reality.
▹ The use of familiar tactile attributes helps users quickly
understand affordances.
▹ Yet the flexibility of the material creates new affordances
that supercede those in the physical world, without
breaking the rules of physics.
Android Material Design-
45 Material is the metaphor

▹ The fundamentals of light, surface, and movement are


key to conveying how objects move, interact, and exist in
space and in relation to each other.
▹ Realistic lighting shows seams, divides space, and indicates
moving parts
46 Android Material Design

Environment Material Properties Elevation and


▸ 3D World ▸ Physical shadows
▸ Light and properties ▸ Elevation
shadow ▸ Transforming (Android)
material ▸ Shadows
▸ Movement of ▸ Object
material relationship
Android Material
Design- Environment

47
Android Material Design -
48 3D world

▹ The material environment is a 3D space, which means all


objects have x, y, and z dimensions.
▹ The z-axis is perpendicularly aligned to the plane of the
display, with the positive z-axis extending towards the
viewer.
▹ Every sheet of material occupies a single position along the
z-axis and has a standard 1dp thickness.
Android Material Design -
49 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

▹ Within the material environment, virtual lights illuminate


the scene.
▹ Key lights create directional shadows, while ambient light
creates soft shadows from all angles.
52 Light and shadow

▹ Shadows in the material environment are cast by these two


light sources.
▹ In Android development, shadows occur when light
sources are blocked by sheets of material at various
positions along the z-axis.
▹ On the web, shadows are depicted by manipulating the y-
axis only.
53 Light and shadow
Android Material
Design- Physical
properties

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

▹ Material has varying x & y dimensions (measured in dp)


and a uniform thickness (1dp).
59

Android
Material Design-
Physical
properties

▹ Material casts shadows.


▹ Shadows result naturally from the relative elevation (z-
position) between material elements.
60

Android
Material Design-
Physical
properties

▹ 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.
61

Android
Material Design-
Physical
properties

▹ Material is solid.
▹ Input events cannot pass through material.
62

Android
Material Design-
Physical
properties

▹ Multiple material elements cannot occupy the same point in


space simultaneously.
63

Android
Material Design
- Transforming
material

▹ Material cannot pass through other material.


64

Android
Material Design
- Transforming
material

▹ Material can change shape.


65

Android
Material Design
- Transforming
material

▹ Material grows and shrinks only along its plane.


66

Android
Material Design
- Transforming
material

▹ Material never bends or folds.


67

Android
Material Design
- Transforming
material

▹ Sheets of material can join together to become a single


sheet of material.
68

Android
Material Design
- Transforming
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-
Elevation and shadows
Android Material Design -
70 Elevation (Android)

▹ Elevation is the relative depth, or distance, between two


surfaces along the z-axis.
▹ Resting elevation
▹ Component elevations
▹ Responsive elevation and dynamic elevation offsets
▹ Avoiding elevation interference
71

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

▹ Shadows provide important ▹ In motion, shadows provide


visual cues about objects’ useful cues about an
depth and directional object’s direction of
movement. They are the movement and whether the
only visual cue indicating distance between surfaces
the amount of separation is increasing or decreasing.
between surfaces. An
object’s elevation
determines the appearance
of its shadow.
76

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

▹ Floating Action Button


▸Resting state: 6dp
▸Pressed state: 12dp
▹ Card
79 ▸Resting state: 2dp
▸Picked-up state: 8dp

Android
Material
Design -
Shadows

▹ Menus and sub menus


▸Menus: 8dp
▸Sub menus: 9dp (+1 dp for each
sub menu)
80

▹ Navigation Drawer & Right


Android Drawer
Material ▸16dp
Design -
Shadows ▹ Dialogs
▸24dp
▹ Modal bottom sheet
81 ▸16dp

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

▹ Android Design Support Library


(May 2015)
▸Navigation View
▸Floating labels for editing text
▸Floating Action Button
▸Snackbar
▸Tabs
▸CoordinatorLayout, motion, and
scrolling
▸Toolbar
85 Android Material Design

▹ Android Design Support Library ( February


2016)
▸Support Vector Drawables and Animated
Vector Drawables
▸AppCompat DayNight theme
▸Bottom Sheets
▸MediaBrowserServiceCompat
▸RecyclerView
▸Custom Tabs (Related to Web)
86 Android Material Design

▹ AndroidX is a major improvement to the original Android


Support Library. AndroidX fully replaces the Support
Library
▹ All packages in AndroidX live in a consistent namespace
starting with the string androidx.
▹ The Support Library packages have been mapped into
corresponding androidx.* packages.
https://developer.android.com/jetpack/androidx

You might also like