付费栏目文章试读

「100小时后请叫我设计师」希望不仅让你多懂一点设计，更要全方位提升你的设计水平，让你可以像设计师一样运用设计的力量。「持续更新」中的文章将带你时刻了解最新的设计动向，轻松获得前沿设计工具与资源。

📮 前往了解

💬 评论

馄饨皮、饺子皮、小精灵…… 这至少是中文互联网对于 2022 卡塔尔世界杯吉祥物印象。虽然这样说有些戏谑，但至少说明这个吉祥物给大家留下了非常深刻印象。不过只从吉祥物身上看 2022 届卡塔尔世界杯的视觉形象设计或许有些以偏概全了，毕竟除了吉祥物之外，还有 Logo、门票、字体、配色、电视中的视觉组成一个完整的视觉形象。那么本期的持续更新，和大家分享一下 2022 卡塔尔世界杯在吉祥物、字体和 Logo 设计上的巧思和批判。对了，在阅读之前推荐大家去世界杯官网上看一下吉祥物和 Logo 的设计。

馄饨皮：世界杯吉祥物中的少数派，手法独到且有差异性

在微博上看到大家叫它「馄饨皮」之前我并没有真正观察过卡塔尔世界杯的任何设计。实际上，我第一次看到 La'eeb 的时候并不觉得他像馄饨皮，而是更像可爱的幽灵，因为无论是 Emoji、任天堂、万圣节等等活动中，大家都会把白色、无腿、大眼睛这些元素用在幽灵身上。这让我想到，大家认为 La'eeb 像馄饨皮的原因其实是文化差异：我们的生活环境中很少有人带这样的头饰，更没有见过未佩戴在头上的样子，比如我就以为这块布并不是正方形的，而开幕式上 La'eeb 出场的样子是白白净净方方正正，生活中拥有这样特征的就是馄饨皮和饺子皮了。

让我们摆正姿态再认识一下它：La'eeb，拉伊卜，样貌极具辨识度和话题性。它不仅是一个很可爱且吸睛的吉祥物，也是在世界杯中差异性做的最好的吉祥物之一，并且它是组成本次世界杯视觉设计「民族性」的重要一环。让我们先看看他的由来。

La'eeb，是阿拉伯语中「技术精湛的球员（super-skilled player）」的意思，而他的形象字是哪一只阿拉伯传统男性头饰 Keffiyeh 或 Grutrah。在佩戴 Keffiyeh 的时，通常需要一根黑绳来固定以免被风吹走，这根绳子叫做 Agal。你可能看过红白格子的 Keffiyeh，那其实是来自伦敦的舶来品，最传统的 Keffiyeh 是纯白色的（也就是 La'eeb 的样子），因为它的一大作用是在阿拉伯地区高温干旱的环境下抵挡阳光照射。

将民族头饰作为吉祥物，让 La'eeb 成为了历届世界杯吉祥物中非常特别的一个。回看从 1966 年英格兰到 2018 年俄罗斯的 14 届世界杯，其中动物吉祥物出现过 6 次；小男孩出现过 3 次；水果蔬菜出现过 2 次；蔬菜水果出现过 2 次；虚拟形象（2022 日韩的太空精灵和 1990 意大利的火柴人）出现过 2 次。

不夸张地说，在 La'eeb 出现之前，世界杯吉祥物的设计手法都是创造一个全新的角色或人物，再将与举办国文化相关的故事和视觉特点增加在角色身上。这种手法并没有错误，但久而久之，创造出来的角色似乎只是乘载文化与故事的容器，角色与文化的关系没有达到一一对应不可替代的程度，两次出现的狮子和三次出现的小男孩可以佐证这个批判。

而 La'eeb 的设计手法和上述吉祥物有所不同，或者说产生了进化：虽然也创造了一个角色或人物，但其形象是直接来自于民族头饰的，相比起「创造全新的角色或人物」，La'eeb 这个角色是将已存在且有唯一性（仅在阿拉伯文化中存在）的文化符号拟人化，让角色与文化的关系特别紧密，不可替代。

当然，站在局外人（相对于吉祥物的设计者）的角度来看，或许也是卡塔尔世界杯更加在意「民族特色」的展现，才会采用这样的手法，才会设计出 La'eeb。因为 La'eeb 只是卡塔尔世界杯诸多「民族特色」之中的一环，下面我们来看看字体的设计：

字体：将阿拉伯文元素融合在英文字母之中

本届世界杯的字体设计和 2018 年俄罗斯世界杯字体一样出自葡萄牙设计工作室 Adotbelow（其母公司 DSType Foundry 上内容会更多一些），他们也为 FIFA 官方和 2020 迪拜世博设计过字体。本届世界杯的字体，我主要是从官网和电视转播中的赛前信息与计分板上看到的。

要说他有什么特点，请看 Logo 上这个长长的「t」：

这个长长的「t」字，本是第二行文字 Qatar 2022 中的字母，这要是放在常规的字体排印场景中可是出了大问题，这长长的拖尾硬是把前面的「qat」和后面的「ar」分开来，整体阅读上变成了「Qat_ar2022」。

严谨地讲，「Qat_ar2022」确实有碍功能性，我第一次看的时候还以为是阿拉伯文字。但与此同时这种大胆的设计也达成了一个重要目的——展现民族性，英文也充满阿拉伯特色，甚至让我以为这是阿拉伯文字。😂是的，「误读」是一把双刃剑。还记得我们曾经介绍过的 Instagram Sans，它的设计是从经典的 Instagram 连字 Logo 中提取特点并继承到 Instagram Sans 字体中。

卡塔尔世界杯这套字体也是用了类似的手法：把阿拉伯文字的书写的特点继承给英文，「t」字的长拖尾就是阿拉伯文字中有很多平行笔划的特点。字母「Q」延长出来的部分和数字「0」之中作为装饰元素的菱形也是来自阿拉伯文中位于文字上下的变音符号。

据 DSType Foundry网站上所说，这套字体是英文和阿拉伯语同时开发的，为了保证两种文字的和谐。

我个人是非常认同这种设计，尽管有碍阅读，但此时凸显风格和风格背后的文化含义或许比阅读更加重要，况且就算是读不懂也不会影响什么，它总是和「FIFA WORLD CUP」共同出现。恰好 DSType Foundry 在 Twitter 上分享了初稿，没有长长的拖尾确实差点意思。这也是这个字体在用在正文时并没有保留拖尾的原因，那个场景下阅读明确要比风格化更重要。

这套字体的设计比较得体，功能性没有问题，细节上的处理都可以在阿拉伯文字中寻到根。我们在这套字体设计中又看到了和 La'eeb 一样的目的和手法：展现民族特色。字体的设计再次印证了这一品牌形象策略，下面让我们看看 Logo 是如何继续强化民族特色的。

Logo：陈词滥调的无限符号，其中也有可取之处

诶？怎么看上去有点熟悉啊。

原来，它是在经典的世界杯大力神杯轮廓中（前两届也是），融入了老朋友无限符号，简直是熟中熟。

让我们先听听 Logo 的设计者 Unlock 怎么说：

一个为了成为真实物体创造的符号。

FIFA 世界杯的第一个全 3D 徽标。一个文化和足球的无限循环，灵感来自阿拉伯服装、沙漠沙丘的起伏和官方奖杯的形状。

当它旋转时，人们可以看到一个完美的圆，提醒人们注意足球的形状和其影响的地球规模。

它还反映了将在2022年迎接世界的体育场馆的数量（8）和无限的符号，因为人与人之间的联系将在赛事结束后长期持续下去。

原文：

A symbol developed to be a real object

The first full 3D emblem of a FIFA World Cup. An infinite loop of culture and football, inspired by Arab garments, the undulations of desert dunes, and the shape of the Official Trophy.

As it revolves, one can see a perfect circle, reminding the shape of both the football and the planetary scale of its impact.

It also reflects the number (8) of the stadia that will welcome the world in 2022 and the infinity symbol, given the human connections that will endure long past the event.

在持续更新刚开始的前几期中我曾经分享过一些关于 Meta 和 视频号 所使用的无限符号作为主体的 Logo。不出意料，在简短的三段文字中我们便看到了循环、无限、8 等关键词。并且。和 Meta 与视频号一样，动态 Logo 都被演绎为了一种非平面的连续圆环。

Logo 的寓意其实非常美好，但观众或许已经对类似的寓意司空见惯，少了些新意。Logo 上还增加了一些与文化相关的细节，比如颜色来自于卡塔尔 🇶🇦 国旗，又比如左上角的足球与菱形符号和右下角的纹样，再比如整体材质和质感源自于阿拉伯的布料……

以上这些都是让俗套的无限符号更唯一、独特、有民族性的尝试。用力很猛但略显生硬和细碎，在平面图形和小尺寸下展示空间很小。

不过无聊的无限符号中也有非常可取之处——它融合了大力神杯的外轮廓。把无限符号融合在轮廓之中，就形成了一个纵向的无限符号，而且是非对称的无限符号，削弱了无限符号可读性。得益于此，观者阅读这个 Logo 时脑中的辨识顺序就变成了「先看到了世界杯轮廓，再可能看到无限符号」，所以它并没有直接地落入无限符号的俗套，甚至在一众世界杯 Logo 中显得十分优雅，或者说富贵……但这或许是要感谢前两届世界杯或者 FIFA 对于 Logo 的要求。根据观察，自从 2014 年的巴西世界杯，Logo 都统一为了大力神杯轮廓的样子，折限制了自由发挥的空间，让这三届的 Logo 成为了某种遍体和演绎，世界杯的形象被统一在了稳定的轮廓中。

虽然真实原因无从知晓（欢迎知道缘由的读者们留言），但 FIFA 明显不是第一次做这样的事情，比如 2002、2006、2010 三届中出现过一模一样的图形，而且仔细看也是对于大力神杯的一种图形化演绎，1978、1982、1986 这三届中主体的足球图形也完全是一个模子里出来的。

我猜测 FIFA 是有意寻找一个有自由空间且保持系统性的方法，于是有了 1978-1986 的「足球为主体」，到 2002-2010 的「画面中必须包含这个 Logo」，再到 2014-2022 的奖杯轮廓。是的，这就是 持续更新 09：从抖音集团的新 Logo、图标设计师、蓝果丽 中提到的「系列 Logo」。

我认为目前奖杯轮廓的方式比前两种方式都更加平衡，一是因为奖杯轮廓是一个脱离了具象图形的无形的画框，有足够的自由；二是因为相对于具象图形来说，轮廓是图形构成中更加底层的手法，尽管每届 Logo 的色彩和质感甚至透视关系都不一样，也可以有不错的一致性。

看过了吉祥物、字体、Logo 的设计，我们可以肯定本次卡塔尔世界杯的视觉形象策略是围绕「民族特色」进行的，尤其是 La'eeb 的设计很好地完成了这个任务。其实，在之前数届的世界杯中都有融入民族特色（至少是国家特色），毕竟无论是世界杯的赛制还是举办都是以国家（也有合办的情况）为单位，民族与国家特色是公认可行的形象策略，奥运会也是一样。

值得注意的是，本届世界杯是第一次在中东地区举办，卡塔尔世界杯率先占用了许多标志性的阿拉伯文化符号，成功的同时也给未来举办世界杯的阿拉伯文化地区的视觉形象增添了些许难度。最后…阿根廷不敌沙特，德国被日本翻盘、加纳葡萄牙 3:2 最后一分钟还演了个偷家戏…… 本届世界杯还挺有看头的😄。

👀 值得关注

【文章】html to design

https://www.figma.com/community/plugin/1159123024924461424/html.to.design

上一篇持续更新中，我们讲到了「转录」，还说道设计是一种转录行为。这就发现了一个「反向转录」的工具：html to design，这款工具可以将 html 页面转换为 figma。这个反向转录的概念非常酷，就好像把电影瞬间转换成了剧本一样，但的具体使用场景好像不是很大。我能想到的是：找回一些找不到设计稿的网页、把其他网页设计趴下来学习一下。实际试用了一下，效果已经非常不错，除了某些前端技术（比如少数派网页端用的 iconfont）还搞不定。

【工具】montaigne

https://montaigne.io/

Montaigne 本质上是一个博客前端工具，和许多将 Notion 作为后端的博客工具（比如 Super）类似，Montaigne 可以将 Apple Notes 作为网站的后端。分享这个和设计不太相关的工具主要是因为它有和「转录」相关，此时内容是我们所写下的文字，它的储存地点（Apple Notes 还是 Notion），用了怎样的前端（Montaigne 还是 Super）都是自由转换的。

【前瞻】Uber 出品的神插件：base

https://twitter.com/avstorm/status/1592938540114976768

这是 Uber 设计团队在 Schema 上做的演示视频，展示的是一个叫做 base 的 Figma 插件，目前还得用所以只能算是前瞻。它可以做到以截图搜索设计稿、用自然语言生成设计（类似功能还有 Magician 插件）、即时生成可用的 App（看这意思不是原形，而是真 App）。base 的演示把设计中技术的重要性体现地淋漓尽致，仔细想想这些功能并不是想不到，而是技术做不到。

【文章】浅谈赛博朋克视觉风格的演变

https://mp.weixin.qq.com/s/g0CacZyZIenrk1wRd5rRkA

这篇文章讲述了赛博朋克视觉风格演变的历史，看完之后两个感悟：一是，怪不得会有不同派别的赛博朋克粉（比如认为《赛博朋克：边缘行者》的画风和设定不够正统的一派），因为变化确实大。二是，赛博朋克视觉风格之所以变化，或许是因为社会在变，新的赛博朋克作品需要寻找更加符合当下的视觉参考作为支点，侧面说明我们的生活越来越赛博了。

【作品】2022 Brand New Conference 品牌形象

https://underconsideration.com/brandnewconference/about_the_identity.php

曾经推荐给大家的 BrandNew 网站前段时间举办了今年的 BrandNew Conference。其视觉形象由 BrandNew 背后的 UnderConsideration 自己设计。这套品牌围绕着「拉伸（Stretch）」展开，不仅字体和动效很有弹弹的感觉，实体产品上也有所延伸，比如手提袋上就用了弹弹的提手，太喜欢了。

🌍漫游探索

本期的探索，和大家分享一个属于界面设计师的潜规则：偶数。

如果你了解 / 研究过一些界面设计规范，可能会发现其中涉及具体数值的约束（比如元素的长宽尺寸、元素之间的间距、网格系统）基本不会出现偶数。这似乎是一种界面设计领域人人知晓并遵从的传统习俗，却鲜有人来讲讲其中的原因。以下是我的发现：

我当即想到了字号，因为在诸多设计规范中，唯独「字号」非偶数不可。比如 Apple 的 Human Interface Guideline 中正文字体 是 17 pt，此外还有 12pt、13pt、15pt、22pt 等字号均在规范之中出现，可以说是没有正如前几天在即刻上看到 junyu 关于字号的解释。简而言之，字体是偶数确实是神秘的传统技巧，原因是显示技术限制和用户习惯。比如屏幕分辨率低、没有次像素渲染支持、技术发展后用户不习惯看次像素渲染的文字。这种技巧放在今天已经不再必要，甚至会有些阻碍排版设计。

那么按照这个结论，界面设计中是否也可以不局限于偶数呢？况且许多型号 iPhone 的逻辑尺寸（基本上从 iPhone 6 到 iPhone 11 的所有非 Plus&Max 机型）都是 375，一个奇数，意味着界面中如果涉及到平均双列的排布（比如双列瀑布流和并排双按钮），就必然需要用到小数点或接受不完美。

虽然我们知道他们使用偶数的原因往往是底层的「4px grid」，但为什么大家都选择了偶数的 4px，而不是 3px 或者 5px 呢？我在 4-Point Grid System for more consistent interface design 和 Spacing guide for designers 这两篇文章中找到了答案，其主要原因指向了屏幕缩放的工作原理：

• 逻辑分辨率缩放为实际分辨率时更加可用，比如逻辑像素 5px * 1.5 倍缩放 = 物理分辨率 7.5 px。
• 大多数显示器的分辨率是偶数的。

也就是说尽管逻辑尺寸是奇数的 375 宽度屏幕，实际显示尺寸其实是偶数。以 iOS 设备为例（可参考这个表格中的 Scale Factor），逻辑分辨率需要放大 2 或 3 倍成为物理分辨率，偶数的 2 或 3 倍仍然为偶数，但奇数的 2 倍是偶数，但 3 倍却是奇数。而使用 4px 而不是 2px 或 8px 的原因则相对简单：8px 过于粗放，自由度不够；2px 过于细致，不够统一。不过此间还有一个发现，从 iPhone 12 开始，除 mini 机型之外的屏幕逻辑分辨率也都变为了偶数。

不过话说回来，就像字号的奇偶已经不再被技术所困，我们对字号的决策就应该从技术转移到真实的设计需要上。那么按照当下设备的显示效果，如果真的有元素的尺寸和间距是奇数，也无可厚非。再进一步，如果界面中真的出现了奇数，只要 +1 便可以成为偶数，这 1px 在高分辨率普及的当下完全可以忽略不计。

尽管如此，界面设计中的「偶数潜规则」并没有像字号那样消失，而是在当下的作用发生了变化：我们可以理解为它始于技术限制（为了缩放不得不用偶数），如今变为了提高效率的共识（既然奇偶不影响效果，那么就把奇数屏蔽掉，以 2px 为最小调整单位，效率更高）。

以上就是本期持续更新的全部内容，感谢你的阅读。

© 本文著作权归作者所有，并授权少数派独家使用，未经少数派许可，不得转载使用。