UI Design and Development +Roman Nurik +Nick Butcher.
-
Upload
alberta-atkinson -
Category
Documents
-
view
216 -
download
0
Transcript of UI Design and Development +Roman Nurik +Nick Butcher.
![Page 1: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/1.jpg)
UI Design and Development+Roman Nurik+Nick Butcher
![Page 2: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/2.jpg)
2
1. Designing for Android
2. Layouts and resources
3. Tablet considerations
4. System UI integration
5. UI prototyping
Agenda
![Page 3: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/3.jpg)
Designing for Android
![Page 4: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/4.jpg)
4
Touch– Interact primarily with your fingers– Expect direct manipulation
Mobile– Often on the go– Often without network connectivity
Heterogeneity– Different screen sizes and densities– Different hardware features– Different OS versions
Design for…
![Page 5: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/5.jpg)
5
“Pictures are faster than words.”
“Only show what I need when I need it.”
“Make the important things fast.”
“Do the heavy lifting for me.”
Key principles
![Page 6: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/6.jpg)
6
“Holo” visual language
![Page 7: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/7.jpg)
7
Holo variations
Dark Dark Action Bar
Light
![Page 8: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/8.jpg)
8
Activity UI structure
Action bar
Tabs
Content(activity layout)
![Page 9: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/9.jpg)
9
Activity UI structure
Action bar
![Page 10: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/10.jpg)
10
Action bar
1. App icon andoptional Up caret
2. View control(Title/tabs/dropdown)
3. Action buttons
4. Action overflow
![Page 11: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/11.jpg)
11
Action bar
Android 3.0 and above
Automatically part of Holo themes
Customize:– getActionBar().setDisplayOptions()– getActionBar().setNavigationMode()
![Page 12: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/12.jpg)
12
Activity UI structure
Tabs
![Page 13: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/13.jpg)
13
Tabs
![Page 14: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/14.jpg)
14
Tabs
Part of the ActionBar APIs
Usually gesture-enabled using ViewPager
getActionBar().setNavigationMode(NAVIGATION_MODE_TABS);
ActionBar.Tab tab = actionBar.newTab();tab.setText(“Tab 1”);tab.setTabListener(this);getActionBar().addTab(tab);
![Page 15: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/15.jpg)
15
Activity UI structure
Content(activity layout)
![Page 16: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/16.jpg)
Layouts and resources
![Page 17: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/17.jpg)
17
Layout system
The UI for an activity is a tree consisting of view groups and views (leaf nodes).
Most commonly defined in XML under res/layout/.
<view group> <view group> <view> <view group> <view> <view>
![Page 18: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/18.jpg)
18
Views and View Groups
Views
Reusable individualUI components
Optionally interactive(clickable/focusable/etc.)
Bare minimum functionality is to draw themselves
View Groups
Ordered list of Views and View Groups
In charge of positioning and sizing their child views and layouts
Simple layouts and more complex groups(e.g. ListView)
![Page 19: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/19.jpg)
19
Views and View Groups
Views
TextView EditText Spinner ImageView Button WebView SurfaceView Your own custom
views
Layouts (simple View Groups)
FrameLayout LinearLayout RelativeLayout GridLayout Your own custom
layouts
Complex View Groups
ScrollView ListView
![Page 20: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/20.jpg)
20
Anatomy ofa simple layout
![Page 21: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/21.jpg)
21
<FrameLayout>
<LinearLayout orientation=“vertical”>
![Page 22: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/22.jpg)
22
<LinearLayout orientation=“vertical”>
<EditText>
<Button>
<ScrollView>
![Page 23: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/23.jpg)
23
<ScrollView android:layout_width="match_parent" android:layout_height="match_parent">
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:padding="16dp">
<EditText android:id="@+id/email" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/prompt_email" android:inputType="textEmailAddress" android:singleLine="true" />
<EditText android:id="@+id/password" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/prompt_password" android:inputType="textPassword" android:maxLines="2" android:singleLine="true" />
<Button android:id="@+id/sign_in_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right" android:layout_marginTop="16dp" android:paddingLeft="32dp" android:paddingRight="32dp" android:text="@string/action_sign_in_register" /> </LinearLayout></ScrollView>
![Page 24: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/24.jpg)
24
App resources
One universal app binary contains all resources
System chooses at runtime which resources to use
![Page 25: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/25.jpg)
25
PNGs, 9-patch PNGs,optimized for multi. densities
Layout XMLoptimized forphysical size and orientation
Strings XML localized for your target regions
Drawable XML
Strings, styles, themes, etc.
![Page 26: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/26.jpg)
26
DIP units keep things thesame physical size across any screen.
1 dip = 1 pixel @ MDPI (160 dpi)
1 dip = 2 pixels @ XHDPI (320 dpi)
Screen density and DIP units
![Page 27: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/27.jpg)
27
Q: What is the Nexus 7’s screen resolution in DIPs if it’s 1280x800 px and 213dpi?
A: ~960x600 dip
![Page 28: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/28.jpg)
28
Screen density and DIP units
Icons and other PNG files should generally be provided for multiple densities
![Page 29: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/29.jpg)
29
Bitmaps (.png)
9-patches (.9.png)
State Lists (.xml)
Basic Vector Shapes (.xml)
Color Drawables (.xml)
Drawables
![Page 30: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/30.jpg)
30
Border pixels indicate stretchable regions
Make density-specific versions (-xhdpi)
9-patches – foo.9.png
![Page 31: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/31.jpg)
31
State Lists (selector)
<selector> <item android:drawable="@drawable/foo_disabled" android:state_enabled="false" ... /> <item android:drawable="@drawable/foo_pressed" android:state_pressed="true" ... /> <item android:drawable="@drawable/foo_focused" android:state_focused="true" ... /> <item android:drawable="@drawable/foo_default" /> </selector>
foo.xml:
![Page 32: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/32.jpg)
32
State Lists (selector)
foo_default.png foo_disabled.png foo_focused.png foo_pressed.png
foo_default.png foo_disabled.png foo_focused.png foo_pressed.png
![Page 33: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/33.jpg)
Tablet considerations
![Page 34: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/34.jpg)
Information hierarchy and flow
Traditional desktop app or website
![Page 35: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/35.jpg)
Information hierarchy and flow
Tablet or mini desktop app
![Page 36: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/36.jpg)
Information hierarchy and flow
Mobile phone
![Page 37: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/37.jpg)
37
A single piece of UI and/or implementation of an Activity, defined in its own class
Help with supporting phones + tablets
<fragment> in layout XML– Automatically instantiates the given
fragment– Acts as a placeholder for the fragment’s
view to be inserted in that part of the layout tree
Fragments
![Page 38: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/38.jpg)
System UI integration
![Page 39: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/39.jpg)
39
System UI integration
![Page 40: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/40.jpg)
UI prototyping
![Page 41: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/41.jpg)
41
Record your ideas andasses their real-world feasability
Test your your ideas and rapidly iterate– See which work and which don’t, evolve
them
Map out user flow and activity diagrams– Re-arrange/add/remove interactions quickly– Scope UI complexity– Plan out intra-app “Intent-based API”
Why prototype?
![Page 42: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/42.jpg)
42
Without prototyping, you’ll find yourself doing a lot ofUI refactoring.
![Page 43: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/43.jpg)
43
Lots of wireframing tools
Fidelity
Time/Effort
Sketches
Photoshop
Fireworks
Eclipse Layout EditorBalsamiq Pencil
(Firefox addon)
Keynote/Powerpoint
OmniGraffle(Mac)
![Page 44: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/44.jpg)
44
Interactive (clickable) wireframes
Fidelity
Time/Effort
Sketches
Photoshop
Fireworks
Eclipse Layout EditorBalsamiq Pencil
(Firefox addon)
Keynote/Powerpoint
OmniGraffle(Mac)
![Page 45: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/45.jpg)
45
Always start with pencil and paper.
(or a whiteboard)
![Page 46: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/46.jpg)
46
![Page 47: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/47.jpg)
47
1. “Pencil” (Firefox add-on)– Android stencils at
http://j.mp/androiduiutils
2. Fireworks-generated interactive PDF
3. Eclipse Android Layout Editor
Demos
![Page 48: UI Design and Development +Roman Nurik +Nick Butcher.](https://reader035.fdocuments.in/reader035/viewer/2022081519/56649f1b5503460f94c31014/html5/thumbnails/48.jpg)
Exercise:
Begin sketching!