正确的提示信息

扫码打开虎嗅APP

从思考到创造
打开APP
搜索历史
删除
完成
全部删除
热搜词
2018-10-09 10:09

从设计的角度谈谈今年 iPhone 命名为什么用了 Small Caps

本文转自网站少数派,作者:MakicLin 。


九月份苹果一口气发布了三款 iPhone,分别是 iPhone XS,iPhone XS Max 和 iPhone XR。不仅机型多,取名逻辑也稍有变化,其 S 和 R 还首次使用了 Small Caps,可以说是最难写对的一次 iPhone 名字了。

2018 年三款新 iPhone 的写法


也就是说,iPhone X 后跟随的 S 与 R 字母虽然看上去是大写,但只有小写字母的大小。你可能有些迷惑,没关系,就连苹果也曾写错过:


苹果官网 iOS 12 页面修改前(左)后(右)对比


接下来,就让我们一起了解如何书写新款 iPhone 的名字,探讨苹果使用 Small Caps 背后的原因。


什么是 Small Caps?


说了这么多 Small Caps,是该好好介绍一下了。小型大写字母(英文 Small Capitals,简称 Small Caps)是西文字体设计中的一种字符形式。Small Caps 有着大写字母的形状,但一般情况下尺寸和小写字母一样,有些字体的 Small Caps 可能略高于 x 高度。你可以认为 Small Caps 是介于大写字母与小写字母之间的“第三者”。

几种字符形式的对比


许多美国杂志在使用首字母缩写时通常会使用 Small Caps,如“北约”可写作“NATO”。另外“公元”这样的年号,也常用 Small Caps 写作“BC”。


很显然,iPhone 的命名并不属于上述情况。毕竟排版是为了内容服务,看来要弄清 iPhone XR 使用 Small Caps 的原因,要先弄清 iPhone 命名的逻辑。


2018 年之前,iPhone 的名字都怎么写?

2007 年到 2017 年 iPhone 的命名


注:由于Plus与Max为单词,而且写法统一是首字母大写,所以这两个单词我们先抛开不谈,只观察数字和字母的命名逻辑。


从列表中我们可以看出,在新三款 iPhone 发布之前,历代 iPhone 名称中的字母,有两种写法:


  1. 大写:如 4S、3GS,SE

2.小写:如 5c、5s、6s


总结这三种写法,我们可以发现 iPhone 的命名规律:“数字+字母”的命名组合时,字母都使用小写。但这种规律不符合完全使用大写的 iPhone 3GS、iPhone 4S 以及 iPhone SE。


但考虑到名字背后的意义,字母大写就又说的通了。比如 SE 是可能是词组Special Edition的缩写;3GS 的 3G 指的是支持 3G 网络,只是恰巧含有 3 这个数字而已。所以 iPhone SE 和 iPhone 3GS 的大写也是有原因的。


唯一解释不通的是 iPhone 4S,这是唯一一个数字+字母且使用大写的命名。但有趣的是 iPhone 4S 之后再无大写字母,iPhone 4S 之前全部使用大写字母。虽然具体原因不得而知,但猜测很有可能是在 iPhone 4S 之后苹果才决定将 iPhone 名称中的字母改为小写。1 


从设计的角度讲,小写的 s 更适合 iPhone 的迭代策略(涨数字大更新,加 S 小更新)。因为大写的 S 和数字拥有同样的高度,数字和字母站在了同一层次上,加上数字和字母的距离要比数字和iPhone的距离更近,视觉逻辑会变成这是一台 4S 型号的 iPhone,而不是苹果想说的这是 iPhone 第四代的升级版。

iPhone 4s 与 iPhone 4S 的视觉层级与逻辑区别


话说回来,基于 iPhone 十年以来的命名习惯,大写的iPhone XS和iPhone XR或者小写的iPhone Xs和 iPhone Xr都行得通。但到底是什么让苹果不使用大写字母也不满足于小写字母,偏要选择 Small Caps 这样一个折中方案呢?


这代 iPhone 为什么使用 Small Caps?


涨了这么多知识,终于到了揭秘答案的时候,先要告诉你一个好坏消息和一个好消息。


坏消息是由于苹果没有解释为何使用 Small Caps,甚至没有解释 R 的意思是什么,所以我们并不能够得出唯一正确的答案,只能站在设计的角度上进行猜测与分析。好消息是,即使我们不能有唯一正确的答案,但正确答案一定就在其中。


为了强调 iPhone X


在发布会幻灯片以及官网上,S 一般是装在一个框框里的,每个 S 机型甚至 C 机型都是如此。这是为了在视觉上更好的区分正常机型和 S 机型。


框框让视觉层级更清晰


但框框并不是哪里都能用的,从前的苹果会在不能用框框的时候使用小写,效果是差不多的。但这次苹果严格了很多,不能加框框的地方也要倔强地用 Small Caps!


这意味着,苹果希望使用 Small Caps 起到和框框一样的效果:把视觉层级明显分开,强调 iPhone X,让大家认为这是iPhone X 的某某版本,而不是一个 XS 或 XR 型号的 iPhone。


框框,SmallCaps 与大写字母的效果


苹果如此澎湃地强调iPhone X很有可能因为去年的 iPhone X 颠覆了过去九年的数字命名,转而使用看上去是字母 X 但实际意思是 10 的命名方式。为了巩固消费者对于 iPhone X 这个新命名的记忆,才强调 iPhone X。


为了照顾全新的 R 产品线


消费者已经对 iPhone 的 S 系列非常熟悉,S 代表是一个全新 iPhone 之后的小更新版本,通常没有外观上的变化,主要是硬件上的提升。这种命名方式甚至对手机行业产生了影响,小米,OPPO 等厂商也会使用在原产品名上加 S 的方式命名新产品,已经成为了一种行业语言。


加 S 已经成为了行业语言


但 R 系列却是一个全新的产品系列,消费者对此完全没有概念。这个时候,大写字母 R 可是帮了大忙。由于视觉上 r 比 R 小了一圈,笔画也过于简单,和 X 这样有明确结构和面积的字母放在一起,会显得非常弱小,显不出 iPhone Xr 和 iPhone X 的区别。


小写的 r 在 X 后面显得很渺小


所以为了照顾这个全新的 R 系列,苹果使用了大写的 R,但由于之前我们已经发现iPhone XR不是一个好选择,故使用了 Small Caps 版本的 R,写作iPhone XR。iPhone XS 也就跟着统一成了iPhone XS,毕竟对于字母 S,小写和 Small Caps 是几乎没有区别的。


综上,便是我从设计的角度对“今年的 iPhone 为什么用了 Small Caps”的解答。在这样的情况下,使用 Small Caps 似乎是 iPhone 命名的不二之选。换句话说,如果这代 iPhone 叫iPhone 10s或者不存在 iPhone XR 这个新系列,很有可能 Small Caps 的方案就不会被使用了。


虽然我们是站在设计的角度,但我们可没少说关于 iPhone 产品策略相关的内容。这也正是排版是为内容服务的一种体现。在这个情境中,「内容」就是 iPhone 的产品策略,商业布局;而排版就是如何安排大小写的问题。


不过,如此巧妙的大小写安排,可苦了一些科技编辑,想正确打出新 iPhone 的名字可不容易。

注:少数派网站目前采用的是苹果在纯文本环境下的做法,也就是统一写成大写的 S 和 R。


如何打出 Small Caps


虽然我们的设备上都能正常显示 Small Caps 字母,但想打出来还是挺费劲的。由于 Small Caps 实在太少见,各种系统输入法都没有相关的功能,想要打出 Small Caps,你需要借助这些工具:


Word、PowerPoint 和 Pages


Microsoft Word


在 Microsoft Word 和 Microsoft PowerPoint 中,可以通过选中文字,再打开菜单栏中的“格式 - 字体窗口”中勾选Small Caps来转换为 Small Caps。在 Word 2016 for Mac 下可以使用 ⇧Shift-⌘Command-K 的按键组合将选中的文字转换为 Small Caps。


Pages


Pages 中也大同小异,选中需要转换的文字之后在选择菜单栏中的“格式 - 字体 - 大写”中选择“小型大写字母”即可。


对于 Pages 和 Word,能否成功使用 Small Caps 取决于你选取的字体是否兼容。我们在《比身边人多懂一点设计》的教程中介绍过字体、字型与字形的关系,如果你的字型文件中不包括 Small Caps 字形,Pages 和 Word 则会选择一个包含 Small Caps 字形的字体替代。


网页 CSS 样式


在前端开发领域,所有的内容和样式都是一行行的代码。于是在支持 HTML 编辑的网站后台的编辑器中,可以用 CSS 来实现 Small Caps。比如这样:


<p>iPhone X<span style="font-variant-caps: all-small-caps">S</span></p>


这段代码即是在一个段落中包含了一个正常书写的 iPhone X 和一个指定为 Small Caps 的 S。使用这种方法同样要保证你是用的字体兼容 Small Caps。


如果你将上面这些代码粘贴在微博,微信或者浏览器搜索框中都是没有用的。这种方法更针对于专业的内容发布者,我们平时很少能接触到支持 HTML 编辑的输入框。


Photoshop、InDesign 等设计软件


Photoshop


在 Photoshop 和 InDesign 等专业设计软件中,打出 Small Caps 并不是一件难事,在设置字体,字号和字重的地方就会有 Small Caps 的开关,点击即可。不过如此方便的设置也有一定的弊端,这些专业软件已经具备了模拟 Small Caps 的功能,如果该字体中不包含 Small Caps 的字形,就会通过将大写字母缩小的模拟方式得出,而这样模拟得出的 Small Caps 虽然看上去没有太大问题,但其实是假的 Small Caps。


真假 Small Caps


Small Caps 在字形文件(Font)中也是以字型(Glyph)的形式存在的,也就是说除了 26 个大写字母,26 个小写字母还应该有 26 个 Small Caps 字母。但由于 Small Caps 的特点是「大写字母的长相,小写字母的大小」,很容易通过将大写字母变小模拟而来。所以很多软件提供了模拟功能,比如 Photoshop 的 Small Caps 开关,如果该字体中不包含 Small Caps 的字型,就会通过软件模拟得出。


Helvetica Neue 字体的 Real Small Caps(蓝)和 Fake Small Caps(红色)


但真正的 Small Caps 并不是如此粗暴的得来,我们在设计教程中讲过字体的设计会被其功能、字重甚至字号影响,Small Caps 的字体设计也并非直接缩小这么简单,还有默认字距加宽,字体加粗等等手段,会比通过缩小大写字母模拟而来的 Small Caps 效果好一些(从上图的对比中可以看出,真 Small Caps 在 X 和 Y 的字母交界处做了明显的收紧)。于是就有了真假 Small Caps 的说法,将字体存在的 Small Caps 称为真 Small Caps,模拟而来的是假 Small Caps。


结语


为了写对 iPhone 的名字,可真是要费一番功夫。实际上,我们日常情况下见到 Small Caps 的机会并不多,书写 Small Caps 意义也不是很大,即使是苹果在纯文本的情况下,也会使用全大写的写法。这篇文章更多是让我们看出,如此小的设计细节,却暗藏很多玄机;简单的大小写设定,也可以造成语义和逻辑上的区别;素未谋面的 Small Caps 在设计的角度上也是有道理有逻辑的。


最后,Small Caps 只是众多排版知识中的冰山一角,如果你想了解更多的平面设计基础知识,可以订阅《比身边人多懂一点设计》教程,你将学到提高审美的技巧,以及掌握字体、配色、排版在实际应用时的知识,看懂更多设计背后的原理。


本文转自网站少数派,作者:MakicLin 。

本内容为作者独立观点,不代表虎嗅立场。未经允许不得转载,授权事宜请联系 hezuo@huxiu.com
如对本稿件有异议或投诉,请联系tougao@huxiu.com
打开虎嗅APP,查看全文
频道:

别打CALL,打钱

赞赏

1人已赞赏

大 家 都 在 看

大 家 都 在 搜

好的内容,值得赞赏

您的赞赏金额会直接进入作者的虎嗅账号

    自定义
    支付: