編輯導(dǎo)語：如果你觀看了 2020 年的蘋果全球開發(fā)者大會（WWDC），或者是在不經(jīng)意間注意到蘋果發(fā)布的一些公告，可能會注意到一些新東西。除了 iOS 14、iPadOS 14 等新系統(tǒng)外，蘋果還發(fā)布了全新的 macOS 版本，不再是 X，而是新版本號 macOS 11（又名 Big Sur）。Big Sur（大瑟爾）是位于美國加利福尼亞西部中海岸的一段多山區(qū)域，常以景色秀麗聞名，曾經(jīng)被《國家地理》雜志評為“人一生要去的 50 個地方”之一，這個系統(tǒng)命名遵循了 macOS 最近幾年都用加州景色取名的習(xí)慣。

一、新風(fēng)格帶來的碰撞

蘋果表示，新操作系統(tǒng)帶來了自 macOS 10 推出以來最大的設(shè)計變革，更新了Safari 瀏覽器，優(yōu)化了信息、地圖和隱私保護等功能，帶回了經(jīng)典的開機提示音……macOS Big Sur 借鑒了 Apple iOS 的許多元素，在控制中心中可以更改屏幕亮度、在通知中心中設(shè)置相關(guān)通知分組。

應(yīng)用的窗口都變成了大圓角，應(yīng)用圖標(biāo)也統(tǒng)一成圓角矩形，進行了整體更新升級，與整個 Apple 生態(tài)系統(tǒng)的風(fēng)格變得更統(tǒng)一，同時也保留了 Mac 的鮮明特色。

1. macOS Big Sur 設(shè)計風(fēng)格

左：新 icon（Big Sur），右：舊 icon（Catalina）

從 macOS Big Sur 系統(tǒng)的發(fā)布測試版本開始，就出現(xiàn)了大量的爭議。關(guān)于圖標(biāo)，大量的反饋是太丑了，作為設(shè)計師，也不是很理解這種生硬的深色投影。

macOS系統(tǒng)圖標(biāo)新舊對比

這些爭議引起了對 Big Sur 系統(tǒng)圖標(biāo)進行優(yōu)化的風(fēng)潮，期間涌現(xiàn)出一批優(yōu)秀的作品。印象較為深刻的是來自 Vikiiing 的作品，他使用了 C4D 的三維技巧對系統(tǒng)圖標(biāo)進行了重新設(shè)計。

Vikiiing的 3D Big Sur 圖標(biāo)作品（www.dribbble.com/Vikiiing）

這一組 3D 圖標(biāo)作品配色明亮、質(zhì)感細(xì)膩、過渡自然，使用三維技巧使其光影和細(xì)節(jié)的表現(xiàn)更加豐富。

Vikiiing 的作品和 Big Sur 的對比

二、新擬態(tài)風(fēng)格的崛起

無論是蘋果官方的這套圖標(biāo)還是 Vikiiing 設(shè)計的這組 3D 圖標(biāo)，你都可以將其歸類于一種叫做「新擬態(tài)」的設(shè)計風(fēng)格，「新擬態(tài)」在設(shè)計媒體上已經(jīng)流行一段時間了，大多數(shù)人對這種風(fēng)格持有否定的態(tài)度。

對于「新擬態(tài)」風(fēng)格的批評，主要是因為早期的實驗性作品過于關(guān)注設(shè)計的差異性，不考慮實際的可用性。

但是，如果你跳脫出目前看到的「新擬態(tài)」實踐作品（通常是由專注形式主義而非可用性的設(shè)計師創(chuàng)作的作品），去關(guān)注「新擬態(tài)」的基本概念，會發(fā)現(xiàn)其中確實有一些相當(dāng)令人興奮的東西，并且是可持續(xù)發(fā)展的，很多都還沒有完全被實現(xiàn)。

新擬態(tài)風(fēng)格實驗的例子（設(shè)計師 Filip Legieski 作品）

三、「新擬態(tài)」關(guān)注于光是如何在三維空間中運動的

「新擬態(tài)」的前身「擬物態(tài)」，通過模擬真實物體表面的紋理效果，在數(shù)字界面中創(chuàng)造出真實感，就像撲克桌上的毛氈質(zhì)感或錄音機外殼的金屬拉絲紋理。

實現(xiàn)這種設(shè)計風(fēng)格的一個輔助元素是光，光與所展示的材料發(fā)生了真實的相互作用，這就是為什么投影和背光面在早期界面中普遍使用的原因。

但是「擬物態(tài)」時期模擬光照和紋理的表現(xiàn)手法仍然相對簡單：哪些對象是有光澤的，哪些是粗糙的，哪些物體是透明的……這些最終都是功利主義，且有些武斷的選擇（設(shè)計師或團隊主觀的選擇，或是服從大多數(shù)人的意愿、考慮群體利益而做出的選擇）。

「新擬態(tài)」與其前身「擬物態(tài)」的區(qū)別是「新擬態(tài)」聚焦在光本身、以及光是如何在一個純凈的數(shù)字空間中與各種物體進行交互的。「新擬態(tài)」中的光模擬更加復(fù)雜，關(guān)注物體之間的光照影響（折射/反射），或者使用什么樣的光線可以更好的表達(dá)物體本身的功能。

還記得早期的蘋果系統(tǒng)界面嗎？

「新擬態(tài)」出現(xiàn)之初引起非常多爭議的設(shè)計案例，是將白色的 UI 元素放置在白色的背景上，元素和背景的差異僅僅通過元素與光的相互作用而產(chǎn)生，來自頂部的光照（高光）和來自底部的陰影（投影）表明 UI 元素是位于背景上層的。

在這種風(fēng)格被廣泛應(yīng)用之前，還需要進一步研究，提高其可用性。但是，它展示了「擬物態(tài)」所沒有的 ——一種全局照明模式的概念，這種模式超越了單獨的對象，展示了光對同一空間內(nèi)多個對象是如何相互作用的。

新擬態(tài)風(fēng)格的全局照明模式（設(shè)計師 Elena Zelova 作品）

四、向扁平化轉(zhuǎn)變

在 2010 年代早期，「擬物態(tài)」逐漸消逝，「扁平化」風(fēng)格開始流行起來，這使得色彩和設(shè)計元素的表現(xiàn)手法更加廣泛，且富有表現(xiàn)力。不受物理世界的束縛，元素可以變成任何顏色，空間可以更好地利用。通過去除不必要的裝飾，設(shè)計師可以自由探索。

「扁平化」設(shè)計占主導(dǎo)地位的近十年里，在可用性和用戶體驗領(lǐng)域取得了許多重大進展。

但隨著時間的推移，「扁平化」風(fēng)格泛濫，物理性的再次引入吸引著人們開始重新研究三維設(shè)計，思考將「扁平化」時期獲得的經(jīng)驗帶入三維環(huán)境的可能性，對三維世界的研究變得更加深入。于是時光開始倒轉(zhuǎn)，設(shè)計風(fēng)格在輪回之中尋找變化。

曾經(jīng)的蘋果iOS 7 系統(tǒng)

拋開批評不談，「新擬態(tài)」有一個不可否認(rèn)的特點，使其非常吸引人 ——看起來十分新穎。在過去的八年多的時間里，「扁平化」的設(shè)計風(fēng)格和技術(shù)實現(xiàn)方式，以及頁面和圖層的概念，已被人們所熟悉。

「新擬態(tài)」與用戶已經(jīng)習(xí)慣的「扁平化」風(fēng)格非常不一樣，它像是一種全新的視覺語言。這種差異化是有價值的，特別是對于像 Apple 這樣的公司而言，這是 19 年來首次嘗試將其操作系統(tǒng)升級到新的版本編號。

iPhone 于 2007 年發(fā)布，2013 年推出 iOS 7 的「扁平化」設(shè)計。這一基本外觀和感覺比最初的「擬物態(tài)」iPhone UI 保留了更長的時間，每次的優(yōu)化迭代的改動也很細(xì)微。

「新擬態(tài)」風(fēng)格提供了一種低成本的方法，在不對設(shè)計語言進行大規(guī)模修改的情況下，推進設(shè)計風(fēng)格的更新（實現(xiàn)「新擬態(tài)」風(fēng)格最基本的方法就是添加陰影、外發(fā)光和少量的 3D 元素，非常簡單）。

「新擬態(tài)」風(fēng)格真正變得有趣，是從系統(tǒng)迭代超越了簡單的視覺效果優(yōu)化開始，設(shè)計師們著手于探索如何利用光和物體去組成的數(shù)字空間，從而使用戶界面更易于理解、更平易近人和更美觀。

macOSBig Sur app icons，來自設(shè)計師 Max Rudber

五、慢慢地前進

為什么蘋果的新設(shè)計看起來有些糟糕呢？

正如之前提到的，「新擬態(tài)」的概念框架現(xiàn)在還相對較新，并且在設(shè)計行業(yè)中有許多抵制的聲音。長期以來，UI 設(shè)計行業(yè)一直被那些不考慮可用性或不滿足用戶需求的“創(chuàng)新設(shè)計師”所干擾，這引發(fā)了很多設(shè)計行業(yè)內(nèi)部的爭議。

一方認(rèn)為，概念設(shè)計的探索就是這樣不斷的嘗試；另一方認(rèn)為，UI / UX 設(shè)計對成功和失敗有非常具體的定義，沒有達(dá)到成功標(biāo)準(zhǔn)的作品就是失敗的（有些人認(rèn)為所有設(shè)計學(xué)科都需要嚴(yán)格的解釋，但這些人是書呆子、是錯誤的）。

新擬態(tài)風(fēng)格大熱，網(wǎng)絡(luò)上出現(xiàn)了許多將圖標(biāo)變成 Big Sur 風(fēng)格的教程，該教程圖片來自設(shè)計師 Oskar Groth。

設(shè)計師可以“探索”是否應(yīng)該將用戶需要點擊的按鈕設(shè)置為不可見的，但由于這樣會導(dǎo)致用戶無法繼續(xù)操作，這個設(shè)計會被認(rèn)為是失敗的。

在界面設(shè)計領(lǐng)域中，樣式創(chuàng)新和可用性很難平衡，但這并不意味著樣式創(chuàng)新應(yīng)該被完全拋棄。

硬核的 UI / UX 設(shè)計師貶低幾乎所有樣式上的探索實驗，認(rèn)為這是不必要的和不可靠的 —— 是在現(xiàn)實世界中不可能存在的東西（不具備商業(yè)價值和可用性，沒有存在的必要）。

一些排斥「新擬態(tài)」的原因來自于此，早期的深入研究集中于將「新擬態(tài)」風(fēng)格中最具辨識性的特點應(yīng)用到用戶界面中最明顯的地方，導(dǎo)致的結(jié)果是，一些應(yīng)用了「新擬態(tài)」風(fēng)格的地方破壞了用戶體驗設(shè)計的必要原則。

為了使「新擬態(tài)」發(fā)展到應(yīng)有的狀態(tài)，我們需要將它一點點拆分，獨立發(fā)展，逐步地實現(xiàn)。在某種程度上，蘋果為 macOS 11 設(shè)計的全新設(shè)計系統(tǒng)似乎是這種解耦實踐首次引起廣泛關(guān)注的實例。

蘋果的新設(shè)計采用了「新擬態(tài)」風(fēng)格的元素，尤其是這些圖標(biāo)中（所有的非 UI 元素）使用的光的復(fù)雜交互。

六、與以往一樣，第三方將比蘋果更大膽、更快速地推動這一風(fēng)格

在某些地方，「新擬態(tài)」風(fēng)格的實踐更加成功。

在二維圖標(biāo)創(chuàng)作中使用三維效果打造「新擬態(tài)」風(fēng)格，效果會更加突出，因此這些新圖標(biāo)也更加成功（參考上文中設(shè)計師Vikiiing 使用三維效果繪制的圖標(biāo)）。

以 Messages （信息應(yīng)用）的圖標(biāo)為例，語音氣泡的形象非常具象，深入人心，所以這個元素與光的交互方式是已知的。然而，將一些抽象的元素，進行三維化、物理化的轉(zhuǎn)換就不那么容易了。這就是「新擬態(tài)」風(fēng)格受限的地方。

照片應(yīng)用的圖標(biāo)就是一個很好的例子，為了保持它的辨識度，設(shè)計幾乎沒有改變，但為了使其與整體的「新擬態(tài)」風(fēng)格和諧，將一些陰影和外發(fā)光效果應(yīng)用到了底部矩形圖層樣式上。

這增加了圖標(biāo)的復(fù)雜性，卻沒有將該圖標(biāo)與整套圖標(biāo)成功融合。APP Store （蘋果應(yīng)用商店）的圖標(biāo)比照片應(yīng)用的圖標(biāo)稍微好一些，但原理是一樣的，即把一個二維線狀抽象圖形強硬的變成了三維樣式（直接增加光照和投影使其立體）。

如果想讓這樣的抽象圖形與整套圖標(biāo)更加統(tǒng)一，就需要進行更深刻的反思，思考如果更好的將抽象圖形轉(zhuǎn)化為「新擬態(tài)」風(fēng)格，消除用戶的困惑。

顯然，這些設(shè)計會隨著時間的推移被逐漸修改，直到它們開始形成一個更有凝聚力的整體。當(dāng)你回顧 ios7 最初的「扁平化」設(shè)計時，你會發(fā)現(xiàn)很多地方都是粗糙的。

新字體（The Helvetica Neue）顏色太淺，整體外觀過于鮮亮。慢慢的，ios 的「扁平化」風(fēng)格在不斷演進并且變得更加精致。

毫無疑問，蘋果進軍新市場嘗試「新擬態(tài)」風(fēng)格也將是如此。事實上，蘋果向「新擬態(tài)」這一設(shè)計流派的發(fā)展，為這個概念賦予了合理性，現(xiàn)在任何希望融入蘋果新理念的設(shè)計師，都會充分利用「新擬態(tài)」風(fēng)格進行創(chuàng)作。

現(xiàn)在，整個設(shè)計行業(yè)將認(rèn)真對待「新擬態(tài)」風(fēng)格，會獲得爆炸式的發(fā)展，在將其合理應(yīng)用于用戶界面設(shè)計和功能方面取得更多進展。

與以往一樣，第三方將比蘋果更大膽、更迅速地推動這一風(fēng)格 — 這也是我們將會真正開始釋放「新擬態(tài)」力量的時候。此外，蘋果可能會發(fā)布一個帶有更好圖標(biāo)的更新版本。

原文作者：Jack Koloskus（Input 和 The Outline 的首席設(shè)計師）

原文地址：https://www.inputmag.com/design/apple-macos-big-sur-the-rise-of-neumorphism

譯者：張聿彤 ；公眾號：三分設(shè)

本文由 @三分設(shè) 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Pexels，基于 CC0 協(xié)議