1.主旨

1.1 iOS设计主旨

作为一名移动应用设计师，意味你有机会发布一款非凡的产品登上苹果应用商店榜首。要做到这一点，您的产品质量和功能需要满足高期望。

三个原则区别iOS系统和其它平台：

清晰（Clarity）

纵观整个系统，任何尺寸的文字都清晰易读，图标精确易懂，恰当且微妙的修饰，聚焦于功能，一切设计由功能而驱动。留白、颜色、字体、图形以及其它界面元素能够巧妙地突出重点内容并且表达可交互性。

遵从（Deference）

流畅的动效和清爽美观的界面有助于用户理解内容并与之交互，而不会干扰用户。当前内容占据整屏时，半透明和模糊处理能够暗示其它更多的内容。减少使用边框、渐变和阴影让界面尽可能地轻量化，从而突出内容。

深度（Depth）

清楚的视觉层和生动的动效表达了层次结构，赋予了活力，并有助于理解。易于发现的且可触发的界面元素能提升体验愉悦感，让用户在成功触发相应功能或者获得更多内容的同时还能掌控当前位置的来龙去脉。当用户浏览内容时，流畅的过渡提供一种纵深感。

1.2设计原则

要想扩大影响力和涉及范围，在设计你的独特应用时，请熟记以下几点原则：

美学完整性（Aesthetic Integrity）

美学完整性代表了一款应用的视觉表象和交互行为与其功能整合的优良程度。例如，一款协助用户完成重要任务的应用应该使用不易察觉且不引人注目的图形、标准化控件和可预知的交互行为从而让用户保持专注。反之而言，一款沉浸式体验的应用（比如游戏），就需要吸引人的视觉表象，在鼓励用户探索的同时带来无穷的乐趣和刺激。

一致性（Consistency）

一款内部一致的应用能够贯彻相同的标准和规范：使用系统提供的界面元素、风格统一（众所周知）的图标、标准的字体样式和一致的措辞。应用所包含的特征和交互行为是符合用户心理预期的。

直接操作（Direct Manipulation）

对屏幕上的对象直接操作能够提升用户的参与度并有助于理解。直接操作指包括用户旋转设备或者使用手势控制屏幕上的对象。通过直接操作，他们的交互行为能够得到即时可视的反馈。

反馈（Feedback）

反馈认证交互行为，并呈现结果，以此告知用户。系统自带的iOS应用对每一个用户行为都提供了明确的反馈。可交互的元素被点击时会被临时高亮，进度指示器（progress indicator）显示了需要长时间运转的操作的进度，动效和声音加强了对行为结果的提示。

隐喻（Metaphors）

当一个应用的虚拟对象和行为与用户熟悉的体验相似时——无论这种体验是来源于现实生活或是数字世界，用户就能更快速地学会使这款应用。隐喻在iOS中能够起作用是因为用户与屏幕进行物理上的交互。他们通过将视图移出屏幕来显示下方的内容，他们拖曳（drag）和滑动（swipe）对象，他们拨动（toggle）开关，移动（move）滑块，滚动（scroll）数值选择器，他们甚至通过轻扫（flick）来翻阅书籍和杂志。

用户控制（User control）

在iOS内部，是用户——而不是应用——在控制。应用可以对一系列用户行为提供建议，或对可能造成严重后果的行为发出警告，但不应该替用户做决定。好的应用会在让用户主导和避免不想要的结果中找到平衡。为了让用户感觉到是他们在控制，应用应该使用熟悉且可预知的交互元素，让用户二次确定有破坏性的行为，并且让即使在运行中的操作也能够被轻易取消。

2.iPhone X

iPhone X有一块大的、高分辨率、圆角的、无边框的屏幕，为用户提供了前所未有的沉浸式的、内容丰富的体验。

2.1屏幕尺寸

iPhone X的竖屏模式，宽度与iPhone6、iPhone7、iPhone8的4.7寸显示屏宽度相同；iPhone X的高度比4.7寸的屏幕要高出145pt，增加大约20%的垂直显示空间。

1）竖屏尺寸：1125px × 2436px (375pt × 812pt @3x)

2）横屏尺寸：2436px × 1125px (812pt × 375pt @3x)

应用程序可以显示高分辨率的图像。iPhone X可以显示高分辨率的@3x图片。对于字形及其他平面和矢量图形，最好提供独立分辨率的PDF格式的图片；对于其他栅格化的图片，需要同时提供@3x和@2x的图片。参见图片大小、分辨率和自定义图标。

2.2布局

在为iPhone X做设计时，您必须确保布局覆盖到整个屏幕，并且不会被设备屏幕上的圆角、传感器和屏幕访问指示器所遮蔽。

大多数应用程序使用标准化的、系统提供的UI元素，像导航栏、表格等，并且会自动适配iPhone X。背景延伸到显示器边缘，并适当的插入UI元素。

4.7" iPhone iPhone X

对于自适应布局的应用，支持iPhone X的适配相对容易，特别是遵循安全区域和边距布局指南的自适应布局应用。

在iPhone X上预览应用程序

可以使用Simulator（Xcode自带）来预览应用程序并检查布局问题。如果应用支持风暴模式，那要确定不管设备向左还是向右旋转，布局都没有问题；iPhone X不支持倒置图像；如果是色彩丰富的图像，最好在实际的iPhone X设备上预览。

提供全屏体验

要确保背景延伸到了显示器的边缘，并且是垂直可滚动的布局，如表格和集合，都会一直延续到底部。

防止重要的内容被剪切

一般来说，内容应该是居中对称的，这样在任何方向看起来都很棒，不会被边角、设备传感器或者屏幕访问指示器遮住。为了获得最佳的效果，请使用标准的、系统提供界面元素和自适应布局来搭建界面。所有的应用都应该遵循UIKit中所定义的安全区域和布局边距，以确保可根据设备和上下文情境进行适当插入。安全区域还可以防止内容覆盖住状态栏、导航栏、工具栏和标签栏。

当设备是横向的，它可能适合某些应用程序，如游戏，把tappable控件放在屏幕的下部（延伸安全区以下），以允许更大的内容空间。使用匹配的插图时，放置控件在屏幕的顶部和底部，并在Home键周围留出足够的空间，这样人们在试图与控件交互时不会意外地将目标指向它。

注意状态栏的高度

状态栏在iPhone X上比其他iPhone要高。如果应用中有内容置于固定位置的状态栏下方，必须要更新应用，以根据用户设备动态定位内容。注意，当背景任务（如录音和定位）处于活动状态时，iPhone X的状态栏不会改变高度。

如果应用的状态栏是隐藏的，请重新考虑在iPhone X上的显示

iPhone X上的显示高度比4.7寸的iPhone提供了更多的垂直内容空间，状态栏不会占据太多有用空间，而且还可以给用户提供有用的信息。仅仅是在要换取额外价值时，状态栏才应该隐藏起来。

在重复使用现有图片时，请注意长宽比差异

iPhone x具有不同于4.7寸iPhone的长宽比，因此，4.7寸iPhone的全屏图像在iPhone X上全屏显示时会出现剪裁或letterboxed（横向有留白）。同样，iPhone X上的全屏图像在4.7寸的iPhone上全屏显示也会被剪裁或pillarboxed（纵向有留白）。请确保重要的视觉内容在两种尺寸的设备中显示。

避免将交互控件放在屏幕底部和角落

人们在屏幕底部使用滑动手势显示主屏幕和应用程序切换，这些手势可能会取消之前在此区域中的自定义手势。屏幕的两个角落可能是人们难以舒适到达的区域。

插入全宽度按钮

一个延伸到屏幕边缘的按钮可能看起来不象一个按钮，要在全宽度按钮的两侧都遵循UIKit边距标准。屏幕底部出现的全宽按钮有圆角并与安全区的底部对齐时最佳，这也确保它不与Home指示键相冲突。

对关键显示功能不要掩盖或者发起特别注意

请勿尝试用黑色条栏在屏幕顶部和底部隐藏设备的圆角、传感器、或者底部访问条，也不要使用像括号、边框、形状或指引性文字去引导用户特别注意这些区域。

允许自动隐藏指示灯，以便轻松访问主屏幕

当启用自动隐藏指示灯功能时，如果用户没有触碰到屏幕几秒钟，指示灯将熄灭。当用户再次触摸到屏幕时，指示灯重新出现。这种情况只能用于被动观看的体验中，如播放视频和照片幻灯片。

请参阅 Adaptivity and Layout。

2.3颜色

iPhone X的显示器支持P3色彩空间，可以显示出比sRGB更丰富，更饱和的颜色。

使用广泛的颜色来增强视觉体验

使用色域广的照片和视频会显示的更加逼真，使用色域宽的视觉数据和显示器会给人更加强大的视觉冲击力。请参阅 Color Management。

2.4视频

该系统视频播放器提供两种观看模式：全屏（全方位填充）和适宜屏幕尺寸（方向）。系统默认基于视频的长宽比选择观看模式，并且用户可以在播放期间切换模式。开发指导请参阅AVPlayerViewController。

全屏观看模式（全方位填充）。

视频表填满显示器。可能会出现一些边缘裁剪，这是默认的宽带视频模式（从2.40:1到2:1）。开发人员指导请参阅resizeAspectFill.

适合屏幕（方位）观看模式。

整个视频都在屏幕上可见，但横向或纵向可能有留白。默认观看模式为标准模式（4:3，16:9，或2:1）和超宽带视频（高于2.40:1）。开发人员指导请参阅resizeAspect。

确保自定义视频播放器的行为符合预期。

目标是在iPhone X上播放视频默认满屏，但如果满屏显示太多裁剪，则视频应该缩放以适合屏幕。您还应该允许用户根据自己的喜好在全屏和适宜比例屏幕观看之间切换。开发指导请参阅AVPlayerLayer。

始终按原来的宽高比显示视频内容。

如果你的视频内容采用嵌入横向或纵向留白以符合特定的纵横比，iOS将无法基于用户选择的观看模式正确缩放视频。嵌入在视频框架中会使视频在全屏和适宜尺寸屏幕中显得更小，也会使得视频在边到边和非全屏模式下无法正确显示，就如在iPad中图片模式中的图片一样。

2.5手势

iPhone X的显示屏幕使用屏幕边缘手势来访问主屏幕、应用程序切换、通知中心和控制中心。

避免干扰系统范围的屏幕边缘手势

用户依靠这些手势在每个应用程序中工作。在极少数的情况下，像游戏这样的沉浸式的应用程序需要优先于系统操作手势来自定义屏幕边缘手势，第一次滑动调用特定于应用的手势，第二次滑动则会调用系统手势。这种行为（成为边缘保护）应该谨慎实施，因为会使用户难以进行系统级的操作。开发指导请参阅UIViewController方法中的preferredScreenEdgesDeferringSystemGestures()。要了解更多系统手势，请查阅Gestures。

2.6附加设计注意事项

准确参考认证方法：iPhone X支持Face ID进行身份验证。如果应用程序与Apple Pay或其他系统身份认证功能集成，请勿在iPhone X上引用Touch ID。同样，请确保应用程序在支持Touch ID的设备上没有引用Face ID。详情请查阅Authentication。

不要重复提供系统的键盘功能：在iPhoneX上，即使使用自定义键盘。Emoji／Globe按钮和Dictation按钮也自动在键盘下方显示。应用程序不会影响这些按钮，因此，避免在键盘中重复出现这些按钮造成混乱。详情请查阅Custom Keyboards。

确保你的网站在iPhoneX中边到边的显示良好。详细请查阅Designing Websites for iPhone X on webkit.org

2.7资源

在资源库中下载iPhone X的UI设计模板，支持Photoshop和Sketch。

3.iOS 11特性

在iOS 11上，你可以提供更强大、更友好的app。

增强现实（Augmented Reality，AR）。通过AR技术将虚拟现实与现实世界的无缝结合，app可以提供身临其境、引人入胜的体验。

更明显的导航（Bolder navigation）。为了提升用户浏览和搜索时的准确性和情境，app可以使用字体更大、文字加粗的导航栏。

更清晰的图标（Clearer icons）。填充的形状和厚重的笔触让图标尺寸保持较小的同时增强了图标的对比度。参见Custom Icons和 System Icons.

拖放（Drag and drop）。拖放功能支持用户使用单个手指就能将选中的图片、文字以及其他内容从一个地方移动到另一个地方。iPad上两个app之间也支持这种操作。

Face ID和Touch ID。你的app可以集成系统的生物识别功能，从而提供人们信任的安全、熟悉的身份验证机制。

近场通讯技术（Near field communication）。安装在设备上的app可以从现实世界物体上夹带的电子标签中无线读取数据。

安全区域布局指南（safe area layout guides）。遵守系统的安全区域布局指南，可以确保文字布局的合理性，并有效防止状态栏、导航栏、工具栏、标签栏遮盖文字内容。

排版的变化（Typographic changes）。文字尺寸的增加以及样式的加粗增强了系统文字的可读性。iOS 11还提供除标准动态字体尺寸之外的更大的字体尺寸，以帮助具有辅助功能需求的用户。

4.接口要点（Interface Essentials）

大部分iOS app是使用UIKit的组件构建的，UIKit定义了常见界面元素的编程框架。该框架会让app在整个系统中拥有一致的外观，同时它也提供高水平的定制。UIKit的元素具有灵活性和相似性，也具有适应性。UIKit元素的使用会让你的app在任何iOS设备上看起来都很棒，并且系统改变元素的外观时，你的app也会自动更新这些元素的外观。UIKit提供的界面元素主要分为三大类：

1）栏（Bars）。它会告诉用户现在在哪里，具有导航的功能，也可能包含启动操作和传达信息的按钮或其他元素。

2）视图（Views）。它包括用户在你的app里看到的主要内容，如文字、图片、动画以及其它交互式元素。视图让用户的滚动、插入、删除和排列等行为可见。

3）控件（Controls）。它主要有启动行为和传递信息两大作用。按钮、开关、文本内容、和进度指示器等都是控件。

除了定义iOS界面以外，UIKit还定义app可以使用的功能。比如，通过使用这个框架，你的app能响应用户触摸屏幕的手势，并且能响应如绘画、辅助或打印等功能特性。

iOS与其它编程框架和技术也是紧密相连的，比如 Apple Pay、HealthKit 以及 ResearchKit，这些都帮助你设计出惊天动地的、功能强大的app。