品牌设计实战！ AI 产品 Perplexity 是如何重塑品牌的？

编者按：一个 AI 的品牌要如何进行视觉和体验设计？知名设计机构 Smith & Diction 接到来自新锐 AI 平台 Perplexity 的品牌设计订单，看看他们是怎么落地设计的。

当来自 Perplexity 的 Henry 和 Phi 找上我们的时候，直言「我们希望让我们的品牌感觉上，像斯堪的纳维亚的地铁系统一样，干净清爽，周密成熟，但是以一种润物细无声的方式来呈现」。他们不想给人太过浮华、现代或年轻化的印象。结合产品的功能气质，他们希望产品看起来像承载事实的容器。

通常，这样的风格不是我们 S&D 的专长。我们经常会用奇怪的吉祥物之类的元素来做 LOGO。但说实话，我非常愿意接 Henry 和 Phi 这单。接通电话的时候，我们很快感觉相识恨晚，随后又在称兄道弟的问候中结束通话。事后回忆一下这番通话，感觉笃定。

「刚才我们已然是知己了吧？肯定是。」

自此，我们开始尽力为他们打造这个「隐形」的 AI 品牌。

前后对比

符号

和我们做的 Exposure 那个项目类似，我们的工作是完全重塑，同时又让它看起来不具备侵略性，似乎什么都没有改变。

我们从符号开始。我们想要创建与之前的 LOGO 类似，具有相同简约性的元素，但只是为其多添加几层纵深。 Perplexity 的本质是一个搜索引擎。它以令人难以置信的速度在互联网上传播，并用简洁易懂的语言，总结了搜索的结果。在获取有效信息之前，不会像 Google 一样在搜索页给你塞 300个「广告」。 Perplexity 与其他网站的不同之处在于，他们引用了所有来源，因此你可以单击链接，找到信息的来源页面，看看事实是否真实可靠。

我们真正感兴趣的是，怎么做一个可以以某种方式直接融入到搜索过程中的 LOGO。这是崇高的梦想，伟大的设计，我知道。因此，我们从星号「*」开始发想——表明引用来源是一种独特的品质，那么为什么不将这一特质其融入到 LOGO 中呢？然后我们在这个概念上，增加了一些纵深，增加了类似旋转门和名片盒一样的视觉特征。脑补了一下 LOGO 在脑海中旋转效果，感觉很棒，我们随后就联系了设计师贾斯汀·劳斯(Justin Lawes)，快速设计了动态视觉稿，呈现它在搜索栏中的样子。当我们第一次看到这动画效果时，脑子里面回响着声音「就是它了」。

你会注意到，光标也发挥了作用，它成为了动画加载的起点，当你完成输入之后，光标会变成动态的 LOGO。

光标加载动画

在打造品牌的过程中，我们拓展出越来越多的概念。它的概念就像一本打开的书。而书籍……你知道的，在互联网出现之前，我们就是用书籍来获取信息，尽管现在我们现在更青睐互联网而非图书，因为普罗大众畏惧巨量的信息。不管怎样，我们还是喜欢 Perplexity 所呈现的相交式窗口，这在某种程度上富有隐喻，就像将困惑的你透过窗户带到网上一样。成千上万的网页当中蕴藏着你想要的答案，但你可以相信 Perplexity，它过滤无效内容，保留你需要的信息，答疑解惑。

文字 LOGO

紧接着我们开始研究文字 LOGO。毕竟我们是 Smith & Diction，是一群喜欢有点个性的怪人，所以我们必须让这个 LOGO 变得有点奇怪。我们选择了FK Display，它具有绝对完美的个性。 「X」边缘的小切口与符号里的点相匹配。但在 p、t 和 y 的转折点上也有一些非常微小的调整，它们就像手写笔触墨水收缩细节，向过去的印刷电话簿和百科全书时代致敬。有人会注意到这些细节吗？可能不会。但整体感觉也很好，希望人们会注意到它们。

LOGO 尺寸建议

我们还选择了小写「p」，我们对此讨论的时间比我想要的要长——但是当用户在搜索栏中输入时，他们通常根本不使用大写字符，甚至不会按照语法输入。所以我们想在这种细节身份上对此贴合和认可。另外，大写的「P」对于字偶距的调整来说，是个麻烦事，总是会在下面留下可怕的间隙，从而破坏了一切的平衡。

字体版面

字体和版面设计是一件大事，因为这个产品 99% 都是文字排版。毕竟它是一个搜索类的产品。我们需要找到一种不仅易于阅读，而且可以在全球范围内使用的字体。 Perplexity 具有巨大的国际影响力的，因此我们需要确保它能够支持尽可能多的语言。我们使用 FK Grotesk 作为品牌字体，因为它非常适合品牌想要的斯堪的纳维亚地铁风的氛围。这是一个很大的字体家族，有一些非常漂亮的可选字体，最重要的是它可以应对大量不同的语言。它还可以采用 FK Grotesk Neue 格式，这对正文的易读性提升有奇效 - 它少了一些装饰，但当您阅读大量文本时，过多的装饰相反是个累赘。

配色和产品

配色很难搞，因为明亮的颜色几乎完全不存在。用户不会希望他们的搜索给人一种过度品牌化的感觉。它原则上只需要基本的深色模式和浅色模式，然后在按钮上增加了一点强调色就够了。但你知道我肯定不会这么做，因为配色是我的最爱。

首先，我们制作了一些视觉稿，测试我们使用颜色的频率。事实证明，提亮色基本上只是出现在链接上，哈哈。Perplexity 团队提到，他们想要摆脱传统的蓝色的配色氛围，但他们也只想稍微调整一下，不要出现奇怪的跳色。他们希望自己的品牌看起来更严肃一点。

原始用户界面

我们用于更新 UI 后的效果

在我们开发了一个以深色模式和浅色模式为核心的配色方案之后，我们跳出了大多数 UI 设计师所习惯的传统科技产品的氛围，并添加了一些温暖的色调，将品牌带出了传统的科技领域。

Perplexity 的品牌配色+强调色

我们不是典型的 UI 设计师，但这个项目让我们深入讨论「当内容太多时会发生什么？我们应该如何处理侧边导航？」这些问题，我们想到了一个非常简单但非常有效的折叠导航的想法。我知道我们不会重新发明任何东西，但这感觉就像一块缺失的拼图，找到了它对的位置，这让一切都变得有意义。在我们向 Perplexity 的工作人员介绍这一点后，他们在不到一周的时间内将其实现到了网站当中。

左侧折叠导航的视觉稿

左侧导航未折叠状态下的视觉稿

导航如何随着内容扩展而扩展

品牌元素

为一个不想引人注目的品牌构建品牌元素是很棘手的，但我们忍不住会想用户在产品本身之外与品牌互动时，可能获得的惊喜和愉悦的时刻。

我们做的第一件事是构建一个网格系统，这样品牌可以在营销材料和宣传材料中使用这套系统。任何在这个领域工作了足够长的时间的人都知道，推广平台秘密地管理着整个世界，所以你必须确保你在主题演讲/谷歌幻灯片看起来足够新鲜。 Fyre Festival 和 Anna Delvey 在这方面就非常拿手了。

我们采用了网格系统，并在引入了一些非常有意思的倾斜的剪切，致力于将动感带入典型的静态呈现。

我们制作了一些非常漂亮的海报，虽然没有实际的用例，但它们看起来确实很漂亮！这同样是一本不真实的小册子，但非常赏心悦目。

当我们研究这个品牌时，一直试图为图标和类似的东西找到一种「风格」，但这一切都感觉很可以。这就像试图将互联网放入一个盒子中一样——这是不可能的。所以我们有这样的想法：我们应该倾向于反风格。为什么不把所有的事情都做一点呢？就像互联网一样。我们将这张拼贴海报放在一起，Perplexity 的员工可以将其挂在办公室里，创造出一种「我们什么都有一点，我们是一家互联网公司。」

我们还根据 LOGO 构建了一系列装饰艺术风格的图案，这是一个非常有趣的彩蛋。我们只是创造了一些他们可以用作社交媒体和类似内容的背景的东西。

我们制作了很多有趣的素材，它们可能会被用到，也可能不会出现，不过我把他们先摆在这里。在制作海报图标的过程中，我们制作了下面这个非常有趣的带着面孔的芯片图标，这让人回想起 Susan Kare 为苹果绘制的图标。我们称下面这个图标为「AI Guy」，Henry 说，我们拿它制作一张背景图吧，就像 90 年代所有那些奇怪的桌面背景一样，带有奇怪的浮雕效果。所以这里将 AI Guy 做成了桌面背景，单纯只是为了好玩。

符号 & 品牌 — Summer McClure
文字 LOGO — Hanna Karraby
动画 — Justin Lawes
品牌 — Dayan D'Aniello
艺术指导 — Mike Smith