1 / 8

How to Design Mobile UI for Android Devices

Every operating system consists of a global UI, where all UI elements and components are displayed according to it. If youre a Windows user, you may have noticed that all applications open in a similar window interface, the dialog boxes, the minimize, maximize and close buttons are all identical across different applications within Windows. The same goes for Mac OS as well. In the mobile UI that global UI which structures all of the components for familiar usability across different apps, is called System UI.<br>read more: https://turboanchor.com/how-to-design-mobile-ui-for-android-devices/

TurboAnchor
Télécharger la présentation

How to Design Mobile UI for Android Devices

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. How to Design Mobile UI for Android Devices Every operating system consists of a global UI, where all UI elements and components are displayed according to it. If you’re a Windows user, you may have noticed that all applications open in a similar “window” interface, the dialog boxes, the minimize, maximize and close buttons are all identical across different applications within Windows. The same goes for Mac OS as well. In the case of mobile UI (Android), that global UI which structures all of the components for familiar usability across different apps, is called “System UI”.

  2. Design Guidelines for Components Every operating system has a set of rules and principles that govern how interactive elements and components are displayed on screen. These rules are also called “Design Language” or “Design Guidelines”. Following is a summary of how UI components are rendered in Android.

  3. Navigation Layout of Mobile UI In Android, the page title is displayed on the left. If it is a top-level page, then there’s usually a Side Menu next to it, which lets you navigate sub-level features within the app. The Search function is on the right, and displayed as an icon. To navigate similar data within the page, there are Tab Buttons below the Navigation Bar. The primary function is displayed as a Floating CTA button. For example, in the Messages app, this button lets you compose a new text message.

  4. Three-Dot Menus In Android, secondary functions in an app are either displayed as an Action Menu at the bottom of the screen or as a more compact Dropdown Menu, when obstruction is to be reduced. The button by which it is accessed is also called the Kebab Menu because of how it is shaped (i.e. three dots).

  5. Selection Single Choice Options Single Choice Options is a list of options where you can only select one of them. They are often displayed next to a “Radio Button” in all sorts of operating systems, including Android. A smaller list can be displayed as a drop down menu or inside a “Modal” (a floating window), center aligned to the screen. Date Picker In Android, the “Date Picker” appears inside of a “Modal”.

  6. Typography for Mobile UI The default typeface in Android is Roboto. It has been implemented since 2011, when Google released Android 4.0 Ice Cream Sandwich. Text Styles Fonts on a display are usually measured in “Points”. Android uses the term “Scalable Pixel (sp)” for “Point”. The base font size is 16sp. App Icons The minimum icon size in Android is 48 x 48 px, as that is the ideal tap size for a human finger. An icon can be scaled in multiples of 48px, therefore design software like Figma and Illustrator have 1x, 2x, 3x and 4x export options.

  7. THANK YOU

More Related