Overview

• Design Principle

1.Aesthetic Integrity
2.Consistency
3.Direct Manipulation
4.perceptible Feedback
5.Metaphors---->app’s virtual objects and actions are metaphors for familiar experiences
6.User Control---->The best apps find the correct balance between enabling users and avoiding unwanted outcomes. An app can make people feel like they’re in control by keeping interactive elements familiar and predictable, confirming destructive actions, and making it easy to cancel operations, even when they’re already underway.
忠言逆耳不可行，要用最自然的方式展示提示信息

• What's New in iOS 10

Now, people add widgets to the Search screen, which is accessed by swiping to the right on the Home screen and the Lock screen. You can also show a widget above the quick action list that appears when people use 3D Touch to press your app icon on the Home screen. The design and behavior of widgets has also changed. Be sure to review and update your existing designs accordingly.

增加针对Widgets和3D Touch的交互设计，提升notification的展现形式和传达效率

Apps can integrate with Messages by implementing a messaging extension that appears below a conversation in Messages and lets people share app-specific content with friends. Apps can share text, photos, videos, stickers, and even interactive content, such as an in-message game.

分享功能推荐和Message做整合，即可以将text、photos、videos、stickers等以message的形式进行分享

Apps can integrate with Siri and let people use their voice to perform specific types of app-specific actions, such as making calls, sending messages, and starting workouts.

在合理的使用场景下，提供Siri语音控制功能

• Interface Essentials

Most iOS apps are built using components from UIKit, a programming framework that defines common interface elements. This framework lets apps achieve a consistent appearance across the system, while at the same time offering a high level of customization. UIKit elements are flexible and familiar. They’re adaptable, enabling you to design a single app that looks great on any iOS device, and they automatically update when the system introduces appearance changes. The interface elements provided by UIKit fit into three main categories:

ps：一款iOS设备上的app，一定要看起来像iOS app，这也是从业人员必须对guidline了然于胸的意义

Interaction

• 3D Touch

peek-->向上滑动

Design big-enough peek views. Design a peek view that's large enough so that fingers don’t obscure its content. Make the peek detailed enough for people to decide whether to press a little deeper to fully open (pop) the item.

Adopt Peek and Pop consistently.
同一个app里是否使用peek和pop，效果要统一，否则会让用户在使用时感到困惑

Allow every peek to be popped.
Don’t enable peeking and an edit menu for the same item.

Don’t make peek the only way to perform item actions.

不同的pressure作用在屏幕上会产生不同的效果，即文档中提到的peek和pop两种效果，设计中需要考虑如何加以利用

• Accessibility

iOS offers extensive accessibility features for users with vision loss, hearing loss, and other disabilities. Most UIKit-based apps can be made accessible with very little effort, allowing more people to use your app while providing an equally engaging experience for all.
确保app在设计的过程中，对disabilities更友好

• Audio
• Authentication

authentication

Delay sign-in as long as possible. People often abandon apps when they are forced to sign in before doing anything useful. Give them a chance to fall in love with your app before making a commitment to it. In a shopping app, let people browse your merchandise immediately upon launch and require sign-in only when they're ready to make a purchase. In a media streaming app, let people explore your content and see what you have to offer before signing in to play something.

让信息验证变成一件自然而然的事情，避免在user没获得充分的说明和准备之前让其提供私人信息

Explain the benefits of authentication and how to sign up for your service. If your app requires authentication, display a brief, friendly explanation on the login screen that describes the reasons for the requirement and its benefits. Also, remember that not everyone using your app has an account from the start. Make sure you explain how to get one, or provide a simple in-app way to sign up.

Minimize data entry by showing appropriate keyboards. When asking for an email address, for example, show the email keyboard screen, which includes helpful data entry shortcuts.

• Data Entry

Make data entry as efficient as possible. Consider using a picker or table instead of a text field, for example, because it’s easier to choose from a list of predefined options than to type a response.
通过用picker或table代替text field的方式，尽量简化用户填写信息的过程

Get information from the system whenever possible.
Provide reasonable default values.
如无必要，勿增实体

Before enabling a Next or Continue button, make sure all required fields have values. Use the enablement of the button as a visual cue that it’s time to proceed.
Dynamically validate field values.

Ease navigation through value lists.
繁复的流程需要navigation为用户缓解焦虑感

Show a hint in a text field to help communicate purpose.

• Feedback

Your app can also ask the system to generate different types of haptic feedback.
iOS manages the strength and behavior of this feedback.

在触感反馈和声音上，系统提供了有层次的辅助交互提示效果

Use haptics judiciously.
In general, provide haptic feedback in response to user-initiated actions.
Don’t redefine feedback types.
Fine tune your visual experience for haptics.
Synchronize haptics with accompanying sound.

• File Handling

• First Launch Experience

Provide a launch screen.
Launch in the appropriate orientation.(Pocket、iBooks等和书籍、文件相关的app会提供Lanscape mode这种方式）
Make learning fun and discoverable.
Don’t ask people to rate your app too quickly or too often.Always provide a way to opt out of rating prompts and never force users to rate your app.

• Gestures

People generally expect the following standard gestures to work the same across the system and in every app.

tap

drag

flick

swipe

touch & hold

shake

In games and other immersive apps, custom gestures can be a fun part of the experience. In other apps, it’s best to use standard gestures so extra effort isn’t needed to discover or remember them.

除了部分需要沉浸式体验的app，手势的创新会加大用户的学习成本，不推荐;
另外也不要将系统经典的手势轻易赋予新的含义，这样会让用户感到困惑；

Don’t block systemwide gestures.

Offer shortcut gestures to supplement, not replace, interface-based navigation and actions.
Many system apps include a navigation bar that provides a clear, tappable button back to the previous screen. But users can also navigate back by swiping from the side of the screen.

Use multifinger gestures to enhance the experience of some apps.
这种情况一般出现在game或绘画类的app中

• Loading

loading

Customize loading screens.
Show content as soon as possible.

• Modality 模态

modality

Minimize the use of modality.
Provide an obvious and safe way to exit a modal task.
Don’t display a modal view above a popover.
Modal view style：
1、Full screen
2、Page sheet
3、Form sheet
4、Current context

• Navigation

In iOS, there are three main styles of navigation.
Hierarchical navigation.
Flat navigation.
Content-driven or experience-driven navigation.

hierarchical navigation

flat navigation

content-driven or experience-driven navigation

• Request Permission

• Settings

If you need information about the user, device, or environment, query the system for it whenever possible instead of asking the user.

The Settings app is a central location for making configuration changes throughout the system, but people must leave your app to get there. It’s far more convenient to adjust settings directly within your app.

• Terminology

Strive for an informal, friendly tone.
Avoid acronyms and technical jargon that people might not understand.
别装逼

• Undo and Redo

Briefly and precisely describe the operation to be undone or redone.
文案描述要清晰

If you use the shake gesture for undo and redo, don’t use it for other actions.

Provide undo and redo buttons sparingly.
个人只在和shake手势配合时看到过undo&redo这种用法，文档不建议大规模使用

Features

• Multitasking

• Notifications

Apps can use notifications to provide timely and important information anytime, whether the device is locked or in use.
** notification styles:
1、Banner
Appears at the top of the screen for a few seconds while the device is in use, then disappears.
2、Alert
Appears at the top of the screen while the device is in use and stays there until manually dismissed.

notification

People must explicitly opt into receiving notifications from every app that supports them—they’re asked to do so the first time they use the app. If someone opts out, they can always visit Settings to opt in.
app第一次启动时需要请求相应的权限，banner和alert也是其中之一

• Printing
• Quick Look
• Siri
• TV Providers

Visual Design

• Animation

Don’t use animation for the sake of using animation. Excessive or gratuitous animation can make people feel disconnected or distracted, especially in apps that don’t provide an immersive experience.

• Branding

Great apps express unique brand identity through smart font, color, and image decisions. Provide enough branding to give people context in your app, but not so much that it becomes a distraction.
好的设计要有自己的特色，但是不能让这些设计遮盖了内容，喧宾夺主
Avoid displaying a logo throughout your app unless it’s necessary for providing context.

• Color

Look to the system’s color scheme for guidance when picking app tint colors that look great individually and in combination, on both light and dark backgrounds.

system's color scheme

The colors in your app should work well together, not conflict or distract.

Consider choosing a key color to indicate interactivity throughout your app.

Test your app’s color scheme under a variety of lighting conditions.

Avoid using the same color for interactive and noninteractive elements.

interactive & noninteractive

Be aware of colorblindness and how different cultures perceive color.
*Avoid using these color combinations as the only way to distinguish between two states or values. For example, instead of using red and green circles to indicate offline and online, use a red square and a green circle. *
不同文化背景和地区的用户对颜色赋予的意义可能不同，特别需要注意的是：在条件允许的情况下，考虑到某些视觉缺陷人群的需求，在某些重要操作结点应避免使用某些颜色组合

Use sufficient color contrast ratios. Insufficient contrast in your app makes content hard to read for everyone. Icons and text might blend with the background, for example. An online color contrast calculator can help you accurately analyze the color contrast in your app, to ensure that it meets optimal standards. Strive for a minimum contrast ratio of 4.5:1, although 7:1 is preferred because it meets more stringent accessibility standards.
在浏览器中输入online color contrast calculator可以找到这样的网站，文档建议contrast ratio的值最低应该达到4.5:1 , 7:1 better

• Layout
• Typography

San Francisco is the system font on iOS. There are two variants of this font: SF UI Text for text 19 points or smaller, and SF UI Display for text 20 points or larger.

If possible, use a single font. Mixing several different fonts can make your app seem fragmented and sloppy. Consider using one font and just a few styles and sizes.
文字永远都不要凌驾于内容

Graphics

• App Icon

Embrace simplicity.
Provide a single focus point.
Design a recognizable icon.
Use words only when they’re essential or part of a logo.
Don’t include photos, screenshots, or interface elements.

• App Icon Sizes

Don’t add an overlay or border to your Settings icon. iOS automatically adds a 1-pixel stroke to all icons so that they look good on the white background of Settings.

• Custom Icons

Provide two versions of custom tab bar icons. Provide icons for both the selected and unselected states.
Don’t use text in a custom tab bar icon. If you need to show text, display a title beneath the tab and adjust its placement accordingly.
ps : icon size omitted

• Image Size and Resolution

On a standard-resolution screen, one point (1/72 of an inch) is equal to one pixel. High-resolution screens have a higher pixel density. Because there are more pixels in the same amount of physical space, there are more pixels per point. As a result, high-resolution displays require images with more pixels.
A standard resolution image has a scale factor of 1.0 and is referred to as an @1x image. High resolution images have a scale factor of 2.0 or 3.0 and are referred to as @2x and @3x images. Suppose you have a standard resolution @1x image that’s 100px by 100px, for example. The @2x version of this image would be 200px by 200px. The @3x version would be 300px by 300px.
基础知识说明……

• Launch Screen

Every app must supply a launch screen.
The launch screen isn’t an opportunity for artistic expression. It’s solely intended to enhance the perception of your app as quick to launch and immediately ready for use.

Using an Xcode storyboard is the recommended approach, as storyboards are flexible and adaptable. You can use a single storyboard to manage all of your launch screens.

• System Icons

UI Bars

• Navigation Bars

navigation bar

segmented control

Consider showing the title of the current view in the navigation bar.
Consider putting a segmented control in a navigation bar at the top level of an app.
Don’t include multisegment breadcrumb paths. The back button always performs a single action—returning to the previous screen.
Consider temporarily hiding the navigation bar when displaying full-screen content.

• Search Bars

There are two styles of search bars—prominent (the default) and minimal.

prominent

minimal

A search bar contains a single search field, which can include placeholder text and a Clear button. In addition to the search field, a search bar can contain a Cancel button for exiting the search.

clear button & cancel button

If necessary, provide hints and context in a search bar.
Use the area under a search bar to help people get to content faster. Safari, for example, shows your bookmarks as soon as you tap the search field.

Scope Bar

A scope bar can be added to a search bar to let people refine the scope of a search.
Favor improving search results over including a scope bar.

scope bar

• Status Bars

status bar

status bar

• Tab Bars

tab bar

Tab bar buttons should not be used to perform actions. If you need to provide controls that act on elements in the current view, use a toolbar instead.
Avoid having too many tabs.

** TIPS**
It’s important to understand the difference between a tab bar and a toolbar, because both types of bars appear at the bottom of an app screen. A tab bar lets the user switch quickly between different sections of an app, such as the Alarm, Stopwatch, and Timer tabs in the Clock app. A toolbar contains buttons for performing actions related to the current context, such as creating an item, deleting an item, adding an annotation, or taking a photo. See Toolbars. Tab bars and toolbars never appear together in the same view.

• Toolbars

toolbar

Avoid using a segmented control in a toolbar. Segmented controls let people switch contexts, whereas a toolbar is specific to the current screen. If you need to provide a way to switch contexts, consider using a tab bar instead.
避免使用toolbar来进行切换页面的操作，toolbar的操作应该集中在当前页，这是她和tab bar在使用上最大的区别

UI Views

• Action Sheets

action sheet

Provide a Cancel button if it adds clarity.

Use red for buttons that perform destructive or dangerous actions, and display these buttons at the top of an action sheet.

Avoid enabling scrolling in an action sheet.

• Activity Views

activity view

• Alerts

alert

Alerts convey important information related to the state of your app or the device, and often request feedback.
Aside from these configurable elements, the visual appearance of an alert is static and can’t be customized.

Write short, descriptive, multiword alert titles. The less text people have to read onscreen, the better.
Avoid sounding accusatory, judgmental, or insulting.
Avoid explaining the alert buttons.

Generally, use two-button alerts. Two-button alerts provide an easy choice between two alternatives. Single-button alerts inform, but give no control over the situation. Alerts with three or more buttons create complexity and can require scrolling, which is a bad user experience. If you find that you need more than two choices, consider using an action sheet instead.

To the extent possible, use verbs and verb phrases that relate directly to the alert title and message—for example, View All, Reply, or Ignore. Use OK for simple acceptance. Avoid using Yes or No.

• Collections

collection

A collection manages an ordered set of content, such as a set of photos, and presents it in a customizable and highly visual layout.

If your app requires it, more gestures can be added for performing custom actions.

Avoid creating radical new designs when a standard row or grid layout is sufficient.

• Image Views

• Maps

• Pages

scrolling transition

page-curl transition

• Popovers

When a popover is visible, interactions with other views are normally disabled until the popover is dismissed.
Avoid displaying popovers on iPhones. Generally, popovers should be reserved for use in iPad apps. In iPhone apps, utilize all available screen space by presenting information in a fullscreen modal view, rather than in a popover.

popover

不推荐在iPhone上使用这种形式，因为屏幕太小，使用fullscreen modal view是更优选项

• Scroll Views

• Split Views

• Tables

iOS implements two styles of table, plain and grouped.

plain

grouped

defalt & subtitle

• Text Views

Show the appropriate keyboard type.

• Web Views

UI Controls

• Buttons

1.System Buttons
Use verbs in titles. (prefer)

system button

2.Detail Disclosure Buttons
Although you can use them in any type of view, Detail Disclosure buttons are commonly used in tables to access information about specific rows.
If you want people to tap the entire row to see additional detail, don’t use a Detail Disclosure button.

detail disclosure button

3.Info Buttons

info button

4.Add Contact Buttons

add contact button

• Edit Menus

edit menu

Let people use the standard gestures to access edit options. People expect to reveal the menu by touching and holding or double-tapping content, such as text or a photo. Your app should respond to both gestures. You can define what becomes selected when someone double-taps. In a text view, selection by word should be the default.

• Labels

• Page Controls

  
  
  Page Control

• Pickers/Date Pickers

  
  
  Picker

Date Pickers

A picker is often displayed at the bottom of the screen or in a popover when the user is editing a field or tapping a menu.
The height of a picker is roughly the height of five rows of list values. The width of a picker is either the width of the screen or its enclosing view, depending on the device and context.

• Progress Indicators
  “三不原则“的第一条：不要让我等，所以需要一些量化的提示来消除用户急躁的情绪，以下是3种较常见的应用场合：

1.Activity Indicators
2.Progress Bars
3.Network Activity Indicators

Activity Indicator

Progress Bar

Network Activity Indicators

• Refresh Content Controls

  
  
  下拉刷新 refresh content control

A refresh control is a specialized type of activity indicator, is hidden by default, and becomes visible when dragging down on the view to be reloaded.

Optionally, a refresh control can include a title. In most cases, this is unnecessary, as the animation of the control indicates that content is loading.
一般情况下，此处的title用默认值就可以，无需更改

• Segmented Controls

Segmented Control

• Sliders

Slider

Don’t use a slider to adjust audio volume.
不推荐用slider调节音量

• Steppers

stepper

A stepper is a two-segment control used to increase or decrease an incremental value. By default, one segment of a stepper displays a plus symbol and the other displays a minus symbol. These symbols can be replaced with custom images, if desired.

Don’t use a stepper when large value changes are likely.
stepper适用于只需要几次tap的小规模数值变化

• Switches

Switch

A switch is a visual toggle between two mutually exclusive states—on and off.

Use switches in table rows only. Switches are intended for use in tables, such as in a list of settings that can be toggled on and off. If you need similar functionality in a toolbar or navigation bar, use a button instead, and provide two distinct icons that communicate the states.
切换器的推荐使用场景是在table row里，在其他位置，button 是更优选项

• Text Fields

Text field

Show a hint in a text field to help communicate purpose. A text field can contain placeholder text—such as "Email" or "Password"—when there’s no other text in the field. Don’t use a separate label to describe a text field when placeholder text is sufficient.
可以在placeholder text里做出的提示信息，就不要在其他位置占用额外的label

Use secure text fields when appropriate.
ps:like passwords

Show the appropriate keyboard type.

Email keyboard & multiline & multistyle

Phone keyboard

Extensions

• Custom Keyboards

custom keyboard

custom keyboard

Make sure you really need a custom keyboard.
Provide an obvious and easy way to switch between keyboards.
**Make functionality obvious.

• Document Providers
• Home Screen Quick Actions
• Messaging
• Photo Editing
• Sharing and Actions
• Widgets

widget

When appropriate, let people jump to your app to do more.
Let people know when authentication adds value.If your widget provides additional functionality when someone is logged into your app, make sure people know about this.

Technologies

• Apple Pay

apple pay

It’s important to understand the difference between Apple Pay and In-App Purchase. Use Apple Pay to sell physical goods such as groceries, clothing, and appliances; for services such as club memberships, hotel reservations, and tickets for events; and for donations. Use In-App Purchase to sell virtual goods, such as premium content for your app, and subscriptions for digital content.

Buttons

as u see

as u see

• Gamekit

gamekit

• Healthkit
• Homekit
• iCloud
• In-App Purchase
• Live Photos
• Social Media
• Wallet

Resources

• Templates
• Typefaces
• Xcode Projects