Detail Achievement Excellence--Brief analysis of iphone user interface design Pristine

As a revolutionary product, the iphone (which refers to the iphone and ipod Touch, and of course the ipad) brings us a lot of unexpected ideas and surprises. Over the past two months and more, we have chewed the iphone-human-interface-guidelines carefully and learned the details and wisdom of the apple. Excited, excited, there are too many surprises to share with you. But in terms of time and energy, a 130-page full package is sure to overwhelm everyone. We have collected the advice of the professional designers of the iphone platform, plus a little experience of the translation process, and sorted out 11 design highlights. Finally, I hope this 130-page condensed fast food will not make you feel bad, enjoy yourself!

1. Understand the types of applications and their characteristics

The iphone platform has three types of applications:

Efficiency applications (productivity applications)

Utilities (Utility applications)

Immersion applications (immersive applications)

Each has its own different characteristics and application situations. Prior to design, if you can clearly understand the objectives and characteristics of the product, choose the right type of application to better meet the right.

Efficiency applications are used to help with daily tasks such as email, instant messaging, photo management and sharing. Users quickly view, jump, execute, complete, coherent action requires a simple interface, so that users can concentrate on the task itself. Such applications are typically accompanied by a natural hierarchy. So, table view can be useful in such software.

Fig. 1.1 Efficiency applications with hierarchical structure

Utilities are used to perform a simple task (such as calculators, weather reports), simple and easy to configure.

Figure 1.2 Utility "weather Report" and "Deep Sleep"

Immersion applications can provide users with the ultimate entertainment and gaming experience, such applications can be further subdivided into games and virtual simulation classes. This kind of application and the standard system interface is different, the user hopes this kind of application can bring the biggest entertainment to them, therefore, the interface design's free play degree is higher, the simulation, the lovable design style often can be just right.

Figure 1.3 Immersion applications

2. Familiar with system layout and control features

The IPhone operating system provides a very good UI library, and these standard controls and views are heavily researched to be truly useful. On the other hand, iphone users are already familiar with the software, for whatever reason, we should follow the IPhone's control specification without a better and more practical idea. At the very least, before we break the iphone's rule, "you moment-in understand the rules of the unreported you can breaks them." (You must understand the rules before you can break them).

The iphone provides a large and small UI component that can be broadly listed as follows (details of each control and view, please refer to the second part of the iphone user Interface design Guide):

Navigation bar, tab bar, toolbar and status bar

Pop-up dialog box, operator panel, and mode view

Table view (table views), text view, Web view (Web views)

Application controls (such as text boxes, paging monitors, rotary selectors, progress bars, more buttons, and so on)

3. Using metaphors

Metaphor provides an intuitive and logical connection to the visual cues and functions of the interface. Associating the elements and operations involved in the software with the real world can help users understand better.

The iphone's built-in memo app is a model for using metaphors. In addition to basic delete and mail these icons metaphor, the entire product's appearance: Brown head navigation, beige paper background, with meticulous line and vertical double line, just like a lovely little prepared. The user will know the purpose of the software as soon as the product corresponds to the entity.

The iphone OS metaphor is too numerous to follow, but if there is a "more appropriate" metaphor, you can take a chance.

4. At a glance, see point

The user will not be able to face the phone screen for a long time in the mobile scene they may "quickly turn on the music player and just jump to other apps or go on to other things" and don't assume that users have time to study how to use your application, and that a relatively fragmented situation requires that your application interface be as concise as possible. , at a glance, users can see immediately understand. There are generally three ways to simplify the interface:

Pruning software features: fewer features, more concise interface. The design of mobile products, subtraction is far more important than addition. Keep in mind the most important golden rule of mobile product design: Design The few features that are most commonly used for most users in mobile scenarios (Pick the few features,most frequently used,by the majority of your users, Most appropriate for the mobile context.

Reduce input: Reduce input as much as possible and provide users with options directly. such as the index list, not only user-friendly memory, but also can help users to quickly scan and directly selected, rotary selector, the row can be selected, reduce the time consuming typing while eliminating a wide range of error detection.

Avoid unnecessary interaction: the user is not as stupid as you think, and don't just remind them how to do it (the more you help explain how hard your software is), the more effective it is to guide users to the task quickly.

The built-in text messaging is too classic, the writer and the addressee to differentiate, information content through the chronological order down, the whole information back and forth history at a glance. The caller program is also excellent, and the redesigned digital keypad weakens the alphabet, highlighting the numbers, which in return can be a big, easy to click screen space.

Figure 4.1 Glance SMS history viewing and dialing calls

5. Consider the screen up and down

The visibility of the screen is best, whether it's a single hand operation or a two-hand operation. So, when designing an application, you should place the most commonly used information--generally a highly summarized information, such as navigation, or some general actions such as adding, completing, saving, and canceling--at the top of the screen.

The bottom of the screen is typically an accessible toolbar or a tab bar for switching views. Some of the more significant operations that appear in the lower half of the screen must be carefully considered in their arrangement design. As shown in Figure 5.1, the Operation Panel's Cancel button is put at the end, which encourages the user to read all the options, and the dark blue return button can be distinguished from the general button, even if the user does not read it and knows it is the return button. For some of the more significant operations (such as deletions), it is best to place them at the top of the panel because the top is easier to see, plus the red warning hints that users will be more cautious in choosing them.

Figure 5.1 button arrangement on the operator panel

6. Click area to provide fingertip size

If the key layout is too crowded, the user will be careful to spend more time to operate, the error also comes immediately. The simple and Easy-to-use interface space must reasonably control the button layout and interaction elements, making it faster and easier for users to click.

The old version of the built-in calculator keys are large, effective areas are 44*44px, very easy to click. The new version of the calculator in order to accommodate more buttons, the key size made a number of adjustments, although a slight decrease in height, but the user clicks up easy. For a frequently used "=" number, the entire target area is enlarged, and this distinction distinguishes between primary and secondary operations so that the user can be better guided.

Horizontal screen Calculator Full mode can accommodate more keys, the key size relative to the vertical screen is small, however, users click Up or handy.

Figure 6.1 Calculator keys for finger clicks

7. Flexible use of gesture support

Where to go, where the fingers follow, a variety of movements at any time to change, direct perception and equipment interaction, so natural direct "input", if flexible and appropriate to use, in addition to bring a good user experience, but also can greatly meet the user's desire to control.

Figure 7.1 Gesture Operation: Scrolling, long press, drag, pinch

Of course, one of the most important problems with a finger is that it is much larger than the mouse pointer and lacks sensitivity and precision. Some operations that use both the mouse and the keyboard, such as copying, pasting, and selecting text, are difficult to accomplish with your fingers. Design should consider the impact of this, avoid abuse. If your application supports more complex gestures (long press, pinch), make sure that users understand what they mean and provide direct response feedback for these gestures.

8. Consider the change in the direction of the screen

The iphone game appears in the screen design is more normal, is depending on the specific type of game. But the general efficiency of the application or utility, but also the screen has. Big Woods, what birds have, some users just like to often rotate the screen, but also a few. They either prefer horizontal browsing (such as memos, music) or want sideways to see more information (such as calculators). The design must fully consider the user's expectations. Sometimes the content of the interface can be rotated simply to meet their needs, but sometimes it also requires you to redesign it to show more content (such as a new interface for horizontal-screen concerts, showing all the songs).

Figure 8.1 iphoneqq Horizontal Screen input

Vertical screen In the case, the input keyboard width of only 320px, the average width of each button is only 32px (320/10, where the key and the key to ignore the interval), horizontal screen when each button width can reach 48px, a full 16px. If you were typing on a small screen, would you prefer that way?

If your application interface only supports a single direction display, the best thing to do is to keep the interface fixed and not change as the device changes direction. For example, when a user chooses to watch an ipod video, the video is displayed horizontally, regardless of the screen sideways. With this hint, the user will naturally rotate the screen to horizontal viewing. There is no need to flip the button.

9. Reasonable Feedback

Throughout all of the built-in apps, feedback is everywhere. Because most of the operation is through gestures (in fact, there are jitter, voice input) completed, through some obvious changes in response to the user to do the operation, can give users great confidence.

Figure 9.1 iphone version qq bucket Landlord's volume size adjustment

Enter QQ bucket landlord's game Settings page to adjust the volume size, the size of the finger cover the slider, in order to select the feedback to the user, both sides of the microphone icon also uses the external light-emitting style.

The IPhone OS offers many mechanisms for automatic feedback. Animation is one of them. Keep in mind, though, that the purpose of the animation is to enhance the user experience, rather than become the focus of blind pursuit of cool.

10. Optimize the startup process

IPhone OS4.0 used to be a single task, users often switch between multiple applications, a call comes, and users have to quit the application in progress. Make sure that the user starts fast enough when they come back to reduce the user's wait, and, in order to minimize the impact, save as much as possible of the results of the previous shutdown. It all seems to be an engineer's job, but as a good designer, you can do a lot of things about it.

The first screen displays a background image or a short loading animation when it is turned on. Even the ordinary efficiency of the application or simple utility gadget, if the boot can be displayed in advance of a background map, the background map and the start of the first interface smooth transition, this way can give users real-time feedback, but also to "shorten" the user waiting time.

Figure 10.1 Pre-loading background at startup

When running weather applications and iphone QQ, even a very short boot time, preload background can make people feel that the time to start waiting is shortened.

While the iphone OS4.0 is starting to support multitasking, don't be naïve enough to assume that the details of this background preload can be overlooked, and that applications should continue to provide the user with this fluid experience, after all, when users start to expect software to be "faster".

Keep it in mind when starting: do not eject a descriptive window, or a dazzling splash screen, or any other similar startup experience (this is the exception for network WiFi hints). This is a very abrupt way to let users immediately use your application.

11. Design Icons for Applications

An application icon is an icon that is placed on the iphone screen to start a program. iphone screen size only 480*320px, in this small screen, users want to drop as many icons, these icons must have a prominent visual effect to facilitate user identification. To do this, you can start with the following two aspects:

Beauty: Make sure the icons are simple and beautiful, attractive, so that users will be willing to let these icons long occupy a limited screen space.

Identifiable features: To allow users to easily find the application in a large number of icons, the icon must have its own characteristics, for the associated products, can be combined with the brand design.

Figure 11.1 "Penguin" icon, a look will know is QQ products

To keep in line with the built-in icons, the iphone OS typically adds some visual effects to the icon:

Fillet

Shadow effect

Reflective effect

Figure 11.2 Normal icons without visual effects added

Figure 11.3 Iphone operating system automatically add effect after the icon

To ensure that your icons can take advantage of these visuals, you should follow the following icon design specifications:

Picture format: PNG

Size: 57x57 pixel, 90° right angle (if the image does not conform to the standard, the iphone system will automatically adjust proportionally)

Don't have any shiny or shiny parts.

Do not use alpha transparency

Finally, the icon file is named Icon.png and placed in the program's resource bundle.

Note: If necessary, you can ask the iphone operating system not to add reflective effect, please read the iphone application Design Guide.

Write at the end: Thank you for your patient reading, further communication can be follow:http://t.qq.com/listyluo.
(This article originates from Tencent CDC Blog, please indicate the source when reprint)