Date 2025-11-04 11:44:53
编者按：一个 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。毕竟我们是 Smith & Diction，是一群喜欢一点个性的怪人，所以我们必须让这个 LOGO 有点奇怪。我们选择了FK Display，它有绝对完美的个性。 「X」边缘的小切口与符号中的点相匹配。但在 p、t 和 y 在转折点上也有一些非常小的调整，就像手写笔触墨水收缩细节一样，向过去的印刷电话簿和百科全书时代致敬。有人会注意到这些细节吗？也许不是。但整体感觉也很好，我希望人们会注意到它们。
我们还选择了小写「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 Karaby动画 — Justin Lawes品牌 — Dayan DAniello艺术指导 — Mike Smith
