iOS 10 人机界面指南：图形
App Icon App图标
Every app needs a beautiful and memorable icon that attracts attention in the App Store and stands out on the Home screen. Your icon is the first opportunity to communicate, at a glance, your app’s purpose. It also appears throughout the system, such as in Settings and search results.
每个app都需要一个漂亮难忘的图标，在App Store中引人注目，在主屏上脱颖而出。图标是第一个在一瞥中传达app目的的机会。图标在整个系统中都会出现，比如系统设置和搜索结果。 Embrace simplicity. Find a single element that captures the essence of your app and express that element in a simple, unique shape. Add details cautiously. If an icon’s content or shape is overly complex, the details can be hard to discern, especially at smaller sizes.
崇尚简约。找到一个抓住app精髓的元素并且用简洁独特的形状表达这个元素。谨慎地添加细节。如果图标内容或者图形太复杂，这些细节可能难以辨认，特别是在小尺寸上。
Provide a single focus point. Design an icon with a single, centered point that immediately captures attention and clearly identifies your app.
提供一个单独的焦点。用一个迅速吸引注意力、清晰表达app的单独中心点设计图标。
Design a recognizable icon. People shouldn’t have to analyze the icon to figure out what it represents. For example, the Mail app icon uses an envelope, which is universally associated with mail. Take time to design a beautiful and engaging abstract icon that artistically represents your app’s purpose.
设计一个具有辨识度的图标。人们不应该去分析图标以弄清楚它代表什么。例如，Mail邮件app使用通常和邮件联系起来的信封作为图标。花点时间设计一个在艺术上代表app意图的，漂亮的吸引人的抽象图标。
Keep the background simple and avoid transparency. Make sure your icon is opaque, and don’t clutter the background. Give it a simple background so it doesn’t overpower other app icons nearby. You don’t need to fill the entire icon with content.
背景保持简洁，避免半透明。确保图标不透明，不会和背景混杂。赋予其一个简洁的背景，这样它就不会在其他附近的app图标中显得太突兀。您不必将整个图标用内容填满。
Use words only when they’re essential or part of a logo. An app’s name appears below its icon on the Home screen. Don’t include nonessential words that repeat the name or tell people what to do with your app, like "Watch" or "Play." If your design includes any text, emphasize words that relate to the actual content your app offers.
只有在文字很重要时或者是logo一部分时才使用。App的名字会在主屏图标下面出现。不要包含没意义重复名字或者告诉人们您的app是干嘛的文字，例如“Watch”或者“Play”。如果您的设计包含了文字，强调与您app提供的真正内容有关的文字。
Don’t include photos, screenshots, or interface elements. Photographic details can be very hard to see at small sizes. Screenshots are too complex for an app icon and don’t generally help communicate your app’s purpose. Interface elements in an icon are misleading and confusing.
不要包含照片、截图或者界面元素。照片细节在小尺寸下很难看清。对于app图表来说截图太复杂了并且通常对于传到app意图没有帮助。图标中使用界面元素令人误解困惑。
Don’t use replicas of Apple hardware products. Apple products are copyrighted and can’t be reproduced in your icons or images. In general, avoid displaying replicas of devices, because hardware designs tend to change frequently and can make your icon look dated.
不要使用Apple硬件产品的仿制品。Apple产品是有版权的并且不能在您的图标或者图片中被复制。总的来说，避免显示设备的复制品，因为硬件设计可能经常会改变，这会让您的icon看起来过时。
Don’t place your app icon throughout the interface. It can be confusing to see an icon used for different purposes throughout an app. Instead, consider incorporating your icon’s color scheme. See Color .
不要在界面中到处放app图标。在一个app中看到一个图标被用作各种用途是很让人费解的。反而应该考虑结合图标配色。
Test your icon against different wallpapers. You can’t predict which wallpaper people will choose for their Home screen, so don’t just test your app against a light or dark color. See how it looks over different photos. Try it on an actual device with a dynamic background that changes perspective as the device moves.
在不同壁纸环境下测试您的图标。您无法预料人们会为主屏选择什么壁纸，所以不要只在浅色或者深色环境下测试app。看看它在不同的照片之上看起来如何。在具有随着设备移动而改变角度的动态壁纸的真实设备上测试它。
Keep icon corners square. The system applies a mask that rounds icon corners automatically.
图标边角应该是方的。系统会自动遮罩使角变圆。
App Icon Sizes App图标尺寸
Every app must supply both small and large app icons. The small icons are used on the Home screen and throughout the system once your app is installed. The large icon is used by the App Store.
每个app必须使用大小两个app图标。小图标用于主屏和整个系统中，当您的app一安装啊。大图标用于App Store。
Provide different sized small icons for different devices. Make sure that your app icon looks great on all the devices you support.
为不同设备提供不同的小图标。确保您的app图标在所有支持设备上都看起来很棒。
Mimic your small app icon with your large app icon. Although the large icon is used differently than the small one, it’s still your app icon. It should generally match the smaller version in appearance, although it can be subtly richer and more detailed since there are no visual effects applied to it.
小图标跟大图标得差不多。尽管大图标跟小图标用途不一样，它还是您的app图标。它应该在外观上跟小图标搭配，尽管它可能更丰富或者更精细，因为没有视觉效果影响它。
Spotlight and Settings Icons
Spotlight搜索和系统设置图标
Every app should provide a small icon that iOS can display when the app name matches a term in a Spotlight search. Additionally, apps with settings should provide a small icon to display in the built-in Settings app. Both icons should clearly identify your app—ideally, they should match your app icon. If you don’t provide these icons, iOS might shrink your main app icon for display in these locations.
每个app应该提供用于显示在Spotlight搜索结果的小图标。除此之外，需要设置的app还应该提供一个用于显示在系统设置的小图标。这两个图标都得清晰地代表您的app，理想情况下，他们得与app图标相匹配。如果您不提供这些图标，iOS会直接把主屏app图标缩小用于这些地方的显示。
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.
不要在系统设置图标上添加叠加或者描边。iOS会自动给所有图标添加一像素的描边，这样他们在系统设置的白背景下看起来很棒。
TIP If your app creates custom documents, you don't need to design document icons because iOS uses your app icon to create document icons automatically.
如果您的app会创建文件，您不用设计文件的图标，因为iOS会用您的app图标作为文件图标。
Custom Icons自定义图标
If your app includes tasks or modes that can’t be represented by a system icon, or if the system icons don’t match your app’s style, you can create your own icons. A custom icon, sometimes called a template, discards color information and uses a mask to produce the appearance you see onscreen in a navigation bar, tab bar, toolbar, or Home screen quick action.
如果您的app包含系统图标不能表示的任务或者模块，或者系统图标和您的app风格不搭，您可以创造自己的图标。一个自定义图标，有时叫做template，丢弃颜色信息并且使用遮罩来产生您在屏幕上导航条，切换条，工具条或者主屏快速启动看到的那种效果。
创建简洁，可识别的设计。太多细节会让图标看起来太松散，不可读。争取做出大多数人都能准确识别而且不会感觉冒犯的设计。
Design a solid color icon with transparency, antialiasing, and no drop shadow. iOS ignores all color information, so there’s no need to use more than one fill color. Allow transparency to define the shape of the icon.
设计一个带有透明度、抗锯齿的纯色图标，并且没有阴影。iOS忽视所有颜色信息，所以不需要使用一个以上的颜色。允许透明度以限定图标的形状。
Distinguish your custom icon from the system icons. Your icon shouldn’t be easily mistaken for one of the system-provided icons. If you want your icon to look like it's related to the iOS icon family, use a very thin stroke to draw it. A 1pt stroke (2px for @2x resolution) works well for most icons.
将您的自定义图标和系统图标区分开。您的图标不应该被误认为一个系统图标。如果您想让您的图标看起来属于iOS图标家族，使用非常细的笔触去画。1pt的画笔对于大多数图标效果都很好。（对于@2X分辨率来说是2px）
Keep your icons consistent. Whether you use only custom icons or mix custom and system icons, all icons in your app should be the same in terms of size, level of detail, perspective, and stroke weight.
保持图标一致性。无论您只是用自定义图标还是将系统图标和自定义图标混用，app中的所有图标在尺寸，精细度，透视，粗细方面都应该一样。
提供两个版本的自定义标签栏图标。提供选中和未选中状态的图标。选中的图标通常是未选中图标的填充版，但是有些设计需要变化。比如，Apple app有时候翻转图标内部，增加或者减少描边，并且将图标括在一个形状中，比如圆形。
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.
在自定义标签栏图标中不要使用文本。如果您需要展示文本，在标签下方显示一个标题并且相应地调整位置。
Don’t use replicas of Apple hardware products. Apple products are copyrighted and can’t be reproduced in your icons or images. In general, avoid displaying replicas of devices because hardware designs tend to change frequently and can make your icon look dated.
不要使用Apple硬件产品的仿制品。Apple产品是有版权的并且不能在您的图标或者图片中被复制。总的来说，避免显示设备的复制品，因为硬件设计可能经常会改变，这会让您的icon看起来过时。
Provide alternative text labels for icons. Alternative text labels aren’t visible onscreen, but they let VoiceOver audibly describe what's onscreen, making navigation easier for people with visual impairments.
为图标提供可替换标签。可替换标签在屏幕上不可见，但是能被VoiceOver读出来，让视障人士可以轻松导航。
Custom Icon Sizes自定义图标尺寸
Image Size and Resolution
图片尺寸和分辨率
iOS uses a coordinate system to place content onscreen. This coordinate system is based on measurements in points, which map to pixels in the display. 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.
iOS使用写作系统来放置屏幕内容。这个协作系统基于点的测量，能映射到显示器上的像素。在一个标准分辨率的屏幕上，一点（1/72 英寸）等于一像素。高分辨率的屏幕有更高的像素密度。因为在相同大小的物理区域他们有更多像素，每点有更多像素。因此，高分辨率的显示器需要更多像素的图片。
您必须为app中所有图形提供高分辨率图片，为所有支持的设备。取决于设备，您通过特定的比例乘以每张图片的像素数来实现。
标准分辨率图片的比例是1.0，被称作@1x图片。高分辨图片比例是2.0或3.0，被称作@2x图片和@3x图片。假设您有一张标准分辨率@1x图片，是100像素X100像素的，@2x版本就是200像素X200像素的，@3x版本就是300像素X300像素的。
Launch Screen启动页
A launch screen appears instantly when your app starts up. The launch screen is quickly replaced with the first screen of your app, giving the impression that your app is fast and responsive. 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. Every app must supply a launch screen.
启动页在app启动是立刻出现。启动页很快被app第一屏取代，给出app快速回应的印象。启动页不是一个用于艺术表达的机会。它只是意在增强app快速启动，立刻能用的感觉。每个app必须使用启动页。
Launch screen First screen
Because device screen sizes vary, launch screen sizes vary too. To accommodate this, you can provide a launch screen as an Xcode storyboard or as a set of static images for the devices your app supports. 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. To learn about implementing adaptable interfaces, see Auto Layout Guide .
因为设备屏幕变化，启动页尺寸也会变化。为了适应，您可以为app支持的设备提供启动页作为Xcode故事版或者作为一系列静态图片。使用Xcode故事版是推荐方式，因为故事版灵活可适应。您可以使用一个单独的故事版来管理所有的启动屏。为了了解实践可适应界面，详情请查看【 Auto Layout Guide .】
Design a launch screen that’s nearly identical to the first screen of your app. If you include elements that look different when the app finishes launching, people can experience an unpleasant flash between the launch screen and the first screen of the app.
设计一个跟第一屏差不多感觉得启动页。如果当app结束启动时包括看起来不一样的元素，人们可能在启动页和第一屏之间体验到不舒服的跳跃。
Avoid including text on your launch screen. Because launch screens are static, any displayed text won’t be localized.
在启动页上避免包含文本。因为启动页是静止的，任何显示的文本不会是本地化的。
Downplay launch. People are likely to switch apps frequently, so design a launch screen that doesn’t draw attention to the app launching experience.
淡化启动。人们可能在app之间频繁切换，所以设计一个不会吸引人注意到启动体验的启动页。
Don’t advertise. The launch screen isn’t a branding opportunity. Don’t design an entry experience that looks like a splash screen or an "About" window. Don’t include logos or other branding elements unless they’re a static part of your app’s first screen.
不要打广告。启动页不是品牌推广的机会。不要设计像闪屏的进入体验或者介绍页。不要包括logo或者其他推广元素，除非他们是app第一屏的静态元素。
Static Launch Screen Images
静止的启动页图片
It’s best to use an Xcode storyboard for your launch screen, but you can provide a set of static images if necessary. Create static images in different sizes for different devices, and be sure to include the status bar region.
最好用Xcode故事版作为启动页，但是必要时您可以提供一系列静止图片。为不同设备创造不同尺寸的静止图片，确认包含状态条区域。
System Icons系统图标
iOS provides lots of small icons—representing common tasks and types of content—for use in navigation bars, tab bars, toolbars, and Home screen quick actions. It’s a good idea to use these built-in icons as much as possible because they're familiar to people.
iOS提供很多小图标，代表常见的任务和内容类型，用于导航条，标签栏，工具条，主屏快速动作。最好使用这些内置图标，因为人们对这些图标很熟悉。
Provide alternative text labels for icons. Alternative text labels aren’t visible onscreen, but they let VoiceOver audibly describe what's onscreen, making navigation easier for people with visual impairments.
为图标提供可替换标签。可替换标签在屏幕上不可见，但是能被VoiceOver读出来，让视障人士可以轻松导航。
Navigation Bar and Toolbar Icons导航条工具栏图标
TIP You can use text instead of icons to represent items in a navigation bar or toolbar. For example, Calendar uses “Today,” “Calendars,” and “Inbox” in the toolbar. You can also use a fixed space element to provide padding between navigation and toolbar icons.
您可以使用文本而不是图标来表示导航条或者工具条里的项目。例如，日历中用“今天”“日历”和“收件箱”在工具条里。您也可以用一个固定的空元素来填充导航和工具条图标
Button name
Function
Shows a modal view containing share extensions, action extensions, and tasks, such as Copy, Favorite, or Find, that are useful in the current context.显示一个模态视图，包含分享扩展，动作扩展，以及任务，例如拷贝，收藏或者寻找等在当前情境下有用的。
Creates a new item.添加新项目
Shows app-specific bookmarks.显示app中的书签
Takes a photo or video, or shows the Photo Library.拍照片或者拍视频，或者显示照片库
Cancel
Cancel取消
Closes the current view or ends edit mode without saving changes.关闭当前视图或者不保存更改就结束编辑模式
Opens a new view in edit mode.在编辑模式中打开一个新视图
Done
Done完成
Saves the state and closes the current view, or exits edit mode.存储状态并且关闭当前视图，或者离开编辑状态。
Edit
Edit编辑
Enters edit mode in the current context.在当前情境中进入编辑模式
Fast-forwards through media playback or slides.媒体或者幻灯片快进
Moves an item to a new destination, such as a folder.将项目移动到新目的地，比如文件夹
Pauses media playback or slides. Always store the current location when pausing, so playback can resume later.暂停媒体或者幻灯片播放。暂停时总是存储当前位置，之后就可以继续播放了。
Begins or resumes media playback or slides.开始或继续媒体或幻灯片播放
Redo
Redo重做
Redoes the last action that was undone.重做上一个被撤销的动作
Refreshes content. Use this icon sparingly, as your app should refresh content automatically whenever possible.刷新内容。慎用此图标，因为app应该尽可能自动刷新内容。
Sends or routes an item to another person or location.发送项目至另一个人或位置
Moves backwards through media playback or slides.快退媒体播放或幻灯片
Save
Save保存
Saves the current state.保存当前状态
Displays a search field.显示一个搜索区域
Stops media playback or slides.停止媒体或幻灯片
Deletes the current or selected item.删除当前或选中的项目
Undo
Undo撤销
Undoes the last action.撤销上一动作
For implementation details, see UIBarButtonItem .
详情请查看【 UIBarButtonItem .】
Tab Bar Icons标签栏图标
Button name
Function
Shows app-specific bookmarks.显示app书签
Shows the person’s contacts.显示联系人
Shows active or recent downloads.显示正在活动或者最近下载
Shows the person’s favorite items.显示收藏内容
Shows content featured by the app.显示app特征内容
Shows recent actions or activity.显示最近动作或活动
Shows additional tab bar items.显示更多标签栏项目
Shows the most recent items.显示最近的项目
Shows the most popular items.显示最受欢迎的项目
Shows content or items recently accessed within a specific period of time.显示特定时间段内获取的项目或内容
Enters a search mode.进入搜索模式
Shows the highest-rated items.显示最佳项目
For implementation details, see UITabBarItem .
详情查看【 UITabBarItem .】
Quick Action Icons快速动作图标
Button name
Function
Creates a new item.创建新项目
Sets or displays an alarm.设置或者显示闹钟
Denotes or adjusts audio.显示或者调整音频
Creates a bookmark or shows bookmarks.创建一个书签或者显示书签
Captures a photo.拍照
Captures a video.拍摄视频
Denotes, displays, or initiates a cloud-based service.代表，显示或者启动一个云服务
Composes new editable content.创作一个新的可编辑内容
Denotes that an action is complete.表示一个动作已经完成
Chooses or displays a contact.选择或者显示联系人
Displays a calendar or event, or performs a related action.显示日历或事件，或者实行一个相关动作
Denotes or marks a favorite item.表述或者标记收藏项目
Indicates or displays a home screen. Indicates, displays, or routes to a physical home.表述或者显示主屏。表述显示或者指向一个物理上的家
Denotes or displays an invitation.表述或者显示一个邀请
Denotes the concept of location or accesses the current geographic location.表示位置的概念或者获得当前地理位置
Denotes or marks an item as loved.表示或者标记喜欢项目
Creates a Mail message.创建Mail邮件
Denotes, displays, or saves a geographic location.表示，显示或者存储一个地理位置
Creates a new message or denotes the use of messaging.创建新信息或者表示信息的使用
Pauses media playback. Always store the current location when pausing, so playback can resume later.暂停媒体播放。总是在暂停时存储当前位置，这样稍后就能继续播放。
Begins or resumes media playback.开始或者继续媒体播放
Denotes that something is disallowed.表示某物被禁止
Enters a search mode.进入搜索模式
Shares content