界面设计中的省略号的五种用法

原作者:John Saito  翻译者:Puddinnng

本教程为翻译教程,原文地址为:https://medium.com/@jsaito/the-mighty-ellipsis-6c2c00ddc864#.fmktmfw4r


当我说,「省略号是有史以来最神奇的标点。」朋友都把我当疯子。你也这样想吗?听我解释…

设计师用省略号向用户传达信息已经很久。你将看见,在极小的空间中这三个点能传达多少信息。

看完这篇文章后,你一定会对这小却重要的标点产生新看法。

1.省略号=「这儿还有后续操作」

Window 3.1中的省略号给了我最初的印象。那是我第一台电脑。一些按钮和菜单选项上出现的省略号,意味着点击按钮后,还要进行后续操作。

省略号在这很有用,它让我知道操作不会立马生效。当我改变主意时,可以随时取消操作。

Windows 和 MAC 上这个模式依然存在,但现在用得很少。

看看二十年间经历了什么:

Windows NT(1993):到处都是省略号!
Windows 8 (2013):省略号都去哪儿啦?

Google 的 Material Design 指南建议去掉省略号。大概因为,反正很多操作都需要后续操作,满屏省略号只让界面变凌乱。

这个模式虽已过时,却在这些年人们做决定时,仅仅使用三个点就发挥了巨大作用。

2.省略号=「在这输入」

近年,许多产品使用省略号指示文本框。这是股热潮。

不知这个趋势何时开始,但我能找到最早的例子,在2008年 Facebook 页面上。

为什么如此使用省略号?我猜测省略号在这发挥两种功能:

视觉功能:有时文本框很难发现。省略号让文本框更醒目,吸引你注意。

心理功能:一般来说,省略号代表了省略的文字——这里缺了些什么。如此说来,省略号在催促你用文本来完整这空白区域。

一些样式指南甚至建议,每个文本框都使用省略号。Salesforce Style Guide 就是个好例子。本人不喜欢这样使用省略号,但这种做法明显很火。

并不需要大肆宣传,省略号顺利地成为了「在此输入」的代号。

3.省略号=「更多操作」

越来越多的应用开始使用省略号来指示具有多个操作的菜单。它意味着,「嘿,点这里你还能做许多事噢~」

在 Android 应用中,你也能发现表达相同意义的垂直省略号。

这样做会将重要操作隐藏起来,所以有人不喜欢。无论你喜欢与否,不能否认这个图形早成为 UI 设计中一股浪潮——有些像之前流行的汉堡按钮

我打赌,以前没人会将省略号和“更多操作”联系起来。现在,省略号突然扛起来这一新的职责,并越走越远。

界面设计师大多力求简洁,所以省略号可能会越来越多见。

4.省略号=「等等噢」

省略号另一个常见用法是指示某个操作正在进行中。「加载中…」「连接中…」「上传中…」你可能已经见过上百次了。

想想如果没有省略号会发生什么吧。我们太习惯于看到省略号来代表进行中的进程了,看不到它,我们会觉得哪里出错了。

是不是有些别扭?至少我看来,省略号能让我确信某件事正在发生。缺少它会让我觉得有东西卡住了。

许多设计指南建议在用户需要等待的时候使用动画。但如果用户只需要等待几秒,我认为省略号可以被当成另一个有用的指示器,来表明系统正在做什么。

反正文字后的三个点,让我确信操作正在进行——即使它们只是三个点。这不是很神奇么?

5.省略号=「更多文字」

文本太长时,省略号也用来缩短文本。这用法叫做截断(Truncation)。当文档名字太长时同样会出现省略号。

早些年,长文件名在末端被截断。现在,许多 app 和操作系统在中间截断名字,便于你看到最后几个字母。这很巧妙,因为文件名中最后几个字母往往最重要。

如果我们不加截断,文本就会到处重叠。谢天谢地,省略号拯救了我们,让界面不至于一片混乱。

没有省略号的话我们的界面会是这样。多可怕啊~

小却重要

现在你知道了省略号在界面设计中不同的用法,你同意它是有史以来最神奇的标点了吗?谁能想到这小小的点能代表这么多意思?

我甚至都还没研究省略号在表格和对话文本中的用法呢,那又是个长长的故事了…

下次把省略号放进界面时,请带着我对他的爱意。他可能是最被低估的符号了~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,670评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,928评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,926评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,238评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,112评论 4 356
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,138评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,545评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,232评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,496评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,596评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,369评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,226评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,600评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,906评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,185评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,516评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,721评论 2 335

推荐阅读更多精彩内容