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

原文链接: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小编)

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/17961/

(0)
iouedioued
上一篇 2016-09-29 13:49
下一篇 2016-10-17

相关推荐

  • 交互设计中如何求最优解?来看这篇超全面的分析!

    hey熙:今天想探讨的主题有三个关键字:交互设计、最优解、理性。设计就是解决问题——原研哉《设计中的设计》

    2017-10-20
  • 跨终端体验设计,绕不开的用户槛儿

      随着平板电脑的普及,越来越多的手机端APP将自己的应用拓展到Pad端,来为用户提供更丰富的多终端体验。此前一些设计师从视觉设计的角度探讨了多终端产品的设计,作为一枚用研,除了视觉体验,我们会更多地去…

    2015-04-18
  • 别让这五种错误毁了你的交互设计

    交互设计从来不易。它需要对用户行为进行深入分析的同时,还要进行细致的计划。尽管新的交互设计不断出现,但并未使它变得更容易一些。如何才能创建令用户满意的使用体验?如果你对交互设计中常见的错误有所警惕的话,无疑就会尽量避开这些错误,从而实现更完善的UX体验。

    2017-06-02
  • [自译]Medium的Title,Subtitles&Headings的改进介绍

    我们的目标是创造一个能够提供最佳写作体验的空间,让故事的讲述者能够触及到他们的听众。现在,我们很高兴地展示我们在标题方面的提升,这个改变微小而又重要,我们认为你每次在发布文章后,都会会欣赏它。

    2016-08-10
  • 别再浪费时间了!如何从细节上真正节省用户的时间

    本文转自:优设网 原文翻译:阿布 我们的用户是很珍惜时间的,我们也不应该随意浪费。在每个项目中都问自己两个问题:“我们是在消耗用户的时间来节省自己的时间吗?”“在这里要如何节省用户的时间?”在西方社会中,…

    交互设计 2014-10-20
  • 真相:到底什么是交互设计

    数十万互联网从业者的共同关注!作者:Mr汤进,微信公共号ID:chuangshe_space作者原创并投稿早读课,转载请联系作者。一、前话5月1日在我和小伙伴们一起维护的原创微信公共号“创设空间”:chuangshe_space中向关注的…

    2017-08-02
  • 有奖励的互动提高用户参与性

    奖励点燃我们的动力。奖励让我们知道我们正在做正确的事情,并使我们继续探索学习新东西或者实现一个目标。 用户收到的一个不经意的变量奖励会更有效,因为人类渴望可预测性。 我们到处寻找规律,试图理解这个世界。 …

    2015-01-12
  • IxD案例作品分享:我来也”APP概念设计及动效设计

    本作品作者是来自站酷的设计师羊羊羊8571,本文经过作者本人许可。 转载请与作者联系!取得授权。 “我来也”是一款基于手机LBS属性的移动点名签到应用,利用手机应用解决了老师课堂点名,活动签到,会议签到!在工作…

    2015-07-29
  • 交互体验,是最好的科普教育——天宁小学参观丽水市科技馆活动随记

    点击上方“莲都区教育局”可以关注哦充分利用身边的公共科普资源,激发学生的科学探究兴趣,享受交互体验式的科普教育,增强学生的科技创新意识,这是我们安排学生走进科学馆进行参观体验的根本目的。这次天宁小学的孩子们真的是赚到了!面前的这个机器人可不简单,它的中文名叫阿尔法。2016年央视猴年春晚上,540台阿尔法机器人与歌手孙楠共同演绎歌曲《冲向巅峰》,那气场堪比国庆大阅兵。工作人员对阿尔法机器人作简要介绍:阿尔法是一款仿人型智能机器人,可直立...

    2018-01-30
  • 交互设计在商业中的价值

    转载自“创设空间”:chuangshe_space简书链接:http://www.jianshu.com/p/d0b5baa600d2作者:Mr汤进er一、前话问题:一句话概括你理解的交互设计是什么?部分回复摘录:@哎呀,我擦~:大概就是通过使用者的某些动作才能激发出的产品或包装的第二功能吧。@捉急的小慢~~O~~:界面设计,形式和功能相融而令人愉悦的互动。@lcy:信息的输入,输出的过程。从大家对于这个问题的回复,不难看出,不同人对于...

    2018-03-05