WWDC 2017 Keynote 結(jié)束沒幾天，相信很多對 UI 設(shè)計有興趣的朋友應(yīng)該很好奇 iOS 11 詳細的設(shè)計變動有哪些，但是自己的手機又不方便裝開發(fā)者版本，所以就讓我替各位踩雷吧。
兩個版本分別是 iOS 10.3，以及 iOS 11 beta 1，而由于后者尚未正式推出，因此某些設(shè)計有問題的地方，Apple 可能會在后續(xù)版本變動或修正，不過整體來說應(yīng)該不會有大改變了。
本篇文章會從三個大方向來觀察新設(shè)計，分別是：
功能與操作體驗
設(shè)計語匯
產(chǎn)品策略
并再細分成幾個小主題，而剩下較零碎的比對就列在后面;太細微的變化我不會列出，畢竟要截出大量的相同畫面真的很費工夫。
對了，我只會列出不同的地方，并且推測其設(shè)計意圖，不會有太多評論，我想這留給各位自行思考比較有趣。
大幅簡化的主畫面結(jié)構(gòu)
從 iOS 7 到 iOS 10 以來，隨著功能的增加，鎖定畫面、主畫面、通知中心這三者的結(jié)構(gòu)越來越復(fù)雜，其中的操作邏輯和視覺線索就產(chǎn)生了明顯的矛盾，例如下面這是 iOS 10 的主畫面結(jié)構(gòu)：
以上的畫面有些非常相似，但出現(xiàn)的時機和細部功能又不太相同，而這點在 iOS 11 獲得了明顯改善，可以看到操作邏輯的結(jié)構(gòu)變得簡單多了：
這設(shè)計一定是有變得更好、更合理，但我不確定這樣大幅改變對于使用者的習(xí)慣來說是不是好事。
以下的左右比較圖都是「左舊右新」。
解鎖畫面
解鎖的數(shù)字鍵 base 變成實心，除了配合新的設(shè)計語言外(后面會詳細觀察)，推測是避免框線和細字的搭配會干擾閱讀。
主畫面
App 名稱的字變粗，改進閱讀體驗。
Dock 的 App 名稱不見，邏輯應(yīng)該是：「會放 Dock 代表使用者自己很清楚那是什么」;且經(jīng)過研究，我們記住 UI 的方式，是透過位置，而不是文字內(nèi)容。
控制中心
多頁變成單頁，可自訂功能及排列
可使用 3D Touch 來展開詳細設(shè)定的按鈕更多了。
使用統(tǒng)一的矩形視覺元素來變化出不同的設(shè)定，這是我滿喜歡的部份，如下面這些：
橫向 Tab bar 讓出更多空間
橫向的 Tab bar 排列方式有改變(上新下舊)，爭取更多垂直空間。這個設(shè)計在 iOS 10 的 iPad 版本「音樂」App 就有了，只是應(yīng)用到了 iPhone 上。
用字重來改善可讀性
把過去字太細、太小的地方集體改進，上圖以 Voice Memo 為例。
鍵盤設(shè)計改變
△ 數(shù)字鍵盤
△ 方便單手打字的鍵盤
數(shù)字鍵的按鈕和文字鍵盤樣式統(tǒng)一
新增單手打字模式
大量應(yīng)用不同的層次區(qū)隔手法
△ App Store 的新設(shè)計
「層次(Hierarchy)」是 UI 很重要的元素，讓重要的、不重要的東西區(qū)隔開來，引導(dǎo)使用者的閱讀動線。區(qū)分層次的手法有很多，如大小、粗細、顏色、間隔、形狀、排列方式??等等。
過去 iOS 較常使用分隔線和文字大小來做層次;而自從新版 Apple Music App 推出后，開始頻繁使用新手法，如大面積陰影、字重等，如上圖的 App Store 新設(shè)計。
順帶一提，我不喜歡稱這類手法叫「Card UI」，我覺得那就如同把一堆明顯不同的設(shè)計語言全都冠上 Flat Design 一樣，是跟風(fēng)且不精確的形容(唯一好處就是對外行解釋比較方便)，矩形+陰影到哪里都能見到，過去蘋果在 Passbook 和提醒事項 App 就有這類設(shè)計了。
細節(jié)風(fēng)格更新
△ App 介紹頁
△ 計算機
邊角更圓潤
空心變實心(色塊感變重)
空心變實心的特點剛剛在解鎖畫面有出現(xiàn)過，而上圖的計算機讓我想到初代 iPhone OS 向經(jīng)典致敬(?)的設(shè)計。
全新的 Navigation Bar
去年(2016)在新版 Apple Music 讓大家耳目一新的大字 Nav Bar，蘋果在這次 iOS 11 也大量使用在各個 App 里(見下圖);另外也終于開放 API 讓大家使用了，以后設(shè)計師們可以放心做這類大標題，不必擔(dān)心造成開發(fā)者的麻煩：
就跟以前 iOS 7 大量使用高斯模糊，結(jié)果過整整一年才開放 Blur API 一樣，蘋果真的很小氣。
圖像(Graphic)與符號
App Icons
計算機的新 icon 配重用色皆恰到好處，我滿喜歡的。
iTunes Store icon 整個換掉，可能是因為音樂、電影都具備「明星」這個要素。
App Store 也跟著拿掉外圍圓框。
日歷字變粗，跟隨整體設(shè)計調(diào)性。
iCloud Drive 變成 Files，這個是產(chǎn)品性質(zhì)和策略變更。
System Icons
Status Bar 訊號強度從 ????? 改回階梯式。
電量 icon 的線面比例變得更均衡一些。
Tab bar icons 從空心/實心兩態(tài)變成全實心粗線條設(shè)計，是配合整體設(shè)計調(diào)性，但對色盲有點小不利。
想一想：為什么「Games」是用火箭，而不是用游戲手把來做 icon?
Siri
從左右分列的對話式變成全靠左設(shè)計，意圖不明??
Siri icon 重新設(shè)計，我覺得挺有「細胞、生命體、靈魂」的概念，個人認為是非常優(yōu)秀的設(shè)計。
順便看一下 Siri 的變臉史，Alan Dye 真是個善變的男人：
△ 你這樣一直改一直改一直改
從 Apple 把哪些部分變明顯、哪些部分隱藏，就可以知道哪些地方是最賺錢、最有發(fā)展力的。
App Store
主頁改成「Today」，與消費者的對話變得更重質(zhì)一點，因為現(xiàn)在使用者心里的聲音已經(jīng)不是早期的「有沒有得下載?」，而是「我為什么要下載?」了。
至于以前的「整個 App Store」，現(xiàn)在變成只有一個 tab 的份量，在導(dǎo)航系統(tǒng)里整整下降一級。
以下是 App Store 的新舊設(shè)計細節(jié)比較：
△ 排行榜
△ 分類
△ 搜尋
檔案 App
另一個產(chǎn)品策略改變是，iOS 終于有可見的檔案系統(tǒng)了(其實嚴格來說還稱不上)
其他設(shè)計比較
接下來的這些畫面，就幾乎就是以上分析的組合應(yīng)用，玩一下大家來找碴，順便欣賞蘋果對細節(jié)的用心吧!
Widget 管理畫面
調(diào)整間隔和字重，Nav bar buttons 的 padding-x 內(nèi)縮少許。
照片
日歷
這個畫面左上角的「Jun 2017」變成「2017」，原本以為是 feature，因為把 nav button 當(dāng)成 nav title 用不太合理;但經(jīng)網(wǎng)友指出，這樣一來會變成沒有顯示當(dāng)前月份，易造成混淆。我覺得挺有道理的，蘋果應(yīng)該不會為了改善一個缺點而制造更多缺陷，因此想一想是 bug 的可能性較大。
Podcasts
讓視覺和操作體驗與 Apple Music 統(tǒng)一，等好久了。
家庭
天氣
Wallet
電話
音樂
主頁幾乎沒變。
我好奇到底有誰會用那兩顆按鈕，可能我音樂太多了。
△ 播放器本身幾乎沒變。
Safari
URL Bar 變高，滿奇怪的決定;另外，網(wǎng)頁滑動的摩擦力明顯降低，應(yīng)該是考量到現(xiàn)在響應(yīng)式的超長網(wǎng)頁越來越多。
Tabs 加上圓角
△ 閱讀模式的 typography 有改善
相機
右下角的 icon 參考了 MacBook Pro 的 Touch bar 設(shè)計規(guī)范，變成雙 opacity 的設(shè)計
我覺得套用濾鏡的 UI 原本做得比較好。
FaceTime
△ Status bar 黑色我猜應(yīng)該是 bug。
Find My iPhone
郵件
以上就是 iOS 11 幾個比較明顯的設(shè)計變更，至于 iPad 的部份也差不多，比較明顯的不同是 iPad + iOS 11 更強化了「拖/放」與「分割畫面」的功能，那些 Apple 官網(wǎng)都有介紹了。
除了玩大家來找碴以外，其實 Apple 的設(shè)計改版一向都是非常難得的學(xué)習(xí)和思考機會，因為這「幾乎」等同是給你最佳解，你只要思考「為什么這可能是最佳解」就好了，建議剛?cè)腴T的朋友利用這機會多看多想。
以上就是上海網(wǎng)站設(shè)計提供的內(nèi)容，如果想要了解關(guān)于教育類網(wǎng)頁設(shè)計案例及企業(yè)微博營銷注意事項，可直接點擊查看
