交互设计 用户体验设计

[自译]强大的省略号-为什么三个小点表达如此丰富

0
登录或者登记去做吧。

原文链接:The Mighty Ellipsis - How 3 little dots can say so much

原文作者:John Saito

1476692927-3656-658161-a61657264567ab5e

每当我告诉人们省略号(...)是最让人惊奇的字符时,大多数人都像看疯子一样看我。在你给我打上这个标签之前,让我试着给你们解释一下。

几十年来,界面设计师一直使用省略号来向用户传递各种各样的细节。正如你所见,这三个小点能在有限的空间里表达出很多的含义。

让我们一起来看看,省略号在过去几年的界面设计中的五种用法。到最后,你会对这个强大的字符有新的认识。

1.省略号=“这里有后续的操作”

我记得我第一次在界面中看到省略号是在Windows 3.1中。那是我的第一台电脑,界面中展现了一些按钮和菜单选项,这意味着在我点击它之后还有一些后续操作要做。

1476692926-7948-658161-ef5d5c14cc508c82

省略号在这里非常有帮助,因为它保障了我的操作不会立即造成影响,我可以开始行动,但是如果我改变了主意,也能够取消它。

这个省略号在今天的Windows和Mac下仍然存在,但是用的少了很多。

看看我们在20年里走了多远:

1476692928-2144-658161-753ea7f71d82786a

1993年的Windows NT,省略号无处不在

1476692927-3803-658161-84462881910b706d

2013年的Windows 8,省略号去哪了?

Google的Material Design 的设计指南建议从菜单项和按钮中移除省略号。这可能是因为大量的选项需要一个后续操作,使用省略号会让界面看起来繁杂。

这样的省略模式可能过时了,但是他在过去的那段时间里很好的帮助人们去作出决定-仅仅是使用了三个小点。

2.省略号=“在这里打字”

近年来,许多产品使用省略号来表示文本字段,现在它使用的十分流行。

1476692928-7813-658161-08d7fd5ddb8278e6

我不知道是谁引领了这种趋势,但是我能够找到的最早的例子是在2008年的Facebook:

1476692927-9182-658161-4628f6d47c6a84d8

为什么会有人这样使用省略号?按我的猜测是,这里的省略号有两个目的:

视觉效果:有时候很难在一个页面上去注意到一个文本字段,所以一个省略号的添加,能从视觉上凸显出来,吸引你的注意。

心理作用:传统的认知上,一个省略号表示词的省略。这意味着一些缺失,在某种程度上,省略能够促使你在空白区域填写内容,输入你的语言。

一些风格规范也会推荐在文本段落中使用省略号,Salesforce的风格指南就是一个例子。我个人不喜欢使用省略号,但是很显然它是一个设计的趋势。

悄悄地,省略号已经迅速的成为了“在这里打字”的象征。

3.省略号=“更多操作”

现在更多的应用使用加粗的省略号来表示一个菜单中有更多操作,这基本上意味着“嘿,这里有更多你能做的事情”。

1476692929-6923-658161-d3621e198ca5ab75

在很多的Android应用中,你能过看到竖着的省略号,表达相同的意思。

1476692929-4382-658161-7415212f8547d964

有些人不喜欢这个设计,因为他可能把重要的操作隐藏起来。但是你不能否认,它在UI设计中已成为一个热点趋势-就像几年前的汉堡按钮一样。

从前,我敢打赌没有人会想到一个省略号可能意味着“更多操作”,然而近几年来,省略号突然有了这样一个新的作用,现在已经成为了共识。

为了让界面看起来更多的简约,这些省略号可能会应用的更加广泛。

4.省略号=“等待几秒钟”

省略号的另一个常见用途就是显示一个动作正在进行中。“加载中…”、“连接中…”、“上传中…”你可能好几百次看过这些了。

1476692930-5396-658161-61401d556bcf1b1f

现在想象一下,如果我们不使用省略号会发生什么。因为我们习惯了看到省略号表示一个持续行动。当我们看不到省略号时,我们可能会认为是错误的。

1476692934-6913-658161-9217f8e0c98a5899

这些看起来不觉得有什么不对嘛?至少在我眼里,使用一个省略号能够让我放心,我知道后台正在运行,缺少一个省略号会让我感到困惑。

许多设计指南都会在用户需要等待的时候推荐使用动画,但用户只需要等待几秒钟的话,我认为一个省略号可以是一个有效的指标来暗示系统正在做的事情。

使用三个点跟随在一个单词后,可以暗示一个操作正在运行中-尽管它们只是三个静态的点,这简直太神奇了,不是吗?

5.省略号=“更多字符”

省略号也会在文本太长的时候用来缩短文本。这应该叫做截断,你会经常在处理长文件名中看到这个。

1476692934-6352-658161-3a5aed8879e7029e

早期的时候,长文件名通常都会在后面被截断。如今更多的应用程序和操作系统会在中间截断,这样你仍然能够看到最后几个字符,这是一个很聪明的做法,因为最后几个字符通常是一个文件名中比较重要的。

如果我们没有截断,我们到处都会是重叠的文本,值得庆幸的是,省略号帮助我们从混乱的界面中脱离了出来。

1476692935-1797-658161-a22161f14467ad92

如果没有省略号,我们看到的可能会是这样的,真糟糕

小而强大

现在你已经了解了许多省略号用于界面设计中的方法,你是否同意省略号是最让人惊奇的字符呢?我的意思是,谁知道几个小点可能意味着这么多?

我还没有引申那些省略号可以用于聊天和文本的对话当中,那都是一些后话了...

当你下次将一个省略号应用在你的界面中时,请好好待它,它可能是在你的故事中最被低估的字符了。

文/ShusQ(IAMUE小编)

创业还没听过在线Logo生成器? 那你就落伍了!
APP框架之提示框架