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

從系統連續性上看AirPods可以在不同設備上無縫切換,不同設備直接可以複製粘貼等等,顯而易見的一件事是,蘋果啓動了macOS的「 iOS化」,所以迴歸到設計上,這次的升級對設計語言上的影響概括來說有以下幾個方面:

  • 全局設計調整(iOS/iPad化)
  • 擬物設計風格再次復甦了麼?
  • 降低視覺複雜性-佈局結構的簡化處理
  • 重塑feedback設計
  • 信息提取效率進一步優化

全局設計調整

逐步 iOS 化的 macOS

不知道大家有沒有這種感覺:以前從諾基亞(或Android手機)切換到iPhone,動機是cool~,漂亮的外觀讓人第一面就愛上了,恨不得馬上就拿起來把玩。現在給你個選擇切換回Android手機,不管那款手機有多漂亮多美好看,心裏第一句話很有可能是:「XXX手機很棒,但我已經離不開蘋果的生態了哦!」(我就是這種德行,嘗試了N次還是回來了哈哈哈哈哈。)

這大概就是蘋果在系統打通的層面下的功夫,更加註重生態的維護,在不同的設備間尋找更多場景產生更多聯繫。從設計的層面來看,iOS化的macOS對iPhone用戶更加友好,有相同的操作習慣,不必在mac和iOS上來回的切換。其實在Material Design推行的過程中就有相似的做法,Chrome的全面MD化,讓整個設計語言貫穿在移動設備和個人電腦中。

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

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

從蘋果對產品的終局目標來看,也許會在硬件上取消物理控制按鍵或者更加優化 touchBar 去操控必要的屬性(也有傳聞說這是在爲觸控版本的 macOS 做準備)。

同樣iOS化的通知中心(講真,用戶實際的桌面未必這麼幹淨,真是擔心本身在電腦側使用頻率就不是那麼高的通知中心被混亂的文件夾淹沒)

2. 進一步強調的沉浸式氛圍

全局設計中最令我欣喜的是menu Bar的更進一步的優化!我在sketch裏模擬了下效果(非嚴謹模擬哦),大概得出的結論是加高了背景模糊值,減少了本身的填充透明度,達到了現在的效果。

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

擬物設計風格再次復甦?

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

△ 左圖爲新擬態,右圖爲MD

icon的設計植入了新的設計理念,更突出去表現現實環境下的真實狀態,注重光影和厚度的變化,尤其是光影。細看每一個icon,嚴格遵循同一個光源(正頂光)去設計。

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

1. 可用性與美感的平衡

新擬態更重注光感的細膩程度,但對信息的有效呈現打了一定的折扣,這塊蘋果權衡決策下放棄了些許的美感,增強了有效的信息傳遞。

△ 圖片來源dribbble

2. 統一性

對一個生態來講,最最理想的是每一個生活在內的成員要和諧的相處,新的擬態風格相比扁平時代的圖標顯然給第三方開發者增加了難度,這種難度極有可能對沒有太多設計資源但又想好好開發應用的創業團隊造成一定的打擊(換句話說催生了設計外包的工作也不錯哈哈哈哈哈)。

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

降低視覺複雜性

佈局結構的簡化處理

從官方的HIG介紹中,sidebar被重點提到了。透過去看,其實是佈局的底層邏輯發生了變化,10.15的時候上下兩段左右分欄的方式會存在一定的誤區:全局action控制當前試圖的交互???

從層級關係上也可以勉勉強強講得通,但實在是太牽強了,特別是前進後退按鈕存在所有文件之上這個蜜汁佈局居然維持了這麼久。層級清晰的梳理後帶來的一大優勢就是視覺的複雜性被降低了,藉助現在這種列表視圖,很大程度上前進後退都用不到了。

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

重塑feedback設計

人腦是需要一個提示來識別物體,我們稱之爲反饋設計,這是人機交互中非常重要的一個環節,這也是爲什麼許多按鈕仍帶有陰影的原因。但是,這版本的macOS工具欄圖標丟失了形狀以消除視覺複雜性,所以重塑後的反饋會鼓勵用戶去操作。

對於設計師來講,不要害怕不強調所有選項,並非每個按鈕都需要具有形狀。只要設計足夠的反饋一樣可以起到被點擊的效果,例如當用戶將鼠標懸停在其表面上時,可能會出現更多的色彩更有趣的動畫,並儘可能消除視覺上的複雜性。

信息提取效率進一步優化

這次升級除了設計上的優化外,safari的變化也足夠令人欣喜,可以快速通過 tab 知道當前網頁的內容的功能真是令人欣喜(雖然我記得之前Yandex瀏覽器就是這麼做的哈哈哈哈)。

可以預知時間地點的apple map:

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

總結

macOS big Sur 的升級可以說是蘋果對未來的進一步探索,站在設計師的角度,有幾個值得學習的點:

  • 具備完成的設計語言的概念植入執行當中,不管是對真實生活的隱喻(光影)還是高度抽煉(材料設計),要時刻具備宏觀視角,不以一兩個頁面論英雄哈~
  • UI/UX的本質是對信息的規劃編排,一定要保證用戶的提取效率。
  • 預期與反饋是極重要的一環,包括我在內通常在做設計的時候只沉浸於界面當中,忽視了界面裏的互動設計。

拓展閱讀:

歡迎關注作者的微信公衆號:「Nana的設計錦囊」

相關文章