Download pptx - 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


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.


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.


6

ITEM SELECTION


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.


8

ITEM SELECTION


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


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)


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


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


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.


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.


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.


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.


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


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


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.


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.


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


24

TWO MAJOR PATTERNS FOR IN-APP SEARCH

persistent search and expandable search.


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.


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.


27

THANK YOU


28