解析 iOS 11：苹果还像过去一样在意细节吗？

@Ryan Lau ：北京时间 13 日凌晨，Apple 在 Apple Park 内的 Steve Jobs Theater 召开了秋季特别活动，在为全面屏的 iPhone X 揭开面纱的同时，Apple 向开发者们推送了即将在 19 日正式推送的 iOS 11 GM 版本，笔者也在第一时间更新了自己的 iPhone。

笔者在 6 月份的 WWDC 后尝鲜了 iOS 11，在经历了一个暑假的更新后，iOS 11 终于走到了正式版。笔者使用的是 4.7 寸的 iPhone 7，在一番体验后，却发现 iOS 11 的正式版仍然充满了 Beta 版本的毛糙感。做为一名设计师，终于忍不住要写一篇文章来吐槽了。

笔者撰写本文的目的，在于让人们注意到 iOS 11 中仍有许多不足之处，也希望能够让 Apple 内部有关的人员注意到，使得 iOS 11 在后续版本更新中能够解决这些问题。

iOS 11 体验的粗糙，主要表现在 UI 和动画方面。iOS 11 的 UI 元素极不统一，各种 UI 元素混杂，尽管它们看起来相似，但却会在细微的体验间带来割裂感。这些元素的不统一主要集中在 iOS 11 中更新过的一些 UI 元素，例如新加入的 Large Title，以及新的 Search Bar 样式。这些新引入的元素，或许是缘于 Apple 内部工程师还尚不熟悉，导致系统中出现了许多不统一的 UI 体验。

Mail

先来看看 iOS 11 原生的 Mail。和其他系统应用一样，Mail 也引入了新的带有 Large Title 的 Navigation Bar。然而，Mail 中的 Large Title，与设计指南中的标准样式相比，位置却靠右了一些。在此我们可以以 Search Bar 作为参照物，在标准控件中，Large Title 与 Search Bar 依照同一条参考线左对齐，而在 Mail 中，Large Title 显然相比 Search Bar 在水平位置上往右边挪了些。

Watch app

在 Watch app 中，Search Bar 的设计并未适配 iOS 11 推荐的样式，显得格格不入。在使用了 iOS 11 新设计风格的原生应用中，Search Bar 都已经和 Navigation Bar 融为一体，而 Watch app 却并非如此：

在 Apple 向开发者发布的 Building Apps for iPhone X（https://developer.apple.com/videos/play/fall2017/201/） 指导视频中，刚好提到了同样的问题：

左侧的 WWDC 是在未经适配的反例，右侧的 Contacts app 则是适配过的范例。视频中是如此解说这个问题的：

That’s move on to the second issue that I found… if I bring out the search field, well that doesn’t look quite right. Let’s compare this to the Contacts app list. A couple of things look wrong here. The color of the search bar background isn’t quite right. And the sizing is a bit off.

可见，iOS 11 提倡 Search Bar 与 Navigation Bar 背景融合。而 Watch app 作为原生 app，却没能做到这一点。此外，Watch app 的 Search Bar 点击后，Search Bar 已经贴到了 Status Bar 的底部，可见 Apple 的工程师在此处并不够用心：

Files

Files 中的 Search Bar 同样有问题。看起来 Files 的工程师使用了非标准的 Search Bar。从下图可以看出，相比 Settings 中的标准 Search Bar，Files 中的在尺寸大小、字体颜色上有些许差别：

除了尺寸大小之外，我们还可以通过点击 Search Bar 后的动画判断出不同。首先看看 Settings 中的标准 Search Bar：

△ https://v.vzuu.com/video/891639179635740672

再看看 Files 中的 Search Bar：

△ https://v.vzuu.com/video/891683943068360704

对比发现，Files 中的 Search Bar 动画速度更快，且动画逻辑并不自然，略显粗糙。

App Store

iOS 11 的 App Store 经过了重新设计，引入了类似 Apple Music 的设计。然而，在 App Store 的 Today，以及 Apple Music 的 For You 中，日期的地方却是用了两种不同的字重。如下图所示，App Store 中较重，而 Apple Music 中较轻：

同样是这两个 app 的对比，在两个 app 的搜索页面中，触摸 App Store 内的推荐条目，并不会有触摸的 hover 反馈，而对于 Apple Music，触摸搜索条目时，改条目的背景色和字体色会调换，以形成触摸反馈。笔者认为，Apple Music 的处理更为合适，且同样作为系统的原生应用，不管是否有 hover 反馈，都应该统一。

此外，在 App Store 中，仍存在一些细节上的 bug。在 App Store 中打开任意一个有特色图像的 app，从左边缘右划，再左划，会发现 Navigation Bar 的颜色出了问题：

通过视频看一下这个 bug：

△ https://v.vzuu.com/video/891640396579508224

App Store 中还有一个动画性能问题。在 Updates 下面，下拉刷新后，滑动 Large Title 时帧数会严重下降，此处通过视频不好展示，亲自体验时可以明显感受到。

Health

在 Health 中，Today 页面和 Health Data 页面中，相同的数据，相同的卡片设计，卡片的宽度却不同。这一问题在 iOS 10 中已经存在，但是至今仍未有改观：

Today Widget

在 iOS 11 中，有两种打开 Today Widget 页面的方式，一是在主屏幕右划，二是在锁屏／通知中心右划，然而以上两种方式各自调出的页面中，顶部 Search Bar 的触发动作和动画有很大的差异。前一种方式（主屏幕右划）中，向下拉动 Widget 页面无法调出 Search Bar，而点击 Search Bar 时除 Cancel button 有动画之外，毛玻璃的出现和消失没有动画过渡，Search Bar 宽度的变化也只有在变窄时才有动画，退出 Search Bar 时则没有动画，整个体验十分生硬：

△ https://v.vzuu.com/video/891460439790194688

而在第二种方式（锁屏／通知中心右划）中，以上动作均有动画过渡，且向下拉动 Widget 页面可以调出 Search Bar，体验顺滑：

△ https://v.vzuu.com/video/891460512884355072

这就造成了两处 Today Widget 页面体验的割裂。显然，从主屏幕进入的版本简陋许多。值得一提的是，在 iOS 10 中，从主屏幕进入的 Today Widget 页面也都是有 Search Bar 动画的，Search Bar 也可以通过下拉触发，不知为何，这一切在 iOS 11 中都消失了。

不过，话说回来，iOS 11 中通过锁屏／通知中心进入的 Today Widget 页面也并非完美，其同样有相较 iOS 10 的倒退之处。在 Today Widget 页面，当用户上拉页面，使得 Search Bar 盖过 Widget 时，Search Bar 下会出现一毛玻璃矩形，以防止 Widget 内容和 Search Bar 重叠，然而，此时点击 Search Bar，这一毛玻璃矩形会先消失，然后才出现全屏的毛玻璃，而退出 Search Bar 时，则是全屏的毛玻璃先完全消失，顶部的毛玻璃矩形随后才出现，且没有动画，十分不自然：

△ https://v.vzuu.com/video/891460560384823296

（请仔细看屏幕顶部的 Search Bar）

如果视频太快，还可以逐帧观看。可以看出，全屏的毛玻璃与顶部的毛玻璃并无连接，而是先后出现，割裂感十足：

除了缺少的动画，iOS 11 中同样有多余的动画。在 iOS 11 中，每次从 Today Widget 页面左划，进入锁屏界面时，都会有一个播放器从短变长的动画。在笔者看来，这个动画实在多余了：

△ https://v.vzuu.com/video/891647941545177088

在点击 Search Bar 后出现的 Siri Search Suggestions 中，有两个问题。一是，当用手触摸搜索项时，hover 反馈宽度并不是屏幕宽度，导致 hover 变成了一个十分僵硬的直角矩形。合适的 hover 应该是像 Apple Music 等 app 中一样，hover 宽度为屏幕宽度：

二是一个非常诡异的问题，如果各位仔细看 Siri Search Suggestions 中的文字，会发现字体的边缘并不平滑（拉丁字母较明显）：

Photos

留白过多或过少，即不合适的 margin，同样出现于 iOS 11 的许多地方，使得 UI 的粗糙感和半成品感尽显。

在 Photos 中的 Shared 标签页中，Activity 页面内容左侧（下图中箭头所指处）的 margin 太小，相比其他 app 过于突兀：

Settings

在 Settings 中的 Apple ID 页面，iOS 11 中底部的设备列表对齐方式自成一派。而在 iOS 10 中，这一区域是正常的，不知为何在 iOS 11 中就坏掉了：

Apple Music

在 Apple Music 中，Connect 的某些 post 类型会出现图片与文字间 margin 过小的情况，可以确定的是，这并不是一个故意的设计决定，因为在 macOS 中的 iTunes，margin 的设置是合理的。尽管 Connect 这一功能存在感极低，但是作为 Apple，仍不应该在设计上犯如此低级的错误：

同样是 Apple Music，进入 Library 的 Albums list，点击右侧的首字母跳转，会发现，字母的标签遮挡了一部分专辑封面：

在 iOS 10 作为特色在 WWDC 上宣传的 Apple Music 播放界面动画在 iOS 11 中工作不正常。例如，在二次打开正在播放界面时，正在播放专辑封面的阴影会无端消失（下图左）；暂停状态下，封面应该较小，但在二次打开播放界面时，却变得和正在播放时一样大（下图右）：

在 iOS 10 使用过 AirPods 听歌的用户都知道，当连接至 AirPlay 设备时，正在播放界面底部的 AirPlay 图标后，会显示连接的设备名。然而，在 iOS 11 中设备名却不见了：

或许有人会说，这是一个设计上的选择，但是实际上，这是一个 bug。如下视频所示，在正在播放界面中刚刚连接至 AirPlay 设备后，底部会显示设备名。但若在之后将正在播放界面关闭，再次打开后，设备名就不见了（请注意看视频底部的 AirPlay 标志）：

△ https://v.vzuu.com/video/891645149132775424

而且，在使用和 Apple Music 同样设计风格的 Podcasts 中，始终会显示 AirPlay 设备名，没有 bug：

Apple Music 中还有一个 bug。众所周知，在 iOS 中返回顶部一般有两种方法，一为点击 Status Bar，二为点击 Tab Bar 上的图标。然而在 Apple Music 中，点击 Status Bar 后返回的是 Large Title Navigation Bar，点击 Tab Bar 图标后返回的却是小字的 Navigation Bar：

可以确定的是，这是一个 bug 而不是设计选择。因为在采用大标题的 Podcasts 和 App Store 等原生应用中，点击 Status Bar 和 Tab Bar 图标返回的都是 Large Title。

Control Center

在 Control Center 中，AirPlay 设备的标示显示也有 bug。笔者在使用过程中，经常会遇到连接着 AirPods 却显示播放源为「iPhone」的情况。以及，当播放源显示为 AirPods 时，点击暂停，播放源则显示为 iPhone（不过这只是显示的错误，AirPods 仍在正常运作）：

△ https://v.vzuu.com/video/891654950634008576

Control Center 中也有一处不合适的动画，即 Screen Mirroring 的 3D Touch 动画：

△ https://v.vzuu.com/video/891655367698837504

Weather

iOS 11 的 Weather 同样经过了更新，采用了更大的字体，留白更少。在此处我注意到了一个小细节，在 iOS 11 中，温度的数字并未居中。而在 iOS 10 前，数字是居中的：

此处有可能是 iOS 11 的设计决定。但是笔者的实际使用中，iOS 11 未居中对齐数字，导致在部分温度时，数字视觉偏左十分明显，效果并不比 iOS 10来得 好。

字体问题

接下来是最后一个问题也是最为严重的一个问题。以上的问题可能对正常人的使用并不影响，但接下来的问题实实在在影响了每个人的使用体验。

这就是 iOS 11 Safari 中存在的伪粗体问题。这一问题是笔者在 iOS 11 调试个人网页效果时发现的：

如上图，iOS 11 中，苹方粗体是明显的「伪粗体」（faux bold）。伪粗体即系统并非调用苹方自带的字重，而是在某一基础字重上粗暴地机械增加字重。伪粗体通过算法机械生成，通常质量不佳，会造成笔画粗细、字距等方面的明显问题。从截图中可以看出，iOS 11 中的伪粗体苹方字距明显偏大。

在经过调试后，笔者发现这一问题仅会发生在 CSS font-family 设置中存在「-apple-system」的情况中，即 font-family 中使用了系统的 San Francisco 字体。只要在 font-family 中去除 -apple-system，系统即会调用现有的字重，伪粗体消失。

这个问题，不仅出现在 Safari 中，而是会波及所有使用了 iOS 网页渲染引擎的 app，例如微信的内置浏览器和豆瓣 app。如下图所示，豆瓣 app 已经被伪粗体苹方占领了：

打开一篇影评，会发现标题是伪粗体。通过对比换行位置，可以发现伪粗体的字距有很大问题。实际上，这一问题不仅仅是伪粗体，其波及包括 Regular 在内的所有字重，即实际上，你所看到的 Regular 字重也是「伪 Regular」。伪 Regular 或许很难从笔画粗细这一角度发觉问题，但通过下图对比，可以发现 iOS 11 中正文的字距也偏大，足以证明这是「伪 Regular」：

再欣赏一下伪粗体在微信推送中的表现：

Safari 伪粗体问题在 iOS 11 Beta 1 就已出现，笔者于八月初通过 Feedback app 提交 bug 反馈，但直至 iOS 11 正式版，这一问题仍未解决。笔者作为一名字体排印爱好者，实在对此感到失望。

结语

近几年，关于 Apple 软件质量下降的讨论不绝于耳。Apple 在生物识别、机器学习、AR 等重大领域大跨步前进，公司规模愈来愈大的同时，似乎失却了过往那种细心雕琢每一个产品细节的心。13 日的发布会上，听着 The Beatles 的歌，听着 Steve 的话，有那么一瞬间，我感到我们好似还身处过去的 good old days。不过今日的 Apple，确实是不同以往了。我无意唱衰 Apple，作为一名生活中充满 Apple 产品的人，Apple 现在仍是我最喜爱及尊敬的科技公司。我只是希望，Apple 不断前进的同时，不要忘记过去他们所珍视的价值。

「最全面的iPhone X 设计资源」

1. 《最新版iOS 11设计规范发布了，来下载官方源文件！》
2. 《优设首发！iPhone X 官方人机交互指南中文版》
3. 《优设首发！800M高质量的iPhone X+8展示模板免费打包下载》

原文地址：https://zhuanlan.zhihu.com/p/29313582

【优设网 原创文章 投稿邮箱：yuan@uisdc.com】

================明星栏目推荐================

优优教程网： UiiiUiii.com 是优设旗下优质中文教程网站，分享了大量PS、AE、AI、C4D等中文教程，为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章，按照我们的专栏一步步学习，一定可以迅速上手并制作出酷炫的视觉效果。

设计导航：国内人气最高的设计网址导航，设计师必备：http://hao.uisdc.com