iOS 10 vs 11:完整 UI 比較分析

iOS 11 的新 UI,有哪些改變?這些改變背後的想法又是什麼?

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 向經典致敬(?)的設計。(ET66表示:你又來了⋯⋯)

全新的 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 變高,滿奇怪的決定;另外,網頁捲動的摩擦力明顯降低,應該是考量到現在 RWD 的超長網頁越來越多。

Tabs 加上圓角

好讀模式的 typography 有改善

相機

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

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

FaceTime

Status bar 黑色我猜應該是 bug。

Find My iPhone

郵件


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

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

Show your support

Clapping shows how much you appreciated Taylor Hu’s story.