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

背景介紹

騰訊 CoDesign 誕生于2019年，最早以「設計云-工作臺」的定位開始服務騰訊內部。在2020年從設計門戶拆分為獨立產品與品牌 CoDesign，并于同年開始對外服務。

在產品對外服務的過程中，產品一直在進行高速的產品能力與體驗優(yōu)化迭代，產品所服務的用戶類型也在不斷豐富。

今年，CoDesign 為滿足更多類型用戶的協(xié)作與體驗訴求，在產品資產管理結構與權限、數字資產管理能力上進行了大幅度的升級；以及設計云產品生態(tài)的逐漸成熟與對生態(tài)品牌運營的規(guī)劃，都對 CoDesign 的品牌與體驗有著迫切的升級訴求。

一、闡明策略

今年上半年，CoDesign 的品牌與體驗升級的設計工作幾乎在同一時間啟動，產品體驗升級工作也面臨著多個挑戰(zhàn)。

• 產品體驗升級具體需要做什么？
• 如何兼容產品未來能力建設？
• 怎么在品牌不確定的前提下，確保后續(xù)視覺的一致性及與競品的差異性？

在與項目組、品牌團隊多次溝通后，我們決定通過以下策略解決產品體驗升級所面臨的挑戰(zhàn)：

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

二、結合新的產品升級方案，梳理經典頁面結構。結合競品分析，構建出具有差異化的體驗基調。

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

二、設計實施

1. 從定位問題，制定規(guī)劃開始

我們對當前版本進行全方位視覺及體驗走查，并且整理用戶反饋的缺陷問題，發(fā)現了 70 多個交互、視覺以及開發(fā)還原上的問題。總結歸納為框架擴展性不足，體驗不統(tǒng)一，效率低，品牌感知弱。

首先在交互上，我們的交互同學對產品原則，全局定義，通用流程，頁面框架，標準組件，文案規(guī)范進行進一步的定義和梳理，保證交互的規(guī)范性和一致性。

其次在視覺上，我們基于 1.0 的問題，在 2.0 上明確了形，色，構，質，大小，間距，組件等規(guī)范用法，并對其進行文檔化。以便在后續(xù)工作中形成更加嚴謹的設計規(guī)范，來保證多人合作中大家從開始的思維一致到最后產出的一致。

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

「 項目開始之初，不用急于陷入方案細節(jié)設計中，可以針對已知問題，拉通團隊其他成員，對整體方案中各職能團隊的前置工作進行初步規(guī)劃，有助于后續(xù)工作中團隊成員工作流的無縫銜接。」

2. 從頁面結構上切入

2.1 結合產品方案，定義經典頁面結構

梳理整站經典頁面類型，結合產品新的界面框架方案，以一級功能模塊舉例：

定義一級功能模塊，二級功能模塊，各功能詳情頁，子模塊表單頁的頁面結構。

2.2 國內外競品分析，構建差異化頁面結構

我們針對國內外優(yōu)秀競品進行研究分析，提取其中的共性特征，發(fā)現競品常用的頁面結構分別為：

• 平面結構用線分割功能區(qū)和內容區(qū)
• 左右結構用線面組合的形式分割功能區(qū)和內容區(qū)
• 上下結構用線面組合的形式分割功能區(qū)和內容區(qū)

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

那在整個體驗升級，CoDesign 的所有工作都圍繞著一個核心理念——「內容設計」。所謂內容設計，是我們希望用戶在使用工作臺時，不受其他因素的干擾，專注于內容本身。

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

「 不管是平面，左右還是上下結構，都沒有絕對的好與壞，取決于我們希望用戶的視覺落點和視覺動線在哪，例如在一個平面結構中，人們的視覺落點往往是最重的顏色或者最大的文字等，相對應你的視覺動線就在依次去找第二，第三「重」的內容，那當這個平面中增加了空間維度，依然是先看到最「重」的內容，只不過因為有了前后的關系，在視覺感官上你會區(qū)分前后內容的重量對比。

結合 CoDesign 首頁頁面結構設計最終效果圖，你會發(fā)現首先視覺落點在前景白色內容區(qū)的內容卡片上，緊接著視覺動線來到后景用戶高頻操作的新建操作，最后是左側導航欄的區(qū)域。」

3. 在品牌上延伸

我們將產品內觸點進行進一步拆解，并在品牌聲量象限中定位，結合品牌聲量象限的設計要求以及設計核心（Design DNA）進行延展應用。

3.1 品牌色

基于品牌標志延展出基礎的品牌色規(guī)則，并且為了兼顧多觸點的應用，我們在品牌主色基礎上降低了色彩的飽和度，延展出一系列輔助色，提供了較為豐富的色彩運用，同時為頁面帶來了更為輕盈，靈動的視覺感受。最后再根據品牌聲量象限，指導不同品牌出點的顏色使用。

3.2 輔助圖形

為了塑造統(tǒng)一的品牌語言，我們從品牌標志中提取基礎輔助形，設計了一系列延展圖形，打造多樣化極具品牌調性和視覺表達。

3.3 品牌特征延展

通過品牌特征的運用，賦予圖標、登錄頁、演示文件、空頁面等應用場景更明確的品牌識別性，進一步強化統(tǒng)一品牌認知。

CoDesign 圖標

CoDesign 登錄頁

CoDesign 演示文件封面

CoDesign 空狀態(tài)

CoDesign 分享頁&加載

CoDesign 核心界面效果展示

「 品牌視覺和產品視覺是相輔相成的，如何讓用戶有清晰的品牌感知，往往來源于一些細小的場景品牌運用，這也是視覺一致性的重要體現?！?/p>

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

4.1「一個」樣式

我們在每一個組件的設計與規(guī)劃中，都盡可能的照顧在多場景的兼容性。例如卡片組件的設計，1.0 的卡片設計，我們有著各種不同的樣式，比例，間距等；新版設計中我們將內容卡片進行了結構化處理，采用了一樣的視覺語言，框架，裁切方式，甚至開發(fā)邏輯，來增強視覺的統(tǒng)一性 ，減少維護成本的同時，兼容更多的場景。

4.2「一種」框架

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

新版的頁面結構設計，也為不同屏幕設備提供更好的兼容性。

4.3「一套」視覺語言

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

三、資產管理與設計提效

1. 品牌、視覺、運營協(xié)作

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

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

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

結語

以上內容是基于 CoDesign 體驗升級應用過程中的一些關鍵策略及執(zhí)行思路。

總體來說，我們在這個版本的設計上，除了不斷解決產品的訴求和用戶反饋的體驗問題之外，還在努力提升設計（交互、視覺）及研發(fā)一致性，構建可輔助團隊標準化的設計、研發(fā)的 Token 及組件庫；打好底層基礎框架，未來 CoDesign 會增加更多的功能，輻射更廣業(yè)務。我希望這些基礎面的建設，能帶來整個平臺一致性的用戶體驗。

相關鏈接：

騰訊設計云 (內網)：http://dcloud.oa.com/

騰訊 CoDesign (內網)：https://codesign.woa.com/