iPad用户体验守则.doc

iPad用户体验守则Content and interactivity are paramount in the iPad user experience. The best iPad applications elevate content and interactivity by doing three things really well:iPad用户体验最主要体现在内容和交互： They downplay application UI so that the focus is on the content that people want. 淡化程序UI，以便用户关注所需的内容。 They present the content in beautiful, often realistic ways. 美观的内容形式，富有真实感。 They take full advantage of device capabilities to enable enhanced interaction with the content. 充分利用设备的性能来增强内容的交互性。 The primacy of content and interactivity inform the guidelines in this chapter. Keep this in mind as you design your iPad application.在开发你自己的iPad应用时，请谨记这篇守则中提到的关于内容和交互性的一切。Aim to Support All Orientations 支持所有方位Being able to run in all orientations is an important factor in the success of your iPad application. The large screen mitigates peoples desire to rotate the device to landscape to “see more.” And, because people dont pay much attention to the minimal device frame or the location of the Home button, they dont view the device as having a default orientation. This leads people to expect applications to run well in the device orientation theyre currently using. As much as possible, your application should encourage people to interact with iPad from any side by providing a great experience in all orientations.The difference between landscape and portrait dimensions can significantly affect how your UI fits onscreen. Precisely how you respond to rotation might vary, but you should make every effort to abide by the following guidelines.优秀iPad程序的其中一个重要因素是可以在所有方位上运行。竖向的大屏幕可以满足用户浏览内容的需求（当竖屏幕较小时，用户就会将屏幕旋转为横屏幕，这样一行就可以显示较多的文字）。用户不太会注意最小设备结构（minimaldevice frame；使用iPhone时，用户单手握住手机时，屏幕多为竖向显示；而双手使用iPad，屏幕的显示方位并不能确定）或者home按键的位置，他们不认为设备有默认方位。这就导致用户期望程序可以在当前方位上运行。所以程序尽量满足iPad各方位的运行要求。 Maintain focus on the primary content. This is your highest priority. People use your application to view and interact with the content they care about. Altering the focus on that content in different orientations can make people feel that theyve lost control over the application. 保证以首要内容为重点。当旋转iPad的方位时，如重点显示的内容发生变化，用户会感觉对程序失去控制。 Consider changing how you display auxiliary information or functionality. Although you should make sure that the most important content is always in focus, you can respond to rotation by changing how you provide secondary content.旋转时如何显示辅助信息或者功能。尽管能保证上一条，还要考虑如何显示较为次要的信息。In Mail, for example, the lists of accounts and mailboxes comprise secondary content (the main content is the selected message). In landscape, secondary content is displayed in the left pane of a split view; in portrait, its displayed in a popover. 例如邮箱功能中，首要内容时发邮件，次要内容是联系人和收件箱的列表。横屏的次要内容显示在左边的分视图中竖屏的次要内容显示在气泡框中。 Or, consider a game that displays a rectangular game board in landscape. In portrait, the game needs to redraw the board to fit well on the screen, which might result in additional space above or below the board. Instead of vertically stretching the game board to fit the space or leaving the space empty, the game could display supplemental information or objects in the additional space. Both of these examples maintain the users focus on the primary content and take best advantage of the current screen dimensions without altering the primary functionality of the application.再如，横屏时，一款游戏以长方形显示，当旋转到竖屏时，需要调整屏幕上的显示区域，游戏显示边框的上面或者下面增加显示空间，用于显示辅助信息，而不是垂直拉伸显示区域来撑满整个屏幕。Avoid radical or gratuitous changes in layout. The large iPad screen allows you to provide a similar UI layout in all orientations. For example, if you display images in a grid while in landscape, you dont need to display the same information in a list while in portrait (although you might adjust the dimensions of the grid). Focus on providing a consistent experience in all orientations, even if the layout of secondary information might change. A comparable experience in all orientations allows people to maintain their usage patterns when they rotate the device.When possible, avoid reformatting information and rewrapping text on rotation. Strive to maintain a similar format in all orientations. Especially if people are reading text, its important to avoid causing them to lose their place when they rotate the device.避免布局变化过大或者无缘由地改变。所有方位中都显示相似的UI布局旋转时尽可能保留信息和文本的原有格式。尤其阅读文本时，重要的是避免旋转之后用户找不到读到哪儿了。如果非要对页面重新布局，可以使用动画帮助用户理解当前页面的变化。例如，当旋转时要必须增加或者移除文本框时，可以选择隐藏动作并在新布局中简单地淡出。为了有助于合理地设计旋转动作，可考虑在真实的生活中是如何和它们交互的。Avoid providing a UI element or defining a rotation gesture that rotates your content. Instead, people should be able to rotate your content by rotating the device.避免使用UI元素或者定义一个旋转的手势来完成旋转动作。应该是内容随着iPad的旋转而旋转。Provide a unique launch image for each orientation. When each orientation has a unique launch image, people experience a smooth application start regardless of the current device orientation. In contrast with the Home screen on iPhone, the iPad Home screen supports all orientations, so people are likely to start your application in the same orientation in which they quit the previous application. See “Create a Launch Image for Each Orientation” for more information on iPad launch images.为每个显示方位各提供一个启动图片。比如提供1004768和7481024的图片来满足两个方位的显示要求。Think twice before preventing your application from running in all orientations. People expect to use your application in whichever orientation theyre currently holding their iPad, and its best when you can fulfill that expectation. In certain cases, however, an application needs to run in portrait only or in landscape only. If its essential that your application run in only one orientation, you should:仔细考虑程序是否可以在所有方位上运行。有些程序只能在横屏或者竖屏下显示，此时： Launch in your supported orientation, regardless of the current device orientation. For example, if your game or media-viewing application runs in landscape only, its appropriate to launch in landscape, even if the device is currently in portrait. This way, if people start your application in portrait, they know to rotate the device to landscape to view the content. 显示程序为正常显示方式，无论当前iPad是什么方位。 Avoid displaying a UI element that tells people to rotate the device. Launching in your supported orientation clearly tells people to rotate the device, if required, without adding unnecessary clutter to your UI. 避免使用UI元素来告知用户旋转设备。 Support both variants of an orientation. For example, if your application runs only in landscape, people should be able to use it whether theyre holding the device with the Home button on the right or on the left. And, if people rotate the device 180 degrees while using your application, its best if you can respond by rotating your content 180 degrees. 支持180度旋转。 If your application interprets changes in device orientation as user input, you can handle rotation in application-specific ways. For example, if your application is a game that allows people to move game pieces by rotating the device, you cant respond to device rotation by rotating the screen. In a case like this, you should launch in either variant of your required orientation and allow people to switch between the variants until they start the main task of the application. Then, as soon as people begin the main task, you can begin responding to device movement in application-specific ways.可以特殊处理输入式旋转动作。有些游戏把旋转设备当成操作方式，这时候横竖屏切换时，可不改变游戏的显示方位。Enhance Interactivity (Dont Just Add Features) 增强交互The best iPad applications give people innovative ways to interact with content while they perform a clearly defined, finite task. Resist the temptation to fill the large screen with features that are not directly related to the main task. In particular, you should not view the large iPad screen as an invitation to bring back all the functionality you pruned from your iPhone application.最好的iPad程序在用户执行明确的任务时提供新颖的交互方式。不要为了填满整个大屏幕而增加一些和主要任务没有直接关联的功能，而是提升程序的用户体验。 To make your iPad application stand out, concentrate on ways to amplify the user experience, without diluting the main task with extraneous features. For example: A book-reader application that allows people to read books and keep track of reading lists can provide a much more enjoyable reading experience on the large screen. Instead of making people transition to another screen to manage their reading lists, the application can put the list in a popover and allow people to copy favorite passages into it. The application can also let people add bookmarks and annotations to the text, and help them trade their lists with others or compare their progress against a central repository of lists. A fighter pilot game might enable a translucent heads-up display over the main view. Players can tap realistic cockpit controls to engage the enemy or locate themselves on a map overlay. A soccer playing game can display a larger, more realistic playing field and more detailed characters, and allow people to manage their teams and customize the characters. It can also allow people to see information about characters without leaving the field view. Finally, it can enable a multiplayer mode in which two people can pit their teams against each other. A screen writing application might provide ways to switch between a plot view and a character view without leaving the main context. Writers can switch between these views to check details as they write in the main view. 例如读书程序中容许用户阅读时如能保留路径会提升阅读体验，不需要跳转到另外一个页面而是使用气泡框来变更路径。程序可以让用户在文本中增加书签和注释，帮助用户交换书目或者对比阅读进度。 Flatten Your Information Hierarchy 信息扁平化Use the large iPad screen and new UI elements to give people access to more information in one place. Although you dont want to pack too much information into one screen, you also want to prevent people from feeling that they must visit many different screens to find what they want.In general, focus the main screen on the primary content and provide additional information or tools in an auxiliary view, such as a popover. This gives people easy access to the functionality they need, without requiring them to leave the context of the main task.With the large iPad screen, and UI elements such as split view and popover, you have alternatives to the one-level-per-screen structure of many iPhone applications. For example, you can:iPad的大屏幕和新UI元素可以显示更多的信息，使用的得当可以避免寻找信息时跳转的次数过多,因此也改变iPhone的单屏显示结构。例如：Use a navigation bar in the right pane of a split view to allow people to drill down into a top-level category that is persistently displayed in the left pane. This flattens your information hierarchy by at least one level, because two levels are always onscreen at the same time. Settings displays device and application settings in this way, as shown in Figure 3-1. (See “Split View” for usage guidelines.)Use a navigation bar in the left pane of a split view to allow people to drill down through a fairly shallow hierarchy. Then, display the most specific information (that is, the leaf nodes in the hierarchy) in the right pane. This, too, flattens your hierarchy by displaying two levels onscreen at one time. Mail in landscape uses this design to display the users mailbox hierarchy in the left pane, as shown in Figure 3-2; individual messages are displayed in the right pane, as shown in Figure 2-2. (See “Navigation Bar” for usage guidelines.)使用分栏。两级的内容同时显示使得信息扁平化。Use a popover to enable actions or provide tools that affect onscreen objects. A popover can display these actions and tools temporarily on top of the current screen, which means people dont have to transition to another screen to get them. Mail in portrait uses a popover to display the users account and mailbox hierarchy, as shown in Figure 3-3. (See “Popover”for usage guidelines.)使用气泡框。顶部的气泡框可以显示控件或者工具，不必切换屏幕即可完成操作。Use a segmented control in a toolbar to display different perspectives on the content or different information categories. In this way, you can provide access to these perspectives or categories from a single bar at the top (or the bottom) of the screen. iTunes uses a segmented control in a top-edge toolbar to provide different perspectives on the content in a category, as shown in Figure 3-4. (See “Toolbar” and “Segmented Control” for usage guidelines.)工具栏中显示分段控件。分段控件可以显示并列的信息。Use a tab bar to display different information categories or, less often, different application modes. In iPad applications, a tab bar is more likely to be used as a filter or category switcher than as a mode switcher. As shown in Figure 3-5, iTunes uses a tab bar to give people access to different categories of media. Its worth changing your information architecture to avoid multiple, parallel modes, if this allows you to avoid using a tab bar to swap in different screens. (See “Tab Bar” for usage guidelines.)使用标签栏。标签栏显示不同种类信息或者是不同的程序模块。 Reduce Full-Screen Transitions 减少全屏切换Closely associate visual transitions with the content thats changing. Instead of swapping in a whole new screen when some embedded information changes, try to update only the areas of the user interface that need it. As a general rule, prefer transitioning individual views and objects, not the screen. In most cases, flipping the entire screen is not recommended.When you perform fewer full-screen transitions, your application has greater visual stability, which helps people keep track of where they are in their task. You can use UI elements such as split view and popover to lessen the need for full-screen transitions.相似的视觉元素，而在某一区域变更内容。普遍的规则是宁愿转换单独的视图或者组件，也不全屏切换，保证视觉稳定性，帮助用户理解自己所处的位置。 Enable Collaboration and Connectedness 增强协作和联系People view iPad as a personal device, but its convenient size also encourages physical collaboration and sharing with others.Think of ways people might want to use your application with others. Expand your thinking to include both the physical sharing of a single device and the virtual sharing of data. For example, two people might be able to play a game on opposing sides of an onscreen board. Or a band application might allow different people to play different instruments together on a single device.People expect to be able to share information thats important to them. When it makes sense in your application, make it easy for people to interact with others and share things like their location, opinions, and high scores.Most applications can add value by allowing people to go beyond the application and share data with other tools they use. For example, an iPad application can act as a mobile complement to a computer application. Or, an iPad application might allow its users to communicate with the users of the iPhone version of the application.用户将iPad视为私人设备，但是它合宜的尺寸可以加强真实的协作和分享。 Add Physicality and Heightened Realism 真实感Whenever possible, add a realistic, physical dimension to your application. The more true to life your application looks and behaves, the easier it is for people to understand how it works and the more they enjoy using it. For example, people instantly know how to use the realistic address book that Contacts portrays (shown in Figure 3-6).As you work on adding realistic touches to your application, dont feel that you must strive for scrupulous accuracy. Often, an amplified or enhanced portrayal of something can seem more real, and convey more meaning, than a faithful likeness. As you design objects and scenes, think of them as opportunities to communicate with your users and to express the essence of your application.Use animation to further enhance realism in your application. In general, its more important to strive for accuracy in movement than in appearance. This is because people accept artistic license in appearance, but they can feel disoriented when they see movement that appears to defy physical laws. As much as possible, make sure your virtual views and controls mimic the behavior of the physical objects and controls they resemble. Convincing animation heightens peoples impression of your application as a tangible, physical realm in which they want to spend time.程序显示和现实生活越为相似，用户就越容易理解程序如何操作并喜欢使用。但也不必过于精确，通常夸张的事物看起来更为真实并能传递更多的意义，当做是和用户交流并表述程序本质的一次机会。使用动画进一步地增强程序的真实感。通常，动作的真实感比程序的外观更为重要，不符合物理规律的动作会让用户感觉到迷惑。 Delight People with Stunning Graphics 令人惊叹的图形The high-resolution iPad screen supports rich, beautiful, engaging graphics that draw people into an application and make the simplest task rewarding. iPad showcases your applications artwork, so you should consider hiring a professional artist to create first-rate graphics that people will admire.One way to increase the perceived value of your application is to replicate the look of high-quality or precious materials. For example, if the effect of wood, leather, or metal is appropriate in your application, take the time to make sure the material looks realistic and valuable. As shown in Figure 3-7, Notes reproduces the look of fine leather and meticulous stitching.If your artwork is not already high resolution, you may need to recreate it. In most cases, scaling up your artwork is not recommended as a long-term solution. Instead, try creating your artwork in a dimension that is larger than you need, so you can add depth and details before scaling it down. This works especially well when the dimension of the original art file is a multiple of the dimension you need. Then, if you also use an appropriate grid size in your image-editing application, youll be able to keep the scaled-down art file crisp and reduce the amount of retouching and sharpening you need to do.In addition to updating all your textures, effects, and images, make sure you remove from your code any hard-coded values that identify screen dimensions.Update your existing launch images and create additional ones, if necessary (see “Create a Launch Image for Each Orientation”).Create a large application icon (see “Create a Beautiful Application Icon”).高分辨率的iPad屏幕所支持丰富、美观和动人的图形对用户富有吸引力，因此可以尝试增加程序中图形的深度和细节。 De-emphasize User Interface Controls 弱化界面控件Help people focus on