@Ryan Lau ：北京時(shí)間 13 日凌晨，Apple 在 Apple Park 內(nèi)的 Steve Jobs Theater 召開了秋季特別活動(dòng)，在為全面屏的 iPhone X 揭開面紗的同時(shí)，Apple 向開發(fā)者們推送了即將在 19 日正式推送的 iOS 11 GM 版本，筆者也在第一時(shí)間更新了自己的 iPhone。

筆者在 6 月份的 WWDC 后嘗鮮了 iOS 11，在經(jīng)歷了一個(gè)暑假的更新后，iOS 11 終于走到了正式版。筆者使用的是 4.7 寸的 iPhone 7，在一番體驗(yàn)后，卻發(fā)現(xiàn) iOS 11 的正式版仍然充滿了 Beta 版本的毛糙感。做為一名設(shè)計(jì)師，終于忍不住要寫一篇文章來(lái)吐槽了。

筆者撰寫本文的目的，在于讓人們注意到 iOS 11 中仍有許多不足之處，也希望能夠讓 Apple 內(nèi)部有關(guān)的人員注意到，使得 iOS 11 在后續(xù)版本更新中能夠解決這些問(wèn)題。

iOS 11 體驗(yàn)的粗糙，主要表現(xiàn)在 UI 和動(dòng)畫方面。iOS 11 的 UI 元素極不統(tǒng)一，各種 UI 元素混雜，盡管它們看起來(lái)相似，但卻會(huì)在細(xì)微的體驗(yàn)間帶來(lái)割裂感。這些元素的不統(tǒng)一主要集中在 iOS 11 中更新過(guò)的一些 UI 元素，例如新加入的 Large Title，以及新的 Search Bar 樣式。這些新引入的元素，或許是緣于 Apple 內(nèi)部工程師還尚不熟悉，導(dǎo)致系統(tǒng)中出現(xiàn)了許多不統(tǒng)一的 UI 體驗(yàn)。

Mail

先來(lái)看看 iOS 11 原生的 Mail。和其他系統(tǒng)應(yīng)用一樣，Mail 也引入了新的帶有 Large Title 的 Navigation Bar。然而，Mail 中的 Large Title，與設(shè)計(jì)指南中的標(biāo)準(zhǔn)樣式相比，位置卻靠右了一些。在此我們可以以 Search Bar 作為參照物，在標(biāo)準(zhǔn)控件中，Large Title 與 Search Bar 依照同一條參考線左對(duì)齊，而在 Mail 中，Large Title 顯然相比 Search Bar 在水平位置上往右邊挪了些。

Watch app

在 Watch app 中，Search Bar 的設(shè)計(jì)并未適配 iOS 11 推薦的樣式，顯得格格不入。在使用了 iOS 11 新設(shè)計(jì)風(fēng)格的原生應(yīng)用中，Search Bar 都已經(jīng)和 Navigation Bar 融為一體，而 Watch app 卻并非如此：

在 Apple 向開發(fā)者發(fā)布的 Building Apps for iPhone X（https://developer.apple.com/videos/play/fall2017/201/） 指導(dǎo)視頻中，剛好提到了同樣的問(wèn)題：

左側(cè)的 WWDC 是在未經(jīng)適配的反例，右側(cè)的 Contacts app 則是適配過(guò)的范例。視頻中是如此解說(shuō)這個(gè)問(wèn)題的：

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，卻沒能做到這一點(diǎn)。此外，Watch app 的 Search Bar 點(diǎn)擊后，Search Bar 已經(jīng)貼到了 Status Bar 的底部，可見 Apple 的工程師在此處并不夠用心：

Files

Files 中的 Search Bar 同樣有問(wèn)題?？雌饋?lái) Files 的工程師使用了非標(biāo)準(zhǔn)的 Search Bar。從下圖可以看出，相比 Settings 中的標(biāo)準(zhǔn) Search Bar，F(xiàn)iles 中的在尺寸大小、字體顏色上有些許差別：

除了尺寸大小之外，我們還可以通過(guò)點(diǎn)擊 Search Bar 后的動(dòng)畫判斷出不同。首先看看 Settings 中的標(biāo)準(zhǔn) Search Bar：

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

再看看 Files 中的 Search Bar：

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

對(duì)比發(fā)現(xiàn)，F(xiàn)iles 中的 Search Bar 動(dòng)畫速度更快，且動(dòng)畫邏輯并不自然，略顯粗糙。

App Store

iOS 11 的 App Store 經(jīng)過(guò)了重新設(shè)計(jì)，引入了類似 Apple Music 的設(shè)計(jì)。然而，在 App Store 的 Today，以及 Apple Music 的 For You 中，日期的地方卻是用了兩種不同的字重。如下圖所示，App Store 中較重，而 Apple Music 中較輕：

同樣是這兩個(gè) app 的對(duì)比，在兩個(gè) app 的搜索頁(yè)面中，觸摸 App Store 內(nèi)的推薦條目，并不會(huì)有觸摸的 hover 反饋，而對(duì)于 Apple Music，觸摸搜索條目時(shí)，改條目的背景色和字體色會(huì)調(diào)換，以形成觸摸反饋。筆者認(rèn)為，Apple Music 的處理更為合適，且同樣作為系統(tǒng)的原生應(yīng)用，不管是否有 hover 反饋，都應(yīng)該統(tǒng)一。

此外，在 App Store 中，仍存在一些細(xì)節(jié)上的 bug。在 App Store 中打開任意一個(gè)有特色圖像的 app，從左邊緣右劃，再左劃，會(huì)發(fā)現(xiàn) Navigation Bar 的顏色出了問(wèn)題：

通過(guò)視頻看一下這個(gè) bug：

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

App Store 中還有一個(gè)動(dòng)畫性能問(wèn)題。在 Updates 下面，下拉刷新后，滑動(dòng) Large Title 時(shí)幀數(shù)會(huì)嚴(yán)重下降，此處通過(guò)視頻不好展示，親自體驗(yàn)時(shí)可以明顯感受到。

Health

在 Health 中，Today 頁(yè)面和 Health Data 頁(yè)面中，相同的數(shù)據(jù)，相同的卡片設(shè)計(jì)，卡片的寬度卻不同。這一問(wèn)題在 iOS 10 中已經(jīng)存在，但是至今仍未有改觀：

Today Widget

在 iOS 11 中，有兩種打開 Today Widget 頁(yè)面的方式，一是在主屏幕右劃，二是在鎖屏／通知中心右劃，然而以上兩種方式各自調(diào)出的頁(yè)面中，頂部 Search Bar 的觸發(fā)動(dòng)作和動(dòng)畫有很大的差異。前一種方式（主屏幕右劃）中，向下拉動(dòng) Widget 頁(yè)面無(wú)法調(diào)出 Search Bar，而點(diǎn)擊 Search Bar 時(shí)除 Cancel button 有動(dòng)畫之外，毛玻璃的出現(xiàn)和消失沒有動(dòng)畫過(guò)渡，Search Bar 寬度的變化也只有在變窄時(shí)才有動(dòng)畫，退出 Search Bar 時(shí)則沒有動(dòng)畫，整個(gè)體驗(yàn)十分生硬：

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

而在第二種方式（鎖屏／通知中心右劃）中，以上動(dòng)作均有動(dòng)畫過(guò)渡，且向下拉動(dòng) Widget 頁(yè)面可以調(diào)出 Search Bar，體驗(yàn)順滑：

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

這就造成了兩處 Today Widget 頁(yè)面體驗(yàn)的割裂。顯然，從主屏幕進(jìn)入的版本簡(jiǎn)陋許多。值得一提的是，在 iOS 10 中，從主屏幕進(jìn)入的 Today Widget 頁(yè)面也都是有 Search Bar 動(dòng)畫的，Search Bar 也可以通過(guò)下拉觸發(fā)，不知為何，這一切在 iOS 11 中都消失了。

不過(guò)，話說(shuō)回來(lái)，iOS 11 中通過(guò)鎖屏／通知中心進(jìn)入的 Today Widget 頁(yè)面也并非完美，其同樣有相較 iOS 10 的倒退之處。在 Today Widget 頁(yè)面，當(dāng)用戶上拉頁(yè)面，使得 Search Bar 蓋過(guò) Widget 時(shí)，Search Bar 下會(huì)出現(xiàn)一毛玻璃矩形，以防止 Widget 內(nèi)容和 Search Bar 重疊，然而，此時(shí)點(diǎn)擊 Search Bar，這一毛玻璃矩形會(huì)先消失，然后才出現(xiàn)全屏的毛玻璃，而退出 Search Bar 時(shí)，則是全屏的毛玻璃先完全消失，頂部的毛玻璃矩形隨后才出現(xiàn)，且沒有動(dòng)畫，十分不自然：

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

（請(qǐng)仔細(xì)看屏幕頂部的 Search Bar）

如果視頻太快，還可以逐幀觀看?？梢钥闯?，全屏的毛玻璃與頂部的毛玻璃并無(wú)連接，而是先后出現(xiàn)，割裂感十足：

除了缺少的動(dòng)畫，iOS 11 中同樣有多余的動(dòng)畫。在 iOS 11 中，每次從 Today Widget 頁(yè)面左劃，進(jìn)入鎖屏界面時(shí)，都會(huì)有一個(gè)播放器從短變長(zhǎng)的動(dòng)畫。在筆者看來(lái)，這個(gè)動(dòng)畫實(shí)在多余了：

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

在點(diǎn)擊 Search Bar 后出現(xiàn)的 Siri Search Suggestions 中，有兩個(gè)問(wèn)題。一是，當(dāng)用手觸摸搜索項(xiàng)時(shí)，hover 反饋寬度并不是屏幕寬度，導(dǎo)致 hover 變成了一個(gè)十分僵硬的直角矩形。合適的 hover 應(yīng)該是像 Apple Music 等 app 中一樣，hover 寬度為屏幕寬度：

二是一個(gè)非常詭異的問(wèn)題，如果各位仔細(xì)看 Siri Search Suggestions 中的文字，會(huì)發(fā)現(xiàn)字體的邊緣并不平滑（拉丁字母較明顯）：

Photos

留白過(guò)多或過(guò)少，即不合適的 margin，同樣出現(xiàn)于 iOS 11 的許多地方，使得 UI 的粗糙感和半成品感盡顯。

在 Photos 中的 Shared 標(biāo)簽頁(yè)中，Activity 頁(yè)面內(nèi)容左側(cè)（下圖中箭頭所指處）的 margin 太小，相比其他 app 過(guò)于突兀：

Settings

在 Settings 中的 Apple ID 頁(yè)面，iOS 11 中底部的設(shè)備列表對(duì)齊方式自成一派。而在 iOS 10 中，這一區(qū)域是正常的，不知為何在 iOS 11 中就壞掉了：

Apple Music

在 Apple Music 中，Connect 的某些 post 類型會(huì)出現(xiàn)圖片與文字間 margin 過(guò)小的情況，可以確定的是，這并不是一個(gè)故意的設(shè)計(jì)決定，因?yàn)樵?macOS 中的 iTunes，margin 的設(shè)置是合理的。盡管 Connect 這一功能存在感極低，但是作為 Apple，仍不應(yīng)該在設(shè)計(jì)上犯如此低級(jí)的錯(cuò)誤：

同樣是 Apple Music，進(jìn)入 Library 的 Albums list，點(diǎn)擊右側(cè)的首字母跳轉(zhuǎn)，會(huì)發(fā)現(xiàn)，字母的標(biāo)簽遮擋了一部分專輯封面：

在 iOS 10 作為特色在 WWDC 上宣傳的 Apple Music 播放界面動(dòng)畫在 iOS 11 中工作不正常。例如，在二次打開正在播放界面時(shí)，正在播放專輯封面的陰影會(huì)無(wú)端消失（下圖左）；暫停狀態(tài)下，封面應(yīng)該較小，但在二次打開播放界面時(shí)，卻變得和正在播放時(shí)一樣大（下圖右）：

在 iOS 10 使用過(guò) AirPods 聽歌的用戶都知道，當(dāng)連接至 AirPlay 設(shè)備時(shí)，正在播放界面底部的 AirPlay 圖標(biāo)后，會(huì)顯示連接的設(shè)備名。然而，在 iOS 11 中設(shè)備名卻不見了：

或許有人會(huì)說(shuō)，這是一個(gè)設(shè)計(jì)上的選擇，但是實(shí)際上，這是一個(gè) bug。如下視頻所示，在正在播放界面中剛剛連接至 AirPlay 設(shè)備后，底部會(huì)顯示設(shè)備名。但若在之后將正在播放界面關(guān)閉，再次打開后，設(shè)備名就不見了（請(qǐng)注意看視頻底部的 AirPlay 標(biāo)志）：

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

而且，在使用和 Apple Music 同樣設(shè)計(jì)風(fēng)格的 Podcasts 中，始終會(huì)顯示 AirPlay 設(shè)備名，沒有 bug：

Apple Music 中還有一個(gè) bug。眾所周知，在 iOS 中返回頂部一般有兩種方法，一為點(diǎn)擊 Status Bar，二為點(diǎn)擊 Tab Bar 上的圖標(biāo)。然而在 Apple Music 中，點(diǎn)擊 Status Bar 后返回的是 Large Title Navigation Bar，點(diǎn)擊 Tab Bar 圖標(biāo)后返回的卻是小字的 Navigation Bar：

可以確定的是，這是一個(gè) bug 而不是設(shè)計(jì)選擇。因?yàn)樵诓捎么髽?biāo)題的 Podcasts 和 App Store 等原生應(yīng)用中，點(diǎn)擊 Status Bar 和 Tab Bar 圖標(biāo)返回的都是 Large Title。

Control Center

在 Control Center 中，AirPlay 設(shè)備的標(biāo)示顯示也有 bug。筆者在使用過(guò)程中，經(jīng)常會(huì)遇到連接著 AirPods 卻顯示播放源為「iPhone」的情況。以及，當(dāng)播放源顯示為 AirPods 時(shí)，點(diǎn)擊暫停，播放源則顯示為 iPhone（不過(guò)這只是顯示的錯(cuò)誤，AirPods 仍在正常運(yùn)作）：

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

Control Center 中也有一處不合適的動(dòng)畫，即 Screen Mirroring 的 3D Touch 動(dòng)畫：

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

Weather

iOS 11 的 Weather 同樣經(jīng)過(guò)了更新，采用了更大的字體，留白更少。在此處我注意到了一個(gè)小細(xì)節(jié)，在 iOS 11 中，溫度的數(shù)字并未居中。而在 iOS 10 前，數(shù)字是居中的：

此處有可能是 iOS 11 的設(shè)計(jì)決定。但是筆者的實(shí)際使用中，iOS 11 未居中對(duì)齊數(shù)字，導(dǎo)致在部分溫度時(shí)，數(shù)字視覺偏左十分明顯，效果并不比 iOS 10來(lái)得 好。

字體問(wèn)題

接下來(lái)是最后一個(gè)問(wèn)題也是最為嚴(yán)重的一個(gè)問(wèn)題。以上的問(wèn)題可能對(duì)正常人的使用并不影響，但接下來(lái)的問(wèn)題實(shí)實(shí)在在影響了每個(gè)人的使用體驗(yàn)。

這就是 iOS 11 Safari 中存在的偽粗體問(wèn)題。這一問(wèn)題是筆者在 iOS 11 調(diào)試個(gè)人網(wǎng)頁(yè)效果時(shí)發(fā)現(xiàn)的：

如上圖，iOS 11 中，蘋方粗體是明顯的「?jìng)未煮w」（faux bold）。偽粗體即系統(tǒng)并非調(diào)用蘋方自帶的字重，而是在某一基礎(chǔ)字重上粗暴地機(jī)械增加字重。偽粗體通過(guò)算法機(jī)械生成，通常質(zhì)量不佳，會(huì)造成筆畫粗細(xì)、字距等方面的明顯問(wèn)題。從截圖中可以看出，iOS 11 中的偽粗體蘋方字距明顯偏大。

在經(jīng)過(guò)調(diào)試后，筆者發(fā)現(xiàn)這一問(wèn)題僅會(huì)發(fā)生在 CSS font-family 設(shè)置中存在「-apple-system」的情況中，即 font-family 中使用了系統(tǒng)的 San Francisco 字體。只要在 font-family 中去除 -apple-system，系統(tǒng)即會(huì)調(diào)用現(xiàn)有的字重，偽粗體消失。

這個(gè)問(wèn)題，不僅出現(xiàn)在 Safari 中，而是會(huì)波及所有使用了 iOS 網(wǎng)頁(yè)渲染引擎的 app，例如微信的內(nèi)置瀏覽器和豆瓣 app。如下圖所示，豆瓣 app 已經(jīng)被偽粗體蘋方占領(lǐng)了：

打開一篇影評(píng)，會(huì)發(fā)現(xiàn)標(biāo)題是偽粗體。通過(guò)對(duì)比換行位置，可以發(fā)現(xiàn)偽粗體的字距有很大問(wèn)題。實(shí)際上，這一問(wèn)題不僅僅是偽粗體，其波及包括 Regular 在內(nèi)的所有字重，即實(shí)際上，你所看到的 Regular 字重也是「?jìng)?Regular」。偽 Regular 或許很難從筆畫粗細(xì)這一角度發(fā)覺問(wèn)題，但通過(guò)下圖對(duì)比，可以發(fā)現(xiàn) iOS 11 中正文的字距也偏大，足以證明這是「?jìng)?Regular」：

再欣賞一下偽粗體在微信推送中的表現(xiàn)：

Safari 偽粗體問(wèn)題在 iOS 11 Beta 1 就已出現(xiàn)，筆者于八月初通過(guò) Feedback app 提交 bug 反饋，但直至 iOS 11 正式版，這一問(wèn)題仍未解決。筆者作為一名字體排印愛好者，實(shí)在對(duì)此感到失望。

結(jié)語(yǔ)

近幾年，關(guān)于 Apple 軟件質(zhì)量下降的討論不絕于耳。Apple 在生物識(shí)別、機(jī)器學(xué)習(xí)、AR 等重大領(lǐng)域大跨步前進(jìn)，公司規(guī)模愈來(lái)愈大的同時(shí)，似乎失卻了過(guò)往那種細(xì)心雕琢每一個(gè)產(chǎn)品細(xì)節(jié)的心。13 日的發(fā)布會(huì)上，聽著 The Beatles 的歌，聽著 Steve 的話，有那么一瞬間，我感到我們好似還身處過(guò)去的 good old days。不過(guò)今日的 Apple，確實(shí)是不同以往了。我無(wú)意唱衰 Apple，作為一名生活中充滿 Apple 產(chǎn)品的人，Apple 現(xiàn)在仍是我最喜愛及尊敬的科技公司。我只是希望，Apple 不斷前進(jìn)的同時(shí)，不要忘記過(guò)去他們所珍視的價(jià)值。

「最全面的iPhone X 設(shè)計(jì)資源」

1. 《最新版iOS 11設(shè)計(jì)規(guī)范發(fā)布了，來(lái)下載官方源文件！》
2. 《優(yōu)設(shè)首發(fā)！iPhone X 官方人機(jī)交互指南中文版》
3. 《優(yōu)設(shè)首發(fā)！800M高質(zhì)量的iPhone X+8展示模板免費(fèi)打包下載》

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

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識(shí)樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com