2022-11-14 資深UI設(shè)計(jì)者
“效率一直是公共輿論中的一個(gè)重要話題：在古希臘人眼中，它是政治和社會(huì)運(yùn)轉(zhuǎn)的方式；工業(yè)革命早期，亞當(dāng)·斯密將其視作提升生產(chǎn)力的強(qiáng)勁動(dòng)力?！睍r(shí)至今日，它被奉為公共生活的首要目標(biāo)，效率升級(jí)實(shí)質(zhì)是廣義世界里生產(chǎn)力的一次革新。
科技和物聯(lián)網(wǎng)以看不見的方式正重塑這個(gè)世界，從生活到工作，科技把每一張有形的辦公桌移到了云端，讓每一場(chǎng)可能發(fā)生的對(duì)話跨過(guò)了坐標(biāo)的限制。技術(shù)開放地定義著我們所理解的現(xiàn)實(shí)工作環(huán)境，騰訊文檔以對(duì)效率協(xié)作世界新的理解重新歸來(lái)。
我們希望“讓協(xié)作更高效，讓創(chuàng)作更輕松?！?站在新舊交替的路口，是時(shí)候以全新的設(shè)計(jì)語(yǔ)言，讓工具退去冷冰的外殼，走進(jìn)與智能隔空對(duì)話的新世界。
產(chǎn)品感知關(guān)鍵詞：
Phase 1
我們把騰訊文檔的品牌因子比做是架落與兩岸的橋，從時(shí)間和空間的角度，連接現(xiàn)在與未來(lái)。在這里，代表效率協(xié)作先進(jìn)生產(chǎn)力創(chuàng)造的新世界，轉(zhuǎn)承著龐大信息流的無(wú)限可能性。希望在這里發(fā)生的每一次虛擬與現(xiàn)實(shí)間的交流都是如此貼近你。
在此，我們賦予這個(gè)新世界以“數(shù)字”之名為前綴：
在數(shù)的數(shù)字（number）里，從有限0到無(wú)限∞；在物的數(shù)字（digital）里，從有形到無(wú)形。
就像霍金所說(shuō)，宇宙最根本的東西首先是空間，其次是物質(zhì)，再次是時(shí)間。因?yàn)槲镔|(zhì)的存在和運(yùn)動(dòng)必須是在空間里進(jìn)行。而沒(méi)有物質(zhì)，談?wù)摃r(shí)間是沒(méi)有意義的。
而在這個(gè)廣闊的效率世界里，由無(wú)形的空間結(jié)構(gòu)支持，答應(yīng)著無(wú)聲的時(shí)鐘….
關(guān)鍵詞的聯(lián)想：
連結(jié)、握手、相遇、構(gòu)建、樂(lè)高、晶體、方塊、魔術(shù)、火花、夢(mèng)想、成就、有序、幾何、空間、數(shù)字、代碼、窗口
從聯(lián)想中提煉具有關(guān)鍵的隱喻和形式：
把關(guān)鍵性的隱喻抽象出來(lái)，找到表現(xiàn)形式，使其更簡(jiǎn)潔純粹，更容易被組合
品牌關(guān)鍵詞
秩序是一切天體、物質(zhì)、時(shí)間、生命、形態(tài)和形式秩序狀態(tài)運(yùn)行的最基本法則。
萬(wàn)物有序，雖然呈現(xiàn)的現(xiàn)象千變?nèi)f化，但褪去復(fù)雜的外表，內(nèi)在規(guī)律卻是不變的。以更規(guī)整和原始的抽象基礎(chǔ)形為所有應(yīng)用元素的開端，以秩序作為布局的基本準(zhǔn)則。
正如我們騰訊文檔一直在思考的，尋找秩序中的效率，再?gòu)男手姓业阶兓囊?guī)律。
早在上世紀(jì)，透明性和通透感就追隨著設(shè)計(jì)的平面到立面。從沃德裝飾語(yǔ)言的中立性到密斯凡德羅建造的清晰，以形式的通透對(duì)內(nèi)容的冗雜，以材質(zhì)的純粹對(duì)結(jié)構(gòu)的多樣。
在這里，我們用“輕和透”來(lái)體現(xiàn)技術(shù)帶來(lái)的未來(lái)感，在畫面中敘述的更多是余白空間所帶來(lái)的無(wú)邊想象力。
“光從來(lái)都是為了它所照亮的事物存在而不是為了它本身?！?
流質(zhì)的光影和顏色是整體設(shè)計(jì)中氛圍的基調(diào)，用顏色之間緩慢的漸變預(yù)演空間中正在發(fā)生或者即將發(fā)生的故事。
我們用了色盤中相對(duì)沉靜的極光色系（藍(lán)紫綠），拓寬空間的邊界感。
與正在交融和變化的顏色中間態(tài)，一同隱喻了智能和科技作用下的每一次協(xié)作和創(chuàng)作的真實(shí)實(shí)現(xiàn)。
Metaphor Box 協(xié)作盒子，我們用一個(gè)變化的立方隱喻一個(gè)協(xié)作空間站。在這里有可能發(fā)生的是各種各樣的碰撞。思想的火花，創(chuàng)作的靈感，執(zhí)行的高效。這里有屬于一個(gè)也有屬于一群人的精彩。
最終我們將騰訊文檔的Logo圖形化，賦予Metaphor Box協(xié)作空間的概念。利用有序的幾何線條為空間背景構(gòu)圖。在原本的智慧的品牌藍(lán)基礎(chǔ)上，添加了一點(diǎn)靈動(dòng)偏暖的漸變色，為整體畫面增添生命力及親和力。最終完善后應(yīng)用到官網(wǎng)、官網(wǎng)登錄頁(yè)、閃屏頁(yè)、空頁(yè)面的場(chǎng)景。
閃屏
在閃屏的延展中，我們基于大的品牌理念延展出兩個(gè)不一樣的方向。
A. 以騰訊文檔logo的形狀為視覺元素載體空間，向里呈現(xiàn)一個(gè)輕盈有機(jī)的未來(lái)世界。
B. 以騰訊文檔產(chǎn)品“協(xié)作盒子”的概念，立體的展現(xiàn)一個(gè)代表科技為基底，多方協(xié)同運(yùn)轉(zhuǎn)的動(dòng)力世界。
最終，我們選擇了整體畫面更為清晰，主體更為清透明確的主圖形。
調(diào)整細(xì)節(jié)后應(yīng)用到閃屏
官網(wǎng)首頁(yè)Banner是最直接、最具感染力的視覺傳達(dá)路徑，我們需要讓用戶在進(jìn)入 docs.qq.com 即刻形成品牌印象，通過(guò)Slogan傳達(dá)騰訊文檔的產(chǎn)品價(jià)值，同時(shí)在Slogan的字段上添加了正在編輯態(tài)的光標(biāo)元素，體現(xiàn)文檔高效的協(xié)作能力，最終以響應(yīng)式的方式適配到移動(dòng)端。
在官網(wǎng)的其他頁(yè)面，我們將品牌語(yǔ)言進(jìn)一步落地。
在騰訊文檔空狀態(tài)的設(shè)計(jì)中，我們以幾何的ip形象為頁(yè)面穿插一個(gè)個(gè)不一樣的故事性敘白。傳遞騰訊文檔平易近人的智能語(yǔ)調(diào)。
在畫面的整體構(gòu)成中，我們?cè)黾恿艘恍┹p透的質(zhì)感元素，結(jié)合幾何形的整體圖形語(yǔ)言，讓畫面輕盈也豐富。
古爾德在《奇妙的生命》一書中寫道：“有些人覺得（人類是唯一智慧生命的）前景令人沮喪，我卻總為之感到振奮。我將它當(dāng)成是一個(gè)源泉，它帶來(lái)了自由，也帶來(lái)了道德上的責(zé)任?！毙实谋澈蟛恢故顷P(guān)于工作方式的改變，仍然需要不負(fù)所望：構(gòu)建責(zé)任。
我們?cè)谥鸩竭M(jìn)化騰訊文檔的整體視覺語(yǔ)言系統(tǒng)。后續(xù)我們將推出下篇，向大家展示騰訊文檔品牌在UI語(yǔ)言和其他品牌延展中的更多設(shè)計(jì)。
在這個(gè)快時(shí)代，精耕出自己的風(fēng)格，打造更舒適的用戶體驗(yàn)，敬請(qǐng)期待......
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
作者：騰訊ISUX團(tuán)隊(duì) 來(lái)源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.yvirxh.cn