Concentration is the essence: nine key points of iOS Human-Computer Interaction Manual

The minimum size of clickable elements is 44x44.

Take the iPhone 4S as an example, the PPI is 326, and the conversion formula of the PPI and screen size is: PPI = √ a ^ 2 + B ^ 2/c ^ 2a, B is the regional pixel size, c is the size ). Therefore, the formula can be reversed to obtain the actual size of the minimum click area of the iPhone 4S is 0.19in. In addition, we know that 1in = 25.4mm, so the minimum size of the iPhone 4S click on the screen is:

0.19*25.4 = 4.8

That is to say, on the iPhone 4S, the final design results should ensure that the minimum size of the operable elements should not be less than 4.8mm x 4.8mm, which is about the size of the adult index finger.

Maintain application consistency

The benefit of consistency is that the UI is unified and beautiful, and users can quickly get started with the original understanding of the product, reducing learning costs. The document details three points:

• Is it consistent with the iOS system?
• Whether the system in the application is unified
• Consistency between multiple versions

Some of the unified concepts are widely used, from interaction methods, icon definitions, text terminologies to UI components, operation results, etc. The ultimate goal is to make the user comfortable to use the product.

Provide positive feedback on user operations

The built-in iOS program provides visual feedback for each operation. For example, when a user clicks an item in the list, the background of the item becomes a highlight. Similarly, users also want to get similar feedback in our applications, and give feedback to them about the results of their operations and determine if the program is running. Therefore, we should:

• Immediate feedback on user operations
• Feedback on the progress and running status of operations with a long process

Select the status bar consistent with the program Style

Three status bar styles are provided officially. For example:

Therefore, we should define the status bar of different styles according to different application styles. For example, if the navigation bar is not transparent, do not select a transparent status bar.

Standard Style in the navigation bar

There are certain standards and requirements for the style of the navigation bar iOS, that is, an iOS standard navigation bar style:

-The return button is displayed on the left side of the navigation bar, with the title at the upper level-the title in the middle of the page in the face-to-face mode-the control that matches the current content on the right.

Do not create a multipart return button

For example:

Using the multipart return button can cause many problems:-The multipart control is too long and there is no blank title.-The selected status of a certain segment cannot be displayed. The more segments, the smaller the clickable area of each segment, the user wants to press a bad button-when the level is very deep, it is a problem to select which part of the level to display.

On the iPhone, the tab bar can only display up to five tabs at a time

If the program has more tabs, the tab bar can display the first four and the fifth one with "more" to present other projects in the List, such:

In addition, more than five tabs can be displayed in the tab bar on the iPad.

Do not provide a button to close the surfaced layer. Do Not Display anything on the surfaced layer.

IOS officially does not recommend the close button on the surfaced layer, but should disappear when the surfaced layer does not need to exist. For situations that do not need to exist, the official definition is as follows:

• When the user's operations on the surfaced layer have been completed
• When a user clicks a button outside of the surfaced layer or calls it
• When you click "cancel" or "finish" in the editing status

In addition, do not show anything on the surfaced layer unless it is a warning box. Of course, do not display the surfaced layer on the surfaced layer.

Style requirements for iOS icons

Each program should have a program icon. To adapt to different devices, we need to create icons of different sizes:

For iPhone and iPod touch-57x57-114x114 High Resolution) for iPad-72X72

In addition, when the icon is displayed on the user's desktop, iOS automatically adds highlights, projections, and rounded corners to the icon, therefore, to ensure that our icons match the enhanced effects provided by iOS, the icons we create should:

• 90-degree angle
• No highlights
• Do not use transparent layer

Finally, in any case, design standards are designed to survive. Such documents should serve as guidance and reference in the actual process of our product design, rather than blindly following them and being framed by these rules. We should try to understand the purpose and significance behind each of the instructions and entries in order to create better delivery and products.