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

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

Taylor
Taylor
Jun 9, 2017 · 10 min read

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 的設計改版一向都是非常難得的學習和思考機會,因為這「幾乎」等同是給你最佳解,你只要思考「為什麼這可能是最佳解」就好了,建議剛入門的朋友利用這機會多看多想。

UXabc

我們透過文章與教學課程,致力於讓設計所需的知識和觀念,變得更加容易觸及、更加容易理解。

UXabc

我們透過文章與教學課程,致力於讓設計所需的知識和觀念,變得更加容易觸及、更加容易理解。

Taylor

Written by

Taylor

No magic, only basic. https://fb.me/rgb.fff

UXabc

我們透過文章與教學課程,致力於讓設計所需的知識和觀念,變得更加容易觸及、更加容易理解。

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store