蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

軟件 iOS iPhone 蘋果公司 獨門絕技 2017-06-12

(點擊公眾號,或添加微信公眾號“ 獨孤殘月 ”可快速關注)

溫馨提示:這是一篇文章很長,閱讀前請先做好心理準備。

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

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

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

  • 功能與操作體驗

  • 設計語彙

  • 產品策略

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

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

1. 功能與操作體驗

大幅簡化的主畫面結構

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

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

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

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

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

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

解鎖畫面

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

解鎖的數字鍵 base 變成實心,除了配合新的設計語言外(後面會詳細分析),推測是避免框線和細字的搭配會干擾閱讀。

主畫面

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

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

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

控制中心

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

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

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

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

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

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

橫向 Tab bar 讓出更多空間

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

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

用字重來改善可讀性

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

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

鍵盤設計改變

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

數字鍵盤

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

方便單手打字的鍵盤

數字鍵的按鈕和文字鍵盤樣式統一

新增單手打字模式

2. 設計語彙

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

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

App Store 的新設計

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

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

順帶一提,我不喜歡稱這類手法叫「Card UI」,我覺得那是跟風且不精確的形容,矩形+陰影到哪裡都能見到,過去蘋果在 Passbook 和提醒事項 App 就有這類設計了。

細節風格更新

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

App 介紹頁

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

計算機

邊角更圓潤

空心變實心(色塊感變重)

空心變實心的特點剛剛在解鎖畫面有出現過,而上圖的計算機讓我想到初代 iPhone OS 向經典致敬(?)的設計。(ET66表示:你又來了⋯⋯)

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

全新的 Navigation Bar

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

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

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

圖像(Graphic)與符號

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

App Icons

計算機的新 icon 配重用色皆恰到好處,我滿喜歡的。

iTunes Store icon 整個換掉,可能是因為音樂、電影都具備「明星」這個要素。

App Store 也跟著拿掉外圍圓框。

日曆字變粗,跟隨整體設計調性。

iCloud Drive 變成 Files,這個是產品性質和策略變更。

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

System Icons

Status Bar 訊號強度從 ••••• 改回階梯式

電量 icon 的線面比例變得更均衡一些

Tab bar icons 從空心/實心兩態變成全實心粗線條設計,是配合整體設計調性,但對色盲患者有點小不利。

想一想:為什麼「Games」是用火箭,而不是用遊戲手把來做 icon?

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

Siri

從左右分列的對話式變成全靠左設計,意圖不明。

Siri icon 重新設計,我覺得挺有「細胞、生命體、靈魂」的概念,個人認為是非常優秀的設計。

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

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

你這樣一直改一直改一直改⋯⋯

3. 產品設計策略

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

App Store

主頁改成「Today」,與消費者的對話變得更重質一點,因為現在問題已經不是早期的「有沒有得下載?」,而是「我為什麼要下載?」了。

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

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

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

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

排行榜

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

分類

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

搜尋

檔案 App

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

另一個產品策略改變是,iOS 終於有可見的檔案系統了(其實嚴格來說還稱不上)

其他設計比較

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

Widget 管理畫面

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

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

照片

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

行事曆

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

特別要說的是,這個畫面左上角的「Jun 2017」是一個低級的文案設計錯誤,竟然現在才修正。

Podcasts

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

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

家庭

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

天氣

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

Wallet

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

電話

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

音樂

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

主頁幾乎沒變。

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

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

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

播放器本身幾乎沒變(但還是有喔,找找看)。

Safari

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

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

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

Tabs 加上圓角

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

好讀模式的 typography 有改善

相機

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

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

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

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

FaceTime

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

Status bar 黑色我猜應該是 bug。

Find My iPhone

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

郵件

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

蘋果iOS10vs新的蘋果iOS 11:完整 UI 比較分析

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

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

圖文來源:網絡 作者:Taylor Hu

- 結 束 -

這麼有個性的公眾號,還不趕緊關注一下

相關推薦

推薦中...