iOS 11 设计彻底指南

扁平化设计在过去 5 年中已经普及了，但在 iOS 7 以前并不常见，这种转变造成了当前的设计趋势。但扁平化设计并非一成不变的，iOS 的设计已经适应了更大的屏幕。一开始扁平化设计仍是拟物化设计的对立面，但如今却变得更加细致入微，走上了渐变、阴影和卡片式设计之路。

iOS 进化史

让咱们从头开始，下图是拟物化设计，在 2007 年你们都不了解在口袋里有一台超级计算机是什么感受，因此使用这种强有力的比喻是很是有效的。

接下来，以下图所示，咱们摆脱了全部的装饰，转而采用扁平的色彩、漂亮的排版以及高分辨率的内容。因为大部分人日益习惯智能手机，所以再也不须要借助大量的装饰来进行设计。

下图是 iOS 11 的界面。标题加粗了许多，加强了可读性。因为屏幕更长了，如今底部导航也变得更加常见（Tab bar）。

如今的设计师必须根据多种分辨率和像素密度来调整布局。不过好消息是咱们有了更棒的工具，例如 Sketch 和 Xcode 来适应这些最新的技术。

大标题

iOS 11 正在回归本源。处处都是加粗的字体。标题又黑又大。因为如今的屏幕几乎是最初的两倍长，因此大标题就很是有意义了。大字体还有一个缘由是辅助功能，天天有来自各年龄段的数十亿人在使用手机，让内容尽量清晰和易读变得很是重要。辅助功能让用户能够把支持此功能的 app 的字体设置得很是大。苹果在 iOS 11 中的全部自带 app 都支持这个选项。因此你会发现如今用户对此功能的期待度愈来愈高了。

卡片

更大的屏幕意味着内容有了更多空间。在大屏 iPhone 以前，不该使用任何容器以便给内容留出最大的空间。但有了 iPhone X 和 8，状况则不一样了。能够借助状态栏、导航栏和 tab 栏让导航更加容易，而且使用卡片来更好地管理区域。圆角卡片可让内容看起来更有触感、更友好。可使用模糊的背景和阴影来为设计增长深度和上下文。

iOS 设计的状态

设计如今简单了许多，从而让咱们能够专一在动画和功能上，而不是错综复杂的视觉细节。
在 iOS 7 以前，我天天的设计工做有一大部分都花在设计错综复杂的纹理上，例如木头、皮革和电镀表面。如今，我把这些时间花在了动画和代码上。再也不是静态设计，而要让一切动起来，在更深的层次上去吸引用户。这也是为何本专栏是设计与编程指南，而不只仅是视觉设计指南。 从技术的角度来看，动画和代码从没有变得如此重要并可行。这也是为何咱们几乎每周都能看到一款新的原型工具和代码框架。设计变得很是普遍，同时和许多学科联系在了一块儿。设计师若是可以更好地理解每一个学科的技术，就可以独自创造一款产品，同时也会和工程师更好地合做。

有不少人问过我如何开始学设计，以及如何成为更优秀的设计师。虽然并无什么点石成金的秘诀，可是在 iOS 设计方面有不少技巧和规则能够广泛地影响你的设计方式。

即便你在为另外一个平台进行设计，设计概念依然是相同的，同时也能够把学到的技术应用到 Web 和印刷中。iOS 是一个以设计为本的平台，读起来就像一本现代杂志，拥有漂亮的排版和简单的布局。本专栏的内容会极好的服务于你，让你在任何地方都能设计出最好的产品。

核心哲学

咱们来复习一下基础知识。iOS 由三个核心理念驱动：听从（deference）、清晰（clarity）和深度（depth）。受这些设计原则的启发，我把它们的含义分解为可执行的操做，这样相比于《iOS 人机界面设计指南》就更加简单和更加直观。

听从

内容才是主角，其它东西都是次要的。使用元素对其进行补充，同时避免与其造成竞争关系，从而致使分散了内容的视觉效果。例如，使用漂亮的动画，从一个界面优雅地转移到另外一个界面，从而确保用户不会一头雾水。模糊的背景能够保持上下文，同时可让用户专一在前景的内容上。若是不明白，能够从官方提供的模板开始设计。

简洁

用户界面应该被剥离到只剩下核心美学设计。每当想添加一个新元素的时候，扪心自问一下：真的有必要吗？除非你的 app 是一款游戏或是特定主题，不然不要使用大量纹理、3D 效果和多层阴影。相反，专一于功能性颜色，和谐的渐变和漂亮的排版。

内容最大化

内容应该填满整个屏幕，给内在元素提供最大的空间。避免嵌套容器，同时最大化滚动区域以容许更多的交互空间。

颜色

用显眼的颜色来表示可点击的或须要强调的元素。你的设计是否成功都取决因而否选择了正确的颜色以及是否使用了中性色调。蓝色用于按钮和选中状态会很保险。另外，建议一开始使用白色或浅灰色背景搭配黑色文字。这样会提供极高的对比度，可读性极佳。

排版即内容

因为用户界面的简化和对内容的聚焦，因此排版将会占据屏幕的50%-90%。
因此，最重要的是选择一款漂亮的字体，而后设置它的粗细程度、行高和颜色，这样美观同时又能完美适配全部尺寸下的阅读。推荐使用默认的 San Francisco 字体 ，由于这款字体的设计初衷就是为了易读性。苹果在其全部 app 中都使用的这款字体。

负空间

使用负空间（negative space）以便让内容更专一。看到的东西越少，就越能专一在某几件事情上。负空间给予了更多的呼吸空间（breathing room）。不要用太多的结构或没必要要的视觉元素撑满屏幕。若是不肯定就用 Xcode 默认的边距。苹果一向使用 8 到 16pt 的边距。

清晰

让一切更明显。按钮应该不言而喻（self-explanatory），排版应该大且可读性强，而且拥有温馨的间距。内容应该能清楚代表 app 的用途。例如一款咖啡 app，就应该用咖啡豆、浓缩咖啡和咖啡色来提醒用户。

让文字更易读

标题应该大且对比度鲜明。说明应该简短、便于速读。正文应该有良好的间距，每行不要太长，避免阅读疲劳。

正文的大小应该至少有 11pt。最适合阅读的大小是 17pt 到 19pt。屏幕标题应该在 34pt 及以上，正文里的标题则应该在 20pt 到 30pt 之间。将文本和其余元素对其，便于扫视。最后，使用黑色或深灰搭配浅色背景来得到最佳对比度。

使用醒目的图标

图标不该该模棱两可；它们应该清楚地代表符号的含义。尽量用文字来配合图标。若是你在某个地方使用了个一个图标，就不要再在其余地方使用这个图标或是该图标的变体了，由于这会混淆用户。一样，不要使用“返回”或“提交”这种通用文字，而应明确说明：“回到主页”或是“注册新帐户”。设计清晰的矢量化图标，以便适应屏幕的不一样像素密度。确保你的 assets 适用于 1x，2x（retina）和 3x（super retina）屏幕。

描述性界面

每个界面都应该清楚地说明其功能。慎重地选择表示区域的图片。

有意义的颜色

颜色具备意义。红色、绿色、蓝色和中性色分别表示破坏性行为、确定行为、连接和非活跃状态，明智得使用他们。不要把这些颜色用于其余目的以防混淆用户。例如，不要在“删除”按钮上使用绿色。

为触屏设计

按钮应该容易点击。宽度介于 30-60pt 之间。最佳尺寸是 44pt。在极少数状况下，文本里面的连接会设置为 22pt，但这样很难点击，因此要谨慎使用。即便是文字按钮也要有至少 30pt 的可点击区域。打开图片时，确保包含双指缩放功能而且充分利用滑动手势来单手返回到上一个界面。

横屏模式

用户在使用 iPad 或大屏 iPhone 时常常会使用横屏模式。在这种模式下，app 的状态栏会消失，导航栏和 tab bar 也会变小。有时会在左侧展现一条额外的菜单，就像 iPad 上那样。自适应布局是根据屏幕尺寸来调节布局的一种方式，如今是一种常规作法。感谢 Xcode 里的 Auto Layout 和 Size Classes，基于设备朝向来修改布局变得至关简单。因此不用担忧在设计中采起这种方式。

深度

深度也许是最难理解的部分。这个概念很是抽象，但又强大且独特。深度的意思是全部东西都应该是情境式的、过渡式的。在现实世界里，从一个房间走到另外一个房间，可以感受到前进和距离。这样就不会迷路了。用户界面也应该采用相同的概念。

对人们和他们所处的现实的漠视是设计中惟一的过失。——迪特·拉姆斯

过渡性界面

iOS 最棒、最独特的一个方面就是它的动画。每一个界面都从一个过渡到另外一个。主屏幕放大到某个文件夹，而后再放大到某个 app。动画曾经很难实现，但感谢 Xcode 9，让动画变得更好作了。实际上你会在后面的 Swift 章节中学习到这些技巧。

模糊的背景

保持背景 UI 的上下文并不会有损内容的清晰度。模糊的背景不只能够保持其本来的色彩，还能让前景更加聚焦。模糊不是什么新奇的发明，而是在现实生活中随处可见的东西；当你专一在某个东西上时，其它全部东西都会变得模糊。

你的创造应该比你认为人们所须要的好十倍，只有这样他们才会永远记住它，不然就不会留下什么印象。

动画

动画不只用于从一个界面过渡到另外一个界面，还能够给你的设计增长趣味性和乐趣。它能够强调某个本会被用户忽略的元素。动画还可让通知更明显，天气应用的背景有雨落下时会更容易被理解。

虽然鼓励使用动画，但不要滥用。动画不该分散用户对内容的注意力，或是让用户晕头转向。没必要要的、强制的动画会淹没用户。相反在用户处理内容时让动画变得显而易见，或是使用动画来优雅地将用户的注意力引导到某个正在进行的操做。

最后，动画的展现方式要真实一些。从底部滑上来的模态窗口，也应该从屏幕的底部消失。这样用户会喜欢上这些元素的物理属性，即便它们都是虚拟的。

手势

随着大屏时代的到来，返回按钮已经变得过高了，大拇指很难按到。因此手势虽然没有肉眼可见的按钮来得明显，但它能够用于延伸已经可视化的交互。尤为是对于资深用户来讲会更加方便。全部人都在变成资深用户，因此咱们须要更少的视觉提示以及更有用的功能。

3D TOUCH

3D Touch 可让用户在 app 内部或外部快速访问某些选项。把 3D Touch 想象成 Mac 上的快捷键——可让用户更快的完成重复操做。你须要设计快捷键以便让资深用户变得更有生产力。但就像快捷键同样，基本功能不该该只存在于 3D Touch 中，即便没有 3D Touch，用户也应该可以正常使用 app。

例如，用户能够用力按压 App Icon 来找到经常使用项目。在 app 内部用能够迅速一瞥邮件或连接而不用进入全屏状态。

声音

声音在 app 里用的很少，但播放声音能够把普通的操做变成真正有价值的体验。在推送通知等场景用户不用看手机均可以认出你的 app。若是声音给了用户的正确的印象就事半功倍。

好设计是通用的。不须要解释或长篇大论，用户天然会明白。

延伸阅读

苹果写的更抽象的 Human Interface Guidelines，一直保持更新，功能列表很是详尽。但由于它太详细了，因此个人建议是至少粗略的看一遍，而后只阅读你须要的部分。

移动开发 移动设计 Xcode 设计 UX UI Sketch Objective-C