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

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

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

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

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

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

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

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

02. “紫”成一派

從藍(lán)到紫

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

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

“紫”的多元

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

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

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

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

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

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

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

“紫”的個(gè)性

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

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

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

1. 智能色彩，讓色彩聚焦起來(lái)

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

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

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

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

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

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

2. 斫方為圓，讓魔法棒年輕起來(lái)

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

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

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

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

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

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

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

更清晰

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

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

更圓潤(rùn)

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

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

更突出

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

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

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

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

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

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

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

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

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

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

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

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

4. 產(chǎn)品升級(jí)，讓AI助理個(gè)性起來(lái)

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

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

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

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

04. 結(jié)語(yǔ)

通過(guò)我們?cè)谏省D形、品牌以及產(chǎn)品界面視覺(jué)語(yǔ)言等多維度場(chǎng)景持續(xù)探索和嘗試，我們期望能塑造一個(gè)智能簡(jiǎn)單、體驗(yàn)友好、年輕個(gè)性的釘釘形象。

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