前言

HIG(Human Interface Guideline)是apple为确保ios上各类app的用户体验质量和一致性，为产品设计师们公布的一份设计指导。

总是粗略的看看翻译文档，现在想来实在是“失职”，这份设计指南实在是非常值得所有的移动互联网从业者细读一次，对于iOS设计的现在和未来发展趋势有更多新的思考。

指南框架

阅读设计指南的第一步，让我们先看一下目录框架。

对比之前的版本，iOS10设计指南的框架有了不少变化，越来越像一份给设计师使用的设计指南。

iOS10设计框架 来源：Apple

---

设计原则

指南所提到的区别iOS与其他平台的三条设计原则是什么呢？

清晰（Clarity）

Throughout the system, text is legible at every size, icons are precise and lucid, adornments are subtle and appropriate, and a sharpened focus on functionality motivates the design. Negative space, color, fonts, graphics, and interface elements subtly highlight important content and convey interactivity.

从以上说明，我关注到以下两点：

1）文本，图标清晰精确，界面装饰微妙适当。

2）留白，色彩，字体，图形和界面元素要巧妙的突出重要内容并指引交互。

从iOS10开始，清晰这一原则更换到了第一顺位。根据设计原则说明，文本和图标作为重要界面内容必须清晰准确，其余的界面装饰不可喧宾夺主，而留白，色彩，字体，图形和界面元素的主要目的是为了传达界面内容，指引用户与之发生交互。

界面的内容将是视觉传达的关键。

顺从（Deference）

Fluid motion and a crisp, beautiful interface help people understand and interact with content while never competing with it. Content typically fills the entire screen, while translucency and blurring often hint at more. Minimal use of bezels, gradients, and drop shadows keep the interface light and airy, while ensuring that content is paramount.

从以上说明，我关注到以下两点：

1）动效和界面帮助用户理解内容并与之交互，但是不会干扰用户。

2）采用半透明和模糊处理暗示其它更多的内容。减少使用边框、渐变和阴影让界面尽可能地轻量化，从而突出内容。

越来越多的产品开始尝试使用一些流畅的动效，让产品更加便于使用并且抓人眼球，但是就像设计指南在这里提到的，无论是产品或者界面都不应该使用户被分心。

并且这一设计原则仍然和清晰（Clarity）原则一样，再一次强调突出内容的重要性。

深度（Depth）

Distinct visual layers and realistic motion convey hierarchy, impart vitality, and facilitate understanding. Touch and discoverability heighten delight and enable access to functionality and additional content without losing context. Transitions provide a sense of depth as you navigate through content.

从以上说明，我关注到以下两点：

1）使用视觉的层次感和生动的动效表达层次结构。

2）当用户浏览内容时，为用户提供纵深感，强调用户的体验愉悦感。

---

在设计我们自己的应用时，Apple为我们提供了哪些建议呢？

美学完整性（Aesthetic Integrity）

一致性（Consistency）

直接操作（Direct Manipulation）

反馈（Feedback）

隐喻（Metaphors）

用户控制（User control）

关于Apple列出来的以上六点建议，网上有许多完善的翻译，在这里仅简要罗列我所关注的。

1）将功能整合到视觉表象和交互行为中。

2）应用要尽可能的和平台贯彻相同的标准和规范。

3）让用户能直接操作屏幕上的对象，并得到即时可视反馈。注意对每一个用户行为都提供明确的反馈。

4）从用户熟悉的体验里提取应用的虚拟对象和行为，以减少用户学习成本。

5）让用户主导控制，不要让应用去干扰用户决定。

---

iOS10 新特征

搜索屏幕和主屏幕的窗口控件（widget）

Widget 提供即时且有用的信息，或是应用特有的一些无需打开应有就能使用的功能。在Extensions模块对于widget有更为详细的说明。

iOS10对于widget做出的改进是什么？

Widget的设计和交互方式改变了。

在过去，用户在消息中心添加widgets当作快速入口。

在现在，用户在搜索屏幕添加widgets，用户可通过在主屏或是锁屏右滑进入搜索屏幕。或者在主屏通过3D Touch触发的某个应用的快捷操作菜单（quick action list）上方添加widget。

与Messages的联动（Integration with Messages）

设计指南里是这样描述Message的联动的：

“应用可以通过执行一种出现在对话下方的messaging插件让用户与朋友分享来自该应用的内容。应用可以通过Message分享文字，图片，视频，贴纸，甚至可交互的内容，譬如信息内的游戏。”

iMessage作为 iOS 10 中最重要的原生应用升级，在这次改动不少。比如集合了各家IM软件的特长，加入了许多同类软件中再常见不过的表情贴纸、Emoji 放大效果等元素，也有苹果自创的消息效果、移植于 Apple Watch 的 Digital Touch 等好玩的沟通元素，用户沟通的体验变得更为生动活泼。

另外对于链接预览、照片预览等交互细节，iMessage也作出了优化调整。

与Siri的联动（Integration with Siri）

来看看对于Siri改进了什么呢？

应用能够与Siri联动，从而让用户使用声音来执行相应的应用操作。

拿滴滴举个例子，在新版iOS 10上的滴滴将更加便捷：不仅支持在苹果地图里直接用滴滴叫车，还可直接用Siri打滴滴了。此外，在地图APP里查找目的地时，也可以直接选择滴滴来出行，全程都不需要唤起滴滴APP。

可拓展的通知栏（Expanded Notifications）

还是先来看看设计指南里是如何描述的：

“你可以通过拓展详情视图来强化你的通知栏，用户可以在未锁屏状态下通过3D Touch功能点击或是下滑你的通知来打开拓展视图。使用这种视图能够让用户快速浏览更多信息，并允许他们在不离开当前界面的情况下对该消息进行快速操作。”

从用户角度而言，最明显的区别是什么？

1）大量圆角矩形卡片，美丑每个人都有自己的看法（比如我就觉得很丑哈哈）。但从信息显示效率来看，对比iOS 9有所降低。

2）针对通知的快捷操作变了。现在要对通知进行快捷操作，在 iPhone 6s 及更新机型上需要使用 3D Touch用力按，旧机型则是需要左滑再按查看，即可对通知进行下一步操作。

3）Rich Notification，以iMessage为例，无需进入应用，在通知中心里就能看到图片、视频并且快捷回复消息。（以前的推送通知不支持图片、视频和自定义样式。）

---

界面基本元素（Interface Essentials）

大多数的iOS应用使用了来自UIKit的部件，这是一个定义了基本界面元素的编程框架。这个框架让各种应用在视觉上达到一致的同时还提供了高度的个性化。

UIKit元素是灵活且常见的。它们是可适配的，让你能够设计一个在任何iOS设备上都看起来很棒的应用，而且能够在系统发布新版本的时候自动更新。

事实上，市场上大部分应用的UI设计都是遵循UIKit框架而设计的。

由UIKit提供的界面元素可以分为以下三种：

栏（Bars）

告知用户现在在应用的哪里，提供导航，而且还可能包含按钮或者其它用来触发功能和交流信息的元素。

视图（Views）

包含用户在应用内最关注的信息，例如文本、图形、动画和交互元素。视图允例如滚动、插入、删除和排列之类的行为。

控件（Controls）

触发功能和传递信息。控件包括按钮、开关、输入框和进度指示器。

为了进一步定义iOS界面，UIKit规定了你的应用能够采用的功能。通过这个框架，你的应用可以对触摸屏上的手势作出应答，还可以包含一些例如绘画、辅助和打印的功能。

iOS也和其他编程框架和技术紧密结合，譬如Apple Pay、HealthKit 和ResearcKit, 它帮助你设计出一个强大地惊人的应用。

界面的基本元素在后面的指南章节里有更为详细具体的说明，实际的说明了如何定义划分，承担什么样的功能，并以怎样的规范去设计执行，但在这里对iOS界面三大类元素有一个基础认知不是一件坏事，能帮助我们从框架上去观察和反思我们的界面设计。

---

来源参考引文：

1.https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/ － Apple

2.https://isux.tencent.com/ios-10-design-trends.html?variant=zh-hant － 腾讯ISUX

3.http://www.uisdc.com/ios-10-gui-design-guideline-1 － 优设