顛覆性的macOS 11系統(tǒng)有哪些值得關(guān)注的設(shè)計(jì)?

2020-7-6    資深UI設(shè)計(jì)者

蘋果WWDC 2020在6月23日通過線上形式召開,本次開發(fā)者大會(huì)沒有發(fā)布太多硬件產(chǎn)品。不過macOS的新版本macOS big Sur依舊引來了大波關(guān)注,坦誠的講這次版本更新屬實(shí)是很震驚,這可能是近10年蘋果第二次顛覆性的改變,上次還是2013年的iOS 7開始全面扁平化,從而引發(fā)了設(shè)計(jì)圈「扁平擬物大戰(zhàn)」。

顛覆性的macOS 11系統(tǒng)有哪些值得關(guān)注的設(shè)計(jì)?

從系統(tǒng)連續(xù)性上看AirPods可以在不同設(shè)備上無縫切換,不同設(shè)備直接可以復(fù)制粘貼等等,顯而易見的一件事是,蘋果啟動(dòng)了macOS的「 iOS化」,所以回歸到設(shè)計(jì)上,這次的升級對設(shè)計(jì)語言上的影響概括來說有以下幾個(gè)方面:

  • 全局設(shè)計(jì)調(diào)整(iOS/iPad化)
  • 擬物設(shè)計(jì)風(fēng)格再次復(fù)蘇了么?
  • 降低視覺復(fù)雜性-布局結(jié)構(gòu)的簡化處理
  • 重塑feedback設(shè)計(jì)
  • 信息提取效率進(jìn)一步優(yōu)化

全局設(shè)計(jì)調(diào)整

逐步 iOS 化的 macOS

不知道大家有沒有這種感覺:以前從諾基亞(或Android手機(jī))切換到iPhone,動(dòng)機(jī)是cool~,漂亮的外觀讓人第一面就愛上了,恨不得馬上就拿起來把玩?,F(xiàn)在給你個(gè)選擇切換回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化,讓整個(gè)設(shè)計(jì)語言貫穿在移動(dòng)設(shè)備和個(gè)人電腦中。

1. 完全繼承iOS基因的控制中心/通知中心和dock

顛覆性的macOS 11系統(tǒng)有哪些值得關(guān)注的設(shè)計(jì)?

全新的control center,可以看的出繼承了iOS/iPad OS的語言,UI和交互幾乎是沒有任何變化,整合系統(tǒng)一致性的初衷是甚好,在當(dāng)下這個(gè)情況,不得不說亮度和聲音的調(diào)節(jié)我更依賴于物理鍵盤(或touchBar),不太清楚硬整合在一起的理由(難不成是過度解讀了,也許人家就想繼承繼承)。

從蘋果對產(chǎn)品的終局目標(biāo)來看,也許會(huì)在硬件上取消物理控制按鍵或者更加優(yōu)化 touchBar 去操控必要的屬性(也有傳聞?wù)f這是在為觸控版本的 macOS 做準(zhǔn)備)。

顛覆性的macOS 11系統(tǒng)有哪些值得關(guān)注的設(shè)計(jì)?

同樣iOS化的通知中心(講真,用戶實(shí)際的桌面未必這么干凈,真是擔(dān)心本身在電腦側(cè)使用頻率就不是那么高的通知中心被混亂的文件夾淹沒)

2. 進(jìn)一步強(qiáng)調(diào)的沉浸式氛圍

顛覆性的macOS 11系統(tǒng)有哪些值得關(guān)注的設(shè)計(jì)?

全局設(shè)計(jì)中最令我欣喜的是menu Bar的更進(jìn)一步的優(yōu)化!我在sketch里模擬了下效果(非嚴(yán)謹(jǐn)模擬哦),大概得出的結(jié)論是加高了背景模糊值,減少了本身的填充透明度,達(dá)到了現(xiàn)在的效果。

感官上來看的話是一個(gè)微小的改動(dòng),但從層級整合的角度這是蘋果設(shè)計(jì)的一大提升,通過光影等自然世界的隱喻抽象設(shè)計(jì)來減少硬性層級劃分,也符合Alan Dye(蘋果用戶界面設(shè)計(jì)副總裁)提出的「深度,陰影和半透明性用于創(chuàng)建層次結(jié)構(gòu)」。

顛覆性的macOS 11系統(tǒng)有哪些值得關(guān)注的設(shè)計(jì)?

擬物設(shè)計(jì)風(fēng)格再次復(fù)蘇?

除了壁紙以外,圖標(biāo)是最引人矚目的變化啦!iOS化的圖標(biāo)規(guī)格的約束不用多說了,還有就是「新擬態(tài)」的第一次亮相。新擬態(tài)出現(xiàn)一定意義上是對這個(gè)時(shí)代獲取信息時(shí)枯燥感的厭煩與反抗,舉個(gè)例子:就像當(dāng)你日復(fù)一日的穿基本款T恤的時(shí)候一定向往印花T恤,不管你是多么的成熟有型哈哈哈哈哈。

顛覆性的macOS 11系統(tǒng)有哪些值得關(guān)注的設(shè)計(jì)?

△ 左圖為新擬態(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ì)。

顛覆性的macOS 11系統(tǒng)有哪些值得關(guān)注的設(shè)計(jì)?

但話說回來,很難講這套icon是否成功,有幾個(gè)明顯的弊端也暴露出來了:

1. 可用性與美感的平衡

新擬態(tài)更重注光感的細(xì)膩程度,但對信息的有效呈現(xiàn)打了一定的折扣,這塊蘋果權(quán)衡決策下放棄了些許的美感,增強(qiáng)了有效的信息傳遞。

顛覆性的macOS 11系統(tǒng)有哪些值得關(guān)注的設(shè)計(jì)?

△ 圖片來源dribbble

2. 統(tǒng)一性

對一個(gè)生態(tài)來講,最最理想的是每一個(gè)生活在內(nèi)的成員要和諧的相處,新的擬態(tài)風(fēng)格相比扁平時(shí)代的圖標(biāo)顯然給第三方開發(fā)者增加了難度,這種難度極有可能對沒有太多設(shè)計(jì)資源但又想好好開發(fā)應(yīng)用的創(chuàng)業(yè)團(tuán)隊(duì)造成一定的打擊(換句話說催生了設(shè)計(jì)外包的工作也不錯(cuò)哈哈哈哈哈)。

總的來說,優(yōu)勢和弊端同時(shí)存在吧,啥事都沒有完美的不是么~下圖是這次改版里我相對還比較喜歡的幾組icon了。

顛覆性的macOS 11系統(tǒng)有哪些值得關(guān)注的設(shè)計(jì)?

降低視覺復(fù)雜性

布局結(jié)構(gòu)的簡化處理

從官方的HIG介紹中,sidebar被重點(diǎn)提到了。透過去看,其實(shí)是布局的底層邏輯發(fā)生了變化,10.15的時(shí)候上下兩段左右分欄的方式會(huì)存在一定的誤區(qū):全局action控制當(dāng)前試圖的交互???

從層級關(guān)系上也可以勉勉強(qiáng)強(qiáng)講得通,但實(shí)在是太牽強(qiáng)了,特別是前進(jìn)后退按鈕存在所有文件之上這個(gè)蜜汁布局居然維持了這么久。層級清晰的梳理后帶來的一大優(yōu)勢就是視覺的復(fù)雜性被降低了,借助現(xiàn)在這種列表視圖,很大程度上前進(jìn)后退都用不到了。

顛覆性的macOS 11系統(tǒng)有哪些值得關(guān)注的設(shè)計(jì)?

另外要提及的是設(shè)計(jì)師可以思考的問題,下一代模糊效果-漸進(jìn)模糊。這種模擬現(xiàn)實(shí)生活的真實(shí)模糊包括陰影/反光/相互透出,同時(shí)要考慮光源/角度/環(huán)境等等,不再單純的只是黑色/透明度(有興趣的話可以在sketch里模擬下或者留言討論討論~)。

重塑feedback設(shè)計(jì)

人腦是需要一個(gè)提示來識(shí)別物體,我們稱之為反饋設(shè)計(jì),這是人機(jī)交互中非常重要的一個(gè)環(huán)節(jié),這也是為什么許多按鈕仍帶有陰影的原因。但是,這版本的macOS工具欄圖標(biāo)丟失了形狀以消除視覺復(fù)雜性,所以重塑后的反饋會(huì)鼓勵(lì)用戶去操作。

顛覆性的macOS 11系統(tǒng)有哪些值得關(guān)注的設(shè)計(jì)?

對于設(shè)計(jì)師來講,不要害怕不強(qiáng)調(diào)所有選項(xiàng),并非每個(gè)按鈕都需要具有形狀。只要設(shè)計(jì)足夠的反饋一樣可以起到被點(diǎn)擊的效果,例如當(dāng)用戶將鼠標(biāo)懸停在其表面上時(shí),可能會(huì)出現(xiàn)更多的色彩更有趣的動(dòng)畫,并盡可能消除視覺上的復(fù)雜性。

信息提取效率進(jìn)一步優(yōu)化

這次升級除了設(shè)計(jì)上的優(yōu)化外,safari的變化也足夠令人欣喜,可以快速通過 tab 知道當(dāng)前網(wǎng)頁的內(nèi)容的功能真是令人欣喜(雖然我記得之前Yandex瀏覽器就是這么做的哈哈哈哈)。

顛覆性的macOS 11系統(tǒng)有哪些值得關(guān)注的設(shè)計(jì)?

可以預(yù)知時(shí)間地點(diǎn)的apple map:

顛覆性的macOS 11系統(tǒng)有哪些值得關(guān)注的設(shè)計(jì)?

悄悄的說,感覺蘋果越來越像騰訊了,有些小微企業(yè)的創(chuàng)新功能一受用戶喜歡不是買過來就是抄過來,有一種壟斷的感覺,想想悲催的Alfred和workflow都是這種命運(yùn)。

總結(jié)

macOS big Sur 的升級可以說是蘋果對未來的進(jìn)一步探索,站在設(shè)計(jì)師的角度,有幾個(gè)值得學(xué)習(xí)的點(diǎn):

  • 具備完成的設(shè)計(jì)語言的概念植入執(zhí)行當(dāng)中,不管是對真實(shí)生活的隱喻(光影)還是高度抽煉(材料設(shè)計(jì)),要時(shí)刻具備宏觀視角,不以一兩個(gè)頁面論英雄哈~
  • UI/UX的本質(zhì)是對信息的規(guī)劃編排,一定要保證用戶的提取效率。

  • 預(yù)期與反饋是極重要的一環(huán),包括我在內(nèi)通常在做設(shè)計(jì)的時(shí)候只沉浸于界面當(dāng)中,忽視了界面里的互動(dòng)設(shè)計(jì)。

文章來源:優(yōu)設(shè)    作者:Nana的設(shè)計(jì)錦囊


藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)

分享本文至:

日歷

鏈接

個(gè)人資料

存檔