身為 Windows 使用者,這種安裝程式的方式真的很超現實
原文由 Marcin Wichary 于 發布,訂閱此部落格
Mac 的作業系統安裝 App 的方式有點奇特。App 通常會以副檔名為 .dmg 的檔案形式出現(全名是 “disk image” 磁碟映像檔,但我的大腦每次都會自動把它看成 “damage”),連點兩下後,它就會變成一顆虛擬磁碟。你點進去,就會看到 App 的圖示。
但旅程還沒結束。雖然你可以直接在這顆虛擬磁碟上執行 App,但重開機後——或是你把它退出後——這顆磁碟就會消失,所以對 App 來說,最好還是幫自己找個更長久的家。
許多 App 選擇的做法,是巧妙組合 Finder 提供的幾個選項。這些選項在任何資料夾裡都有、人人都能用,只是或許不太為人所知。第一步是把工具列、側邊欄和其他各種橫條全部藏起來。第二步是切換到圖示顯示方式,並選好適合的視窗大小。接下來需要的,是一個指向「應用程式」資料夾的捷徑。最後一樣素材呢?就是放在底層的自訂背景,它巧妙利用了所有圖示的大小與位置都是已知的這一點:
經過這樣一番改造,Finder 視窗看起來幾乎就像一個專屬的 App 視窗,而你可以運用這些技巧來……告訴使用者把 App 拖到永久的資料夾裡:

這個流程其實也有可取之處——把 App 圖示拖到「應用程式」資料夾的動作,和你在 Mac 上操作的其他手勢是一致的,也讓你學到 App 其實就只是一個檔案,你可以把它放在任何地方,不需要時就丟進垃圾桶。
不過整體來說,這還是讓人有點困惑,容易留下莫名殘留的虛擬磁碟,造成額外的混淆,並衍生出像這樣的問題:

但我今天不是要來重新爭辯這個流程本身的好壞,而是想來看看其中一些客製化的 Finder 視窗。它們在某種程度上,成了一個特別的設計遊樂場,限制剛剛好,多到足以讓它變得有趣:一個 App 圖示、一個「應用程式」資料夾的替身、兩者之間的箭頭、常見的固定大小,以及一張把一切串起來的點陣背景。
(歷史上其他讓許多設計師興奮的遊樂場還包括:計算機 App、天氣 App、Twitter 用戶端……而在像素之外,還有錶面或是一張椅子。)
接下來,我翻遍了許多視窗,挑出我認為做得最精緻或最有趣的「拖到應用程式」設計。
箭頭
最直觀、最好發揮的地方就是箭頭,它可以是任何形狀、任何顏色……甚至可能根本不像箭頭:











不尋常的方向
最後那個視窗說明了,雖然在西方文化中,時間與流程習慣由左向右呈現,但不代表我們不能選擇不同的軸向。這裡還有幾個例子:






更明確的指示
你可能也已經注意到,上面有些設計不滿足於只有箭頭,還會在視窗中加上更明確的文字指示。
這裡還有更多例子。這個加上了簡單的兩個步驟,但或許也開始讓人覺得有點「箭頭之城」的感覺:

這個則以不同的方式分配兩個步驟,還試著把後續的清理也一併交代清楚,讓你不會留下殘留的虛擬磁碟:

這個帶有一點「廉價感」,但我覺得它的極簡反而很討喜——「捷徑」上的箭頭幾乎就兼作了操作指示的箭頭,既然你可以重新命名這個捷徑本身,何不乾脆把它改成一組指示呢?

而這個則有點像填空遊戲。這樣把(被動的)指示文字和(主動的)物件交錯擺放,到底是有效還是更讓人困惑呢?我也不太確定。

帶入情境的圖示
我還注意到一個有趣的手法,有些設計利用了圖示本身的立體感,把它們放進「真實世界」裡。






完形上的問題
接下來這幾個感覺有些問題——特別是在完形(gestalt)上——我覺得拿來看看應該會有所啟發。
第一個有非常強烈的由左至右的方向性,我不禁想,會不會有人試著把左邊藍色的資料夾拖到右邊那個上面?

這個則是一個關於箭頭有多百變的有趣案例,但同時也說明了如果違背慣例,會變得多麼彆扭:

這個我已經看過好幾次了——儘管有箭頭,看起來還是像一個 2×2、每個都同等重要的格子,也可能會被誤解為「把兩個項目拖到另外兩個項目上」:

而這個則是更好地達成上面那個視窗想做卻搞砸了的事情的範例:

不同的操作方式
並非所有 App 都選擇用箭頭拖曳的機制,有些甚至不被允許這麼做。以下是我特別喜歡的其他處理方式:




有趣的視覺
有些 App 在視覺上著墨很深。這裡有幾個我很喜歡的:




一個叫做 Inkscape 的現代 App 做了件有趣的事:
[Finder 背景]是由我們的使用者在網站上的關於頁面內容中所設計的。每次重大版本發布時都會舉辦!
所以我下載了 Inkscape 的所有主要版本,來展示給你看:





如今
這樣就很自然地來到了今天。我覺得 Firefox 值得額外嘉許,這麼多年來始終把他們的 Finder 安裝視窗維持得既美觀又優雅:



最後,讓我們用幾個漂亮的現代範例來作結。現在許多 App 都來自 App Store,完全跳過了 Finder 的流程,但這裡還有幾個仍會請你拖曳的例子:




就是這樣了!但如果你還有其他例子,也歡迎傳給我!
感謝 Chris Messina 建立了 Disk Images 收藏,本篇文章大量參考了其中的內容。還要感謝 Jean-Michel Durand、Mindaugas Rudokas、Louie Mantia、Colin、mimi、Jeremy Visser、Luke Dorny、Oskars 和 Peter Tripp。標題來自我在社群貼文中請大家提供優良範例時,其中一則回應的感想。
隨機一篇部落格
留言
登入後參與討論