iOS 11的新UI，有哪些改變？這些改變背后的想法又是什么？
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ì)，分別是：
1 功能與操作體驗(yàn)
2 設(shè)計(jì)語(yǔ)匯
3 產(chǎn)品策略
并細(xì)分成幾個(gè)小主題仇矾，而留下較零碎的比對(duì)就列在后面;太細(xì)微的變化我不會(huì)列出庸蔼，畢竟要截出大量的相同畫(huà)面真的很費(fèi)工夫??
對(duì)了，我只會(huì)列出不同的地方贮匕，并且推測(cè)其設(shè)計(jì)意圖姐仅，不會(huì)有太多評(píng)論，我想這留給各位自行思考比較有趣刻盐。
功能與操作體驗(yàn)
大幅簡(jiǎn)化的主畫(huà)面結(jié)構(gòu)
從iOS 7到iOS 10以來(lái)掏膏，隨著功能的增加，鎖定畫(huà)面敦锌，主畫(huà)面馒疹，通知中心這三者的結(jié)構(gòu)越來(lái)越復(fù)雜，其中的操作邏輯和視覺(jué)線索就產(chǎn)生了明顯的矛盾乙墙，例如下面這是iOS 10的主畫(huà)面結(jié)構(gòu)：
以上的畫(huà)面有些非常相似颖变，但出現(xiàn)的時(shí)機(jī)和細(xì)部功能又不太相同，而這點(diǎn)在iOS 11獲得了明顯改善听想，可以看到操作邏輯的結(jié)構(gòu)變得簡(jiǎn)單多了：
這設(shè)計(jì)一定是有變得更好腥刹，更合理，但我不確定這樣大幅改變使用者的習(xí)慣是不是好事汉买。
以下的左右比較圖都是「左舊右新」衔峰。
解鎖畫(huà)面
解鎖的數(shù)字鍵base變成實(shí)心，除了配合新的設(shè)計(jì)語(yǔ)言外（后面會(huì)詳細(xì)觀察），推測(cè)是避免框線和細(xì)字的搭配會(huì)干擾閱讀垫卤。
主畫(huà)面
應(yīng)用名稱(chēng)的字變粗邻吞，改進(jìn)閱讀體驗(yàn)。
Dock的應(yīng)用名稱(chēng)不見(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è)定盈咳，這是我滿(mǎn)喜歡的部份，如下面這些：
橫向Tab bar讓出更多空間
橫向的標(biāo)簽欄排列方式有改變（上新下舊）边翼，爭(zhēng)取更多垂直空間鱼响。這個(gè)設(shè)計(jì)在iOS 10的iPad版本“音樂(lè)”App應(yīng)有了，只是應(yīng)用到了iPhone上组底。
用字重來(lái)改善可讀性
把過(guò)去字太細(xì)丈积，太小的地方集體改進(jìn)，上圖以Voice Memo為例债鸡。
鍵盤(pán)設(shè)計(jì)改變
數(shù)字鍵的按鈕和文字鍵盤(pán)樣式統(tǒng)一
新增單手打字模式
設(shè)計(jì)語(yǔ)匯
大量應(yīng)用不同的層次區(qū)隔手法
“層次（層次）”是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ì)运怖。
順帶一提，我不喜歡稱(chēng)這些手法叫“卡牌UI”夏伊，我覺(jué)得那就如同把一堆明顯不同的設(shè)計(jì)語(yǔ)言全都冠上平設(shè)計(jì)一樣摇展，是跟風(fēng)且不精確的形容（唯一好處就是對(duì)外行解釋比較方便），矩形+陰影到哪里都能見(jiàn)到溺忧，過(guò)去蘋(píng)果在Passbook和提醒事項(xiàng)App就有這類(lèi)設(shè)計(jì)了咏连。
細(xì)節(jié)風(fēng)格更新
邊角更圓潤(rùn)
空心變實(shí)心（色塊感變重）
（ET66表示：你又來(lái)了??）空心變實(shí)心的特點(diǎn)剛剛在解鎖畫(huà)面有出現(xiàn)過(guò)盯孙，而上圖的計(jì)算機(jī)讓我想到初代iPhone OS向經(jīng)典致敬（？）的設(shè)計(jì)
全新的導(dǎo)航欄
去年（2016）在新版蘋(píng)果音樂(lè)讓大家耳目一新的大字Nav Bar祟滴，蘋(píng)果在這個(gè)iOS 11也大量使用在各個(gè)App里（見(jiàn)下圖）;另外也終于開(kāi)放API讓大家使用了振惰，以后設(shè)計(jì)師們可以放心做這類(lèi)大標(biāo)題，不必?fù)?dān)心造成開(kāi)發(fā)者的麻煩：
就跟以前iOS 7大量使用高斯模糊垄懂，結(jié)果過(guò)整整一年才開(kāi)放Blur API一樣骑晶，蘋(píng)果真的很小氣??????
圖像（圖形）與符號(hào)
應(yīng)用程式圖示
計(jì)算機(jī)的新圖標(biāo)配重用色皆恰好好處，我滿(mǎn)喜歡的草慧。
iTunes Store icon整個(gè)換掉桶蛔，可能是因?yàn)橐魳?lè)，電影都具備“明星”這個(gè)要素漫谷。
App Store也跟著拿掉外圍圓框仔雷。
日歷字變粗，跟隨整體設(shè)計(jì)調(diào)性舔示。
iCloud Drive變成文件碟婆，這個(gè)是產(chǎn)品性質(zhì)和策略變更。
系統(tǒng)圖標(biāo)
狀態(tài)欄訊號(hào)強(qiáng)度從?????改回階梯式
電量圖標(biāo)的線面比例變得更均衡一些
標(biāo)簽欄圖標(biāo)從空心/實(shí)心兩態(tài)變成全實(shí)心粗線條設(shè)計(jì)惕稻，是配合整體設(shè)計(jì)調(diào)性脑融，但對(duì)色盲有點(diǎn)小不利。
想一想：為什么“游戲”是用火箭缩宜，而不是用游戲手把來(lái)做圖標(biāo)肘迎？
Siri的
從左右分列的對(duì)話(huà)式變成全靠左設(shè)計(jì)，意圖不明??
Siri icon重新設(shè)計(jì)锻煌，我覺(jué)得挺有“細(xì)胞妓布，生命體，靈魂”的概念宋梧，個(gè)人認(rèn)為是非常優(yōu)秀的設(shè)計(jì)匣沼。
順便看一下Siri的變臉史，Alan Dye真是個(gè)善變的男人：
3.產(chǎn)品設(shè)計(jì)策略
從蘋(píng)果把哪些部分變明顯捂龄，哪些部分隱藏释涛，就可以知道哪些地方是最賺錢(qián)，最有發(fā)展力的倦沧。
應(yīng)用商店
主頁(yè)改成「今天」唇撬，與消費(fèi)者的對(duì)話(huà)變得更重質(zhì)一點(diǎn)，因?yàn)楝F(xiàn)在使用者心里的聲音已經(jīng)不是早期的「有沒(méi)有得下載展融？」窖认，而是「我為什么要下載？」了。
至于以前的“整個(gè)App Store”扑浸，現(xiàn)在變成只有一個(gè)選項(xiàng)卡的份數(shù)烧给，在導(dǎo)航系統(tǒng)里整整下降一級(jí)。
以下是App Store的新舊設(shè)計(jì)細(xì)節(jié)比??較：
檔案應(yīng)用
另一個(gè)產(chǎn)品策略改變是喝噪，iOS終于有可見(jiàn)的檔案系統(tǒng)了（其實(shí)嚴(yán)格來(lái)說(shuō)還稱(chēng)不上）
其他設(shè)計(jì)比較
接下來(lái)的這些畫(huà)面础嫡，就幾乎就是以上分析的組合應(yīng)用，玩一下大家來(lái)找碴酝惧，順便欣賞蘋(píng)果對(duì)細(xì)節(jié)的用心吧榴鼎！
Widget管理畫(huà)面
調(diào)整間隔和字重，Nav bar buttons的padding-x內(nèi)縮少許系奉。
照片
行事歷
這個(gè)畫(huà)面左上角的“2017年6月”變成“2017”，原本以為是功能姑廉，因?yàn)榘裯av button當(dāng)成nav標(biāo)題用不太合理;但經(jīng)網(wǎng)友指出缺亮，這樣一來(lái)會(huì)變成沒(méi)有顯示當(dāng)前月份，易造成混淆桥言。我覺(jué)得挺有道理的萌踱，蘋(píng)果應(yīng)該不會(huì)為了改善一個(gè)缺點(diǎn)而制造更多缺陷，因此想一想是bug的可能性較大号阿。
播客
讓視覺(jué)和操作體驗(yàn)與蘋(píng)果音樂(lè)統(tǒng)一并鸵，等好久了。
家庭
天氣
錢(qián)包
電話(huà)
音樂(lè)
蘋(píng)果瀏覽器
URL Bar變高扔涧，滿(mǎn)奇怪的決定;另外园担，網(wǎng)頁(yè)卷動(dòng)的摩擦力明顯降低，應(yīng)該是考量到現(xiàn)在RWD的超長(zhǎng)網(wǎng)頁(yè)越來(lái)越多枯夜。
標(biāo)簽加上圓角
好讀模式的排版有改善
相機(jī)
右下角的圖標(biāo)參考了MacBook Pro的Touch Bar設(shè)計(jì)規(guī)范弯汰，變成雙opacity的設(shè)計(jì)
我覺(jué)得套用濾鏡的UI原本做得比較好。
視頻對(duì)話(huà)
狀態(tài)欄黑色我猜應(yīng)該是bug湖雹。
查找我的iPhone
郵件
以上就是iOS 11幾個(gè)比較明顯的設(shè)計(jì)變更，至于iPad的部份也差不多，比較明顯的不同是iPad + iOS 11更強(qiáng)化了“拖/放”與“分割畫(huà)面”的功能辞色，那些蘋(píng)果官網(wǎng)都有介紹了订讼。
除了玩大家來(lái)找刨以外，其實(shí)蘋(píng)果的設(shè)計(jì)改版一向都是非常難得的學(xué)習(xí)和思考機(jī)會(huì)征讲，因?yàn)檫@“幾乎”等同是給你最佳解据某，你只要思考“為什么這可能是最佳解”就好了，建議剛?cè)腴T(mén)的朋友利用這機(jī)會(huì)多看多想诗箍。
