iOS11界面交互设计规范（iOS 11 Human Interface Guidelines）

自初春之际着手翻译《iOS11界面交互设计规范》（英文记《iOS Human Interface Guidelines》），迄今已近半载。断断续续，林林总总；终归曙光初现，也算圆满。更幸有梳理归整，章节目录也算清晰，得以纵览全文。奈水平有限，谨撰此文，权以抛砖引玉，查漏补缺之作。

https://www.phyet.com/ios-human-interface-guidelines/

概述（Overview）

• 主题（Themes），主题章节，主要对设计规范整体进行一个介绍，引出清晰（Clarity），遵从（Deference）和深度（Depth）三大设计原则以及美学完整性（Aesthetic Integrity），一致性（Consistency），直接操作性（Direct Manipulation），反馈性（Feedback），隐喻性（Metaphors）和用户控制性（User Control）六大基本特性。
• 基本界面元素（Interface Essentials），通过栏（Bars），视图（Views）和控件（Controls）组成了三大基本界面元素。

交互（User Interface）

• 3D触摸（3D Touch）3D Touch可以称得上iOS 10在X轴，Y轴外的另一维度Z轴上对触摸交互方式立体化所做的新文章。
• 辅助功能（Accessibility）辅助功能主要为iOS 10针对小众群体（残障人士）的支持，貌似国外的大部分3C产品均有残障人士支持功能，可能与具体的法律法规有关。但无论出发点如何，此举堪赞。
• 音频（Audio）音频章节主要讲述了声音在不同操作场景下的不同表现，以及如何使其更好的作为触摸交互行为中的点缀。
• 身份认证（Authentication）身份认证主要告知应用设计人员，When and How引导用户进行注册登录等身份验证行为。
• 数据输入（Data Entry）简单总结数据输入原则：能通过系统获得的就不要向用户索取，能通过用户选择获得的就不要用户输入获得，用户输入时弹出合适的键盘。
• 反馈（Feedback）反馈最直观的体现为使用户知道当前应用正在做什么事情，去引导告知用户接下来其能够做的事情以及了解这么做将产生的结果。
• 文件处理（File Handling）对于文件的处理，堪称iOS与Android间区别较大几点之一。Android有明确的文件系统的概念，也沿用了Windows文件系统的层级概念；而iOS则倾向于以更上层的方式引导用户进行交互。
• 应用启动体验（First Launch Experience）应用启动体验简单来讲就是如何在用户第一次启动应用时便爱上它，或者至少不那么讨厌它。
• 手势操作（Gestures）手势操作主要通过iOS的八大基本手势：点击（Tap），拖拽（Drag），滑动（Flick），横扫（Swipe），双击（Double tap），捏合（Pinch），长按（Touch and hold），摇晃（Shake）讲述如何更好的进行操作。
• 加载（Loading）加载主要讲述如何清晰明确的告诉用户当前的加载状态，或者轻松有趣的愉悦用户进行耐心等待。
• 特殊情景状态（Modality）特殊情景状态简单的来讲即是像警告框类的强制用户进行交互的状态，需谨慎使用。
• 导航（Navigation）如何明确的告知用户当前所处应用的位置，以及如何能够到达下一个目标位置是本章节主要讲述的。
• 评分与评论（Ratings and Reviews）不要频繁的去要求用户进行评分或者评价，真的。
• 请求许可（Requesting Permission）不得不说苹果的明确需要用户进行授权的方式在某些程度上培养了用户在信息层面上的“维权”意识，虽然有很多应用仍然厚颜无耻的向用户要各种权限（尤以Android平台为甚），但用户思想层面的认识更有价值。
• 设置（Settings）有一部分的应用可能需要一开始就让用户决定设置或布局选项，但是大部分应用避免或是延迟这么做。成功的应用能够一开始就让用户很好地使用，并且同时提供了一个便捷的途径去调整体验。
• 术语（Terminology）科技可能会令人感到不安，所以尽可能不要用太过冰冷的语言，试着同用户进行交谈。
• 撤销以及重做（Undo and Redo）虽然在国内看似微信已经重新定义了摇一摇，但通过摇晃设备进行操作的撤销或者重做，似乎来得也蛮惊喜。

功能（System Capabilities）

• 多任务（Multitasking），多任务模式主要体现为像iPad等大屏设备中，具体表现为滑出（Slide Over），分屏（Split View）以及画中画（Picture in Picture）等模式。
• 通知（Notifications），通知要慎用，否则可能会出现“狼来了”的效果，具体的触发事件可能为，当新消息到来时、一个事件将要发生时、有新数据可获取时或是某些状态发生改变时等。
• 打印（Printing），打印功能主要为通过系统自带的AirPrint技术来使用兼容的打印机进行图片，PDF以及其它内容的无线打印；实际应用中比较少见。
• 快速查看（Quick Look），快速查看可以理解为预览，一般像Keynote,、Numbers、Pages、PDF文档、图片以及其它类型的文件（即使你的应用并不支持这些文件格式）均可以预览。
• Siri，目前还是比较局限应用的类型，如音视频呼叫，信息，健身等。

视觉设计（Visual Design）

• 动画（Animation），贯穿于iOS系统的优美、精细的动画在用户和屏幕屏幕内容之间建立了一种视觉上的联系。当动画被合理利用时，它能够表达状态、提供反馈、加强直接操纵感，并且视觉化呈现用户的操作结果。
• 品宣（Branding），成功的品宣不仅是单纯地在应用中添加品牌元素。优秀的应用通过优雅别致的文字、颜色和图片来营造独特的品牌辨识度。
• 颜色（Color），在iOS中，颜色能够暗示可交互性、增加活力以及提供视觉的连续性。
• 布局（Layout），用户总是希望能够在他们所有的设备以及任何一种模式下使用他们最喜欢的应用。在iOS中，界面元素和布局能够被配置在不同的设备中、在iPad中多任务操作时、分屏模式时以及屏幕旋转时，自动改变形状和大小。
• 字体（Typography），San Francisco (SF)是IOS中的系统字体。系统对这种字体进行了优化，给你的文字无法比拟的易读性，清晰性和一致性。

视觉设计（Visual Design）

• 动画（Animation），贯穿于iOS系统的优美、精细的动画在用户和屏幕屏幕内容之间建立了一种视觉上的联系。当动画被合理利用时，它能够表达状态、提供反馈、加强直接操纵感，并且视觉化呈现用户的操作结果。
• 品宣（Branding），成功的品宣不仅是单纯地在应用中添加品牌元素。优秀的应用通过优雅别致的文字、颜色和图片来营造独特的品牌辨识度。
• 颜色（Color），在iOS中，颜色能够暗示可交互性、增加活力以及提供视觉的连续性。
• 布局（Layout），用户总是希望能够在他们所有的设备以及任何一种模式下使用他们最喜欢的应用。在iOS中，界面元素和布局能够被配置在不同的设备中、在iPad中多任务操作时、分屏模式时以及屏幕旋转时，自动改变形状和大小。
• 字体（Typography），San Francisco (SF)是IOS中的系统字体。系统对这种字体进行了优化，给你的文字无法比拟的易读性，清晰性和一致性。

栏（Bars）

• 导航栏（Navigation Bar），导航栏出现在应用屏幕的顶部，状态栏之下，它能实现在一系列有层级的应用页面间的导航。
• 搜索栏（Search Bars），用户通过搜索栏在大量的信息中进行查找。搜索栏有两种样式：凸显（prominent）（默认）和极简（minimal）。“通讯录”使用了凸显搜索栏，含有引人注目的浅色背景。“照片”使用了极简样式，更好地融入了周边界面。搜索栏默认是半透明的，但也可以被设置成不透明的。有需要时，搜索栏也可以自动遮盖住导航栏。
• 状态栏（Status Bars），状态栏在屏幕的顶端出现，显示与设备当前状态相关的有用信息，比如时间、运营商、网络状态以及电池容量。
• 标签栏（Tab Bars），标签栏在应用屏幕底部出现，提供了在应用不同部分间快速切换的途径。标签栏是半透明的，也可能会有纯色背景，在横竖屏都保持一致的高度，并且在出现键盘时会被隐藏。
• 工具栏（Toolbars），工具栏在应用屏幕底部出现，包含了执行当前视图或包含内容相关操作的按钮。工具栏是半透明的，也可能会有纯色背景，并且通常在用户不太需要它们时被隐藏。

视图（Views）

• 功能表单（Action Sheets），功能表单是响应于控件或动作而出现的一种特定的警报样式，其提供一组与当前上下文相关的两个或多个选择。使用功能表单让人们开始一个任务，或者用户在进行潜在破坏性操作之前请求确认。
• 活动视图（Activity Views），活动视图在当前上下文中，活动便是一项任务，如复制、收藏或查找。一旦启动，活动可以立即执行任务，或在继续之前请求更多信息。活动由活动视图管理，它表现为一个图标或弹出视图，具体则取决于当前设备和当前定位。
• 警告框（Alerts），警告主要用来传递应用程序或设备状态相关的重要信息，并经常请求反馈。警告由标题、可选消息、一个或多个按钮和可选的文本字段组成，用于收集用户的信息输入。除了这些可配置元素之外，警告框的可视化外观是固定的，不能自定义。
• 集合（Collections），一个集合主要用来管理一系列有序的内容集，如一组照片，并以可定制和高度可视化的布局呈现它。因为集合没有强制执行严格的线性格式，所以它特别适合显示大小不同的项。
• 图像视图（Image Views），图像视图主要为用来在透明或不透明的背景下显示单个图像或动态图像。
• 地图视图（Maps），地图视图允许你在应用内显示地理信息，且可以支持系统自带地图应用所提供的大部分功能。
• 浮层（Popovers），浮层通常是当用户点击屏幕上某个内容的控制点或区域时在其上方出现的瞬态视图。
• 滚动视图（Scroll Views），滚动视图主要被用户用来去浏览那些像文档中的文本，集合中的图像等比显示区域要大的内容。当用户进行翻阅，轻击，拖拽，点击以及缩放等交互行为时，滚动视图会随之进行放大缩小等与之对应的变化。
• 分列视图（Split Views），分列视图主要用来以列对列的形式展示内容，一般以偏固定性内容作为一侧，相关性信息对应在另一侧展示。每一列均可以包含很多元素，像导航栏，工具栏，标签栏，列表，集合，图像，地图以及自定义视图等。
• 表格视图（Tables），表格通常以可滚动的单列多行排列的方式对数据进行分组分类进行展示。使用表格以列表的形式可以干净高效地显示大量或少量信息。一般来说，表格对于以文本为基础的内容展示是非常理想的，并且常常作为分列视图的一侧的导航工具出现，与之相关的内容显示在相反的一侧。
• 文本视图（Text  Views），文本视图顾名思义主要用以显示多行文本内容。文本视图可以为任意高度通过滚动的方式来显示视图外的额外内容。默认情况，内容均以黑色系统字体左对齐的方式展示。如果一个文本视图是可编辑的，那么当用户点击视图内部区域时屏幕下方会显示出键盘。
• 网页视图（Web Views），网页视图可以加载并显示网页内容，比如应用中直接嵌入的HTML以及网页。邮箱应用便使用网页视图来显示HTML。

控件（Controls）

• 按钮（Controls），按钮用以启动应用程序的特定操作，具有可定制化的背景，并且可以包含标题或图标。系统为大多数用例提供了预定义的按钮样式。但应用同样也可以去设计完全自定义化的按钮。
• 编辑菜单（Edit Menus），用户可以通过触摸且按住或者双击文本区域，文本视图，网页视图或者图像视图中某个元素的形式来进行内容选择以及编辑选项显示的操作，如复制粘贴等。
• 标签（Labels），标签用来描述屏幕中的交互元素或提供一个简短的信息。尽管用户不可以编辑标签，但有时用户还是会期望可以复制标签中的内容。标签可以显示任何数量的静态文本，但是还应该尽量使其保持简短。
• 页面控件（Page Controls），页面控制显示了当前页面在一个页面序列中所处的位置。其以一系列的小型指示圆点进行展示，代表一系列可用页面的顺序。
• 筛选框（Pickers），一个筛选框包含一个或多个可滚动的含有不同值的列表，其中每一列均具有一个唯一选中的值以深色的文字出现呈现。一个筛选框通常在用户编辑某一个字段或点击某个菜单时在屏幕的底部显示或弹出。
• 进度指示器（Progress Indicators），不要让用户紧盯着静态屏幕来等待应用程序加载内容或执行冗长的数据处理操作。使用加载器和进度条，让人们知道你的应用程序没有停止，并且要让用户知道他们需要要等多久。
• 刷新控件（Refresh Content Controls），刷新控件可以用来手动立即进行当前内容的重新加载操作，而无需等待下一个自动内容更新发生，通常应用在表单视图中。
• 分段控件（Segmented Controls），分段控件是两个或多个片段的线性集合，每一个片段均为互斥按钮。在控件中，所有片段的宽度相等。像按钮一样，片段也可以包含文本或图像。分段控件通常用于显示不同的视图。例如，在地图中，分段控件允许在地图、传输线和卫星视图之间进行切换。
• 滑动条（Sliders），滑动条是一个水平的模块，其带有一个可以称之为“拇指”的控件，用户可以用手指在滑动条的最小与最大值之间滑动，使用方式例如用来调整屏幕的亮度，或在媒体文件播放时自定义其播放位置。
• 调数器（Steppers），一个调数器由两个分段控件组成用以增加或减少数值。默认情况下，其中的一个分段控件会显示加号另一个分段控件会显示减号。当然这些符号也可以自定义为其它图像。
• 开关（Switches），开关主要用于两个互斥状态之间的切换–开和关。
• 文本输入框（Text Fields），一个文本输入框通常为单行且固定高度的区域，经常为圆角，且当用户点击时自动弹出键盘。文本输入框通常被用来作为一小部分信息的输入模块，比如邮件地址。

扩展功能（Extensions）

• 自定义键盘（Custom Keyboards），键盘扩展可以理解为用一个自定义键盘来代替系统的标准键盘。自定义键盘需要在设置中进行启用，具体位置为设置->键盘。一旦键盘开启，那么其将在所有应用进行文本输入时被使用，当然进行某些安全性文本输入以及电话号码输入时除外。用户可以开启多个自定义键盘，并且可以在任何时候在其之间进行切换。
• 文件库（Document Providers），文件库扩展模块实现了一个有着自定义界面的，可以在系统内应用进行文档的导入，导出以及移动的扩展功能。文件库会以模态视图的模式加载，包含导航栏。
• 主屏幕快速操作（Home Screen Quick Actions），主屏幕快速操作可以理解为通过3D Touch提供给用户一种方便快捷的在主屏幕展示应用所特有功能的方式。用户所需要做的只是使用比正常点击及按住更大的压力来触发应用所提供的一系列服务。正常的点击则依然为启用应用。
• 照片编辑（Photo Editing），照片编辑允许用户在照片应用内对照片以及视频进行过滤或其它方面的改变。编辑后的照片或视频会以一个新的文件的方式进行存储，从而避免对源文件的修改。
• 分享及操作（Sharing and Actions），分享扩展提供了一个非常便捷的方式将当前内容分享至其它应用，社交媒体以及其它服务。操作扩展则允许用户对当前内容进行具体的操作，如增加书签，复制链接或者保存图像。
• 小部件（Widgets），小部件可以理解为用来展示少量及时有用的信息或者应用程序特定功能的扩展。比如，新闻应用的小部件主要显示头条新闻。日历应用则提供了两个部件，其中一个显示当日事件另一个则显示下一个事件。笔记应用则允许用户预览最近的笔记以及快速创建一条新的笔记，提醒，照片或者图画。

https://www.phyet.com/ios-human-interface-guidelines/