众所周知,前几天苹果在位于苹果公园的Steve Jobs剧院召开了一年一度的新品发布会,正式揭幕了全屏的iPhoneX, 随后又把iOS 11推送给了测试员(Beta Tester)(正式版将于几周后发布)。我一收到iOS 11 GM的推送就立刻更新了我的手机。

译者注:什么是Apple Beta版软件计划?

Apple Beta 版软件计划可以让用户试用预发布版软件。针对使用者遇到的质量和可用性问题提供反馈,能帮助苹果甄别和修正问题并进一步完善 Apple 软件。

Beta software自从六月的WWWDC大会以来,我就作为Beta Tester给iOS 11的增量更新密集地做测试。拿着4.7英尺的iPhone以及iOS 11 GM,感觉Beta软件还有很多需要改进的地方。作为一个设计师,我忍不住想把自己的使用感受写下来。

我写这篇文章的目的是帮助人们认识到许多需要在将来进行改进的细节。

这些对于iOS 11需要改进的感觉绝大部分来自于UI和动画(animation)。iOS的UI元素很不协调,将大量不同类型的UI元素混在一起,这些元素看起来很相似,但是却为UX带来不流畅的体验。这种元素的不一致性主要来自于iOS 11中新更新的UI元素,比如说大标题和搜索条。我的看法是,这些新加引入的元素造成了iOS 11上面许多不一致的UI体验。

Mail.app

首先我们看一下iOS 11上面的Mail.app。就像其他的原生apps一样,Mail也引进了带着大标题的导航条。然而,相较于设计指南样本,Mail上面的大标题有多余的左边距。在这里,我们将搜索条作为参考对象。在设计指南样例中,大标题和搜索条相对于屏幕边缘的距离是相同的,但是在Mail.app中,与搜索条相比,大标题很明显往右偏移了一些。

Watch.app

在Watch.app中,搜索条没有遵循建议的风格,并且用另一个不太合适的背景来突出搜索条。在采用iOS 11设计风格的原生apps中,搜索条应该与导航条很自然的匹配上,而不是像Watch.app这样。

在Apple公布的使用指南Building Apps for iPhone X中,他们提到了一个同样的例子:

左边的WWDC.app是一个违反设计风格的反例,右边的Contacts.app是遵守设计的最佳实践。视频中的评论者宣称:

这是我发现的第二个问题。。。。如果我召唤出搜索区域,这就看起来不太对了。我们可以跟Contacts app 列表比较一下。有很多东西都都错了。搜索条的背景颜色和大小都不太对

所以,iOS 11被建议让搜索条和导航条的背景颜色做一下匹配。目前为止Watch.app作为原生app还没有遵守上面的建议。还有,一旦被点击,Watch.app中的搜索条几乎都要“亲上”状态条了,这说明苹果的工程师们实在是有太多东西需要改进了。

Files.app

Files.app里面的搜索条也有一些问题。看起来Files.app的工程师们使用了一个非标准的搜索条。从下面的照片中可以看出,与Settings.app中的标准搜索条比起来,Files.app的搜索条更小,字体颜色更浅。

APP Store.app

iOS 11的App Store经历了一次重设计,看起来有些像Apple Music。然而,App Store的Today键与Apple Music的For You一比较,日期的字体还是不一样,App Store的字体更大。然后Apple Music的“Wednesday”后面跟着一个逗号,App Store中逗号消失了。

再次比较两个apps。在搜索页面中,在App Store中触碰“Trending”项目不会触发hover效果,然而在Apple Music中同样的动作会触发一个hover事件来改变项目的背景/前景颜色。在我看来,Apple Music做得更好,原生apps应该在hover反馈上面达成一致,不管是保留还是去掉这个效果。

除此之外,在细节之处还有各种各样的问题。在APP Store中,打开任何有横幅照片的app,拖动这个页面从屏幕左边到右边小滑一下(但不是完全滑过,这样会退出app页面)在页面恢复之后这个横幅section的渲染会变得很奇怪(render):

同时这里也有性能问题,在更新选项上面,向下拉刷新项目的时候这里会有一个很明显的框架下垂(若果你的大标题被往下拉的太多的话)。这个bug你自己可以很容易感受到。

Health.app

在Health.app中,Today页面和Health Data页面,同样的数据和同样的风格,但是却有不同的宽度。这个问题是iOS 10的遗留问题,但是现在任然未被修复。

Today Widget

在iOS 11中。有两个方式打开Today Widget,在Home屏幕或者锁屏从左到右轻扫,页面里面的搜索条用不同的方式召唤出来会有不同的行为。当从Home页面被召唤出来时,向下拉Widget page将不会显示搜索条,点击搜索条的时候会缺失出现的动画以及霜冻效果,以及点击取消之后搜索条变宽的动画(虽然变窄有动画)也缺失了。整体的体验很尴尬。

Photos.app

iOS 11中充满了不恰当的边距,要不然太多,要不谈就是太少。导致感觉这个系统是一个半成品,太多东西需要改进和完成了。

在Photos.app的分享选项上面,边距(下图中箭头指的地方)太窄了并且不一致,与其它原生APP中相似页面相比。

Settings.app

在Settings.app中-->Apple ID小节中,设备列表完全没有与ID节对齐。在iOS 10中还是正常的,在iOS 11中就不行了。

 

Music.app

在Apple Music中的连接上面,图片和文字之间的边距实在是太小了。这不应该是设计的决定,因为在桌面macOS上面的iTunes端边距还是正常的。虽然连接不是一个常用的功能,苹果也不应该犯这种低级的UI设计错误。

又是Apple Music,通过Library进入专辑列表之后,点击首字母列表来快速进入以那个字母开头的专辑,你会看到那个首字母所在的小节遮住了专辑封面的一部分。

Weather.app

iOS 11中的Weather.app也使用较大的字体和较少的余量进行了更新。不过我注意到,iOS 11中的温度文字并不是中心对齐的,而在iOS 10中是对齐的。

这可能是iOS 11的设计决策。然而在实际使用中,由于不对齐,对于某些数字,对于用户来说,更接近左边缘的文字是非常明显的,但效果并不比iOS 10好。

 

字体问题

在我看来,最后和最严重的问题是字体。上述问题可能不会影响正常使用,但下面的问题实际上会影响我们每个人。

这是iOS 11 Safari中的PingFang(iOS的默认中文字体)的粗体字体。当我在iOS 11上调试个人网站时,我发现了这个问题。所有的比较都是在iOS 11和iOS 10之间进行的。

如上图所示,PingFang实际上是渲染为粗体。伪粗体基本上不使用字体本身提供的字体重量,而是强制地在某些基本字体上增加字体重量。伪粗体是由算法生成的,通常缺乏质量,引起笔画重量和字母跟踪的问题。在屏幕截图中,你可以看到,iOS 11中的伪粗体PingFang在文本之间有更大的间距。

经过一些测试,我发现只有当CSS font-family包含“-apple-system”,即使用系统提供的旧金山字体的font-family时才会发生这种情况。一旦我们删除它,系统将会尊重由字体本身提供的字体重量,并且粗体粗体已经消失了。

这个问题不仅在Safari中,而且还会影响使用iOS的webkit引擎的所有应用程序来呈现网页,例如微信的内部浏览器和豆瓣。正如你所看到的,豆瓣已经被伪粗体苹方占领,看起来还算不错。

随机选择一个电影评论文章,你会注意到标题是粗体。通过比较,你还会注意到,粗体字体中的字体间距是有问题的。其实这不只是伪粗体的问题,还波及常规或任何字体的重量,所以你看到“伪Regular”等等。伪 Regular 或许很难从笔画粗细这一角度发觉问题,但通过下图对比,可以发现 iOS 11 中正文的字距也偏大,足以证明这是「伪 Regular」:

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

Safari的这个伪字体问题已经出现在iOS 11 Beta 1中,我在8月初提交了反馈应用程序的错误报告(案号为#3436665)。然而,这仍然是今天的一个问题,可能适用于iOS 11或更高版本。作为排版爱好者,我对此感到非常失望。

小结

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

一起来给iOS 11找bug: 苹果还是乔布斯时代的细节控吗?的更多相关文章

  1. iOS 11 APP 设计中的几个 UI 设计细节

    Apple 官网看了 iOS 11 的介绍,发现有不少的更新哦,比如控制中心.Siri.Live Photo 等等,总体来说都有很多不错的体验,不过本文不介绍功能,只说视觉界面. 在 iOS 11 的 ...

  2. 阿里聚安全·安全周刊】一种秘密窃取数据的新型 Android 木马|iOS 11相机惊现BUG

    本周的七个关键词:  新型 Android 木马丨 TLS 1.3 丨  阿里安全图灵实验室 丨 漏洞感染 Linux 服务器 丨 CPU曝极危漏洞 丨   iOS 11相机BUG 丨R2D2技术 - ...

  3. H.264格式,iOS硬编解码 以及 iOS 11对HEVC硬编解码的支持

    H.264格式,iOS硬编解码 以及 iOS 11对HEVC硬编解码的支持 1,H.264格式 网络表示层NAL,如图H.264流由一帧一帧的NALU组成: SPS:序列参数集,作用于一系列连续的编码 ...

  4. iOS 11开发教程(一)

    iOS 11开发概述 iOS 11是目前苹果公司用于苹果手机和苹果平板电脑的最新的操作系统.该操作系统的测试版于2017年6月6号(北京时间)被发布.本章将主要讲解iOS 11的新特性.以及使用Xco ...

  5. 阿里安全潘多拉实验室首先完美越狱苹果iOS 11.2

    苹果官方对iOS 11的评价是"为iPhone带来巨大进步,让iPad实现里程碑式飞跃."但为了不断修复Bug,苹果于12月2日推出最新的iOS 11.2,修复了Google安全人 ...

  6. 浅酌iOS 11兼容性

    WeTest导读 苹果在WWDC2017大会,公布了最新的iOS 11,系统新特性肯定是让不少果粉充满期待.在网上已能看到不少关于iOS 11的体验文章,那么iOS 11的新特性会对APP产生什么兼容 ...

  7. 你可能需要为你的 APP 适配 iOS 11

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/AZFrqL9dnlgA6Vt2sVhxIw 作者:s ...

  8. iOS 11: CORE ML—浅析

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/OWD5UEiVu5JpYArcd2H9ig 作者:l ...

  9. [译] iOS 11.4.1 Beta:全新的USB限制模式

    (Source/原文链接 https://blog.elcomsoft.com/2018/06/ios-11-4-1-beta-usb-restricted-mode-has-arrived/) 作者 ...

随机推荐

  1. Mac上安装stf

    一,安装 STF的依赖比较多,如下: Node.js >= 0.12ADB properly set upRethinkDB >= 2.2GraphicsMagick (for resiz ...

  2. 传统DOM事件处理程序

    传统DOM事件处理程序与比HTML事件处理程序相比,优点:可以将HTML和JS脚本分离. 它的操作形式如下 : <body> <div>传统DOM事件处理程序与比HTML事件处 ...

  3. 【C++ Primer | 06】 函数

    contexpr函数 const用于运行期常量,constexpr用于编译期常量 • [test1.cpp] #include <iostream> using namespace std ...

  4. A 暴力搜索 剪枝是关键

    Description 盖伦是个小学一年级的学生,在一次数学课的时候,老师给他们出了一个难题:老师给了一个正整数 n,需要在不大于n的范围内选择三个正整数(可以是相同的),使它们三个的最小公倍数尽可能 ...

  5. [转] 插件兼容CommonJS, AMD, CMD 和 原生 JS

    模块标准 CommonJS CommonJS 有三个全局变量 module.exports 和 require.但是由于 AMD 也有 require 这个全局变量,故不使用这个变量来进行检测. 如果 ...

  6. 解决/bin/sh: 1: syntax error: "(" unexpected错误,以及更换bash仍然无法解决的问题

    编译文件的时候出现 /bin/sh: 1: syntax error: "(" unexpected 错误. 网上查到的资料都是: (1)在脚本前写#!/bin/bash (2)执 ...

  7. 使用sshtunnel实现python公网连接阿里云mongo服务器

    背景: 公司使用阿里云的云数据库MongoDB.基于安全原因考虑,阿里云MongoDB云数据库目前只支持从阿里云ECS上访问,无法通过公网直接访问,不方便用户在本地开发环境里直接进行测试. 阿里云官方 ...

  8. kubernetes 部署 traefik 以及kubernetes dashborad

    前言 本来打算通过 traefik 来实现 kubernetes dashborad 的服务访问,可是在配置过程中始终报错.最后无奈只能通过nodeport来实现kubernetes dashbora ...

  9. BZOJ1195 [HNOI2006]最短母串 AC自动机 bfs

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 传送门 - BZOJ1195 题意概括 给出一堆串,然后求一个包含这些串的所有串的最短的中的字典序最小的. 题解 先造一个AC ...

  10. Phone List HDU1671

    字典树的包含与不包含关系 #include<bits/stdc++.h> using namespace std; ][]; ]; ; bool insert1( char *word ) ...