首页/风格学院/Wordle (2021)

什么是 Wordle (2021)?

Wordle (2021) 设计风格示例

Wordle证明了一整个游戏——乃至一整套视觉身份——可以完全活在一个5×6硬边方格的网格与三种反馈色之中。

Wordle (2021) 速览

Wordle的全部性格,压缩进一个单一网格里:五列、六行,硬边方格,不做任何圆角柔化。每一个视觉决定都服务于这个网格,而非装饰它。三种反馈色——字母正确且位置正确时的橄榄般柔和的绿色,字母正确但位置错误时的蒙尘金黄,以及字母完全不在答案中时那种扁平的中性灰——承载了这个游戏全部的情绪起伏。没有第四种颜色,状态之间也没有渐变,每种颜色的含义也从不含糊。

网格之下的底面是冷调的纯白色,方块之间的间隙宽阔而刻意——它被当作设计本身来处理,而不是内容周围剩下的空白。一个 QWERTY 键盘位于网格下方,随着猜测的累积逐渐改变颜色,于是这个界面成了一份可见的推理记录,而不是一个静态的输入工具。全程字体排印都很安静:报头用衬线粗体,其余一切用朴素的怪诞体,两者的选择都是为了可读性,而非个性。

一切都对齐在同一条纵轴上,没有任何元素与网格争夺注意力。这种克制正是全部要义所在——一个如此简单的游戏本可以轻易被过度装饰,而它拒绝在三种反馈色与网格本身之外添加任何东西,正是这份「每日仪式感」之所以让人感到平静、而非被游戏化操纵的原因。

Wordle (2021) 设计风格用在文章页上

Wordle (2021) 从何而来?

Wordle 由软件工程师乔希·沃德尔在2021年打造,最初只是一个私人项目,是他为一位喜欢猜谜游戏的伴侣做的一份小礼物——一款每日一题的小型文字游戏,随后先是在亲友之间传开,再经由口耳相传与社交分享,在短短几周内扩散至全球用户。帕拉克·沙阿深度参与了这款游戏的早期发展,而这种「礼物式」、低压力的项目出身,塑造出一种刻意避开任何激进用户粘性机制的设计哲学。

这款游戏的核心机制——每天一道题,所有人共享同一道题,无法跳过、也无法重玩错过的那一天——本身就是一个带来视觉后果的设计决定。正因为所有人在同一天玩着同一道题,一种使用彩色方块、却不透露实际字母答案的可分享结果网格,自然而然地成为玩家之间互相对照、却不剧透答案的方式,而这种由彩色方块拼成、近似表情符号的网格,也成了这款游戏最广为人知的视觉产物之一。

2022年末,《纽约时报》收购了 Wordle,并将其纳入自家的 Games 板块,与报纸的填字游戏及其他谜题产品并列。《纽约时报》并未大幅翻新界面,而是基本保留了既有的视觉语言——网格、三种反馈色、朴素的字体排印——并将其延展为一套一致的「NYT Games」品牌风格,如今已覆盖多款谜题游戏,把这种克制当作值得保护的品牌资产,而非需要替换的临时方案。

具体的字体选择——Wordle 报头使用的衬线粗体,以及用作辅助文本的 Libre Franklin——是在《纽约时报》时代确立的,选择它们是为了呈现一种平静、编辑式的调性,与该报更广泛的数字设计体系保持一致,而不是要做成一款典型的手机游戏样貌。这种向报纸设计感性靠拢、而非游戏应用惯例的取向,正是 Wordle 即便在经历一次重大商业收购之后,依然读起来低调而非浮夸的原因之一。

Wordle (2021) 的视觉特征是什么?

色彩

只存在三种反馈色,每种都有固定不变的含义:橄榄般柔和的绿色代表字母正确且位置正确,蒙尘金黄代表字母正确但位置错误,扁平的中性灰代表字母完全不在答案中。没有任何其他颜色与之争夺注意力,绿色与黄色那种略带去饱和感的柔和质感,让反馈显得平静,而非刺激警示。

字体排印

衬线粗体承载报头与标题,赋予品牌一种略带编辑感、印刷纸质的气质,而像 Libre Franklin 这样朴素的怪诞体则负责辅助文本与说明文字。两种字体都不刻意引人注目——两者的选择都是为了平静的可读性,而非个性或新奇感。

5×6网格

五列对应字母,六行对应猜测次数,每个方块都是硬边、不做圆角处理。这个网格不是游戏的容器——它就是游戏本身,整套视觉系统的存在,就是为了服务于它的可读性,而不是用无关的装饰把它包围起来。

慷慨的白色间隙

方块之间的间隙足够宽阔,以至于会被读作一种刻意的设计,而非无意中留下的间距。这片留白承载的视觉分量,不亚于彩色方块本身——如果去掉它或把它缩窄,整个网格会显得局促而焦虑,而非平静。

逐渐升温的键盘

网格下方的 QWERTY 键盘,会随着字母被尝试而逐渐填上与网格相同的三种反馈色,把键盘变成一份持续更新的推理记录,而非一个静态的输入设备。这是功能性的颜色编码,而非装饰——每一个上色的按键,都在回答一个关于「已经确认或排除了什么」的真实问题。

单轴居中

整个界面——报头、网格、键盘——都居中排列在同一条纵轴上,没有任何与之竞争的侧边内容或非对称布局。这种单栏聚焦,映照着游戏本身那种一心一意的设计:一道题,一个网格,一条通关路径。

零装饰盈余

没有渐变,没有阴影,除了一个简单的方块翻转动作与一段简短的获胜提示之外,没有任何庆祝式动画。这种设计的自信,来自于把极少的事情做到极致,而不是靠添加功能或花饰来维持吸引力。

Wordle (2021) 设计风格用在仪表盘上

谁塑造了 Wordle (2021)?

Josh Wardle

沃德尔是一名软件工程师,他在2021年打造了 Wordle,最初只是作为一份私人礼物,在没有任何商业压力去添加用户粘性功能的情况下,设计出了这款游戏及其克制的视觉风格。他坚持把每日一题的形式做得简单——一场游戏,一天一次,所有人共享——这与这款游戏后来以平静、不杂乱著称的外观密不可分。

Palak Shah

沙阿深度参与了这款游戏早期的开发与生活,也是这款游戏最初被创作出来所要送给的对象,她在这个项目起点上的存在,正是 Wordle 始终带着一种「礼物感」、而非从第一天起就以最大化参与度指标为目标打造出来的产品感的原因之一。

The New York Times Games team

《纽约时报》Games 团队在2022年收购 Wordle 之后,选择了延续而非重塑,保留了网格、三种反馈色与朴素的字体排印,同时把这款游戏纳入更广泛的「NYT Games」品牌风格之中。这种克制——抵住重新设计一款爆款产品的冲动——本身就是一个值得注意的设计决定。

今天怎么用 Wordle (2021)?

Wordle的美学是当代设计中可移植性最强的极简系统之一,因为它的克制是功能性的,而非仅仅为了风格——每一个选择的存在,都是为了让一次简单的每日仪式保持平静与清晰,而这种价值远远超出了文字游戏本身的范畴。

在演示文稿中,网格母题可以干净地转化为一张以一排硬边彩色方块为核心的封面,标题用安静的衬线粗体置于白底之上。内容页可以受益于单轴居中与元素之间慷慨的留白,把负空间当作构图的一部分,而非需要填满的空隙。数据页可以直接借用三色反馈逻辑——用绿、金、灰作为「好、部分达标、差」的简单状态系统,而非一套更繁复的色阶。

在网页界面中,这套风格适合任何围绕简短、聚焦的每日或可重复交互构建的产品:习惯追踪工具、简单的实用类工具,以及任何追求清晰而非密集信息量的仪表板。严格的网格、宽阔的间隙,以及最多三种状态色,就足以把这种平静、去游戏化的感觉,带入一个完全不相关的产品之中。

在编辑与营销内容中,这套风格支持一种自信、不杂乱的品牌声音:慷慨的留白、单一的居中栏目,以及克制的字体排印,而非层层叠加的视觉效果。一张营销页面可以借用「方块翻转」这一揭示式交互作为微妙的动效母题,而不必直接引用这款游戏本身。

最常见的错误,是为了「丰富」反馈系统而添加第四种颜色或装饰性渐变。这套色板的全部力量都来自它的限制——三种颜色,三种固定含义,毫无歧义。为了显得更绚丽而扩充色板,恰恰会瓦解让原始设计得以成立的那份清晰感。

Wordle (2021) 设计风格用在幻灯片 · 封面上

Wordle (2021) · 常见问题

Wordle的风格和泛泛的扁平化设计是一回事吗?

两者在表面特征上确实相似——没有渐变、没有阴影、纯色填充——但 Wordle 的风格比泛泛的扁平化设计更具体。它是围绕恰好三种含义固定的反馈色与一个硬边网格构建的,而不是像扁平化设计那样,对色彩与形状有更宽泛、更开放的用法。正是这种「三种颜色、含义固定」的限制,让它成为 Wordle,而不是一种泛泛的扁平化设计。

这套风格能用在深色背景上吗?

可以,而且比许多极简风格更容易做到,因为 Wordle 本身就提供官方深色模式,保留同样的三种反馈色,只是把白色底面换成近乎纯黑的底色。无论背景如何,核心约束都不变:三种反馈色必须保持含义固定,也不能被第四种强调色分走注意力。

为什么键盘会变色,而不是保持静态?

因为键盘不断变化的颜色起到了记忆辅助的作用,让玩家一眼就能看出哪些字母已经试过、每一次猜测又带来了什么信息。如果键盘保持静态,玩家就得回头翻看之前的猜测来重新拼凑这些信息,而这套颜色系统则让这些信息变得一目了然。

网格方块之间的间隙应该留多宽?

要宽到足以被读作构图中一处刻意的安排,而非默认间距——相对于方块本身的大小,间隙应当显得慷慨,让每个字母在视线移向下一个之前,都能有独立站立的空间。如果方块显得挤在一起,整个网格就会显得密集而焦虑,而非平静而经过深思熟虑。

这套风格适合节奏快、能量高的产品吗?

天然并不适合。它的全部价值,来自于传达平静、专注,以及「一天一次」的节奏感,而非紧迫感或兴奋感。它更适合习惯养成类工具、反思或参考类产品,以及任何从「不慌不忙」的感觉中受益的场景,而不太适合那些试图传达速度、能量或持续新鲜感的产品。

获取 Wordle (2021) 完整设计系统
© 2026 Curio