一起来给iOS 11找bug: 苹果还是乔布斯时代的细节控吗?
Apple Beta 版软件计划可以让用户试用预发布版软件。针对使用者遇到的质量和可用性问题提供反馈,能帮助苹果甄别和修正问题并进一步完善 Apple 软件。
我写这篇文章的目的是帮助人们认识到许多需要在将来进行改进的细节。
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」:
再欣赏一下伪粗体在微信推送中的表现:
小结
一起来给iOS 11找bug: 苹果还是乔布斯时代的细节控吗?的更多相关文章
- iOS 11 APP 设计中的几个 UI 设计细节
Apple 官网看了 iOS 11 的介绍,发现有不少的更新哦,比如控制中心.Siri.Live Photo 等等,总体来说都有很多不错的体验,不过本文不介绍功能,只说视觉界面. 在 iOS 11 的 ...
- 阿里聚安全·安全周刊】一种秘密窃取数据的新型 Android 木马|iOS 11相机惊现BUG
本周的七个关键词: 新型 Android 木马丨 TLS 1.3 丨 阿里安全图灵实验室 丨 漏洞感染 Linux 服务器 丨 CPU曝极危漏洞 丨 iOS 11相机BUG 丨R2D2技术 - ...
- H.264格式,iOS硬编解码 以及 iOS 11对HEVC硬编解码的支持
H.264格式,iOS硬编解码 以及 iOS 11对HEVC硬编解码的支持 1,H.264格式 网络表示层NAL,如图H.264流由一帧一帧的NALU组成: SPS:序列参数集,作用于一系列连续的编码 ...
- iOS 11开发教程(一)
iOS 11开发概述 iOS 11是目前苹果公司用于苹果手机和苹果平板电脑的最新的操作系统.该操作系统的测试版于2017年6月6号(北京时间)被发布.本章将主要讲解iOS 11的新特性.以及使用Xco ...
- 阿里安全潘多拉实验室首先完美越狱苹果iOS 11.2
苹果官方对iOS 11的评价是"为iPhone带来巨大进步,让iPad实现里程碑式飞跃."但为了不断修复Bug,苹果于12月2日推出最新的iOS 11.2,修复了Google安全人 ...
- 浅酌iOS 11兼容性
WeTest导读 苹果在WWDC2017大会,公布了最新的iOS 11,系统新特性肯定是让不少果粉充满期待.在网上已能看到不少关于iOS 11的体验文章,那么iOS 11的新特性会对APP产生什么兼容 ...
- 你可能需要为你的 APP 适配 iOS 11
本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/AZFrqL9dnlgA6Vt2sVhxIw 作者:s ...
- iOS 11: CORE ML—浅析
本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/OWD5UEiVu5JpYArcd2H9ig 作者:l ...
- [译] iOS 11.4.1 Beta:全新的USB限制模式
(Source/原文链接 https://blog.elcomsoft.com/2018/06/ios-11-4-1-beta-usb-restricted-mode-has-arrived/) 作者 ...
随机推荐
- cf803c 数论
细节很多的题 #include<bits/stdc++.h> using namespace std; #define ll long long int main(){ ll n,k,tm ...
- poj2352树状数组解决偏序问题
树状数组解决这种偏序问题是很厉害的! /* 输入按照y递增,对于第i颗星星,它的level就是之前出现过的星星中,横坐标小于i的总数 */ #include<iostream> #incl ...
- DOM事件监听器
DOM事件监听器,允许一个事件触发多个方法.在实际工作中应用比较多. 它的调用形式如下: <body> <div> DOM事件监听器,允许一个事件触发多个方法. </di ...
- BBC 记录片planet earth
He'll have to remain on guard for another two weeks, but in the jungle, just surviving the day can c ...
- jQuery+存储过程实现无刷新分页(九)
涉及到得知识点: 1.分页存储过程 2.分页原理 3.jQuery DOM操作 4.jQuery Ajax存取数据 效果图:
- ***使用Fiddler抓取Android安卓手机的APP请求
安装Fiddler,百度搜索Fiddler,就会有下载链接. 启动Fiddler,开始设置.点击“tools-->fiddler options”. 设置HTTPS选项.在设置过程中会有 ...
- [转] react-router4 实现按需加载
按需加载的背景 https://juejin.im/post/58f9717e44d9040069d06cd6?utm_source=tuicool&utm_medium=referral R ...
- vtiger7安装设置
安装界面一直报错 其实是设置的问题 error_reporting:E_WARNING & ~E_NOTICE & ~E_DEPRECATED max_execution_time:6 ...
- Web前端开发最佳实践(13):前端页面卡顿?可能是DOM操作惹的祸,你需要优化代码
文档对象模型(DOM)是一个独立于特定语言的应用程序接口.在浏览器中,DOM接口是以JavaScript语言实现的,通过JavaScript来操作浏览器页面中的元素,这使得DOM成为了JavaScri ...
- 一次流式处理的submit
考虑很多: 压背.限流.JVM优化,出错的重试等 #!/bin/bash num_executors=1 executor_memory=1g driver_memory=1g executor_co ...