蘋果 macOS Big Sur 系統(tǒng)對(duì)于新擬態(tài)風(fēng)格的探索
編輯導(dǎo)語(yǔ):如果你觀看了 2020 年的蘋果全球開(kāi)發(fā)者大會(huì)(WWDC),或者是在不經(jīng)意間注意到蘋果發(fā)布的一些公告,可能會(huì)注意到一些新東西。除了 iOS 14、iPadOS 14 等新系統(tǒng)外,蘋果還發(fā)布了全新的 macOS 版本,不再是 X,而是新版本號(hào) macOS 11(又名 Big Sur)。Big Sur(大瑟爾)是位于美國(guó)加利福尼亞西部中海岸的一段多山區(qū)域,常以景色秀麗聞名,曾經(jīng)被《國(guó)家地理》雜志評(píng)為“人一生要去的 50 個(gè)地方”之一,這個(gè)系統(tǒng)命名遵循了 macOS 最近幾年都用加州景色取名的習(xí)慣。
一、新風(fēng)格帶來(lái)的碰撞
蘋果表示,新操作系統(tǒng)帶來(lái)了自 macOS 10 推出以來(lái)最大的設(shè)計(jì)變革,更新了Safari 瀏覽器,優(yōu)化了信息、地圖和隱私保護(hù)等功能,帶回了經(jīng)典的開(kāi)機(jī)提示音……macOS Big Sur 借鑒了 Apple iOS 的許多元素,在控制中心中可以更改屏幕亮度、在通知中心中設(shè)置相關(guān)通知分組。
應(yīng)用的窗口都變成了大圓角,應(yīng)用圖標(biāo)也統(tǒng)一成圓角矩形,進(jìn)行了整體更新升級(jí),與整個(gè) Apple 生態(tài)系統(tǒng)的風(fēng)格變得更統(tǒng)一,同時(shí)也保留了 Mac 的鮮明特色。
1. macOS Big Sur 設(shè)計(jì)風(fēng)格
左:新 icon(Big Sur),右:舊 icon(Catalina)
從 macOS Big Sur 系統(tǒng)的發(fā)布測(cè)試版本開(kāi)始,就出現(xiàn)了大量的爭(zhēng)議。關(guān)于圖標(biāo),大量的反饋是太丑了,作為設(shè)計(jì)師,也不是很理解這種生硬的深色投影。
macOS系統(tǒng)圖標(biāo)新舊對(duì)比
這些爭(zhēng)議引起了對(duì) Big Sur 系統(tǒng)圖標(biāo)進(jìn)行優(yōu)化的風(fēng)潮,期間涌現(xiàn)出一批優(yōu)秀的作品。印象較為深刻的是來(lái)自 Vikiiing 的作品,他使用了 C4D 的三維技巧對(duì)系統(tǒng)圖標(biāo)進(jìn)行了重新設(shè)計(jì)。
Vikiiing的 3D Big Sur 圖標(biāo)作品(www.dribbble.com/Vikiiing)
這一組 3D 圖標(biāo)作品配色明亮、質(zhì)感細(xì)膩、過(guò)渡自然,使用三維技巧使其光影和細(xì)節(jié)的表現(xiàn)更加豐富。
Vikiiing 的作品和 Big Sur 的對(duì)比
二、新擬態(tài)風(fēng)格的崛起
無(wú)論是蘋果官方的這套圖標(biāo)還是 Vikiiing 設(shè)計(jì)的這組 3D 圖標(biāo),你都可以將其歸類于一種叫做「新擬態(tài)」的設(shè)計(jì)風(fēng)格,「新擬態(tài)」在設(shè)計(jì)媒體上已經(jīng)流行一段時(shí)間了,大多數(shù)人對(duì)這種風(fēng)格持有否定的態(tài)度。
對(duì)于「新擬態(tài)」風(fēng)格的批評(píng),主要是因?yàn)樵缙诘膶?shí)驗(yàn)性作品過(guò)于關(guān)注設(shè)計(jì)的差異性,不考慮實(shí)際的可用性。
但是,如果你跳脫出目前看到的「新擬態(tài)」實(shí)踐作品(通常是由專注形式主義而非可用性的設(shè)計(jì)師創(chuàng)作的作品),去關(guān)注「新擬態(tài)」的基本概念,會(huì)發(fā)現(xiàn)其中確實(shí)有一些相當(dāng)令人興奮的東西,并且是可持續(xù)發(fā)展的,很多都還沒(méi)有完全被實(shí)現(xiàn)。
新擬態(tài)風(fēng)格實(shí)驗(yàn)的例子(設(shè)計(jì)師 Filip Legieski 作品)
三、「新擬態(tài)」關(guān)注于光是如何在三維空間中運(yùn)動(dòng)的
「新擬態(tài)」的前身「擬物態(tài)」,通過(guò)模擬真實(shí)物體表面的紋理效果,在數(shù)字界面中創(chuàng)造出真實(shí)感,就像撲克桌上的毛氈質(zhì)感或錄音機(jī)外殼的金屬拉絲紋理。
實(shí)現(xiàn)這種設(shè)計(jì)風(fēng)格的一個(gè)輔助元素是光,光與所展示的材料發(fā)生了真實(shí)的相互作用,這就是為什么投影和背光面在早期界面中普遍使用的原因。
但是「擬物態(tài)」時(shí)期模擬光照和紋理的表現(xiàn)手法仍然相對(duì)簡(jiǎn)單:哪些對(duì)象是有光澤的,哪些是粗糙的,哪些物體是透明的……這些最終都是功利主義,且有些武斷的選擇(設(shè)計(jì)師或團(tuán)隊(duì)主觀的選擇,或是服從大多數(shù)人的意愿、考慮群體利益而做出的選擇)。
「新擬態(tài)」與其前身「擬物態(tài)」的區(qū)別是「新擬態(tài)」聚焦在光本身、以及光是如何在一個(gè)純凈的數(shù)字空間中與各種物體進(jìn)行交互的?!感聰M態(tài)」中的光模擬更加復(fù)雜,關(guān)注物體之間的光照影響(折射/反射),或者使用什么樣的光線可以更好的表達(dá)物體本身的功能。
還記得早期的蘋果系統(tǒng)界面嗎?
「新擬態(tài)」出現(xiàn)之初引起非常多爭(zhēng)議的設(shè)計(jì)案例,是將白色的 UI 元素放置在白色的背景上,元素和背景的差異僅僅通過(guò)元素與光的相互作用而產(chǎn)生,來(lái)自頂部的光照(高光)和來(lái)自底部的陰影(投影)表明 UI 元素是位于背景上層的。
在這種風(fēng)格被廣泛應(yīng)用之前,還需要進(jìn)一步研究,提高其可用性。但是,它展示了「擬物態(tài)」所沒(méi)有的 ——一種全局照明模式的概念,這種模式超越了單獨(dú)的對(duì)象,展示了光對(duì)同一空間內(nèi)多個(gè)對(duì)象是如何相互作用的。
新擬態(tài)風(fēng)格的全局照明模式(設(shè)計(jì)師 Elena Zelova 作品)
四、向扁平化轉(zhuǎn)變
在 2010 年代早期,「擬物態(tài)」逐漸消逝,「扁平化」風(fēng)格開(kāi)始流行起來(lái),這使得色彩和設(shè)計(jì)元素的表現(xiàn)手法更加廣泛,且富有表現(xiàn)力。不受物理世界的束縛,元素可以變成任何顏色,空間可以更好地利用。通過(guò)去除不必要的裝飾,設(shè)計(jì)師可以自由探索。
「扁平化」設(shè)計(jì)占主導(dǎo)地位的近十年里,在可用性和用戶體驗(yàn)領(lǐng)域取得了許多重大進(jìn)展。
但隨著時(shí)間的推移,「扁平化」風(fēng)格泛濫,物理性的再次引入吸引著人們開(kāi)始重新研究三維設(shè)計(jì),思考將「扁平化」時(shí)期獲得的經(jīng)驗(yàn)帶入三維環(huán)境的可能性,對(duì)三維世界的研究變得更加深入。于是時(shí)光開(kāi)始倒轉(zhuǎn),設(shè)計(jì)風(fēng)格在輪回之中尋找變化。
曾經(jīng)的蘋果iOS 7 系統(tǒng)
拋開(kāi)批評(píng)不談,「新擬態(tài)」有一個(gè)不可否認(rèn)的特點(diǎn),使其非常吸引人 ——看起來(lái)十分新穎。在過(guò)去的八年多的時(shí)間里,「扁平化」的設(shè)計(jì)風(fēng)格和技術(shù)實(shí)現(xiàn)方式,以及頁(yè)面和圖層的概念,已被人們所熟悉。
「新擬態(tài)」與用戶已經(jīng)習(xí)慣的「扁平化」風(fēng)格非常不一樣,它像是一種全新的視覺(jué)語(yǔ)言。這種差異化是有價(jià)值的,特別是對(duì)于像 Apple 這樣的公司而言,這是 19 年來(lái)首次嘗試將其操作系統(tǒng)升級(jí)到新的版本編號(hào)。
iPhone 于 2007 年發(fā)布,2013 年推出 iOS 7 的「扁平化」設(shè)計(jì)。這一基本外觀和感覺(jué)比最初的「擬物態(tài)」iPhone UI 保留了更長(zhǎng)的時(shí)間,每次的優(yōu)化迭代的改動(dòng)也很細(xì)微。
「新擬態(tài)」風(fēng)格提供了一種低成本的方法,在不對(duì)設(shè)計(jì)語(yǔ)言進(jìn)行大規(guī)模修改的情況下,推進(jìn)設(shè)計(jì)風(fēng)格的更新(實(shí)現(xiàn)「新擬態(tài)」風(fēng)格最基本的方法就是添加陰影、外發(fā)光和少量的 3D 元素,非常簡(jiǎn)單)。
「新擬態(tài)」風(fēng)格真正變得有趣,是從系統(tǒng)迭代超越了簡(jiǎn)單的視覺(jué)效果優(yōu)化開(kāi)始,設(shè)計(jì)師們著手于探索如何利用光和物體去組成的數(shù)字空間,從而使用戶界面更易于理解、更平易近人和更美觀。
macOSBig Sur app icons,來(lái)自設(shè)計(jì)師 Max Rudber
五、慢慢地前進(jìn)
為什么蘋果的新設(shè)計(jì)看起來(lái)有些糟糕呢?
正如之前提到的,「新擬態(tài)」的概念框架現(xiàn)在還相對(duì)較新,并且在設(shè)計(jì)行業(yè)中有許多抵制的聲音。長(zhǎng)期以來(lái),UI 設(shè)計(jì)行業(yè)一直被那些不考慮可用性或不滿足用戶需求的“創(chuàng)新設(shè)計(jì)師”所干擾,這引發(fā)了很多設(shè)計(jì)行業(yè)內(nèi)部的爭(zhēng)議。
一方認(rèn)為,概念設(shè)計(jì)的探索就是這樣不斷的嘗試;另一方認(rèn)為,UI / UX 設(shè)計(jì)對(duì)成功和失敗有非常具體的定義,沒(méi)有達(dá)到成功標(biāo)準(zhǔn)的作品就是失敗的(有些人認(rèn)為所有設(shè)計(jì)學(xué)科都需要嚴(yán)格的解釋,但這些人是書(shū)呆子、是錯(cuò)誤的)。
新擬態(tài)風(fēng)格大熱,網(wǎng)絡(luò)上出現(xiàn)了許多將圖標(biāo)變成 Big Sur 風(fēng)格的教程,該教程圖片來(lái)自設(shè)計(jì)師 Oskar Groth。
設(shè)計(jì)師可以“探索”是否應(yīng)該將用戶需要點(diǎn)擊的按鈕設(shè)置為不可見(jiàn)的,但由于這樣會(huì)導(dǎo)致用戶無(wú)法繼續(xù)操作,這個(gè)設(shè)計(jì)會(huì)被認(rèn)為是失敗的。
在界面設(shè)計(jì)領(lǐng)域中,樣式創(chuàng)新和可用性很難平衡,但這并不意味著樣式創(chuàng)新應(yīng)該被完全拋棄。
硬核的 UI / UX 設(shè)計(jì)師貶低幾乎所有樣式上的探索實(shí)驗(yàn),認(rèn)為這是不必要的和不可靠的 —— 是在現(xiàn)實(shí)世界中不可能存在的東西(不具備商業(yè)價(jià)值和可用性,沒(méi)有存在的必要)。
一些排斥「新擬態(tài)」的原因來(lái)自于此,早期的深入研究集中于將「新擬態(tài)」風(fēng)格中最具辨識(shí)性的特點(diǎn)應(yīng)用到用戶界面中最明顯的地方,導(dǎo)致的結(jié)果是,一些應(yīng)用了「新擬態(tài)」風(fēng)格的地方破壞了用戶體驗(yàn)設(shè)計(jì)的必要原則。
為了使「新擬態(tài)」發(fā)展到應(yīng)有的狀態(tài),我們需要將它一點(diǎn)點(diǎn)拆分,獨(dú)立發(fā)展,逐步地實(shí)現(xiàn)。在某種程度上,蘋果為 macOS 11 設(shè)計(jì)的全新設(shè)計(jì)系統(tǒng)似乎是這種解耦實(shí)踐首次引起廣泛關(guān)注的實(shí)例。
蘋果的新設(shè)計(jì)采用了「新擬態(tài)」風(fēng)格的元素,尤其是這些圖標(biāo)中(所有的非 UI 元素)使用的光的復(fù)雜交互。
六、與以往一樣,第三方將比蘋果更大膽、更快速地推動(dòng)這一風(fēng)格
在某些地方,「新擬態(tài)」風(fēng)格的實(shí)踐更加成功。
在二維圖標(biāo)創(chuàng)作中使用三維效果打造「新擬態(tài)」風(fēng)格,效果會(huì)更加突出,因此這些新圖標(biāo)也更加成功(參考上文中設(shè)計(jì)師Vikiiing 使用三維效果繪制的圖標(biāo))。
以 Messages (信息應(yīng)用)的圖標(biāo)為例,語(yǔ)音氣泡的形象非常具象,深入人心,所以這個(gè)元素與光的交互方式是已知的。然而,將一些抽象的元素,進(jìn)行三維化、物理化的轉(zhuǎn)換就不那么容易了。這就是「新擬態(tài)」風(fēng)格受限的地方。
照片應(yīng)用的圖標(biāo)就是一個(gè)很好的例子,為了保持它的辨識(shí)度,設(shè)計(jì)幾乎沒(méi)有改變,但為了使其與整體的「新擬態(tài)」風(fēng)格和諧,將一些陰影和外發(fā)光效果應(yīng)用到了底部矩形圖層樣式上。
這增加了圖標(biāo)的復(fù)雜性,卻沒(méi)有將該圖標(biāo)與整套圖標(biāo)成功融合。APP Store (蘋果應(yīng)用商店)的圖標(biāo)比照片應(yīng)用的圖標(biāo)稍微好一些,但原理是一樣的,即把一個(gè)二維線狀抽象圖形強(qiáng)硬的變成了三維樣式(直接增加光照和投影使其立體)。
如果想讓這樣的抽象圖形與整套圖標(biāo)更加統(tǒng)一,就需要進(jìn)行更深刻的反思,思考如果更好的將抽象圖形轉(zhuǎn)化為「新擬態(tài)」風(fēng)格,消除用戶的困惑。
顯然,這些設(shè)計(jì)會(huì)隨著時(shí)間的推移被逐漸修改,直到它們開(kāi)始形成一個(gè)更有凝聚力的整體。當(dāng)你回顧 ios7 最初的「扁平化」設(shè)計(jì)時(shí),你會(huì)發(fā)現(xiàn)很多地方都是粗糙的。
新字體(The Helvetica Neue)顏色太淺,整體外觀過(guò)于鮮亮。慢慢的,ios 的「扁平化」風(fēng)格在不斷演進(jìn)并且變得更加精致。
毫無(wú)疑問(wèn),蘋果進(jìn)軍新市場(chǎng)嘗試「新擬態(tài)」風(fēng)格也將是如此。事實(shí)上,蘋果向「新擬態(tài)」這一設(shè)計(jì)流派的發(fā)展,為這個(gè)概念賦予了合理性,現(xiàn)在任何希望融入蘋果新理念的設(shè)計(jì)師,都會(huì)充分利用「新擬態(tài)」風(fēng)格進(jìn)行創(chuàng)作。
現(xiàn)在,整個(gè)設(shè)計(jì)行業(yè)將認(rèn)真對(duì)待「新擬態(tài)」風(fēng)格,會(huì)獲得爆炸式的發(fā)展,在將其合理應(yīng)用于用戶界面設(shè)計(jì)和功能方面取得更多進(jìn)展。
與以往一樣,第三方將比蘋果更大膽、更迅速地推動(dòng)這一風(fēng)格 — 這也是我們將會(huì)真正開(kāi)始釋放「新擬態(tài)」力量的時(shí)候。此外,蘋果可能會(huì)發(fā)布一個(gè)帶有更好圖標(biāo)的更新版本。
原文作者:Jack Koloskus(Input 和 The Outline 的首席設(shè)計(jì)師)
原文地址:https://www.inputmag.com/design/apple-macos-big-sur-the-rise-of-neumorphism
譯者:張聿彤 ;公眾號(hào):三分設(shè)
本文由 @三分設(shè) 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來(lái)自 Pexels,基于 CC0 協(xié)議
- 目前還沒(méi)評(píng)論,等你發(fā)揮!