Shulou(Shulou.com)06/02 Report--

This article will explain in detail what are the main points about iOS human-computer interaction. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

The minimum size of clickable elements is 44 × 44 points.

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

0.19*25.4=4.8mm

In other words, on the iPhone 4S, the final effect of our design should be to ensure that the minimum size of the user's actionable element is not less than 4.8mmx4.8mm, which is about the size of an adult's index finger.

Maintain application consistency

The advantage of consistency is that the interface UI is unified and beautiful, and users can use the original understanding of the product to get started quickly, reducing the cost of learning. Three points are specifically mentioned in the document:

Is it unified with the iOS system?

Whether to maintain the unity of the system in the application

Whether to maintain unity between multiple versions

Among them, the unified part has a wide range of concepts, from interaction mode, icon definition, copywriting term meaning to UI components, operation results and so on. The ultimate goal is to make users comfortable to use the product.

Give positive feedback on user actions

IOS's official built-in program provides visual feedback to users on every action. For example, when a user clicks a list item, the background of the item becomes highlighted. Similarly, users want to get similar feedback in our application, which tells them what the result of the operation will be and to make sure the program is running, so we should:

Give immediate feedback on the user's actions

Give feedback on progress and running status for longer process operations

To select a status bar that is consistent with the program style

Three different status bar styles are officially available. As shown below:

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

Standard style of the navigation bar

There are certain standards and requirements for the navigation bar style iOS. The following figure shows an iOS standard navigation bar style:

Among them-the left side of the navigation bar is the return button with the title of the upper level-the middle is the title of the page facing the face-and on the right is the control that matches the current content.

Do not create segmented return buttons

As shown below:

Using the segmented return button will cause a lot of problems:-the segmented control is too long to put the title-unable to show the selected state of a segment, the more segments, the smaller the clickable area of each segment, and the user wants to press a difficult button-when the level is very deep, it is a problem to choose which part of the level to display.

On iPhone, the tab bar can only display less than 5 tabs at a time

If the program has more tab,tab columns to show the first four, and the fifth to put a "more", render the rest of the items as a list, as shown in the following figure:

In addition, on iPad, the tab column can display more than 5 tab

Do not provide buttons to close the floating layer, do not display anything above the floating layer

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

When the user's operation on the floating layer has been completed

When the user clicks the button outside the floating layer or summons it

When the user clicks "cancel" or "finish" in the editing state

In addition, do not display anything on the floating layer unless it is a warning box. Of course, don't show the floating layer above the floating layer.

Style requirements for iOS icons

Every program should have a program icon, and in order to adapt to different devices, we need to create icons of different sizes:

For iPhone and iPod touch-57 × 57-114 × 114 (high resolution) is iPad-72 × 72

In addition, because iOS automatically adds highlights, projections, rounded corners (forbidden) and other effects to icons when they are displayed on the user's desktop, in order to ensure that our icons match the enhanced effects provided by iOS, the icons we make should:

There is an angle of 90 degrees

No highlight effect

Do not use transparent layer

In any case, the design specification is that the dead are alive. This kind of document should play a guiding and reference role in the actual process of our product design, rather than blindly follow and be bound by these rules and regulations. We should try to understand the purpose and meaning behind each of these instructions and items, so as to create better delivery and products.

This is the end of this article on "what are the main points of iOS human-computer interaction". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.