本文以騰訊 CoDesign 設(shè)計(jì)協(xié)作平臺(tái)作為案例，從視覺(jué)設(shè)計(jì)角度闡述生態(tài)工具產(chǎn)品發(fā)展過(guò)程中品牌與體驗(yàn)升級(jí)的設(shè)計(jì)方法與實(shí)踐流程。本章將分為上、下兩部分，分別闡述 CoDesign 的品牌升級(jí)與體驗(yàn)升級(jí)過(guò)程。本篇將主要闡述產(chǎn)品體驗(yàn)升級(jí)部分的內(nèi)容，以期為大家提供有價(jià)值、可參考的知識(shí)經(jīng)驗(yàn)。

背景介紹

騰訊 CoDesign 誕生于2019年，最早以「設(shè)計(jì)云-工作臺(tái)」的定位開(kāi)始服務(wù)騰訊內(nèi)部。在2020年從設(shè)計(jì)門(mén)戶(hù)拆分為獨(dú)立產(chǎn)品與品牌 CoDesign，并于同年開(kāi)始對(duì)外服務(wù)。

在產(chǎn)品對(duì)外服務(wù)的過(guò)程中，產(chǎn)品一直在進(jìn)行高速的產(chǎn)品能力與體驗(yàn)優(yōu)化迭代，產(chǎn)品所服務(wù)的用戶(hù)類(lèi)型也在不斷豐富。

今年，CoDesign 為滿(mǎn)足更多類(lèi)型用戶(hù)的協(xié)作與體驗(yàn)訴求，在產(chǎn)品資產(chǎn)管理結(jié)構(gòu)與權(quán)限、數(shù)字資產(chǎn)管理能力上進(jìn)行了大幅度的升級(jí)；以及設(shè)計(jì)云產(chǎn)品生態(tài)的逐漸成熟與對(duì)生態(tài)品牌運(yùn)營(yíng)的規(guī)劃，都對(duì) CoDesign 的品牌與體驗(yàn)有著迫切的升級(jí)訴求。

一、闡明策略

今年上半年，CoDesign 的品牌與體驗(yàn)升級(jí)的設(shè)計(jì)工作幾乎在同一時(shí)間啟動(dòng)，產(chǎn)品體驗(yàn)升級(jí)工作也面臨著多個(gè)挑戰(zhàn)。

• 產(chǎn)品體驗(yàn)升級(jí)具體需要做什么？
• 如何兼容產(chǎn)品未來(lái)能力建設(shè)？
• 怎么在品牌不確定的前提下，確保后續(xù)視覺(jué)的一致性及與競(jìng)品的差異性？

在與項(xiàng)目組、品牌團(tuán)隊(duì)多次溝通后，我們決定通過(guò)以下策略解決產(chǎn)品體驗(yàn)升級(jí)所面臨的挑戰(zhàn)：

一、產(chǎn)品體驗(yàn)升級(jí)工作構(gòu)成涉及到產(chǎn)品、交互、視覺(jué)、研發(fā)各個(gè)層面。首先，我們需要明確具體的體驗(yàn)優(yōu)化項(xiàng)，并將其定位到具體層面，制定出體驗(yàn)優(yōu)化的前置工作與規(guī)劃。

二、結(jié)合新的產(chǎn)品升級(jí)方案，梳理經(jīng)典頁(yè)面結(jié)構(gòu)。結(jié)合競(jìng)品分析，構(gòu)建出具有差異化的體驗(yàn)基調(diào)。

三、最后，為了進(jìn)一步加強(qiáng)產(chǎn)品體驗(yàn)與競(jìng)品的差異性，完善「推廣視覺(jué)」到「產(chǎn)品視覺(jué)」的品牌體驗(yàn)閉環(huán)。我們將產(chǎn)品內(nèi)觸點(diǎn)進(jìn)行進(jìn)一步拆解，并在品牌聲量象限中定位，結(jié)合設(shè)計(jì)核心（Design DNA）進(jìn)行延展應(yīng)用。

二、設(shè)計(jì)實(shí)施

1. 從定位問(wèn)題，制定規(guī)劃開(kāi)始

我們對(duì)當(dāng)前版本進(jìn)行全方位視覺(jué)及體驗(yàn)走查，并且整理用戶(hù)反饋的缺陷問(wèn)題，發(fā)現(xiàn)了 70 多個(gè)交互、視覺(jué)以及開(kāi)發(fā)還原上的問(wèn)題?？偨Y(jié)歸納為框架擴(kuò)展性不足，體驗(yàn)不統(tǒng)一，效率低，品牌感知弱。

首先在交互上，我們的交互同學(xué)對(duì)產(chǎn)品原則，全局定義，通用流程，頁(yè)面框架，標(biāo)準(zhǔn)組件，文案規(guī)范進(jìn)行進(jìn)一步的定義和梳理，保證交互的規(guī)范性和一致性。

其次在視覺(jué)上，我們基于 1.0 的問(wèn)題，在 2.0 上明確了形，色，構(gòu)，質(zhì)，大小，間距，組件等規(guī)范用法，并對(duì)其進(jìn)行文檔化。以便在后續(xù)工作中形成更加嚴(yán)謹(jǐn)?shù)脑O(shè)計(jì)規(guī)范，來(lái)保證多人合作中大家從開(kāi)始的思維一致到最后產(chǎn)出的一致。

再次在研發(fā)上，我們將基礎(chǔ)組件和業(yè)務(wù)組件分開(kāi)維護(hù)，基礎(chǔ)組件代碼我們從 Ten 切回 TDesign，極大地提升了組件的通用性和定制化，并參考 TDesign 的 Token 規(guī)則，定制 CoDesign 的基礎(chǔ)組件樣式。同時(shí)在業(yè)務(wù)組件上，我們將具有通用性組件進(jìn)行抽離，（例如卡片組件）單獨(dú)構(gòu)建成為標(biāo)準(zhǔn)組件。保證研發(fā)異地合作組件樣式的統(tǒng)一性，提高效率。

「 項(xiàng)目開(kāi)始之初，不用急于陷入方案細(xì)節(jié)設(shè)計(jì)中，可以針對(duì)已知問(wèn)題，拉通團(tuán)隊(duì)其他成員，對(duì)整體方案中各職能團(tuán)隊(duì)的前置工作進(jìn)行初步規(guī)劃，有助于后續(xù)工作中團(tuán)隊(duì)成員工作流的無(wú)縫銜接?！?/p>

2. 從頁(yè)面結(jié)構(gòu)上切入

2.1 結(jié)合產(chǎn)品方案，定義經(jīng)典頁(yè)面結(jié)構(gòu)

梳理整站經(jīng)典頁(yè)面類(lèi)型，結(jié)合產(chǎn)品新的界面框架方案，以一級(jí)功能模塊舉例：

定義一級(jí)功能模塊，二級(jí)功能模塊，各功能詳情頁(yè)，子模塊表單頁(yè)的頁(yè)面結(jié)構(gòu)。

2.2 國(guó)內(nèi)外競(jìng)品分析，構(gòu)建差異化頁(yè)面結(jié)構(gòu)

我們針對(duì)國(guó)內(nèi)外優(yōu)秀競(jìng)品進(jìn)行研究分析，提取其中的共性特征，發(fā)現(xiàn)競(jìng)品常用的頁(yè)面結(jié)構(gòu)分別為：

• 平面結(jié)構(gòu)用線分割功能區(qū)和內(nèi)容區(qū)
• 左右結(jié)構(gòu)用線面組合的形式分割功能區(qū)和內(nèi)容區(qū)
• 上下結(jié)構(gòu)用線面組合的形式分割功能區(qū)和內(nèi)容區(qū)

從以上頁(yè)面結(jié)構(gòu)分析上，大致總結(jié)下構(gòu)建差異化頁(yè)面結(jié)構(gòu)需要考慮的方向是：功能和內(nèi)容的分割方式，內(nèi)容區(qū)的展示方式。

那在整個(gè)體驗(yàn)升級(jí)，CoDesign 的所有工作都圍繞著一個(gè)核心理念——「內(nèi)容設(shè)計(jì)」。所謂內(nèi)容設(shè)計(jì)，是我們希望用戶(hù)在使用工作臺(tái)時(shí)，不受其他因素的干擾，專(zhuān)注于內(nèi)容本身。

所以在 CoDeisgn 的頁(yè)面結(jié)構(gòu)上，我們和市面上主流競(jìng)品做了差異化處理，新版本我們打破了傳統(tǒng)內(nèi)容分割的方式，在 Z 軸的空間上分出功能區(qū)域和內(nèi)容區(qū)域，打通左側(cè)導(dǎo)航和頂部操作欄的功能區(qū)域，將內(nèi)容聚攏重點(diǎn)突出。去掉大量界面中的線與框，減少頁(yè)面非必要元素露出，使其目光可以聚焦在內(nèi)容本身，讓整個(gè)頁(yè)面層級(jí)清晰的同時(shí)帶來(lái)簡(jiǎn)約的視覺(jué)感受。

「 不管是平面，左右還是上下結(jié)構(gòu)，都沒(méi)有絕對(duì)的好與壞，取決于我們希望用戶(hù)的視覺(jué)落點(diǎn)和視覺(jué)動(dòng)線在哪，例如在一個(gè)平面結(jié)構(gòu)中，人們的視覺(jué)落點(diǎn)往往是最重的顏色或者最大的文字等，相對(duì)應(yīng)你的視覺(jué)動(dòng)線就在依次去找第二，第三「重」的內(nèi)容，那當(dāng)這個(gè)平面中增加了空間維度，依然是先看到最「重」的內(nèi)容，只不過(guò)因?yàn)橛辛饲昂蟮年P(guān)系，在視覺(jué)感官上你會(huì)區(qū)分前后內(nèi)容的重量對(duì)比。

結(jié)合 CoDesign 首頁(yè)頁(yè)面結(jié)構(gòu)設(shè)計(jì)最終效果圖，你會(huì)發(fā)現(xiàn)首先視覺(jué)落點(diǎn)在前景白色內(nèi)容區(qū)的內(nèi)容卡片上，緊接著視覺(jué)動(dòng)線來(lái)到后景用戶(hù)高頻操作的新建操作，最后是左側(cè)導(dǎo)航欄的區(qū)域?！?/p>

3. 在品牌上延伸

我們將產(chǎn)品內(nèi)觸點(diǎn)進(jìn)行進(jìn)一步拆解，并在品牌聲量象限中定位，結(jié)合品牌聲量象限的設(shè)計(jì)要求以及設(shè)計(jì)核心（Design DNA）進(jìn)行延展應(yīng)用。

3.1 品牌色

基于品牌標(biāo)志延展出基礎(chǔ)的品牌色規(guī)則，并且為了兼顧多觸點(diǎn)的應(yīng)用，我們?cè)谄放浦魃A(chǔ)上降低了色彩的飽和度，延展出一系列輔助色，提供了較為豐富的色彩運(yùn)用，同時(shí)為頁(yè)面帶來(lái)了更為輕盈，靈動(dòng)的視覺(jué)感受。最后再根據(jù)品牌聲量象限，指導(dǎo)不同品牌出點(diǎn)的顏色使用。

3.2 輔助圖形

為了塑造統(tǒng)一的品牌語(yǔ)言，我們從品牌標(biāo)志中提取基礎(chǔ)輔助形，設(shè)計(jì)了一系列延展圖形，打造多樣化極具品牌調(diào)性和視覺(jué)表達(dá)。

3.3 品牌特征延展

通過(guò)品牌特征的運(yùn)用，賦予圖標(biāo)、登錄頁(yè)、演示文件、空頁(yè)面等應(yīng)用場(chǎng)景更明確的品牌識(shí)別性，進(jìn)一步強(qiáng)化統(tǒng)一品牌認(rèn)知。

CoDesign 圖標(biāo)

CoDesign 登錄頁(yè)

CoDesign 演示文件封面

CoDesign 空狀態(tài)

CoDesign 分享頁(yè)&加載

CoDesign 核心界面效果展示

「 品牌視覺(jué)和產(chǎn)品視覺(jué)是相輔相成的，如何讓用戶(hù)有清晰的品牌感知，往往來(lái)源于一些細(xì)小的場(chǎng)景品牌運(yùn)用，這也是視覺(jué)一致性的重要體現(xiàn)。」

4. 在兼容性上閉環(huán)

4.1「一個(gè)」樣式

我們?cè)诿恳粋€(gè)組件的設(shè)計(jì)與規(guī)劃中，都盡可能的照顧在多場(chǎng)景的兼容性。例如卡片組件的設(shè)計(jì)，1.0 的卡片設(shè)計(jì)，我們有著各種不同的樣式，比例，間距等；新版設(shè)計(jì)中我們將內(nèi)容卡片進(jìn)行了結(jié)構(gòu)化處理，采用了一樣的視覺(jué)語(yǔ)言，框架，裁切方式，甚至開(kāi)發(fā)邏輯，來(lái)增強(qiáng)視覺(jué)的統(tǒng)一性 ，減少維護(hù)成本的同時(shí)，兼容更多的場(chǎng)景。

4.2「一種」框架

設(shè)計(jì)開(kāi)始規(guī)劃時(shí)，我們就用一套顏色 Token 搭建起設(shè)計(jì)和開(kāi)發(fā)之間界面樣式的映射關(guān)系，為未來(lái)暗黑模式適配打下基礎(chǔ)。

新版的頁(yè)面結(jié)構(gòu)設(shè)計(jì)，也為不同屏幕設(shè)備提供更好的兼容性。

4.3「一套」視覺(jué)語(yǔ)言

隨著整個(gè)設(shè)計(jì)云生態(tài)的品牌形象的更新和統(tǒng)一，然而各個(gè)子產(chǎn)品內(nèi)的視覺(jué)風(fēng)格還是各異，那未來(lái) CoDesign 會(huì)作為設(shè)計(jì)平臺(tái)的連接器，我們也有意識(shí)的讓新版的視覺(jué)風(fēng)格延續(xù)到各大平臺(tái)，來(lái)保持一致的視覺(jué)語(yǔ)言。那目前我們已經(jīng)陸續(xù)讓這套視覺(jué)風(fēng)格延續(xù)到了設(shè)計(jì)云企業(yè)管理后臺(tái)，OpenDesign，設(shè)計(jì)走查像素眼。

三、資產(chǎn)管理與設(shè)計(jì)提效

1. 品牌、視覺(jué)、運(yùn)營(yíng)協(xié)作

在視覺(jué)團(tuán)隊(duì)多人協(xié)作中，我們統(tǒng)一了協(xié)作環(huán)境，全文件的 Figma 化，并且將產(chǎn)品設(shè)計(jì)、運(yùn)營(yíng)設(shè)計(jì)組件化，方便團(tuán)隊(duì)成員使用更加靈活高效。

2. 視覺(jué)、研發(fā)協(xié)作

在視覺(jué)、研發(fā)多人協(xié)作中，設(shè)計(jì)與研發(fā)統(tǒng)一使用 TDesign 基礎(chǔ)組件，保證基礎(chǔ)組件一致性；業(yè)務(wù)組件在業(yè)務(wù)拓展過(guò)程中由業(yè)務(wù)開(kāi)發(fā)獨(dú)立建設(shè)并維護(hù)，在最后通過(guò)視覺(jué)樣式 Token 化，建立設(shè)計(jì)和開(kāi)發(fā)之間界面樣式的映射關(guān)系。

結(jié)語(yǔ)

以上內(nèi)容是基于 CoDesign 體驗(yàn)升級(jí)應(yīng)用過(guò)程中的一些關(guān)鍵策略及執(zhí)行思路。

總體來(lái)說(shuō)，我們?cè)谶@個(gè)版本的設(shè)計(jì)上，除了不斷解決產(chǎn)品的訴求和用戶(hù)反饋的體驗(yàn)問(wèn)題之外，還在努力提升設(shè)計(jì)（交互、視覺(jué)）及研發(fā)一致性，構(gòu)建可輔助團(tuán)隊(duì)標(biāo)準(zhǔn)化的設(shè)計(jì)、研發(fā)的 Token 及組件庫(kù)；打好底層基礎(chǔ)框架，未來(lái) CoDesign 會(huì)增加更多的功能，輻射更廣業(yè)務(wù)。我希望這些基礎(chǔ)面的建設(shè)，能帶來(lái)整個(gè)平臺(tái)一致性的用戶(hù)體驗(yàn)。

相關(guān)鏈接：

騰訊設(shè)計(jì)云 (內(nèi)網(wǎng))：http://dcloud.oa.com/

騰訊 CoDesign (內(nèi)網(wǎng))：https://codesign.woa.com/