@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 體驗。
先來看看 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 設計資源」
原文地址：https://zhuanlan.zhihu.com/p/29313582
【優設網 原創文章 投稿郵箱：yuan@uisdc.com】
================明星欄目推薦================
優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。
設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
發評論！每天贏獎品
點擊 登錄 后，在評論區留言，系統會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯系我們
AI輔助海報設計101例
已累計誕生 737 位幸運星
發表評論
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓