Why not use grid systems in mobile design?
Should we use a grid system for mobile design? Why is the grid system difficult to apply in mobile development? Many people engaged in mobile terminal design may have been troubled by these problems to one degree or another. In this article, the author has given answers and analysis. Let’s take a look.
We all know that when doing web-related HE Tuber projects, whether it is C-side or B-side, responsive layout is often used. If responsive layout is used, a grid system must be used to ensure the normal execution of responsiveness.
However, whether or not to use grids on mobile terminals and how to use them has become a problem that bothers many people. We will use today’s sharing to explain it.
Grids and Grids on Mobile Terminals
To understand mobile layout and typography design, you must first understand the difference between grid and grid system.
The first is the grid system. From the early Android specifications to Material Design 2, Google has advocated a grid system based on 8dp length and width (later added 4dp).
In short, it is recommended that designers use the grid of this grid system as the standard when formulating the size of components, buttons, icons and other elements, align the edges with the reference lines, and ensure that the size and spacing of elements are multiples of 8.
Although this layout is very simple, it does not meet the national conditions, actual application scenarios and iOS adaptation. The main problem is the latter, because the grid system established with 8 requires the canvas itself to be a multiple of 8 to fit perfectly, such as the 1280*720 length and width of the Android standard canvas 720P.
Among the various Android devices and screen resolutions, many do not meet this condition, not to mention Apple’s mobile phones, which are either 375, 390, 393 wide, etc. So this grid system No one is using it.
The grid system is different from the grid system. The grid divides the canvas into a number of grids of the same size and is used to fill the content above the grid. The grid system adds guide lines to the canvas so that the content can be laid out based on the guide lines.
For example, the picture below is also a responsive grid system that appears in Material Design
Its function is similar to the responsive grid on the web page. The width of the grid is variable, and the module will adapt as the grid changes. The specific logic will not be explained here. You can read the sharing related to web responsiveness that I wrote before.
Android proposed this system in the official specification, which is basically the same as Bootstrap’s responsive rules and includes the application of breakpoints. The main purpose is to allow the product to use only one set of code to adapt style layout on different terminals and screens.
For example, with so many folding screen phones and Android tablets now, developers only need to apply this system and use a set of codes to achieve adaptation to all devices and specifications.
It’s nice to think about it, right? But if you don’t do foreign projects, especially projects designed only for the Android platform, then this grid system cannot be applied. We will explain the reasons in detail below.
Application problems of grid systems
Why is the grid system difficult to apply in mobile terminal development? There are many factors affecting it. Let’s briefly summarize it:
- The iOS system does not come with a grid system
- Large screen adaptation cannot simply use responsiveness
- Page layout differences within the project are too large
Question 1. The iOS system does not come with a grid system
This is the most fatal, because our main design object in UI design is based on the iOS specification, which is not provided in iOS.
The reason is also very simple. The specifications of iOS devices are very few compared to the Android camp, and there is no such urgent need for responsiveness. The logic of supporting iPad adaptation in the early years was basically abandoned. Officials apparently also found that forcing developers to do responsive design is not as good as running unadapted mobile APPs directly on the iPad or directly developing iPad APPs. The reasons are as follows. illustrate.
