Touch screen mobile phone click the little secret area

Do http://www.aliyun.com/zixun/aggregation/11267.html "> touch screen mobile phone product design, pay attention to all the clickable elements have enough click area, but this does not mean that you want to put all Button icon links are designed large enough, the phone's visual focus and focus of the operation is not the same, the focus of the operation can be enlarged or move the click area.

Here to share a few click on the little secret area, to help you solve the problem of operating accuracy.

iPhone's own control Button on the NavigationBar, the Item on the TabBar, the ButtonItem on the ToolBar, the actual touch area is magnified.

Although the action button on the iPhone's navigation bar is only 29px high, its actual touch area is about 5px above the entire navigation bar, roughly 44px + 5px, so users do not have to be careful to click the back button And the button is bigger than it looks.

If there is a button in the bottom area of ​​the navigation bar, or input area, clicking the button below often triggers the button on the navigation bar, which may be encountered by many developers. I have seen many similar problems on Cocochina, such as wyx Encountered problems, such as dave encountered problems.

Similarly, the microblogging microblogging Sina microblogging interface is a list, when users want to edit the first line of text, click the text often mistaken touch the top of the operation bar to cancel or send. With the Weibo client is also the bottom of the top navigation bar has a row of operating icons, or more likely to trigger misuse.

The clickable area in the bottom tab bar is also about 5 pixels more than the visual focus. Tab switching is a common operation, so a small change helps users improve the accuracy of tab switching.

However, because of the expansion of the TabBar click area on the iPhone, if you place a manipulable area on the TabBar, it is harder to click. Finally, applications such as Foursquare and USA today circumvent the problem by using a custom TabBar.

About and settings are often made translucent icon, floating in the interface, if the operating focus = visual focus, then the user can only be a sharpened finger to the cup, but fortunately these two buttons the actual focus of the operation than The visual focus is much larger, ensuring a sufficiently accurate click.

Android4.0 provides a valid touchable UI element standard is 48dp, in general, 48dp into a physical size, about 9 mm. The recommended target size is 7 to 10 millimeters, which is consistent with the iPhone, an area where the user's finger can be accurately and comfortably touched.
As shown, your UI element may be less than 48dp, the icon is only 32dp, the button is only 40dp, but their actual operational focus is 48dp.

As the user in a variety of operations, we need to ensure that they click on the appropriate element, so under normal circumstances, the right hand-held users, landing will be right-sided, see below:

Our UER divides the screen of the mobile phone into 6 * 12 clickable focal points. From the point-of-click monitoring of the user, we can see that a large part of the user of the right hand-held plane has a great deviation from the drop point and the visual focus. The deviation Has a certain regularity. The bottom right of the screen is particularly noticeable.

If your application is operation-intensive, you can consider adjusting the effective click area, the overall offset of a few pixels from right to down, the accuracy will be improved.

## This section hopes to have a similar study of students can discuss ##

Of course, there are still many situations in which we can not solve the problem of zooming in and out of focus, when two manipulable elements do come closer. This time, iPhone built-in applications will be clever use of blank layout to avoid false clicks.

For example, the input box of the iPhone system, if the right button to send the box, we can find the right there is a clear blank, due to the difference between Chinese and English fonts, Chinese slightly more than English left blank. This blank, on the one hand is to avoid the send button with the focus too close to the misuse of the problem, on the one hand to leave enough space for the scroll bar.

And with all the delete button input box, the text from all the delete button will have an appropriate blank, to avoid switching cursor may lead to misuse.

When faced with the problem of focus, we can use to increase the line spacing, spacing and spacing of the way to solve the problem of clickable area.

Finally, a little long-winded a small icon element click area implementation, Method 1: UI provides a transparent click area icon is a transparent figure above a small icon; Method 2: UI provides a larger point of the transparent figure , To cover the icon above, point to the above to perform the operation; Method 3: Program staff to achieve their own, the method I ask them, hehe.

Source Address: http://elya.cc/2012/03/06......design-focus/