在數(shù)字化時代背景下，釘釘不斷探索和創(chuàng)新，以智能化為核心，推動產(chǎn)品和品牌向前發(fā)展。這篇文章將帶你了解釘釘如何通過色彩和設(shè)計的變革，特別是從藍(lán)色到紫色的轉(zhuǎn)變，來詮釋其核心價值主張，即讓組織和個人更敏捷、更有創(chuàng)造力。我們將一起探索釘釘如何在智能化的新紀(jì)元中，通過視覺語言的革新，為用戶帶來更智能、更簡單的產(chǎn)品體驗(yàn)。

01. 破局先行，引領(lǐng)趨勢

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

早在去年三月，釘釘就開始推進(jìn)產(chǎn)品全面智能化，包括AI助理、AI搜索、智能文檔、智能會議等產(chǎn)品，幫助企業(yè)邁入智能新時代。

在這個智能化快速推進(jìn)的過程中，我們也在色彩、圖形、品牌以及產(chǎn)品界面視覺語言等多維度場景持續(xù)探索，試圖挖掘出更具前瞻性、未來性的視覺風(fēng)格，來詮釋釘釘讓組織和個人更敏捷，更有創(chuàng)造力的核心價值主張。

在AI時代，我們不斷突破，不斷嘗試，走在趨勢前沿，讓釘釘成為行業(yè)的先行者是我們持之以恒的自我要求。

讓用戶感受到更智能、簡單的產(chǎn)品體驗(yàn)和視覺感受，比如用戶只需點(diǎn)擊一個圖標(biāo)或者一句引導(dǎo)，即可自動化幫助用戶處理郵件、日程安排、預(yù)約會議等；比如用戶在追求個性、多元的產(chǎn)品體驗(yàn)上，只需一鍵便可進(jìn)行界面的個性化設(shè)置。

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

02. “紫”成一派

從藍(lán)到紫

回看釘釘，大家只要一提到釘釘?shù)钠放粕?，?yīng)該會有一個初步印象：沉穩(wěn)的藍(lán)色，它代表著釘釘為B端企業(yè)和組織提供高效協(xié)同辦公的數(shù)字化工作方式；然而，隨著釘釘?shù)挠脩裟贻p化趨勢越來越明顯，比如大量的學(xué)生群體、年輕的工作者甚至管理者不斷涌現(xiàn)，在「人均自媒體」當(dāng)下，個體經(jīng)營、獨(dú)立創(chuàng)業(yè)的模式也越來越受追捧。

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

“紫”的多元

不知大家對2022年杭州亞運(yùn)會還有沒有印象，其主形象色是「虹韻紫?」，象征著日月輝映、時代風(fēng)采，寓意歡聚與交融。

在積極響應(yīng)全民亞運(yùn)的氛圍下，釘釘也新增了一款與亞運(yùn)色「虹韻紫?」一致的應(yīng)用圖標(biāo)「紫?釘能行」供用戶使用，上線后受到了非常多用戶的喜愛和好評。

通過這次實(shí)踐也再次驗(yàn)證了我們的品牌logo色可以更多元、多變的想法。

在這次“大膽”的實(shí)踐背后，其實(shí)是我們早就“預(yù)謀”好的。多年以來，我們的彩虹版應(yīng)用圖標(biāo)就一直用在我們的測試版釘釘上，我們通過不斷觀察并收集大家對測試版圖標(biāo)的反饋，持續(xù)優(yōu)化和精進(jìn)，最終在亞運(yùn)會期間，結(jié)合亞運(yùn)主題色換來了一次不錯的實(shí)踐。

隨著AI的加持，我們借用魔法棒在浩瀚夜空下?lián)]灑出一遍藍(lán)紫星辰的靈感，延續(xù)亞運(yùn)的色彩，因此而演變出了全新「紫定能行」的釘釘logo。

與此同時，基于釘釘365會員，為了讓會員用戶享受到更為尊貴、差異的體驗(yàn)，我們專門設(shè)計了一款針對會員版的專屬會員圖標(biāo)。

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

“紫”的個性

如前文所說，AI時代下我們除了注重組織間的高效協(xié)同，釘釘還非常關(guān)注著個體間的創(chuàng)造力。

大量的用戶在使用釘釘時，渴望更有專屬、定制的感受，為了充分尊重個體，因此我們?yōu)槌墏€體（365會員）專門設(shè)計了圖標(biāo)和主題。

03. 智能視覺新紀(jì)元

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

回看到初期釘釘智能化的品牌色彩上，我們不難發(fā)現(xiàn)其使用了較多的四色漸變（青/藍(lán)/紫/紅），導(dǎo)致色值跨域多且分散，色彩搭配使用到界面中的效果也看著不夠干凈、明亮。

因此，我們?nèi)サ袅诉^多的青色和紅色，讓色彩傾向往藍(lán)紫聚焦，不斷讓藍(lán)紫成為釘釘智能色彩識別的關(guān)鍵特征，以此來強(qiáng)化用戶對釘釘智能化的印象和認(rèn)知。

與此同時，為了保障好智能色彩能夠統(tǒng)一且精確地使用到我們具體的產(chǎn)品界面中，我們?yōu)橹悄艿腢I色彩提供了更多標(biāo)準(zhǔn)的實(shí)例應(yīng)用和規(guī)范，具體如下：

1. 在智能產(chǎn)品界面中，為了方便設(shè)計師和研發(fā)后續(xù)統(tǒng)一使用和維護(hù)，我們有定義出一系列的智能色彩Token，應(yīng)用在如按鈕、頭像、背景色等場景中。

2. 在智能產(chǎn)品界面中，經(jīng)常存在一些需要大面積氛圍烘托的場景，為此我們新增了專屬智能背景色，讓智能界面氛圍更智能，更統(tǒng)一；除此之外，智能背景色也可在白色圖層上作為關(guān)鍵行動區(qū)域使用，同時在前端實(shí)現(xiàn)上，還支持了全屏動態(tài)色彩的組件，只需復(fù)用即可。

3.?在智能產(chǎn)品界面中，為了讓用戶非常直觀地區(qū)分常規(guī)頁面和智能化頁面，我們?yōu)榇嗽诨疑?白色/深色三種背景下分別提供了AI容器的氛圍色。

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

魔法棒的前世今生隨著釘釘功能場景的豐富，產(chǎn)品界面也開始變得復(fù)雜，越來越多的用戶吐槽釘釘“操作鏈路長，應(yīng)用找不到”，所以我們設(shè)計了“/”快捷指令，不論在聊天、搜索、文檔，你都可以通過“/”快捷鍵一鍵喚起應(yīng)用面板快速執(zhí)行操作。

功能上線獲得了不少極客用戶“提效”價值的認(rèn)可，但對于小白用戶來說還是有一定學(xué)習(xí)門檻。

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

相信看過哈利波特的朋友并不陌生：哈利第一次去韋斯萊家作客時，看到針線在沙發(fā)上自己織圍巾，鍋碗瓢盆在水槽里自己刷洗…這驚奇的一幕來源于一根神秘的魔法棒。

然而，當(dāng)這根魔法棒帶著AI的力量來到釘釘時，和我們的“/”（斜杠）完美地融合在一起，于是就有了大家現(xiàn)在經(jīng)常在釘釘首屏右上角看到的魔法棒，只需點(diǎn)擊進(jìn)入，你便可以體驗(yàn)“魔法世界”。

由于釘釘智能業(yè)務(wù)發(fā)展變化快，「釘釘魔法棒」的品牌圖標(biāo)在過往以各不統(tǒng)一的尺寸、顏色標(biāo)準(zhǔn)、形式風(fēng)格等出現(xiàn)在我們的UI界面、運(yùn)營廣告、官網(wǎng)、PR傳播、線下物料等復(fù)雜而冗多的場景中，隨之而來的也暴露出了一些識別性和一致性等問題。

因此，為了更好的視覺體驗(yàn)，我們做了以下精進(jìn)優(yōu)化：

更清晰

Before：在釘釘產(chǎn)品界面中，釘釘魔法棒圖標(biāo)通常被用作智能產(chǎn)品的關(guān)鍵入口，當(dāng)圖標(biāo)面積較小時，尤其在手機(jī)端，經(jīng)常容易看不清圖形輪廓以及細(xì)節(jié)，導(dǎo)致整體的視覺識別會比較困難。

After：通過適當(dāng)放大圖標(biāo)中星星和斜杠的比例，使用網(wǎng)格系統(tǒng)以更標(biāo)準(zhǔn)的繪制方法來重塑我們的圖形，使其在手機(jī)界面較小的情況下使用時也能被清晰識別。

更圓潤

Before：在釘釘系統(tǒng)圖標(biāo)中，釘釘魔法棒圖標(biāo)的端點(diǎn)是方形，和其他圖標(biāo)的端點(diǎn)不一致（為圓形），整體顯得不夠和諧統(tǒng)一。

After：斫方為圓，使其端點(diǎn)的造型圓潤化，既能保障好釘釘魔法棒圖標(biāo)和釘釘系統(tǒng)圖標(biāo)風(fēng)格一致，又能讓魔法棒的氣質(zhì)顯的更年輕起來。

更突出

Before：在釘釘產(chǎn)品界面中，當(dāng)魔法棒圖標(biāo)作為頭像使用時，我們發(fā)現(xiàn)其中的斜杠和星星圖形部分，整體的表現(xiàn)力以及存在感上稍弱，顯得略為單薄。

After：為了強(qiáng)化魔法棒揮灑出魔法的氛圍感，我們新增了掃尾部分，以此來提升圖標(biāo)的差異化和存在感，使其在產(chǎn)品界面中出現(xiàn)時更加突出。

Before：以前，在釘釘首頁導(dǎo)航的AI助理入口中，AI助理圖標(biāo)的動畫效果是只有魔法棒部分做了揮舞動畫。

After：現(xiàn)在優(yōu)化后，圖標(biāo)中的AI文字也會跟隨魔法棒的揮舞動起來，使動畫整體更生動，在首頁的導(dǎo)航入口上動態(tài)響應(yīng)也更醒目。

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

3. 多種場域，讓智能心智統(tǒng)一起來

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

一級場域·釘釘魔法棒比如在釘釘智能產(chǎn)品界面中，釘釘魔法棒圖標(biāo)即為釘釘智能化產(chǎn)品一級入口、標(biāo)識等。

二級場域·業(yè)務(wù)產(chǎn)品智能化

比如釘釘「智能問數(shù)」、「智能服務(wù)臺」等智能業(yè)務(wù)中，可將智能化品牌色與業(yè)務(wù)圖標(biāo)相結(jié)合，做到易懂易擴(kuò)展，對客心智透傳統(tǒng)一。

三級場域·產(chǎn)品功能

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

4. 產(chǎn)品升級，讓AI助理個性起來

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

除此之外，AI助理的產(chǎn)品界面視覺上也做了升級，通過模塊化信息布局，使產(chǎn)品界面更簡潔和輕量。

讓你的AI助理每天幫你跟進(jìn)你關(guān)注的人，整理你關(guān)心的事，讓項(xiàng)目進(jìn)展一覽無余，還可以為你隨時記錄只言片語，讓你要事不漏，萬事可收。

歡迎打開釘釘首頁右上角AI助理的圖標(biāo)，前往體驗(yàn)～

04. 結(jié)語

通過我們在色彩、圖形、品牌以及產(chǎn)品界面視覺語言等多維度場景持續(xù)探索和嘗試，我們期望能塑造一個智能簡單、體驗(yàn)友好、年輕個性的釘釘形象。

未來，我們也將持續(xù)探索具有前瞻性和未來性的視覺風(fēng)格，不斷打磨和精進(jìn)釘釘?shù)囊曈X體驗(yàn)，讓組織和個人更敏捷，更有創(chuàng)造力，“紫”得期待，“紫”釘能行!