UI elements

The following are some of the UI elements that enhance the UX:

  • Menus: While iOS has always been distinguished by having the menu of their applications at the bottom of the screen, Android developers have been somewhat more flexible in creating their applications. It is common to find applications with menus both in the lower area and in the upper area in the form of tabs or drawer. The latest trends indicate that many applications are including bottom menus in Android applications, and Google has already contemplated this trend in its Material Design guidelines.
  • Look and feel: Material Design guides are distinguished by elements such as the virtual height denoted with shadows, the FAB, or movements associated with the sensation of gravity. iOS is usually more subtle in the use of shadows, making a mixture of flat style with translucent effects for menus and dialogs.
Facebook application dialog on Android (left) and iOS (right) (Source: Screenshots from Facebook Apps)
  • Icons: When your application is supported on different platforms, you need to decide whether to create a set of icons and graphics that are specific for each platform or use a common visual style for all platforms. You can find these two different approaches in apps from leading companies.
    Those that do not distinguish between platforms use commonly simple solid icons or hollow icons with thick lines, as this kind of icons work very well on different screens sizes and resolutions. The applications that adapt their icons based on the platform, tend to use thinner icons on iOS, using inverted solid icons for selected states in tab bars and some functionality, and use solid and hollow icons with thick lines on Android, using the color and the opacity to represent different states.
    If your project will be developed for different platforms, you will have to find a balance between the native style of the platforms themselves and the one of your brand identity. Depending on the nature of your project, your users could be changing from one device to another. By providing a common visual design your users will recognize the functionally easier when they use their other devices.
How different apps adapt their icons to each platform--cropped screenshots to focus on the user interface elements (source: Screenshots from LinkedIn, source: Screenshots from Instagram, source: Screenshots from Facebook)
  • Fonts: Choosing the font that we use in our application will mark the user experience drastically. Readability on mobile screens is often more complicated due to the need to distribute the space between all elements of our user interface. The choice of the font can also be influenced by our brand image, so we will have to look for a balance between functionality and design.
    Both the operating systems have highly optimized fonts for good readability, and it is advisable to use them, at least in contexts where a less optimized font family produces difficult readability scenarios.
Roboto, Helvetica Neue, and SF UI Display fonts are highly adapted to multiscreen environments

In Android, the recommended font is Roboto, while iOS currently uses the San Francisco font, but previously used the Helvetica Neue. All of them produce good readability results and therefore can be extremely useful when designing our screens. Google Fonts and other services offer help in pairing two types of fonts.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.139.72.78