{"id":4432,"date":"2021-12-01T13:36:00","date_gmt":"2021-12-01T13:36:00","guid":{"rendered":"https:\/\/codewaveinsdev.wpengine.com\/?p=4432"},"modified":"2023-08-01T15:34:07","modified_gmt":"2023-08-01T15:34:07","slug":"cross-platform-app-design-guide-android-ios-2022","status":"publish","type":"post","link":"https:\/\/codewave.com\/insights\/cross-platform-app-design-guide-android-ios-2022\/","title":{"rendered":"Cross-platform app design guide- Android & iOS"},"content":{"rendered":"\n

According to Statista<\/strong>, the number of smartphone subscriptions worldwide surpasses 6 Billion<\/strong> and is forecasted to grow further by a billion in the next five years. <\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Number of smartphone subscriptions (in millions) worldwide from 2016 to 2026<\/a><\/p>\n\n\n\n

China, India, and the United States are the countries with the highest number of smartphone users<\/a>. Brands and businesses have forayed into launching mobile apps to tap into the opportunity it presents. And a good share of these businesses uses cross-platform technologies to build their apps.<\/p>\n\n\n\n

Why do businesses use cross-platform technologies?<\/strong><\/h2>\n\n\n\n
\"StatCounter<\/figure>\n\n\n\n

Source: StatCounter Global Stats – OS Market Share<\/a><\/p>\n\n\n\n

Though mobile platforms are synonymous with android and iOS, there are many mobile OS platforms like blackberry, Symbian, windows phone, web os, and wearable platforms like Wear OS, Fitbit OS, Pebble OS, etc, And now, we also have google home and Alexa skills with a voice interface. And the annual app downloads across these platforms have surpassed 218 Billion<\/strong> in total.<\/p>\n\n\n\n

Android maintained its position as the leading mobile operating system worldwide as of Sept 2021<\/strong>, controlling the mobile OS market with a close to 71 percent share. Google\u2019s Android and Apple\u2019s iOS jointly own over 99 percent of the global market share. Samsung, KaiOS, and Nokia OS too have a small but significant presence.<\/p>\n\n\n\n

In the early 2000s, there was always this buzz that businesses must have a \u2018website\u2019. In the late 2000s, the buzz was- businesses must have a website and a mobile app. But now, with \u2018omnichannel presence across platforms\u2019 becoming the mainstream competitive strategy among brands, tech teams are increasingly using cross-platform technologies for faster development and better performance. Because developing the same functionalities in different platform-specific native languages would be so taxing on the finances. Small modifications in the app, and release requirements, etc., would also get tightly constrained. All this would lead to slower innovation and slower business growth.  <\/p>\n\n\n\n

So, MSMEs usually prefer developing using a single code-base that could be used on different platforms while it saves time, money, effort, and speeds up the development. You can learn more about cross-platform app development technologies<\/a> on Codewave Insights. Here, we are going to dive deeper into the design aspects of cross-platform development, the DOs, and DONTs.<\/p>\n\n\n\n

Why abiding by cross-platform design conventions is critical?<\/strong><\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

One out of three developers uses cross-platform mobile app development technologies. 80% of these use either Flutter or React Native or both, followed by Cordova, Ionic, and Xamarin. We have detailed insights on each of these technologies. Please do read them & share if you feel it will be helpful for your peers\/teams. <\/p>\n\n\n\n

While there is no doubt about the potential of Flutter and React Native, the interfaces and functionalities that these technologies could help you build. But often, an app needs to access device\/platform-specific features, while maintaining a consistent design experience for users. And this is where it becomes tricky. So, let\u2019s explore the DOs and DONTs of cross-platform app design. After all, a tool is as good as the person using it.    <\/p>\n\n\n\n

Cross-platform UI design guide for iOS and Android <\/strong><\/h2>\n\n\n\n

Balancing platform parity and app similarity<\/h3>\n\n\n\n

It is crucial for app designers to be acquainted with the core functionalities that are specific to each platform for which they are designing the application. While the design logic follows a universal approach and is the same across the <\/strong>platforms, there are certain functionalities and components that are unique to the native platform. Understanding the core features of the native platform will help in designing interfaces with consistent navigation, toolbar, iconography, and functionality. Therefore, the platform parity and the app similarity are to be balanced for the best outcome.<\/p>\n\n\n\n

UI Design guidelines: Platform-specific conventions<\/h3>\n\n\n\n

Platform-specific design conventions i.e., The Human interface design for iOS, macOS, watchOS, tvOS, and material design for android help the designer to easily adapt designs for both platforms while maintaining the cross-platform design interface & experience consistency. Adapting to platform-specific conventions is important because the major UI differences originate out of these conventions. On a high level, HIG is more about flat, light friendly design, and Material design is more expressive, diverse, reality-based,<\/p>\n\n\n\n

\"\"\/
The toolbars<\/figcaption><\/figure>\n\n\n\n

On iOS, toolbars are called navigation bars and their height is shorter than the Android version. On Android, toolbars are called top app bars. It\u2019s recommended to use a platform\u2019s default text alignment for toolbar titles unless multiple action buttons are present. The title is center-aligned for iOS and left-aligned for android. We discuss this in detail in the Navigational section of this article.<\/p>\n\n\n\n

\"\"\/
System font<\/figcaption><\/figure>\n\n\n\n

System font for iOS is San Francisco<\/strong>, and for android it\u2019s Roboto<\/strong>. If you\u2019re using Roboto on your android app, fonts on iOS would look different. To maintain consistency, you may upload a custom font<\/a> to iOS SDK and make use of UIappearance<\/a> to use this font globally i.e., across the app.<\/p>\n\n\n\n

\"\"\/
Elevation<\/figcaption><\/figure>\n\n\n\n

Human interface design does not support shadow use in apps. Whereas, Android apps make use of shadows (z-axis) to bring in the 3D feel. Designers should carefully use shadows in Android apps as the app\u2019s navigation and state change with the changes in Elevation. In iOS, translucency is used to differentiate between content and app bars.<\/p>\n\n\n\n

\n
\n
\n
\"\"\/
Controls<\/figcaption><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n
\n
\"\"\/
Android and iOS both have switches. iOS only uses checkmarks for both single and multiple option checkboxes. Android uses radio buttons for single option selections and checkboxes for multiple option selections. Android and iOS both have switches. iOS only uses checkmarks for both single and multiple option checkboxes. Android uses radio buttons for single option selections and checkboxes for multiple option selections. Android and iOS both have switches. iOS only uses checkmarks for both single and multiple option checkboxes. Android uses radio buttons for single option selections and checkboxes for multiple option selections. <\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n