WWDC 2017 Keynote 結束沒幾天，相信很多對 UI 設計有興趣的朋友應該很好奇 iOS 11 詳細的設計變動有哪些，但是自己的手機又不方便裝開發者版本，所以就讓我替各位踩雷吧。

兩個版本分別是 iOS 10.3，以及 iOS 11 beta 1，而由于后者尚未正式推出，因此某些設計有問題的地方，Apple 可能會在后續版本變動或修正，不過整體來說應該不會有大改變了。

本篇文章會從三個大方向來觀察新設計，分別是：

• 功能與操作體驗
• 設計語匯
• 產品策略

并再細分成幾個小主題，而剩下較零碎的比對就列在后面；太細微的變化我不會列出，畢竟要截出大量的相同畫面真的很費工夫。

對了，我只會列出不同的地方，并且推測其設計意圖，不會有太多評論，我想這留給各位自行思考比較有趣。

1. 功能與操作體驗

大幅簡化的主畫面結構

從 iOS 7 到 iOS 10 以來，隨著功能的增加，鎖定畫面、主畫面、通知中心這三者的結構越來越復雜，其中的操作邏輯和視覺線索就產生了明顯的矛盾，例如下面這是 iOS 10 的主畫面結構：

以上的畫面有些非常相似，但出現的時機和細部功能又不太相同，而這點在 iOS 11 獲得了明顯改善，可以看到操作邏輯的結構變得簡單多了：

這設計一定是有變得更好、更合理，但我不確定這樣大幅改變對于使用者的習慣來說是不是好事。

以下的左右比較圖都是「左舊右新」。

解鎖畫面

解鎖的數字鍵 base 變成實心，除了配合新的設計語言外（后面會詳細觀察），推測是避免框線和細字的搭配會干擾閱讀。

主畫面

App 名稱的字變粗，改進閱讀體驗。

Dock 的 App 名稱不見，邏輯應該是：「會放 Dock 代表使用者自己很清楚那是什么」；且經過研究，我們記住 UI 的方式，是透過位置，而不是文字內容。

控制中心

多頁變成單頁，可自訂功能及排列

可使用 3D Touch 來展開詳細設定的按鈕更多了。

使用統一的矩形視覺元素來變化出不同的設定，這是我滿喜歡的部份，如下面這些：

橫向 Tab bar 讓出更多空間

橫向的 Tab bar 排列方式有改變（上新下舊），爭取更多垂直空間。這個設計在 iOS 10 的 iPad 版本「音樂」App 就有了，只是應用到了 iPhone 上。

用字重來改善可讀性

把過去字太細、太小的地方集體改進，上圖以 Voice Memo 為例。

鍵盤設計改變

△ ?數字鍵盤

△ ?方便單手打字的鍵盤

• 數字鍵的按鈕和文字鍵盤樣式統一
• 新增單手打字模式

2. 設計語匯

大量應用不同的層次區隔手法

△ ?App Store 的新設計

「層次（Hierarchy）」是 UI 很重要的元素，讓重要的、不重要的東西區隔開來，引導使用者的閱讀動線。區分層次的手法有很多，如大小、粗細、顏色、間隔、形狀、排列方式??等等。

過去 iOS 較常使用分隔線和文字大小來做層次；而自從新版 Apple Music App 推出后，開始頻繁使用新手法，如大面積陰影、字重等，如上圖的 App Store 新設計。

順帶一提，我不喜歡稱這類手法叫「Card UI」，我覺得那就如同把一堆明顯不同的設計語言全都冠上 Flat Design 一樣，是跟風且不精確的形容（唯一好處就是對外行解釋比較方便），矩形+陰影到哪里都能見到，過去蘋果在 Passbook 和提醒事項 App 就有這類設計了。

細節風格更新

△ ?App 介紹頁

△ ?計算機

• 邊角更圓潤
• 空心變實心（色塊感變重）

空心變實心的特點剛剛在解鎖畫面有出現過，而上圖的計算機讓我想到初代 iPhone OS 向經典致敬(？)的設計。

全新的 Navigation Bar

去年(2016)在新版 Apple Music 讓大家耳目一新的大字 Nav Bar，蘋果在這次 iOS 11 也大量使用在各個 App 里（見下圖）；另外也終于開放 API 讓大家使用了，以后設計師們可以放心做這類大標題，不必擔心造成開發者的麻煩：

就跟以前 iOS 7 大量使用高斯模糊，結果過整整一年才開放 Blur API 一樣，蘋果真的很小氣。

圖像（Graphic）與符號

App Icons

• 計算機的新 icon 配重用色皆恰到好處，我滿喜歡的。
• iTunes Store icon 整個換掉，可能是因為音樂、電影都具備「明星」這個要素。
• App Store 也跟著拿掉外圍圓框。
• 日歷字變粗，跟隨整體設計調性。
• iCloud Drive 變成 Files，這個是產品性質和策略變更。

System Icons

• Status Bar 訊號強度從 ????? 改回階梯式。
• 電量 icon 的線面比例變得更均衡一些。
• Tab bar icons 從空心/實心兩態變成全實心粗線條設計，是配合整體設計調性，但對色盲有點小不利。
• 想一想：為什么「Games」是用火箭，而不是用游戲手把來做 icon？

Siri

• 從左右分列的對話式變成全靠左設計，意圖不明??
• Siri icon 重新設計，我覺得挺有「細胞、生命體、靈魂」的概念，個人認為是非常優秀的設計。

順便看一下 Siri 的變臉史，Alan Dye 真是個善變的男人：

△ ?你這樣一直改一直改一直改

3. 產品設計策略

從 Apple 把哪些部分變明顯、哪些部分隱藏，就可以知道哪些地方是最賺錢、最有發展力的。

App Store

主頁改成「Today」，與消費者的對話變得更重質一點，因為現在使用者心里的聲音已經不是早期的「有沒有得下載？」，而是「我為什么要下載？」了。

至于以前的「整個 App Store」，現在變成只有一個 tab 的份量，在導航系統里整整下降一級。

以下是 App Store 的新舊設計細節比較：

△ ?排行榜

△ ?分類

△ ?搜尋

檔案 App

另一個產品策略改變是，iOS 終于有可見的檔案系統了（其實嚴格來說還稱不上）

其他設計比較

接下來的這些畫面，就幾乎就是以上分析的組合應用，玩一下大家來找碴，順便欣賞蘋果對細節的用心吧！

Widget 管理畫面

調整間隔和字重，Nav bar buttons 的 padding-x 內縮少許。

照片

日歷

這個畫面左上角的「Jun 2017」變成「2017」，原本以為是 feature，因為把 nav button 當成 nav title 用不太合理；但經網友指出，這樣一來會變成沒有顯示當前月份，易造成混淆。我覺得挺有道理的，蘋果應該不會為了改善一個缺點而制造更多缺陷，因此想一想是 bug 的可能性較大。

Podcasts

讓視覺和操作體驗與 Apple Music 統一，等好久了。

家庭

天氣

Wallet

電話

音樂

主頁幾乎沒變。

我好奇到底有誰會用那兩顆按鈕，可能我音樂太多了。

△ ?播放器本身幾乎沒變。

Safari

URL Bar 變高，滿奇怪的決定；另外，網頁滑動的摩擦力明顯降低，應該是考量到現在響應式的超長網頁越來越多。

Tabs 加上圓角

△ ?閱讀模式的 typography 有改善

相機

右下角的 icon 參考了 MacBook Pro 的 Touch bar 設計規范，變成雙 opacity 的設計

我覺得套用濾鏡的 UI 原本做得比較好。

FaceTime

△ ?Status bar 黑色我猜應該是 bug。

Find My iPhone

郵件

以上就是 iOS 11 幾個比較明顯的設計變更，至于 iPad 的部份也差不多，比較明顯的不同是 iPad + iOS 11 更強化了「拖/放」與「分割畫面」的功能，那些 Apple 官網都有介紹了。

除了玩大家來找碴以外，其實 Apple 的設計改版一向都是非常難得的學習和思考機會，因為這「幾乎」等同是給你最佳解，你只要思考「為什么這可能是最佳解」就好了，建議剛入門的朋友利用這機會多看多想。

「這2篇好文幫你從iOS 10 學習設計」

1. 《從iOS 10設計指南變化看設計的新趨勢》
2. 《熱門趨勢！從IOS 10 的交互設計中學到的3個設計啟示》

原文地址：medium

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

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

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com