IOS 10 VS 11:一份全面深入的UI對比分析報告
IOS 10 VS 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 向經典致敬(?)的設計。

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

英文原文:medium
出處: UISDC

本文鏈接:http://www.1rtl.com/ios-10-vs-11.html
本文標簽: , , ,