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