[IOS]Human interface guidelines

IOS Human interface guidelines

UI Design Basics

Designing for IOS

IOS embodies the following themes:

• Deference. The UI helps people understand and interact with the content, but never competes with it.(顺从，控件帮助用户使用。)
• Clarity. Text is legible at every size, icons are precise and lucid, adornments are subtle and appropriate, and a sharpened focus on functionality motivates the design.（清晰，包括内容和控件布局）
• Depth. Visual layers and realistic motion impart vitality and heighten people’s delight and understanding.（吸引用户的眼球）

Whether you’re redesigning an older app or creating a new one, consider approaching the job in this way:

• First, look past the UI to the app’s core functionality and affirm its relevance.
• Next, use the themes of iOS to inform the design of the UI and the user experience. Add details and embellishments with care and never gratuitously.（用心增加内容细节和装饰）
• Finally, be sure to design your UI to adapt to various devices and modes so that users can enjoy your app in as many contexts as possible.（适应不同的设备）

Throughout the process, be prepared to defy precedent, question assumptions, and let a focus on content and functionality motivate every design decision.（敢于挑战先例，只关注内容和功能。）

Defer to content

Here are some ways to make sure that your designs elevate functionality and defer to the user’s content.( the user’s content is at its heart. 内容最重要！)

• Take advantage of the whole screen.

• Reconsider visual indicators of physicality and realism.（Bezels, gradients, and drop shadows sometimes lead to heavier UI elements that can overpower or compete with the content. Instead, focus on the content and let the UI play a supporting role. 关注内容，让控件起辅助作用）

• Let translucent（半透明） UI elements hint at the content behind them. （Translucent elements—such as Control Center—provide context, help users see that more content is available, and can signal transience. ）

Provide Clarity

Providing clarity is another way to ensure that content is** paramount** in your app. Here are some ways to make the most important content and functionality clear and easy to interact with.

• Use plenty of negative space.（Negative space makes important content and functionality more noticeable and easier to understand. Negative space can also impart a sense of calm and tranquility, and it can make an app look more focused and efficient.）(负面控件可以使内容更加的突出和易于理解，并且让app显得专注而高效。)

（Negative space, in art, is the space around and between the subject(s) of an image. Negative space may be most evident when the space around a subject, not the subject itself, forms an interesting or artistically relevant shape, and such space occasionally is used to artistic effect as the “real” subject of an image. ）From wikipedia.

• Let color simplify the UI. (A key color—such as yellow in Notes—highlights important state information and subtly indicates interactivity. 单一化的颜色可以强调某些重要的内容。)

• Ensure legibility by using the system font.（ San Francisco (the iOS system font) works with Dynamic Type to automatically adjust letter spacing and line height so that text is easy to read and looks great at every size. 使用系统字体可以确保清晰度。）

• Embrace borderless buttons.（使用没有边框的按钮。）（By default, all bar buttons are borderless. In content areas, a borderless button uses context, color, and a call-to-action title to indicate interactivity.）

Use Depth to Communicate

iOS often displays content in distinct layers that convey hierarchy and position, and that help users understand the relationships among onscreen objects.

Calendar uses enhanced transitions to give users a sense of hierarchy and depth as they move between viewing years, months, and days. In the scrolling year view shown here, users can instantly see today’s date and perform other calendar tasks.

Conclude

This part is talking about how IOS designed to make user focus on the content. So whenever designing what kinds of app, we must pay attention to if the user can easy find tha main content. What’s more, we must not make UI element too gaudy. Easy and clear are the most important part in an IOS app.

IOS App anatomy(结构)

The UI elements provided by UIKit fall into four broad categories:

• Bars. Bars contain contextual information that tells users where they are and controls that help users navigate or initiate actions.（类似于一个位置示意器？)
• Content views. Content views contain app-specific content and can enable behaviors such as scrolling, insertion, deletion, and rearrangement of items.
• Controls. Controls perform actions or display information.
• Temporary views. Temporary views appear briefly to give users important information or additional choices and functionality.

Here’s an example of how views and view controllers can combine to present the UI of an iOS app.

NOTE
An iOS app includes a window. But—unlike a window in a computer app—an iOS window has no visible parts and it can’t be moved to another location on the display. Most iOS apps contain only one window; apps that support an external display can have more than one.

Conclude

This part is talking about the anatomy of IOS elements. We should put it in our heart whenever we design a view in an app.

Adaptivity and Layout

Build in Adaptivity

iOS defines two size classes: regular and compact. The regular size class is associated with expansive space and the compact size class is associated with constrained space. To characterize a display environment, you specify a horizontal size class and a vertical size class. As you might guess, an iOS device can use one set of size classes for portrait orientation and a different set of size classes for landscape.

NOTE

Within a size class, continue to use Auto Layout to make small layout adjustments, such as stretching or condensing content. To learn more about using Auto Layout, see Auto layout

Provide a Great Experience in Each Environment

• Maintain focus on the primary content in all environments. (This is your highest priority. People use your app to view and interact with the content they care about. Changing the focus when the environment changes can disorient people and make them feel they’ve lost control over the app.)
• Avoid gratuitous changes in layout.(A comparable experience in all environments lets people maintain their usage patterns when they rotate a device or run your app on a different device. )

• **Be straightforward if your app runs in only one orientation. **People expect to use your app in different orientations, and it’s best when you can fulfill that expectation. But if it’s essential that your app run in only one orientation, you should:

  Avoid displaying a UI element that tells people to rotate the device. Running in the supported orientation clearly tells people to rotate the device, if required, without adding unnecessary clutter to the UI.
  Support both variants of an orientation. For example, if an app runs only in landscape, people should be able to use it whether they’re holding the device with the Home button on the right or on the left. And if people rotate the device 180 degrees while using the app, it’s best if the app responds by rotating its content 180 degrees.
  

* If your app interprets changes in device orientation as user input, handle rotation in app-specific ways. **For example, a game that lets people move game pieces by rotating the device can’t respond to device rotation by rotating the screen. In a case like this, you should launch in both variants of the required orientation and allow people to switch between the variants until they start the main task of the app. As soon as people begin the main task, begin responding to device movement in app-specific ways.

Use Layout to Communicate

• Make it easy to focus on the main task by elevating important content or functionality.
  

• **Use visual weigth and balance to show users the relative importance of onscreen elements.**Large items catch the eye and tend to appear more important than smaller ones.

• **Use alignment to ease scanning and communicate groupings or hierarchy.
  **Alignment tends to make an app look neat and organized and it gives users places to focus while they scroll through screenfuls of information.
• **Make sure that users can understand primary content at its default size. **For example, users shouldn’t have to scroll horizontally to read important text, or zoom to see primary images.
• **Be prepared for changes in text size.
  **
• As much as possible, avoid inconsistent appearances in your UI. In general, elements that have similar functions should also look similar.
• Make it easy for people to interact with content and controls by giving each interactive element ample spacing.