When many newcomers start to do mobile TERMINAL UI design, they are often not very clear about some size specifications of the interface. Most of the time, they draw the interface based on their own feelings and experience, without a clear concept in mind, resulting in unsatisfactory pages. This paper summarizes some commonly used size specifications and methods in iOS interface design, such as control spacing, adaptation, annotation, cutting, etc. Designers do not have to strictly abide by the design, but they should have an understanding of these specifications, and master them thoroughly.
directory
- Interface design size and column height
- Margins and spacing
- Content layout
- Interface picture design scale
- Create a unified style icon
- Specification for APP layout design
- Interface text design specification
- Design of adaptation
- Cut the figure specification
- Design draft annotation
First, the interface design size and column height
Currently, the main iOS devices 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), all of which have Retina display. The iPhone 6S /7/8 Plus and iPhone X use 3x resolution, while the rest use 2x resolution. No matter the bar height or app icon, the slice size provided by the designer to developers is always 1.5 times that of the latter. And named @3x and @2x respectively at the end of the file name, the program will automatically load @ 3X or @2x slices according to different resolutions.
Given the physical size of different iPhone devices, what is their pixel resolution? That is to say how big should we make a new canvas in Photoshop? What is the height of the bars in an iOS app, including the status bar, navigation bar, TAB bar, toolbar bar, etc.? (Note: iOS has strict rules about the height of each column, which must be followed.) Use the charts and illustrations below to answer the above questions.
Note: We can still use the familiar iPhone 7 design size as a template for iPhone X design, but 290px is added to the height and the design size is 750*1624 (@2x). Note that the height of the status bar has been changed from 40px to 88px, and that there should be a 68px home page indicator at the bottom.
Second, margin and spacing
In the design of mobile terminal page, the design specification of margin and spacing of elements in the page is very important. Whether a page is beautiful, simple and transparent is closely related to the design specification of margin spacing, so it is necessary for us to understand them.
1. Global margins
Global margins are the distance between the content of the page and the edge of the screen, which should be standardized throughout the application interface to achieve a unified visual effect of the page. The global margin is set to better guide the user to read vertically down.
In practice should be adopted according to the product quality of different different margins, make margin interface of a design language, the commonly used global margins has 32 30 px, px, px, 20 px, and so on, of course in addition to these larger or smaller margin, but when it comes to these above is the most commonly used, and has a characteristic is numerical all even.
Take the iOS native page as an example. The Settings page and the General page both use 30px margins.
Take wechat and Alipay for example, their margins are 20px and 24px respectively.
Generally, the minimum distance between the left and right sides is 20px, which can display more content. It is not recommended to be less than 20, otherwise the interface content will be too crowded and bring visual burden to users. 30px is a very comfortable distance and is the preferred margin for most applications.
There is also no margin, which is usually applied in the card layout of the picture display, such as Zcool APP (of course, zcool APP has also been revised, the home page has adopted a card type design without open column). This kind of picture display setting makes it easier for users to focus on the content of each picture and text itself, and its visual flow is directly split by the picture when browsing down because there is no guidance of white space, resulting in a longer stay on the picture.
2. Card spacing
Card in the mobile end page design layout is a very common way of layout, as for the distance between the card and the card set need according to the style of the interface and how to define the card carries information, usually a minimum not less than 16 px, the spacing is too small will cause the user’s tension, the most used spacing is 20 px, px, px 30, 40 px. Of course, the spacing should not be too large, too large spacing will make the interface become loose, spacing color Settings can be consistent with the dividing line, but also can be lighter.
Taking iOS (750*1334px) as an example, the setting page does not need to carry too much information, so a large 70px card spacing is adopted to reduce the reading burden of users, while the notification center carries a large amount of information, too large a spacing will make browsing become incoherent and the interface vision loose. So a smaller 16px space was used for the cards.
Let’s take a look at wechat’s card spacing and color value.
△ Card spacing and color values are measured and absorbed directly from screenshots, which may not be very accurate
For example, the following two screenshots are respectively the home page screenshots of Juhuasuan (card spacing 20px) and Pindong Duo (card spacing 16px). This kind of e-commerce APP needs to carry a large amount of information, so the spacing is generally set relatively small.
Summary: The setting of card spacing is flexible, so it must be set according to the temperament and actual needs of the product. At ordinary times, you can also take more screenshots to measure how the card spacing of various apps is set. After more reading and understanding, the setting of card spacing will naturally be more reasonable and more handy.
3. Spacing
In addition to various columns (status bar, navigation bar, TAB bar, toolbar) and control icon, an APP is content. The layout of content is diverse. Instead of discussing the specific layout of content, we will talk about the spacing setting of content.
First to introduce the gestalt principle is an important principle of proximity, gestalt proximity principle thought: the relative distance between the individual elements affect whether we perceive it and how to organize together, and close to each other seems to belong to a group of elements, while those far away automatically divided into groups, closer relationship closely. If we look at the figure below, the circle on the left is closer horizontally than vertically, so we see four rows of dots, while on the right we see four columns.
Content in the UI design layout, be sure to pay attention to the use of the principle of proximity, such as in the following paragraph light mans reading APP in the main interface, each application name from other ICONS, at close range with the corresponding icon, maintain a close relationship, also let users browse the more intuitive, if the application name and icon is the same distance from top to bottom, It is impossible to tell whether it belongs above or below, giving users a sense of confusion.
Let’s take a look at another case. The picture above is close to the text, while the picture below is far away from the text, so we clearly know that the text belongs to the picture above.
Content layout
There are various forms of content layout in APP design. Here are the two most commonly used forms, list layout and card layout.
1. Tabular layout
List-based layout is very common. It can be found in any APP. Its layout is characterized by the ability to display multiple pieces of information on a small screen, and users can get a lot of information feedback by swiping up and down. Lists are also a very easy to understand form of presentation.
Take the most commonly used wechat and QQ as an example, their “information” page adopts tab-type layout. When adopting this layout, it should be noted that the minimum height of the comfortable experience of the list is 80px, and the maximum height depends on the amount of content.
To continue with examples, the tabular layouts for Freely (table height 110px) and Vipshop (table height 106px).
2. Card layout
The form is very flexible. The feature is that the content and form of each card can be independent of each other, so you can have different cards carrying different content on the same page. And because each card stands alone, it can be more informative than a list.
When using the card layout, we should pay attention to the card itself is generally white, and the spacing between the cards is generally light gray, of course, the color of different product styles may be different, some are light gray to blue, etc..
The layout of double-column cards is more common in apps dominated by picture information. For example, some shopping malls display pages. This format is similar to the card format, but it can display more content on a screen, at least four cards. At the same time, because the left and right columns are displayed separately, users can compare the contents of the cards in the left and right columns more conveniently.
4. Proportion of interface picture design
In UI design, there are no strict rules for the size and proportion of images. Designers often rely on experience and feeling to set a size that looks good, but there are rules to follow. Using scientific means to set the size of the picture, you can get the best scheme, common picture size 16:9, 4:3, 3:2, 1:1 and 1:0.618 (golden ratio), etc..
These ratios are not unfounded, they all depend on the size of the image. 16:9 is according to the research of ergonomics, it is found that the field of vision of human two eyes is a rectangle with 16:9 length and width ratio, 4:3 is the hook, three strands, four strings and five, which is very common in photography…
Five, the establishment of a unified style icon
In the design of application interface, functional ICONS are not a single individual, but usually consist of a whole series of many different ICONS, which 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 styling rules, rounded corners, wireframes, graphic styles and individual details.
Through the analysis of the above three groups of ICONS, it can be concluded that they have uniform color, uniform size of rounded corners and uniform thickness of wireframes, which means that they have unified style and give users a highly unified visual experience.
Vi. APP layout design specification
Layout design is also called layout editing, that is, in a limited layout space, layout elements such as text, pictures, controls, etc. are combined and arranged according to specific content. An excellent layout should consider the user’s reading habits and aesthetic design, in UI design layout design principles?
1. The alignment
Alignment is one of the most fundamental and important principles throughout typography design. It establishes a uniform appearance and gives users an orderly and consistent browsing experience.
2. The symmetry
Symmetry is the design philosophy of the universe and the essential attribute of the law of unity of opposites, presenting a harmonious and natural beauty. In the design of the application interface, the design of the guide page, registration and login input box and button are all symmetrical.
3. The group
Birds of a feather flock together. Grouping is to combine information of the same kind and present it intuitively in front of users. Such a design can reduce users’ cognitive burden. Cards are the most common grouping method in the design of mobile terminal interfaces, providing users with focused and clear browsing experience.
Vii. Interface text design specifications
Text is the core element of APP and the main content conveyed to users by the product. Therefore, text is very important in the design of APP. Then, how to choose the font of text, how to set the size, whether to bold, and how to set the color?
In an APP, the size range is generally 20-36 (@2x). Of course, iOS 11 has a big title design, but the size should be set according to product attributes. Another important point to note is that all font sizes must be even, with a range of 2-4 points.
About fonts: Before the launch of iOS 9, designers generally used Chinese boldface, Google Siyuan, Holly and other fonts for design, iOS 9 launched Apple’s own font — Apple Fang! Since then, apple fonts have been widely used in mobile design.
About font color and bold or not: pure black is rarely used for font color Settings, but dark gray and light gray, fine and bold (note that the font itself should be weighted, not the bold function of PS) are used to distinguish important information from secondary information and classify information levels.
Eight, design adaptation
The main iOS device resolutions are 640x1136px (@2x) (iPhone SE), 750x1134px (@2x) (iPhone6s/7/8), and 1242x2208px (@3x) (iPhone6s/7/8) Plus), 1125x2436px (@3x) / 750x1624px (@2x) (iPhone X).
In the design, the designer needs to design a set of benchmark design drawings to achieve the purpose of adapting to multiple resolutions. We can choose the middle size of 750 x1134px as the benchmark, and adapt to 640x1136px downward, 1242x2208px and 750x1624px / 1125x2436px upward.
1. 750 x 1334 downward adaptation 640 x 1136
Since the 750x1334px and 640x1136px interfaces have twice the pixel multiplier, their slice sizes are the same, i.e. the system ICONS, text and height do not need to be adapted, but the width needs to be adapted.
In order to let you understand the principles of adaptation, we carried out the interface derivation from 750x1334px to 640x1136px in the way of text description and diagram.
Create a 750x1334px layout. This is the most common layout for your home page, from top to bottom: the status bar, navigation bar, first focus, main entry, split, and list.
As mentioned above, since 750x1334px to 640x1136px are twice the pixel multiplier, the ICONS and text sizes of the interface are all the same, so we don’t need to change the image size, just change the canvas size to 640x1136px. Then change the spacing of the horizontal elements to fit.
First open the 750x1334px design, run Command+Alt+C (shortcut to change canvas size), left click on the upper left corner of the “Position” grid, set 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 translucent mask in the left image above) and the canvas is reduced to 640x1136px.
The left picture is cropped to the right picture, and the following adjustments have been made.
- The icon on the right of the navigation bar is moved to the left to keep the original right margin, and the title is centered.
- The height of the first focus is centered by 1.17 (750/640 =1.17) and the width is 640px.
- ICONS to the right of the main entrance move to the left to keep the same distance as the original right, the spacing of each icon is equal width.
2. 750 x 1334 upward adaptation 1242 x 2208
Since the 750x1334px interface is 2x pixel magnification and 1242x2208px is 3x pixel magnification, which means that all the elements on the 1242x2208px interface are 1.5 times the size of the elements on the 750x1334px interface, Therefore, in the process of adaptation, we directly changed the size of the interface image to 1.5 times the original size, then adjusted the size of the canvas to 1242x2208px, and finally adjusted the horizontal spacing of the interface ICONS and elements to complete adaptation.
Above said the general idea, let’s talk about how to adapt.
First run Command+Alt+I on the 750x1334px canvas, set the unit to percentage, set the width and height to 150%, and click “OK” to make the canvas 1125x2001px.
Then run Command+Alt+C on the 1125x2001px screen 1.5 times later (resize the canvas), click on the upper left corner of the “Position” grid, adjust the width and height to 1242 and 2208px, and click “OK”.
The above left image expands the canvas to the right image with the following adjustments:
- The icon on the right of the navigation bar is moved to the right to keep the original right margin, and the title is centered.
- The height of the first focus image is centered by 1.65 (1242/750=1.65), with a width of 1242px.
- ICONS on the right of the main entrance move to the right as the original right distance, the spacing of ICONS is equal width.
Note: The dividing line is still 1px.
3. 750×1334 upward adaptation 1125x2436px (@3x)
Compared with previous iOS devices released by Apple, the pixel resolution of iPhone X has changed to 1125x2436px (@3x). In practical work, we can still choose the familiar size of iPhone 7 (750x1334px) as the template for the design in order to facilitate the upward and downward adaptation. It’s just 290px in height; Design dimensions: 750x1624px (@2x). After the design is complete, expand the image size of the design draft by 1.5 times to get a 1125x2436px (@3x) design draft.
Note that the status bar has been increased from 40px to 88px, and 68px is reserved at the bottom of the label for the home page indicator, as shown below.
About home page indicator adaptation involves two things: the bottom TAB bar, toolbar operations such as the design, the background color will need to delay 68 px and populate the original color, such treatment can make the bottom design more concise and comfortable, no function operation, do not need fill color at the bottom of the page, simply cover page indicator.
For most pages that use waterfall flow, it’s just a change in screen height that can be ignored. However, for example: novice boot page, music player, and other need to single-screen display of the interface needs to be rearranged.
Ix. Specification of cut drawings
After the interface design is finalized, designers need to slice the icon provides development engineer, usually we only need to cut icon figure, words, lines and geometric shapes of some standard is not to need to cut figure, such as a search box just described it in the label size, and the size of the fillet, background color, opacity, Developers can achieve this effect with code.
1. Output slices
Rearrange the ICONS in the design draft on a new canvas to ensure the same spacing between ICONS of the same size. The advantage of this is to establish a control library for ICONS, which is conducive to the arrangement of ICONS.
After creating a guide line for each icon, use the slice function of PHOTOSHOP to follow the guide frame of each icon. Note that PNG slices should be output at the end (PNG has more color and detail and supports transparency).
In the specific operation, the first thing to do is to remove the background color of the canvas and make the canvas transparent. After slicing, execute file-Save as the Web format. Select PNG format in the dialog box and click “Save”.
Note: The background color block of the label bar icon in the figure is to ensure a uniform slice size. The reference line can be established according to the color block, and the color block should be removed when cutting the figure.
2. Name slices
The general specification for slice naming is interface _ function _ status.png. The name should be in English, do not start with a number or symbol, and use an underscore. For example, the name of a button whose home page is in normal state is [email protected]. The home page is home, the space button is BTN, and the status is normal. In order for the name to be correct, the designer should first communicate with the development engineer in collaboration.
10. Annotation of design draft
After the interface design is finalized, the designer needs to annotate the interface for the development engineers to refer to when restoring the interface. It is helpful for us to improve our work efficiency to use some professional annotation tools, such as Mark Man or PX Cook.
In a design draft needs to mark the content is the text size, thickness, color, opacity; Background color and opacity of the interface; The spacing between ICONS, lists, and text.
The function of interface annotation is to provide reference for the development engineer, so it is necessary to communicate with the development engineer before annotation to understand their working mode, and explain your matters needing attention after annotation, so as to complete the work more quickly and efficiently, and complete the restoration of visual height to the maximum extent.
conclusion
This paper sorting summary including the size and the distance between the control interface, format design, character design, design diagram of adaptation, mark, and so on a series of mobile client UI design specification, during this time access to a large amount of data, which took a week to finish the writing of this article, the hope is just engaged in UI design provide entry-level help designers.
As to why only summarizes the iOS system design specification, without the Android system design specifications, explain here, was also to cover the Android system design specification, but through the access to information found that the Android design specification is introduced few and far between, and do not have a unified standard, significance is not big, so the preparation of the omitted part of this specification.