A comprehensive summary of mobile UI design specifications

When many newcomers start to design mobile UI, they are often not very clear about some interface size specifications. In many cases, they draw interfaces based on their own feelings and experience without a clear concept in their minds, which leads to the pages they produce being not so satisfactory. This article summarizes some commonly used size specifications and methods in interface design (iOS system), such as control spacing, adaptation, annotation, cutting, etc. Designers do not have to strictly abide by them when designing, but they should understand these specifications and integrate them.

Table of contents

• Interface design size and column height
• Margins and Spacing
• Content layout
• Interface image design ratio
• Create icons with a unified style
• APP layout design specifications
• Interface text design specifications
• Design Adaptation
• Cutting Specifications
• Design draft annotation

1. Interface design size and column height

The mainstream iOS devices at present are iPhone SE (4 inches), iPhone 6s/7/8 (4.7 inches), iPhone 6s/7/8 Plus (5.5 inches), and iPhone X (5.8 inches). They all use Retina screens. Among them, iPhone 6s/7/8 Plus and iPhone X use 3x resolution, and the others use 2x resolution. Whether it is the bar height or the application icon, the slice size provided by the designer to the developer is always 1.5 times the latter, and is named with @3x and @2x at the end of the file name respectively. The program automatically loads @3x or @2x slices according to different resolutions.

Through the above explanations and diagrams, we understand the physical dimensions of different iPhone devices. So what are their pixel resolutions? In other words, how big should we set the new canvas when designing with Photoshop? In addition, what are the heights of the bars in iOS applications, including the status bar, navigation bar, tab bar, toolbar, etc.? (Note: iOS strictly stipulates the height of each bar, which must be followed) The following table and diagrams will answer the above questions for you.

Note: When designing for iPhone X, we can still use the familiar iPhone 7 design size as a template, but the height is increased by 290px, and the design size is 750*1624(@2x). Note that the height of the status bar has changed from 40px to 88px, and a 68px homepage indicator position should be reserved at the bottom.

2. Margins and Spacing

In the design of mobile pages, the design specifications of margins and spacing of elements in the page are very important. Whether a page is beautiful, concise, and transparent is closely related to the design specifications of margins and spacing, so it is necessary for us to understand them.

1. Global margins

The global margin refers to the distance from the page content to the edge of the screen. The entire application interface should be standardized based on this to achieve a unified overall visual effect of the page. The setting of the global margin can better guide users to read vertically downward.

In actual applications, different margins should be used according to different product temperaments, so that margins become a design language of the interface. Commonly used global margins are 32px, 30px, 24px, 20px, etc. Of course, there are larger or smaller margins in addition to these, but the ones mentioned above are the most commonly used, and one characteristic is that the values ​​are all even numbers.

Taking the iOS native page as an example, both the "Settings" page and the "General" page use a 30px margin.

Taking WeChat and Alipay as examples, their margins are 20px and 24px respectively.

Usually the minimum left and right margins are 20px, which can display more content. It is not recommended to be smaller than 20px, otherwise the interface content will be too crowded and bring visual burden to users. 30px is a very comfortable distance and is the maximum margin for most applications.

Another method is to leave no margins, which is usually used in a card-style layout to display images across the entire page, such as the ZCOOL APP (of course, the ZCOOL APP has also been revised, and the homepage has adopted a card-style design without a full column). This setting of displaying images across the entire page makes it easier for users to focus on the content of each image and text. When browsing downwards, the visual flow is directly interrupted by the image because there is no white space to guide it, causing users to stay on the image for a longer time.

2. Card spacing

Card layout is a very common layout method in mobile page design. The distance between cards needs to be defined according to the style of the interface and the amount of information the cards carry. Usually the minimum is not less than 16px. Too small a spacing will cause users to feel nervous. The most commonly used spacing is 20px, 24px, 30px, and 40px. Of course, the spacing should not be too large. Too large a spacing will make the interface loose. The color setting of the spacing can be consistent with the dividing line, or it can be lighter.

Taking iOS (750*1334px) as an example, the settings page does not need to carry too much information, so a larger 70px card spacing is used to reduce the user's reading burden. The notification center carries a lot of information, and too large a spacing will make browsing incoherent and the interface visually loose, so a smaller 16px is used as the card spacing.

Let’s take a look at the WeChat card spacing settings and color values.

△ The card spacing and color values ​​are measured and absorbed directly from the screenshots, so they may not be very accurate

Continuing with the example, the two screenshots below are screenshots of the homepages of Juhuasuan (card spacing 20px) and Pinduoduo (card spacing 16px). Because these e-commerce apps need to carry a lot of information, the spacing is generally set to be relatively small.

Summary: The setting of card spacing is flexible and must be set according to the product's temperament and actual needs. You can also take more screenshots to measure how the card spacing of various APPs is set. The more you see and understand, the card spacing setting will naturally be more reasonable and more handy.

3. Content spacing

In addition to various bars (status bar, navigation bar, tab bar, toolbar) and control icons, an APP also has content. The content can be laid out in a variety of ways. We will not discuss how to lay out the content here. Let's talk about the spacing setting of the content.

First, let's introduce an important principle in the Gestalt principle, which is proximity. The Gestalt proximity principle states that the relative distance between individual elements affects our perception of whether and how they are organized together. Elements that are close to each other appear to belong to a group, while those that are farther away are automatically divided out of the group. The closer the distance, the closer the relationship. Look at the picture below. The circles in the left picture are closer horizontally than vertically, so we see 4 rows of dots, while the right picture sees them as 4 columns.

When laying out content in UI design, we must pay attention to the application of the proximity principle. For example, in the main interface of the Qingmang Reading APP below, each application name is far away from other icons and close to the corresponding icon, maintaining a close relationship and making user browsing more intuitive. If the application name is the same distance from the upper and lower icons, it will be impossible to tell whether it belongs to the upper or lower icon, which will make users feel confused.

Let’s look at another case, the RiRiZhu APP. The upper picture is closer to the text, while the lower picture is farther away from the text, so we clearly know that the text belongs to the upper picture.

3. Content layout

There are various forms of content layout in APP design. Here are the two most commonly used layout forms, list layout and card layout.

1. List layout

List layout is very common. You can find this layout in any APP you open. The feature of this layout is that it can display multiple pieces of information in a small screen, and users can get a lot of information feedback by sliding up and down. List is also a very easy to understand display format.

Taking WeChat and QQ, which we use most often, as examples, their "Information" pages all use a list layout. When using this layout, please note that the minimum height of the list for a comfortable experience is 80px, and the maximum height depends on the amount of content.

Continuing with the example, the list layouts of Ziroom (list height 110px) and Vipshop (list height 106px).

2. Card-style layout

The format is very flexible. Its feature is that the content and format of each card can be independent of each other and do not interfere with each other, so different cards can appear on the same page to carry different content. And because each card exists independently, its information can be richer than a list.

When using a card-style layout, please note that the card itself is usually white, and the spacing between cards is usually light gray. Of course, the colors may be different for different product styles, some may be light gray with a hint of blue, etc.

The double-column card layout is more common in apps that are dominated by image information. For example, some shopping malls’ product display pages. This format is similar to the card format, but it can display more content on one screen, at least 4 cards. At the same time, because the left and right columns are displayed separately, users can more easily compare the contents of the left and right columns.

4. Interface Image Design Proportion

In UI design, there are no strict specifications for the size and proportion of images. Designers often rely on experience and feeling to set a size that looks good, but in fact we have rules to follow. Using scientific methods to set the size of the image can get the best solution. Common image sizes include 16:9, 4:3, 3:2, 1:1 and 1:0.618 (golden ratio).

These ratios are not without basis, they are all related to the image size. 16:9 is based on ergonomic research, which found that the field of view of the two eyes of a person is a rectangle with a length-to-width ratio of 16:9. 4:3 is three times the length, four times the length, and five times the length, which is very common in photography...

5. Create icons with a unified style

In the design of application interface, function icons are not individual entities, but usually consist of a whole series of many different icons. They run through all pages of the entire product application and convey information to users.

A set of APP icons should have the same style, including modeling rules, corner size, wireframe thickness, graphic style, and personalized details. Elements should all have unified specifications.

By analyzing the above three groups of icons, we can conclude that they have uniform color, uniform corner radius, and uniform wireframe thickness, which means they have a unified style, giving users a highly unified visual experience.

6. APP layout design specifications

Layout design is also called layout editing, which means arranging the layout elements such as text, pictures, controls, etc. according to specific content in a limited layout space. An excellent layout should take into account the user's reading habits and design aesthetics. What are the principles of layout design in UI design?

1. Alignment

Alignment is one of the most basic and important principles throughout layout design. It can establish a neat and uniform appearance and bring users an orderly and consistent browsing experience.

2. Symmetry

Symmetry is the design philosophy of the universe and the essential attribute of the law of unity of opposites. It presents a harmonious and natural beauty. In the design of the application interface, the guide page design, registration and login input boxes and buttons are all symmetrical designs.

3. Grouping

Birds of a feather flock together. Grouping is to combine information of the same category and present it to the user intuitively. This design can reduce the user's cognitive burden. The most common grouping method in mobile interface design is cards, which provide users with a focused and clear browsing experience.

7. Interface text design specifications

Text is the core element of an APP and the main content that the product conveys to users. Therefore, text is very important in the design of an APP. So, how do you choose the font, set the font size, bold it, and set the color?

In an app, the font size range is generally between 20-36 (@2x). Of course, the design of large titles has appeared in iOS 11, and the font size should still be set according to the product attributes. Another point to note is that all font size settings must be even numbers, and the font size difference between the upper and lower content is 2-4.

About fonts: Before the launch of iOS 9, designers generally used fonts such as Huawen Bold, Google Source Han, and Holly for design. iOS 9 launched Apple’s own font - Ping Fang! Since then, Ping Fang font has been widely used in mobile design.

Regarding font color and whether to bold: We seldom use pure black for font color settings. We usually use dark gray and light gray, thin and bold (note that you must use the font weight itself, and cannot use the bold function of PS) to distinguish important information from secondary information and divide the information hierarchy.

8. Design Adaptation

The resolutions of mainstream iOS devices are 640x1136px(@2x)(iPhone SE), 750x1134px(@2x)(iPhone6s/7/8), 1242x2208px(@3x)(iPhone 6s/7/8 Plus), 1125x2436px(@3x)/750x1624px(@2x)(iPhone X).

In the design process, designers need to design a set of benchmark design drawings to achieve the purpose of adapting to multiple resolutions. We can choose the middle size of 750x1134px as the benchmark, adapt to 640x1136px downward, and adapt to 1242x2208px and 750x1624px/1125x2436px upward.

1. 750×1334 is adapted down to 640×1136

Since the 750x1334px and 640x1136px interfaces have a pixel ratio of 2, their slice sizes are the same, that is, the system icons, text, and height do not need to be adapted, only the width needs to be adapted.

In order to let everyone understand the principles of adaptation, we deduce the interface from 750x1334px to 640x1136px in the form of text description and diagram.

Draw a 750x1334px design drawing, which is the most common homepage design drawing. From top to bottom, they are the status bar, navigation bar, first focus image, main entrance, partition, and list.

Now let's start the adaptation. As mentioned above, since 750x1334px to 640x1136px are both 2 times the pixel ratio, the icons and text sizes of the interface are the same, so we don't need to change the image size. We only need to change the canvas size to 640x1136px, and then change the horizontal element spacing to achieve the purpose of adaptation.

First, open the 750x1334px design draft, execute Command+Alt+C (shortcut key for changing the canvas size), left-click the grid in the upper left corner of "Position", set the width and height to 640 and 1136, and click "OK".

After resizing the canvas, the right and bottom sides of the design are cropped (the area covered by the semi-transparent mask in the left image above), and the canvas is reduced to 640x1136px.

The above left picture was cropped to the right picture to fit, and the following adjustments were made.

The icon on the right side of the navigation bar moves to the left to keep consistent with the original right margin, and the title is centered.

The height of the first focused image is divided by 1.17 (750/640=1.17) and then centered, with a width of 640px.

The icons on the right side of the main entrance are moved to the left to keep consistent with the original right margin, and the spacing between icons is equal.

2. 750×1334 is adapted to 1242×2208

Since the 750x1334px interface has a pixel ratio of 2 times, and the 1242x2208px interface has a pixel ratio of 3 times, that is to say, the size of all elements on the 1242x2208px interface is 1.5 times that of the elements on the 750x1334px interface, so when adapting, we directly change the image size of the interface to 1.5 times the original, and then adjust the canvas size to 1242x2208px, and finally adjust the size of the horizontal spacing between the interface icons and elements to complete the adaptation.

The above describes the overall idea. Now let’s talk about how to adapt it specifically.

First, execute Command+Alt+I (Adjust Image Size) on the 750x1334px canvas, set the unit to percentage, set the width and height to 150%, click "OK", and the adjusted canvas size will be 1125x2001px.

Then, press Command+Alt+C (Adjust Canvas Size) on the 1.5-fold 1125x2001px interface, click the grid in the upper left corner of "Position" with your mouse, adjust the width and height to 1242 and 2208px, and click "OK".

The left picture above expands the canvas to the right picture to complete the adaptation and make the following adjustments:

• The icon on the right side of the navigation bar moves to the right to keep consistent with the original right margin, and the title is centered.
• The height of the first focus image is multiplied by 1.65 (1242/750=1.65) and then centered, with a width of 1242px.
• The icons on the right side of the main entrance are moved to the right to match the original right margin, and the spacing between icons is equal.

Note: The dividing line is still 1px.

3. 750×1334 fits upwards to 1125x2436px (@3x)

Compared with the iOS devices released by Apple before, the pixel resolution of iPhone X has changed to 1125x2436px (@3x). In actual work, in order to facilitate upward and downward adaptation, we can still choose the familiar size of iPhone 7 (750x1334px) as the template for design, but the height is increased by 290px; the design size is: 750x1624px (@2x). After the design is completed, expand the image size of the design draft by 1.5 times to get a design draft of 1125x2436px (@3x) size.

When adapting, please note that the status bar has increased from 40px to 88px, and 68px is reserved at the bottom of the label for the homepage indicator, as shown in the figure below.

The adaptation of the home page indicator involves two situations: when there is a tab bar, toolbar or other operation design at the bottom, the background color needs to be extended down 68px and filled with the original color. This treatment can make the bottom design more concise and comfortable. When there is no function operation, the bottom of the page does not need to be filled with color, just cover the home page indicator.

For most pages that use waterfall flow, it is just a change in screen height, which can be ignored. However, for interfaces that need to be displayed on a single screen, such as novice guide pages and music players, they need to be re-layouted.

9. Cutting Specifications

After the interface design is finalized, the designer needs to slice the icon and provide it to the development engineer. Usually, we only need to slice the icon. Text, lines and some standard geometric shapes do not need to be sliced. For example, the search box only needs to describe its size, radius size, background color value, and opacity in the annotation. The development engineer can achieve this effect with code.

1. Output slices

First, rearrange the icons in the design draft on a new canvas to ensure that icons of the same size have the same spacing. The advantage of doing this is that you can create a control library for the icons, which is conducive to the organization of the icons.

After creating reference lines for each icon, use the slicing function of PS to draw frames along the reference lines of each icon. Note that you must export the slices in PNG format (PNG format has more colors and details and supports transparency).

In the specific operation, you must first remove the background color of the canvas to make the canvas transparent. After slicing, execute File-Save for Web, select PNG format in the dialog box, and click "Save".

Note: The background color block of the tab bar icon in the figure is to ensure a uniform slice size. You can create a reference line based on the color block, and remove the color block when slicing the image.

2. Slice naming

The general specification for slice naming is interface_function_status.png. The name should be named in English, do not start with numbers or symbols, and use underscores to connect. For example, a button in the normal state of the home page is named [email protected]. The home page of the interface is home, the space button is btn, and the normal state is normal. In order to ensure the correctness of the naming, the designer needs to communicate and confirm with the cooperating development engineer first.

10. Design draft annotation

After the interface design is finalized, the designer needs to mark the interface for the development engineer to refer to when restoring the interface. Using some professional marking tools can help us improve work efficiency. Commonly used marking tools include Mark Man or PX Cook.

The content that needs to be marked in a design draft is the font size, thickness, color, and opacity of the text; the background color and opacity of the interface; and the spacing between icons, lists, and text.

The purpose of interface annotation is to provide reference for development engineers. Therefore, you need to communicate with the development engineers before annotation to understand their working methods. After the annotation is completed, explain your precautions to complete the work more quickly and efficiently, and achieve the highest visual restoration possible.

Summarize

This article summarizes a series of mobile UI design specifications, including interface size, control spacing, layout design specifications, text design specifications, design adaptation, annotations, cutting pictures, etc. During this period, a lot of information was consulted and it took a week to complete the writing of this article. I hope to provide entry-level help for designers who are just engaged in UI design.

As for why only the iOS system design specifications are summarized, but not the Android system design specifications, let me explain here that the Android system design specifications were originally supposed to be covered, but after consulting the materials, I found that there are very few introductions to the Android design specifications, and the standards are not unified, so there is little reference value, so the writing of this part of the specifications is omitted.