Mac 視覺(jué)史 vol.2.5：山中俊治的「手繪板」

2022 年夏天，很偶然地在視覺(jué)書(shū)店翻到日本工業(yè)設(shè)計(jì)師山中俊治《設(shè)計(jì)的風(fēng)骨》一書(shū)，在其中找到了一些關(guān)于 Macintosh 非常有趣的往事。在網(wǎng)絡(luò)的犄角旮旯里尋訪這些往事的過(guò)程中，倒是無(wú)意中補(bǔ)完了之前「Mac視覺(jué)史 vol.2」中缺失的一些細(xì)節(jié)。

這本冊(cè)子是山中俊治 10 年前網(wǎng)絡(luò)博客的內(nèi)容合集，其中 2009 年 6 月的一篇博文分享了這段過(guò)往。

山中俊治是日本著名工業(yè)設(shè)計(jì)師，東京大學(xué)教授，曾就職于日本汽車(chē)設(shè)計(jì)中心，后出走成為獨(dú)立設(shè)計(jì)師。

大約是 1994 年，彼時(shí)已經(jīng)成立個(gè)人工作室「Leading Edge Design」的山中俊治，聯(lián)合豬股裕一、戶田勉、宮崎光弘、須永剛司四人，一同組成一個(gè)提案小組，前往位于庫(kù)比蒂諾的蘋(píng)果總部，帶著一套名為「Drawingboard」的 Macintosh 次世代 GUI 設(shè)計(jì)方案：

一拍即合的構(gòu)想

初到庫(kù)比蒂諾，山中俊治等5人面向當(dāng)時(shí)的 Macintosh 團(tuán)隊(duì)，拿出了這套獨(dú)特的提案。彼時(shí)焦頭爛額的 Macintosh 團(tuán)隊(duì)正在推進(jìn)代號(hào)為 「Copland」的新版本操作系統(tǒng)，他們對(duì)于全新視覺(jué)風(fēng)格有著極為旺盛的需求，而山中俊治的提案，正是他們迫切想要的……某種可能性。

這是一套有著強(qiáng)烈美學(xué)特征的設(shè)計(jì)，「DrawingBoard」的主題風(fēng)格命名也昭示了它的靈感來(lái)源——手繪板繪圖。

工業(yè)設(shè)計(jì)出身的山中俊治，使用工業(yè)設(shè)計(jì)草圖風(fēng)格來(lái)呈現(xiàn) UI 細(xì)節(jié)，用不同類(lèi)型的陰影、傾斜45度角排線，硬朗的陰影色塊，形同出血線的邊角處理，增加幾何感的傾斜邊緣，共同塑造出一套完全不同早期 Macintosh 的視覺(jué)特征。

在提案的視覺(jué)設(shè)計(jì)上，山中俊治采用了極具手寫(xiě)質(zhì)感的襯線字體，來(lái)搭配整個(gè)界面。在文件夾圖標(biāo)的設(shè)計(jì)上，同樣沿用了這種出血線的勾邊處理技巧，而其他快捷方式和應(yīng)用程序的圖標(biāo)設(shè)計(jì)，則使用了內(nèi)置斜線陰影的正方形來(lái)作為外輪廓，來(lái)統(tǒng)一不同圖標(biāo)造型。甚至在背景上，直接使用工業(yè)設(shè)計(jì)的畫(huà)稿，提升視覺(jué)的形式感。

更有意思的地方在于，山中俊治的 GUI 設(shè)計(jì)方案當(dāng)中，明顯加入了一套底部工具欄來(lái)提高彼時(shí) Mac OS 8 在桌面環(huán)境下的直觀性，這似乎確實(shí)是優(yōu)化 MacOS 8 的一種有效手段。

從概念設(shè)計(jì)到落地呈現(xiàn)

「由于演示非常成功，設(shè)計(jì)方案直接進(jìn)入了研發(fā)階段。」山中俊治在他的博客當(dāng)中寫(xiě)到。

雖然提案階段，他們對(duì)于各個(gè) UI 元素如何呈現(xiàn)有清晰的構(gòu)想，但是在真實(shí)的應(yīng)用場(chǎng)景當(dāng)中要如何設(shè)計(jì)、怎樣應(yīng)對(duì)不同的場(chǎng)景，要處理的細(xì)節(jié)就太多了。所以山中俊治隨后作為項(xiàng)目總監(jiān)，在庫(kù)比蒂諾待了接近一年時(shí)間，和開(kāi)發(fā)團(tuán)隊(duì)共同完成這一主題的設(shè)計(jì)。

由于所有視覺(jué)元素幾乎都要手繪完成，隨后轉(zhuǎn)為對(duì)應(yīng)的數(shù)字版本，這種充滿藝術(shù)氣息的不規(guī)整視覺(jué)元素，在彼時(shí) Mac OS 8.5 的硬件上運(yùn)行時(shí)，需要面對(duì)一些獨(dú)屬于它的加載問(wèn)題，這也是導(dǎo)致這一主題的研發(fā)周期拉長(zhǎng)的原因所在。

在「DrawingBoard」主題之下，懸停選中的方式也非常具有「手繪感」，選用的是強(qiáng)調(diào)色下劃線來(lái)呈現(xiàn)，倒是優(yōu)雅了不少。

在具體的 UI 控件細(xì)節(jié)上，比如標(biāo)簽頁(yè)的設(shè)計(jì)上，設(shè)計(jì)稿和實(shí)際呈現(xiàn)上還是有不少差別，比如減少了出血線的使用來(lái)降低視覺(jué)信息量，在折角的位置增加加重強(qiáng)調(diào)的筆觸，來(lái)強(qiáng)化這一風(fēng)格的特征。

類(lèi)似這樣的「優(yōu)化」還體現(xiàn)在很多 UI 細(xì)節(jié)的處理上，比如傾斜排線陰影的處理，也調(diào)整得更淺，而更具「工匠感」的襯線字體，也被替換為襯線近乎不存在的 Geneva 和 Gadget 字體。

直到此時(shí)，山中俊治還不知道蘋(píng)果內(nèi)部對(duì)于視覺(jué)風(fēng)格探索，依然沒(méi)有找對(duì)的路子。他的「DrawingBoard」也僅僅只是諸多備胎當(dāng)中的一個(gè)，在關(guān)于信息當(dāng)中，他的名字赫然在列：

直到今天，這段往事除了山中俊治本人的博客，關(guān)于 「DrawingBoard」的信息并不多。不過(guò)當(dāng)年曾經(jīng)看到這一主題的果粉，倒是對(duì)于這些遺珠念念不忘。

消解怨念的方式

「1997 年 WWDC 會(huì)上，剛剛重返 CEO 職位的史蒂夫喬布斯站上臺(tái)公布了這一設(shè)計(jì)，并表示非常欣賞我們的方案……」山中俊治在他的博客中回憶道，「最終，方案沒(méi)有被正式采用」。

得不到的永遠(yuǎn)在騷動(dòng)。這大概也是為什么這套設(shè)計(jì)成了無(wú)數(shù)愛(ài)好者的心頭好和無(wú)法企及的夙愿。

有人選擇了親手重現(xiàn)。22年前，有 LiteStep （是一款 Windows 桌面環(huán)境的替代品）愛(ài)好者根據(jù)山中俊治的概念圖自制了主題，名為 Mo85：

并且根據(jù)網(wǎng)友的論壇留言，也有 KDE（Linux 和類(lèi)Unix 系統(tǒng)桌面環(huán)境之一）的愛(ài)好者制作了類(lèi)似的主題。而關(guān)于「DrawingBoard」的話題討論一直綿延到今天，還未停止。

「最終版我們無(wú)緣得見(jiàn)，但卻流傳到網(wǎng)絡(luò)上，短時(shí)間內(nèi)流傳廣泛，受到擁護(hù)，想想真是不可思議。」山中俊治至今都對(duì)此耿耿于懷。因?yàn)樗_實(shí)可以「被找到」。

前文中的「實(shí)物圖」就是這么來(lái)的。

這個(gè)可以在 MacOS 8.5 上運(yùn)行的主題，也是油管up主 Pierre Dandumont 所發(fā)現(xiàn)的，他在一個(gè)內(nèi)部代號(hào)為 Snowman，版本號(hào)為 8.2D8 的 Mac OS 8.5 beta 版光盤(pán)鏡像中找到。我不知道他為了找到這個(gè)主題，他到底翻看了多少系統(tǒng)安裝盤(pán)。

這一版本的系統(tǒng)中，還藏有系列第二篇中所提到的「……面向兒童的主題P，以及更加具有未來(lái)派風(fēng)格的主題Z」，它們分別是 Gizmo 的童趣風(fēng)主題：

以及科技風(fēng)主題 Hi-Tech：

跨越時(shí)代的一種嘗試

之所以拿「DrawingBoard」說(shuō)事兒，因?yàn)樗_實(shí)有點(diǎn)特殊。相比于同時(shí)代的其他嘗試，它在視覺(jué)追求和體驗(yàn)層面上，距離 MacOSX 更近。

「ID公社」中一篇名為《數(shù)字時(shí)代的內(nèi)外一致性》的文章中，提出了一個(gè)有意思的數(shù)字時(shí)代劃分方式：

第一個(gè)是 1980 年代 Macintosh 上的圖標(biāo)，由當(dāng)時(shí) Apple 的“Macintosh Artist” Susan Kare 設(shè)計(jì)，第二個(gè)為 iOS 6 及之前的“照片”圖標(biāo)，第三個(gè)為 iOS 7 之后的“照片”圖標(biāo)。

Susan Kare 時(shí)期的圖標(biāo)因?yàn)轱@示分辨率的限制，只能用如此底數(shù)據(jù)含量的象征圖形來(lái)指代某個(gè)東西，我們可以稱(chēng)它是完全數(shù)字化的……

隨著屏幕的分辨率增大，單位尺寸（比如每英寸）內(nèi)容納的信息含量越來(lái)越多，顯示更多像素和更多的色彩……設(shè)計(jì)師盡可能讓每一個(gè)像素都不浪費(fèi)，這是數(shù)字時(shí)代早期一個(gè)常見(jiàn)的現(xiàn)象，當(dāng)資源逐漸豐富起來(lái)時(shí)，就用它來(lái)模擬實(shí)體世界。

當(dāng)屏幕分辨率達(dá)到了視網(wǎng)膜屏級(jí)別……數(shù)字時(shí)代所具有的不連續(xù)已經(jīng)等同消失了，數(shù)字的擬真接近以假亂真，我們可以將這視作是數(shù)字時(shí)代對(duì)模擬時(shí)代的最后懷念。

「DrawingBoard」是山中俊治在當(dāng)時(shí)那個(gè)節(jié)點(diǎn)，試圖模擬實(shí)體世界的一種嘗試，充滿設(shè)計(jì)的情懷，也具備獨(dú)特的調(diào)性，唯一的問(wèn)題在于，它所選取的領(lǐng)域太窄，風(fēng)格化程度過(guò)高，它的豐富性不足以滿足所有人對(duì)于 GUI 的期待。而 Aqua 的設(shè)計(jì)語(yǔ)言具有更強(qiáng)普世性，Mac OS X 最終以這種形態(tài)出現(xiàn)，似乎具有某種必然性：

事物發(fā)展到臨界點(diǎn)總會(huì)不由自主的突破。Mac OS X 和擬物化設(shè)計(jì)是 20 多年前的瓜熟蒂落，Vision Pro 卡在 Mac 40 周年這個(gè)節(jié)點(diǎn)上線出貨，似乎也有點(diǎn)「獻(xiàn)禮」的意味。

1984 年 1 月 24 日，Macintosh 128k 作為麥金塔家族第一款產(chǎn)品，正式發(fā)售；2024 年 1 月 19 日 Vision Pro 正式發(fā)售。隔著整整 40 年的兩款產(chǎn)品，前者是消費(fèi)級(jí)個(gè)人電腦領(lǐng)域的開(kāi)啟者之一和里程碑，后者則以全新的規(guī)格和策略，進(jìn)入空間計(jì)算的時(shí)代，嘗試為數(shù)字世界有效地升維。

當(dāng)然，我并不認(rèn)為 Mac 的時(shí)代結(jié)束了，相反 Vision Pro 和 Mac 會(huì)成為更為復(fù)雜的數(shù)字生態(tài)中，各有偏重的產(chǎn)品形態(tài)，也許會(huì)在某個(gè)階段，碰撞出更有意思的可能性。

寫(xiě)在最后

一直沒(méi)想好用什么樣的姿勢(shì)開(kāi)始寫(xiě) Mac OS X ，不如回過(guò)頭梳理一下山中俊治和他的「DrawingBoard」，稍事休息。

Mac 視覺(jué)史 vol.4 咱們繼續(xù)。

引用來(lái)源：

https://lleedd.com/blog/2009/06/14/drawingboard/#more-1268
https://www.youtube.com/watch?v=KOEMz_saHCE
https://www.journaldulapin.com/2017/06/12/mac-os-8-5-theme/
https://forum.opendesktop.org/t/theme-based-on-mac-os-9-drawing-board/18773/4
https://www.pling.com/p/1219916