Download - Slideonmaterialdesign on google design
Friday, April 7, 2023 1
Friday, April 7, 2023 2
PREPARED BY Toufik Ahmed Emon
4th YEAR 1ST SEMESTER,
JAHANGIRNAGAR UNIVERSITY
On Material Design On Topics
Pattern
PATTERNTopics:SelectionGesturesPromoted ActionImagery treatmentSearch
Friday, April 7, 2023
3
SELECTION
Text Selection
Item Selection
Friday, April 7, 2023
4
TEXT SELECTIONSupport for multi-selection is strongly recommended for list and grid containers.
Once an initial selection is made, it can be altered through a number of user actions:
Touch on an unselected item to select it, or on a selected item to unselect it.
Shift + touch/click on an item to extend selection to that item and all items between it and the original selection.
Friday, April 7, 2023
5
ITEM SELECTION
Text selection is indicated by highlighting the bounds of the selected text.
On mobile platforms, a selection handle is added to both the beginning and end of the selection. Standard actions related to the text appear in a popup menu that is ideally positioned immediately above (but ideally not overlapping) the selection.
Friday, April 7, 2023
6
ITEM SELECTION
Friday, April 7, 2023
7
ITEM SELECTIONPopup menus for Cut, Copy, Paste, and More appear above the selection area. When the user selects the More button, the popup will collapse toward the icon and the overflow menu items will grow, centered from the icon area. Font for text selection menu text is Roboto Medium 14 sp, all caps.
Friday, April 7, 2023
8
ITEM SELECTION
Friday, April 7, 2023
9
KEYBOARD SHORTCUTS
Shift+Left/Right Arrow for character-by-character
Shift+Up/Down Arrow for line-by-line
Ctrl/Command+A to select all
Friday, April 7, 2023
10
GESTURES
Gestures are divided into Touch Mechanics (what your fingers do on the screen) and
Touch Activities (context-specific results of specific gestures in the user
interface)
Friday, April 7, 2023
11
TOUCH MECHANICS
Touch mechanics is what the user's fingers do on the screen Double Touch Two-finger press,lift,1-finger Example: Zoom in
Drag , Swipe , or Fling Two-finger touch One-finger press , move , lift Two-finer press , lift Example : Dismiss , scroll , tilt Example : Zoom out
TouchOne-finger press, liftExample: Select
Friday, April 7, 2023
12
TOUCH ACTIVITIES
Context-specific results of specific gestures in the user interface.
Tap Activates a screen element, like a button.Cancel or Escape Cancels or escapes out of the current task, as in dialogs or menus.Enable/Disable lights out Hides or shows a view’s chrome.
All of its touch mechanics is Touch
Friday, April 7, 2023
13
THERE ARE SO MANY TOUCH ACTIVITY
Data multi-selection drag. Pick up and move.
Zoom in to fit. Expand Scroll
Reveal upon scroll Pan
Dismiss Over scroll collapse
Menu Open Etc.
Friday, April 7, 2023
14
PROMOTED ACTIONS
Floating Action Button:Floating action buttons are a special case of promoted actions. They are distinguished by a circled icon floating above the UI and have special motion behaviors, related to morphing, launching, and its transferring anchor point.There are two sizes of floating action buttons: the default size and the mini, which should only be used to create visual continuity with other elements on the screen. Not every screen needs a floating action button. A floating action button should represent the primary action in an applicationFriday, April 7, 2023
15
ASSOCIATED CONTENT
Use only one floating action button per screen, as it is the most prominent button on the screen.Put overflow actions in the overflow menu in toolbars, not in floating action buttons. Don’t use floating action buttons in dialogs. Use a flat button.Don’t attach a floating action button to a side drawerDon’t associate floating action buttons with pulldown menus.Don’t morph floating action buttons into a toolbar that contains unrelated or confusing actions.A floating action button can contain a list of contacts.It shouldn’t contain unrelated actions.
Friday, April 7, 2023
16
QUALITIES
Make floating action buttons positive actions like Create, Favorite, Share, Navigate, and Explore.
In general, avoid using floating action buttons for destructive actions like Archive or Trash; unspecific actions; alerts or errors; limited tasks like cutting text; or controls that should be in a toolbar, like volume control or changing a font color.
Friday, April 7, 2023
17
PLACEMENT
A floating action button can be placed according to the Keyline spacing rules or attached to an extended app bar.
A floating action button can attach to a footer or to an extended sheet.A floating action button shouldn’t float in a random location.A floating action button can attach to an extended head.A floating action button can be attached to a toolbar .Don’t have more than one floating action button per screen.Don’t place floating action buttons inside a drawer .Don’t associate floating action buttons with every element on a screen.Don’t block floating action buttons with snack bars or toasts.
Friday, April 7, 2023
18
SETTINGS
Settings Application settings allow users to indicate their preferences for how your app should behave. They grant the user a genuine sense of control, and can be useful in avoiding repeated interruptions with the same question. Accessing Settings Settings are given low prominence in the UI because they’re not frequently needed by users. When your app uses settings: In all cases, the action for accessing “Settings” should be simply labelled “Settings”.Using Settings Appropriately When users visit Settings—however infrequently—they’ll hold this screen to the same expectations as the rest our your experience. It should be well-organized and predictable. In particular, it should avoid overwhelming the user with too many options. Avoid the temptation to punt on difficult product decisions by giving in to the urge to “just make it a setting”.
Friday, April 7, 2023
19
GROUPING SETTINGS
When you have many settings, turn one long list into multiple shorter lists by clustering them. Your strategy for arranging them will depend on the total number of settings.
7 or fewer settings Don’t group at all.
8 to 10 settings Try grouping related settings under 1 or 2 section dividers.
11 to 15 settings Same advice as above, but try 2 to 4 section dividers.
16 or more settings If you have any instances of 4 or more related settings, group them under a sub screen. Apply the guidance above to each sub screen.Choosing defaults Users will expect the initial value for each setting to be sensible. So choose a default group
Friday, April 7, 2023
20
IMAGERY TREATMENT
Image Load Rather than relying heavily on opacity shifts, illustrations and photographs may load and transition in 3 phases at staggered durations.
Aperture vs Development Do not adjust levels in a way that will blow out the whites. Do imagine the image is fading in like a photographic print in the photo developing process.
Friday, April 7, 2023
21
IMAGE LOAD Load and Transition Use the ratio of the three phases (opacity, contrast, and saturation) graphed above to suit your needs. Longer duration is recommended for loads, and shorter duration is recommended for transitions.Loading on larger screens This process is ideal for larger screens, as in this example of loading Chrome OS wallpaper. Adding Animation Add a small position shift on top of this image treatment for cases like an account switch.
Friday, April 7, 2023
22
SEARCH
Contents
In-app search
Persistent Search
Expandable SearchFriday, April 7, 2023
23
IN-APP SEARCH
In its most basic form, a search involves: Opening a search text field Entering and submitting a query Displaying a set of search results
However, the search experience can be made significantly more gratifying by including some enhancements:
Enabling voice searchProviding historical search suggestions based on recent user queries, even before a
query has been startedOffering auto-completed search suggestions that match actual results in your
application data
Friday, April 7, 2023
24
TWO MAJOR PATTERNS FOR IN-APP SEARCH
persistent search and expandable search.
Friday, April 7, 2023
25
PERSISTENT SEARCH
Persistent search is appropriate when search is the primary focus of your app.The user can touch the microphone action to initiate a voice search.
Friday, April 7, 2023
26
EXPANDABLE SEARCH
Expandable search is appropriate when search is not the primary focus of your app.Instead of displaying a search text field, a search action (denoted by the magnifying glass icon) is presented within a toolbar.
Friday, April 7, 2023
27
THANK YOU
Friday, April 7, 2023
28