一、破局先行，引領趨勢

過去的 10 年，是從信息時代走向數字時代的過程，接下來的 10 年，是智能化的新時代，企業組織和個體都會迎來全新的變化。

早在去年三月，釘釘就開始推進產品全面智能化，包括 AI 助理、AI 搜索、智能文檔、智能會議等產品，幫助企業邁入智能新時代。在這個智能化快速推進的過程中，我們也在色彩、圖形、品牌以及產品界面視覺語言等多維度場景持續探索，試圖挖掘出更具前瞻性、未來性的視覺風格，來詮釋釘釘讓組織和個人更敏捷，更有創造力的核心價值主張。

在 AI 時代，我們不斷突破，不斷嘗試，走在趨勢前沿，讓釘釘成為行業的先行者是我們持之以恒的自我要求。讓用戶感受到更智能、簡單的產品體驗和視覺感受，比如用戶只需點擊一個圖標或者一句引導，即可自動化幫助用戶處理郵件、日程安排、預約會議等；比如用戶在追求個性、多元的產品體驗上，只需一鍵便可進行界面的個性化設置。

此外，隨著 AI 的飛速發展，各大門類的 AI 產品也遍地開花，我們不難看到市場上陸陸續續的一些 AI 產品也在追尋這種個性和智能的視覺趨勢和表達。

二、“紫”成一派

1. 從藍到紫

回看釘釘，大家只要一提到釘釘的品牌色彩，應該會有一個初步印象：沉穩的藍色，它代表著釘釘為 B 端企業和組織提供高效協同辦公的數字化工作方式；然而，隨著釘釘的用戶年輕化趨勢越來越明顯，比如大量的學生群體、年輕的工作者甚至管理者不斷涌現，在「人均自媒體」當下，個體經營、獨立創業的模式也越來越受追捧。

作為新時代的智能辦公平臺，我們除了注重組織間的高效協同，還與時俱進地關注著給個體帶來創造力。因此，我們的色彩也從單一的藍色加入了更多的紫色，在延續中嘗試創新，給人帶來更加年輕、個性、智能、開放的感受。

2. “紫”的多元

不知大家對 2022 年杭州亞運會還有沒有印象，其主形象色是「虹韻紫?」，象征著日月輝映、時代風采，寓意歡聚與交融。在積極響應全民亞運的氛圍下，釘釘也新增了一款與亞運色「虹韻紫?」一致的應用圖標「紫?釘能行」供用戶使用，上線后受到了非常多用戶的喜愛和好評。通過這次實踐也再次驗證了我們的品牌logo色可以更多元、多變的想法。

在這次“大膽”的實踐背后，其實是我們早就“預謀”好的。多年以來，我們的彩虹版應用圖標就一直用在我們的測試版釘釘上，我們通過不斷觀察并收集大家對測試版圖標的反饋，持續優化和精進，最終在亞運會期間，結合亞運主題色換來了一次不錯的實踐。隨著 AI 的加持，我們借用魔法棒在浩瀚夜空下揮灑出一遍藍紫星辰的靈感，延續亞運的色彩，因此而演變出了全新「紫定能行」的釘釘 logo。與此同時，基于釘釘 365 會員，為了讓會員用戶享受到更為尊貴、差異的體驗，我們專門設計了一款針對會員版的專屬會員圖標。

除此之外，為了保障好多“紫”在釘釘產品使用中的一致性，我們針對不同的“紫”色有了更明確的界定，從整個釘釘品牌色彩關系出發，依據不同業務場景做了以下劃分：

3. “紫”的個性

如前文所說，AI 時代下我們除了注重組織間的高效協同，釘釘還非常關注著個體間的創造力。大量的用戶在使用釘釘時，渴望更有專屬、定制的感受，為了充分尊重個體，因此我們為超級個體（365 會員）專門設計了圖標和主題。

三、智能視覺新紀元

1. 智能色彩，讓色彩聚焦起來

回看到初期釘釘智能化的品牌色彩上，我們不難發現其使用了較多的四色漸變（青/藍/紫/紅），導致色值跨域多且分散，色彩搭配使用到界面中的效果也看著不夠干凈、明亮。因此，我們去掉了過多的青色和紅色，讓色彩傾向往藍紫聚焦，不斷讓藍紫成為釘釘智能色彩識別的關鍵特征，以此來強化用戶對釘釘智能化的印象和認知。

與此同時，為了保障好智能色彩能夠統一且精確地使用到我們具體的產品界面中，我們為智能的 UI 色彩提供了更多標準的實例應用和規范，具體如下:

① 在智能產品界面中，為了方便設計師和研發后續統一使用和維護，我們有定義出一系列的智能色彩 Token，應用在如按鈕、頭像、背景色等場景中。

② 在智能產品界面中，經常存在一些需要大面積氛圍烘托的場景，為此我們新增了專屬智能背景色，讓智能界面氛圍更智能，更統一；除此之外，智能背景色也可在白色圖層上作為關鍵行動區域使用，同時在前端實現上，還支持了全屏動態色彩的組件，只需復用即可。

③ 在智能產品界面中，為了讓用戶非常直觀地區分常規頁面和智能化頁面，我們為此在灰色/白色/深色三種背景下分別提供了 AI 容器的氛圍色。

2. 斫方為圓，讓魔法棒年輕起來

① 魔法棒的前世今生

隨著釘釘功能場景的豐富，產品界面也開始變得復雜，越來越多的用戶吐槽釘釘“操作鏈路長，應用找不到”，所以我們設計了“/”快捷指令，不論在聊天、搜索、文檔，你都可以通過“/”快捷鍵一鍵喚起應用面板快速執行操作。功能上線獲得了不少極客用戶“提效”價值的認可，但對于小白用戶來說還是有一定學習門檻。

22 年底生成式 AI 技術的出現，讓我們有機會給“/”賦予 Magic 成為新時代的“魔法棒”，輕輕一揮就能打開未來世界，不用切換鍵盤輸入“/”，所有用戶都可以通過自然語言對話查找應用執行操作。

相信看過哈利波特的朋友并不陌生：哈利第一次去韋斯萊家作客時，看到針線在沙發上自己織圍巾，鍋碗瓢盆在水槽里自己刷洗...這驚奇的一幕來源于一根神秘的魔法棒。然而，當這根魔法棒帶著 AI 的力量來到釘釘時，和我們的“/”（斜杠）完美地融合在一起，于是就有了大家現在經常在釘釘首屏右上角看到的魔法棒，只需點擊進入，你便可以體驗“魔法世界”。

由于釘釘智能業務發展變化快，「釘釘魔法棒」的品牌圖標在過往以各不統一的尺寸、顏色標準、形式風格等出現在我們的 UI 界面、運營廣告、官網、PR 傳播、線下物料等復雜而冗多的場景中，隨之而來的也暴露出了一些識別性和一致性等問題。因此，為了更好的視覺體驗，我們做了以下精進優化：

② 更清晰

Before：

在釘釘產品界面中，釘釘魔法棒圖標通常被用作智能產品的關鍵入口，當圖標面積較小時，尤其在手機端，經常容易看不清圖形輪廓以及細節，導致整體的視覺識別會比較困難。

After：

通過適當放大圖標中星星和斜杠的比例，使用網格系統以更標準的繪制方法來重塑我們的圖形，使其在手機界面較小的情況下使用時也能被清晰識別。

② 更圓潤

Before：

在釘釘系統圖標中，釘釘魔法棒圖標的端點是方形，和其他圖標的端點不一致（為圓形），整體顯得不夠和諧統一。

After：

斫方為圓，使其端點的造型圓潤化，既能保障好釘釘魔法棒圖標和釘釘系統圖標風格一致，又能讓魔法棒的氣質顯的更年輕起來。

③ 更突出

Before：

在釘釘產品界面中，當魔法棒圖標作為頭像使用時，我們發現其中的斜杠和星星圖形部分，整體的表現力以及存在感上稍弱，顯得略為單薄。

After：

為了強化魔法棒揮灑出魔法的氛圍感，我們新增了掃尾部分，以此來提升圖標的差異化和存在感，使其在產品界面中出現時更加突出。

Before：

以前，在釘釘首頁導航的 AI 助理入口中，AI 助理圖標的動畫效果是只有魔法棒部分做了揮舞動畫。

After：

現在優化后，圖標中的 AI 文字也會跟隨魔法棒的揮舞動起來，使動畫整體更生動，在首頁的導航入口上動態響應也更醒目。

此外，在釘釘智能應用啟動動畫上，當釘釘魔法棒模擬揮舞這個動作時，我們調整了其曲線運動，讓它看起來更加絲滑，同時還增加了一些細微的透視變化。

3. 多種場域，讓智能心智統一起來

在釘釘智能化場景中，我們存在多種場域，比如智能化品牌傳播、智能化產品入口和產品功能等，為了在不同場域下都能保障好心智的一致性，我們分別做了以下劃分：

① 一級場域·釘釘魔法棒

比如在釘釘智能產品界面中，釘釘魔法棒圖標即為釘釘智能化產品一級入口、標識等。

② 二級場域·業務產品智能化

比如釘釘「智能問數」、「智能服務臺」等智能業務中，可將智能化品牌色與業務圖標相結合，做到易懂易擴展，對客心智透傳統一。

③ 三級場域·產品功能

比如在釘釘智能產品的某一個功能中，統一以“產品功能圖標+星星”為范式，既能保障視覺一致性，又有功能識別性，同時還保留了產品智能心智。

4. 產品升級，讓 AI 助理個性起來

基于業務 AI 助理的產品升級，這次整體的 UI 視覺語言我們也做了一輪煥新，比如通過 AI 訓練的方式，衍生出了一系列全新的、更私人和個性的 AI 助理形用戶只需一鍵即可領取，并給 ta 設置你想要的稱呼和聲音。

除此之外，AI 助理的產品界面視覺上也做了升級，通過模塊化信息布局，使產品界面更簡潔和輕量。讓你的 AI 助理每天幫你跟進你關注的人，整理你關心的事，讓項目進展一覽無余，還可以為你隨時記錄只言片語，讓你要事不漏，萬事可收。歡迎打開釘釘首頁右上角 AI 助理的圖標，前往體驗～

結語

通過我們在色彩、圖形、品牌以及產品界面視覺語言等多維度場景持續探索和嘗試，我們期望能塑造一個智能簡單、體驗友好、年輕個性的釘釘形象。未來，我們也將持續探索具有前瞻性和未來性的視覺風格，不斷打磨和精進釘釘的視覺體驗，讓組織和個人更敏捷，更有創造力，“紫"得期待，“紫”釘能行!

歡迎關注作者微信公眾號：「釘釘用戶體驗」