Slideonmaterialdesign on google design

  • Published on

  • View

  • Download

Embed Size (px)


its on material design,,,,,on google material design


  • Friday, July 11, 2014 1
  • PREPARED BY Toufik Ahmed Emon 4th YEAR 1ST SEMESTER, JAHANGIRNAGAR UNIVERSITY On Material Design On Topics Pattern Friday, July 11, 2014 2
  • P A T T E R N Topics: Selection Gestures Promoted Action Imagery treatment SearchFriday, July 11, 2014 3
  • S E L E C T I O N Text Selection Item Selection Friday, July 11, 2014 4
  • T E X T S E L E C T I O N Support 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, July 5
  • I T E M S E L E C T I O N 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, July 6
  • I T E M S E L E C T I O N Friday, July 7
  • I T E M S E L E C T I O N Popup 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, July 8
  • I T E M S E L E C T I O N Friday, July 9
  • K E Y B O A R D S H O R T C U T S Shift+Left/Right Arrow for character-by-character Shift+Up/Down Arrow for line-by-line Ctrl/Command+A to select all Friday, July 10
  • G E S T U R E S 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, July 11
  • T O U C H M E C H A N I C S 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 Touch One-finger press, lift Example: Select Friday, July 12
  • T O U C H A C T I V I T I E S 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 views chrome. All of its touch mechanics is Touch Friday, July 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, July 14
  • P R O M O T E D A C T I O N S 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 application Friday, July 15
  • A S S O C I A T E D C O N T E N T 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. Dont use floating action buttons in dialogs. Use a flat button. Dont attach a floating action button to a side drawer Dont associate floating action buttons with pulldown menus. Dont morph floating action buttons into a toolbar that contains unrelated or confusing actions. A floating action button can contain a list of contacts. It shouldnt contain unrelated actions. Friday, July 16
  • Q U A L I T I E S 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, July 17
  • P L A C E M E N T 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 shouldnt 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 . Dont have more than one floating action button per screen. Dont place floating action buttons inside a drawer . Dont associate floating action buttons with every element on a screen. Dont block floating action buttons with snack bars or toasts. Friday, July 18
  • S E T T I N G S 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 theyre 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 Settingshowever infrequentlytheyll 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, July 19
  • G R O U P I N G S E T T I N G S 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 Dont 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, July 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, July 21
  • I M A G E L O A D 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, July 22
  • S E A R C H Contents In-app search Persistent Search Expandable Search Friday, July 23
  • I N - A P P S E A R C H 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 search Providing historical search suggestions based on recent user queries, even before a query has been started Offering auto-completed search suggestions that match actual results in your application data Friday, July 24
  • TWO MAJOR PATTERNS FOR IN-APP SEARCH persistent search and expandable search. Friday, July 25
  • P E R S I S T E N T S E A R C H 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, July 26
  • E X P A N D A B L E S E A R C H 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, July 27
  • Friday, July 28