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