編者按：一個 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