一起來給iOS 11找bug: 蘋果還是喬布斯時代的細節(jié)控嗎？

眾所周知，前幾天蘋果在位于蘋果公園的Steve Jobs劇院召開了一年一度的新品發(fā)布會，正式揭幕了全屏的iPhoneX, 隨后又把iOS 11推送給了測試員（Beta Tester）（正式版將于幾周后發(fā)布）。我一收到iOS 11 GM的推送就立刻更新了我的手機。

譯者注：什么是Apple Beta版軟件計劃？

Apple Beta 版軟件計劃可以讓用戶試用預(yù)發(fā)布版軟件。針對使用者遇到的質(zhì)量和可用性問題提供反饋，能幫助蘋果甄別和修正問題并進一步完善 Apple 軟件。

Beta software自從六月的WWWDC大會以來，我就作為Beta Tester給iOS 11的增量更新密集地做測試。拿著4.7英尺的iPhone以及iOS 11 GM，感覺Beta軟件還有很多需要改進的地方。作為一個設(shè)計師，我忍不住想把自己的使用感受寫下來。

我寫這篇文章的目的是幫助人們認識到許多需要在將來進行改進的細節(jié)。

這些對于iOS 11需要改進的感覺絕大部分來自于UI和動畫（animation）。iOS的UI元素很不協(xié)調(diào)，將大量不同類型的UI元素混在一起，這些元素看起來很相似，但是卻為UX帶來不流暢的體驗。這種元素的不一致性主要來自于iOS 11中新更新的UI元素，比如說大標題和搜索條。我的看法是，這些新加引入的元素造成了iOS 11上面許多不一致的UI體驗。

Mail.app

首先我們看一下iOS 11上面的Mail.app。就像其他的原生apps一樣，Mail也引進了帶著大標題的導(dǎo)航條。然而，相較于設(shè)計指南樣本，Mail上面的大標題有多余的左邊距。在這里，我們將搜索條作為參考對象。在設(shè)計指南樣例中，大標題和搜索條相對于屏幕邊緣的距離是相同的，但是在Mail.app中，與搜索條相比，大標題很明顯往右偏移了一些。

Watch.app

在Watch.app中，搜索條沒有遵循建議的風(fēng)格，并且用另一個不太合適的背景來突出搜索條。在采用iOS 11設(shè)計風(fēng)格的原生apps中，搜索條應(yīng)該與導(dǎo)航條很自然的匹配上，而不是像Watch.app這樣。

在Apple公布的使用指南Building Apps for iPhone X中，他們提到了一個同樣的例子：

左邊的WWDC.app是一個違反設(shè)計風(fēng)格的反例，右邊的Contacts.app是遵守設(shè)計的最佳實踐。視頻中的評論者宣稱：

這是我發(fā)現(xiàn)的第二個問題。。。。如果我召喚出搜索區(qū)域，這就看起來不太對了。我們可以跟Contacts app 列表比較一下。有很多東西都都錯了。搜索條的背景顏色和大小都不太對

所以，iOS 11被建議讓搜索條和導(dǎo)航條的背景顏色做一下匹配。目前為止Watch.app作為原生app還沒有遵守上面的建議。還有，一旦被點擊，Watch.app中的搜索條幾乎都要“親上”狀態(tài)條了，這說明蘋果的工程師們實在是有太多東西需要改進了。

Files.app

Files.app里面的搜索條也有一些問題。看起來Files.app的工程師們使用了一個非標準的搜索條。從下面的照片中可以看出，與Settings.app中的標準搜索條比起來，F(xiàn)iles.app的搜索條更小，字體顏色更淺。

APP Store.app

iOS 11的App Store經(jīng)歷了一次重設(shè)計，看起來有些像Apple Music。然而，App Store的Today鍵與Apple Music的For You一比較，日期的字體還是不一樣，App Store的字體更大。然后Apple Music的“Wednesday”后面跟著一個逗號，App Store中逗號消失了。

再次比較兩個apps。在搜索頁面中，在App Store中觸碰“Trending”項目不會觸發(fā)hover效果，然而在Apple Music中同樣的動作會觸發(fā)一個hover事件來改變項目的背景/前景顏色。在我看來，Apple Music做得更好，原生apps應(yīng)該在hover反饋上面達成一致，不管是保留還是去掉這個效果。

除此之外，在細節(jié)之處還有各種各樣的問題。在APP Store中，打開任何有橫幅照片的app,拖動這個頁面從屏幕左邊到右邊小滑一下（但不是完全滑過，這樣會退出app頁面）在頁面恢復(fù)之后這個橫幅section的渲染會變得很奇怪（render）:

同時這里也有性能問題，在更新選項上面，向下拉刷新項目的時候這里會有一個很明顯的框架下垂（若果你的大標題被往下拉的太多的話）。這個bug你自己可以很容易感受到。

Health.app

在Health.app中，Today頁面和Health Data頁面，同樣的數(shù)據(jù)和同樣的風(fēng)格，但是卻有不同的寬度。這個問題是iOS 10的遺留問題，但是現(xiàn)在任然未被修復(fù)。

Today Widget

在iOS 11中。有兩個方式打開Today Widget，在Home屏幕或者鎖屏從左到右輕掃，頁面里面的搜索條用不同的方式召喚出來會有不同的行為。當從Home頁面被召喚出來時，向下拉Widget page將不會顯示搜索條，點擊搜索條的時候會缺失出現(xiàn)的動畫以及霜凍效果，以及點擊取消之后搜索條變寬的動畫（雖然變窄有動畫）也缺失了。整體的體驗很尷尬。

Photos.app

iOS 11中充滿了不恰當?shù)倪吘啵蝗惶啵徽劸褪翘佟?dǎo)致感覺這個系統(tǒng)是一個半成品，太多東西需要改進和完成了。

在Photos.app的分享選項上面，邊距（下圖中箭頭指的地方）太窄了并且不一致，與其它原生APP中相似頁面相比。

Settings.app

在Settings.app中-->Apple ID小節(jié)中，設(shè)備列表完全沒有與ID節(jié)對齊。在iOS 10中還是正常的，在iOS 11中就不行了。

Music.app

在Apple Music中的連接上面，圖片和文字之間的邊距實在是太小了。這不應(yīng)該是設(shè)計的決定，因為在桌面macOS上面的iTunes端邊距還是正常的。雖然連接不是一個常用的功能，蘋果也不應(yīng)該犯這種低級的UI設(shè)計錯誤。

又是Apple Music，通過Library進入專輯列表之后，點擊首字母列表來快速進入以那個字母開頭的專輯，你會看到那個首字母所在的小節(jié)遮住了專輯封面的一部分。

Weather.app

iOS 11中的Weather.app也使用較大的字體和較少的余量進行了更新。不過我注意到，iOS 11中的溫度文字并不是中心對齊的，而在iOS 10中是對齊的。

這可能是iOS 11的設(shè)計決策。然而在實際使用中，由于不對齊，對于某些數(shù)字，對于用戶來說，更接近左邊緣的文字是非常明顯的，但效果并不比iOS 10好。

字體問題

在我看來，最后和最嚴重的問題是字體。上述問題可能不會影響正常使用，但下面的問題實際上會影響我們每個人。

這是iOS 11 Safari中的PingFang（iOS的默認中文字體）的粗體字體。當我在iOS 11上調(diào)試個人網(wǎng)站時，我發(fā)現(xiàn)了這個問題。所有的比較都是在iOS 11和iOS 10之間進行的。

如上圖所示，PingFang實際上是渲染為粗體。偽粗體基本上不使用字體本身提供的字體重量，而是強制地在某些基本字體上增加字體重量。偽粗體是由算法生成的，通常缺乏質(zhì)量，引起筆畫重量和字母跟蹤的問題。在屏幕截圖中，你可以看到，iOS 11中的偽粗體PingFang在文本之間有更大的間距。

經(jīng)過一些測試，我發(fā)現(xiàn)只有當CSS font-family包含“-apple-system”，即使用系統(tǒng)提供的舊金山字體的font-family時才會發(fā)生這種情況。一旦我們刪除它，系統(tǒng)將會尊重由字體本身提供的字體重量，并且粗體粗體已經(jīng)消失了。

這個問題不僅在Safari中，而且還會影響使用iOS的webkit引擎的所有應(yīng)用程序來呈現(xiàn)網(wǎng)頁，例如微信的內(nèi)部瀏覽器和豆瓣。正如你所看到的，豆瓣已經(jīng)被偽粗體蘋方占領(lǐng)，看起來還算不錯。

隨機選擇一個電影評論文章，你會注意到標題是粗體。通過比較，你還會注意到，粗體字體中的字體間距是有問題的。其實這不只是偽粗體的問題，還波及常規(guī)或任何字體的重量，所以你看到“偽Regular”等等。偽 Regular 或許很難從筆畫粗細這一角度發(fā)覺問題，但通過下圖對比，可以發(fā)現(xiàn) iOS 11 中正文的字距也偏大，足以證明這是「偽 Regular」：