“As a Windows user, it’s a very surreal way to install a program.”

Marcin Wichary

作为 Windows 用户,这种安装程序的方式实在太超现实了

原文由 Marcin Wichary 发布,订阅该博客

Mac 的操作系统安装应用的方式有点特别。应用通常装在一个后缀为 .dmg 的文件里(全称是“disk image”,磁盘镜像;不过我的大脑总会把它看成“damage”),双击之后,它就会挂载成一个虚拟磁盘。点进去,就能看到应用图标。

但这还没完。虽然你可以直接在虚拟磁盘里运行应用,但重启之后——或者手动推出磁盘后——这个虚拟磁盘就会消失,所以应用最好还是为自己找一个更长久的安身之所。

许多应用的做法,是巧妙地组合 Finder 的几个选项。这些选项人人可用,在任何文件夹里都能设置,只是或许没那么为人所知。第一步是去掉工具栏、侧边栏以及其他各种边栏。第二步是切换到图标视图,并选好合适的窗口大小。接下来需要的是一个指向“应用程序”文件夹的替身。最后一样东西?一张自定义背景图,它铺在底层,并巧妙地利用了所有图标的大小和位置都已确定的事实:

经过这样一番改造,Finder 窗口几乎就像一个专门定制的安装窗口,而你大费周章做出的这些效果……只是为了告诉用户把应用拖到那个永久的文件夹里:

这个流程里倒也有可取之处——把应用图标拖到“应用程序”的操作,和你在 Mac 上其他导航手势是一致的,也能让你明白应用本质上就是一个文件,你可以把它放在任何地方,不用时也可以直接扔进废纸篓。

不过总体而言,这个流程还是相当容易让人困惑,会留下莫名其妙的悬空磁盘,带来额外的混乱,以及诸如此类的问题:

但我今天不是来重新争论这个流程本身的好坏,而是想来看看其中一些经过定制的 Finder 窗口。从某种意义上说,它们成了一个特别的设计游乐场,约束不多不少,刚刚好让事情变得有趣:一个应用图标、一个“应用程序”文件夹的化身、两者之间的一个箭头、一个常规的窗口尺寸,以及一张把这一切串起来的位图背景。

(历史上其他让众多设计师跃跃欲试的游乐场还有:计算器应用天气应用Twitter 客户端……而在像素之外,则有表盘或椅子。)

下面,我翻看了大量的窗口,挑出了我认为做得最精致或最有意思的那些“拖入‘应用程序’”设计。

箭头

最显而易见、可以拿来发挥的就是箭头,它可以是任何形状和颜色……甚至可能根本不像箭头:

不寻常的方向

最后一个窗口表明,尽管在西方文化中时间和流程习惯于从左向右展开,但这并不意味着我们不能选择别的方向。这里还有几个例子:

更具体的指示

你可能已经在上面注意到,有些设计并不满足于只用箭头,还会在窗口里加上更直白的文字说明。

下面是更多这样的例子。这个加了简单的两步说明,但或许也开始让人感觉像是“箭头之城”:

这个则以不同的方式分配了两步,还试图把清理工作也涵盖进去,免得你最后留下一个悬空的磁盘:

这个有种“廉价感”,但我却觉得它的极简很讨喜——“替身”本身自带的小箭头几乎就充当了操作箭头,既然替身本身可以重命名,何不直接把它重命名成一套操作说明呢?

而这个则像是填空游戏。这样做有效吗,还是把(被动的)说明文字和(可操作的)对象这样穿插在一起,反而更让人困惑?我也不太确定。

图标的场景化

我还注意到一种有趣的做法,有些设计利用了图标本身的立体感,把它们放进了“真实世界”里。

格式塔的问题

接下来这几个感觉有些问题——尤其是在格式塔方面——我觉得值得拿出来看看。

第一个有非常强烈的从左到右的方向感,我不禁会想,人们会不会试着把左边那个蓝色文件夹拖到右边的那个上?

这个则很好地说明了箭头可以有多灵活,但如果违背常规,又会变得多别扭:

这种我见过好几次——尽管有箭头,它看上去仍然像是一个由四个同等重要的元素组成的 2×2 网格,也很容易被误解为“把两个项目拖到另外两个上”:

而这个则是更好地完成了上面那个窗口没做好的事的例子:

不同的交互方式

并非所有应用都选择用箭头来引导拖拽,有些甚至不被允许这样做。下面是一些我特别喜欢的其他处理方式:

趣味视觉

有些应用在视觉上下了大功夫。这里有几个我喜欢的:

一个叫 Inkscape 的现代应用做了件有意思的事:

[这些 Finder 背景]是由我们的用户在网站上为关于界面内容设计的。每次重大版本发布时都会举办一次!

所以我下载了 Inkscape 的所有重大版本来展示给你看:

如今

这就很自然地来到了今天。我觉得 Firefox 值得额外加分,这么多年来一直把它们的 Finder 安装窗口保持得美观而优雅:

最后,让我们用几个漂亮的现代例子来收尾。如今许多应用都来自 App Store,完全跳过了 Finder 这一套流程,但仍有一些依然会让你拖拽:

就到这里!如果你还有更多例子,欢迎发给我!

感谢 Chris Messina 创建了 Disk Images 合集,本文大量素材都取自于此。还要感谢 Jean-Michel Durand、Mindaugas Rudokas、Louie Mantia、Colin、mimi、Jeremy Visser、Luke Dorny、Oskars 和 Peter Tripp。标题来自我某条征集优秀案例的社交媒体帖子下的一条回复,那条帖子中我请大家发来好的例子。

本文章由 muse-spark-1.2-contributor 进行翻译

评论