2020-7-6 資深UI設(shè)計(jì)者
蘋(píng)果WWDC 2020在6月23日通過(guò)線上形式召開(kāi)，本次開(kāi)發(fā)者大會(huì)沒(méi)有發(fā)布太多硬件產(chǎn)品。不過(guò)macOS的新版本macOS big Sur依舊引來(lái)了大波關(guān)注，坦誠(chéng)的講這次版本更新屬實(shí)是很震驚，這可能是近10年蘋(píng)果第二次顛覆性的改變，上次還是2013年的iOS 7開(kāi)始全面扁平化，從而引發(fā)了設(shè)計(jì)圈「扁平擬物大戰(zhàn)」。
從系統(tǒng)連續(xù)性上看AirPods可以在不同設(shè)備上無(wú)縫切換，不同設(shè)備直接可以復(fù)制粘貼等等，顯而易見(jiàn)的一件事是，蘋(píng)果啟動(dòng)了macOS的「 iOS化」，所以回歸到設(shè)計(jì)上，這次的升級(jí)對(duì)設(shè)計(jì)語(yǔ)言上的影響概括來(lái)說(shuō)有以下幾個(gè)方面：
逐步 iOS 化的 macOS
不知道大家有沒(méi)有這種感覺(jué)：以前從諾基亞（或Android手機(jī)）切換到iPhone，動(dòng)機(jī)是cool～，漂亮的外觀讓人第一面就愛(ài)上了，恨不得馬上就拿起來(lái)把玩。現(xiàn)在給你個(gè)選擇切換回Android手機(jī)，不管那款手機(jī)有多漂亮多美好看，心里第一句話很有可能是：「XXX手機(jī)很棒，但我已經(jīng)離不開(kāi)蘋(píng)果的生態(tài)了哦！」（我就是這種德行，嘗試了N次還是回來(lái)了哈哈哈哈哈。）
這大概就是蘋(píng)果在系統(tǒng)打通的層面下的功夫，更加注重生態(tài)的維護(hù)，在不同的設(shè)備間尋找更多場(chǎng)景產(chǎn)生更多聯(lián)系。從設(shè)計(jì)的層面來(lái)看，iOS化的macOS對(duì)iPhone用戶更加友好，有相同的操作習(xí)慣，不必在mac和iOS上來(lái)回的切換。其實(shí)在Material Design推行的過(guò)程中就有相似的做法，Chrome的全面MD化，讓整個(gè)設(shè)計(jì)語(yǔ)言貫穿在移動(dòng)設(shè)備和個(gè)人電腦中。
1. 完全繼承iOS基因的控制中心/通知中心和dock
全新的control center，可以看的出繼承了iOS/iPad OS的語(yǔ)言，UI和交互幾乎是沒(méi)有任何變化，整合系統(tǒng)一致性的初衷是甚好，在當(dāng)下這個(gè)情況，不得不說(shuō)亮度和聲音的調(diào)節(jié)我更依賴于物理鍵盤(pán)（或touchBar），不太清楚硬整合在一起的理由（難不成是過(guò)度解讀了，也許人家就想繼承繼承）。
從蘋(píng)果對(duì)產(chǎn)品的終局目標(biāo)來(lái)看，也許會(huì)在硬件上取消物理控制按鍵或者更加優(yōu)化 touchBar 去操控必要的屬性（也有傳聞?wù)f這是在為觸控版本的 macOS 做準(zhǔn)備）。
同樣iOS化的通知中心（講真，用戶實(shí)際的桌面未必這么干凈，真是擔(dān)心本身在電腦側(cè)使用頻率就不是那么高的通知中心被混亂的文件夾淹沒(méi)）
2. 進(jìn)一步強(qiáng)調(diào)的沉浸式氛圍
全局設(shè)計(jì)中最令我欣喜的是menu Bar的更進(jìn)一步的優(yōu)化！我在sketch里模擬了下效果（非嚴(yán)謹(jǐn)模擬哦），大概得出的結(jié)論是加高了背景模糊值，減少了本身的填充透明度，達(dá)到了現(xiàn)在的效果。
感官上來(lái)看的話是一個(gè)微小的改動(dòng)，但從層級(jí)整合的角度這是蘋(píng)果設(shè)計(jì)的一大提升，通過(guò)光影等自然世界的隱喻抽象設(shè)計(jì)來(lái)減少硬性層級(jí)劃分，也符合Alan Dye（蘋(píng)果用戶界面設(shè)計(jì)副總裁）提出的「深度，陰影和半透明性用于創(chuàng)建層次結(jié)構(gòu)」。
除了壁紙以外，圖標(biāo)是最引人矚目的變化啦！iOS化的圖標(biāo)規(guī)格的約束不用多說(shuō)了，還有就是「新擬態(tài)」的第一次亮相。新擬態(tài)出現(xiàn)一定意義上是對(duì)這個(gè)時(shí)代獲取信息時(shí)枯燥感的厭煩與反抗，舉個(gè)例子：就像當(dāng)你日復(fù)一日的穿基本款T恤的時(shí)候一定向往印花T恤，不管你是多么的成熟有型哈哈哈哈哈。
△ 左圖為新擬態(tài)，右圖為MD
icon的設(shè)計(jì)植入了新的設(shè)計(jì)理念，更突出去表現(xiàn)現(xiàn)實(shí)環(huán)境下的真實(shí)狀態(tài)，注重光影和厚度的變化，尤其是光影。細(xì)看每一個(gè)icon，嚴(yán)格遵循同一個(gè)光源（正頂光）去設(shè)計(jì)。
但話說(shuō)回來(lái)，很難講這套icon是否成功，有幾個(gè)明顯的弊端也暴露出來(lái)了：
1. 可用性與美感的平衡
新擬態(tài)更重注光感的細(xì)膩程度，但對(duì)信息的有效呈現(xiàn)打了一定的折扣，這塊蘋(píng)果權(quán)衡決策下放棄了些許的美感，增強(qiáng)了有效的信息傳遞。
△ 圖片來(lái)源dribbble
2. 統(tǒng)一性
對(duì)一個(gè)生態(tài)來(lái)講，最最理想的是每一個(gè)生活在內(nèi)的成員要和諧的相處，新的擬態(tài)風(fēng)格相比扁平時(shí)代的圖標(biāo)顯然給第三方開(kāi)發(fā)者增加了難度，這種難度極有可能對(duì)沒(méi)有太多設(shè)計(jì)資源但又想好好開(kāi)發(fā)應(yīng)用的創(chuàng)業(yè)團(tuán)隊(duì)造成一定的打擊（換句話說(shuō)催生了設(shè)計(jì)外包的工作也不錯(cuò)哈哈哈哈哈）。
總的來(lái)說(shuō)，優(yōu)勢(shì)和弊端同時(shí)存在吧，啥事都沒(méi)有完美的不是么～下圖是這次改版里我相對(duì)還比較喜歡的幾組icon了。
布局結(jié)構(gòu)的簡(jiǎn)化處理
從官方的HIG介紹中，sidebar被重點(diǎn)提到了。透過(guò)去看，其實(shí)是布局的底層邏輯發(fā)生了變化，10.15的時(shí)候上下兩段左右分欄的方式會(huì)存在一定的誤區(qū)：全局action控制當(dāng)前試圖的交互？？？
從層級(jí)關(guān)系上也可以勉勉強(qiáng)強(qiáng)講得通，但實(shí)在是太牽強(qiáng)了，特別是前進(jìn)后退按鈕存在所有文件之上這個(gè)蜜汁布局居然維持了這么久。層級(jí)清晰的梳理后帶來(lái)的一大優(yōu)勢(shì)就是視覺(jué)的復(fù)雜性被降低了，借助現(xiàn)在這種列表視圖，很大程度上前進(jìn)后退都用不到了。
另外要提及的是設(shè)計(jì)師可以思考的問(wèn)題，下一代模糊效果-漸進(jìn)模糊。這種模擬現(xiàn)實(shí)生活的真實(shí)模糊包括陰影/反光/相互透出，同時(shí)要考慮光源/角度/環(huán)境等等，不再單純的只是黑色/透明度（有興趣的話可以在sketch里模擬下或者留言討論討論～）。
人腦是需要一個(gè)提示來(lái)識(shí)別物體，我們稱之為反饋設(shè)計(jì)，這是人機(jī)交互中非常重要的一個(gè)環(huán)節(jié)，這也是為什么許多按鈕仍帶有陰影的原因。但是，這版本的macOS工具欄圖標(biāo)丟失了形狀以消除視覺(jué)復(fù)雜性，所以重塑后的反饋會(huì)鼓勵(lì)用戶去操作。
對(duì)于設(shè)計(jì)師來(lái)講，不要害怕不強(qiáng)調(diào)所有選項(xiàng)，并非每個(gè)按鈕都需要具有形狀。只要設(shè)計(jì)足夠的反饋一樣可以起到被點(diǎn)擊的效果，例如當(dāng)用戶將鼠標(biāo)懸停在其表面上時(shí)，可能會(huì)出現(xiàn)更多的色彩更有趣的動(dòng)畫(huà)，并盡可能消除視覺(jué)上的復(fù)雜性。
這次升級(jí)除了設(shè)計(jì)上的優(yōu)化外，safari的變化也足夠令人欣喜，可以快速通過(guò) tab 知道當(dāng)前網(wǎng)頁(yè)的內(nèi)容的功能真是令人欣喜（雖然我記得之前Yandex瀏覽器就是這么做的哈哈哈哈）。
可以預(yù)知時(shí)間地點(diǎn)的apple map：
悄悄的說(shuō)，感覺(jué)蘋(píng)果越來(lái)越像騰訊了，有些小微企業(yè)的創(chuàng)新功能一受用戶喜歡不是買過(guò)來(lái)就是抄過(guò)來(lái)，有一種壟斷的感覺(jué)，想想悲催的Alfred和workflow都是這種命運(yùn)。
macOS big Sur 的升級(jí)可以說(shuō)是蘋(píng)果對(duì)未來(lái)的進(jìn)一步探索，站在設(shè)計(jì)師的角度，有幾個(gè)值得學(xué)習(xí)的點(diǎn)：
文章來(lái)源：優(yōu)設(shè) 作者：Nana的設(shè)計(jì)錦囊
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.88yangsc.com