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