<li id="g3zqm"></li>
2026-6-18 清陽(yáng) 交互設(shè)計(jì)及用戶體驗(yàn)
騰訊 CoDesign 誕生于2019年，最早以「設(shè)計(jì)云-工作臺(tái)」的定位開始服務(wù)騰訊內(nèi)部。在2020年從設(shè)計(jì)門戶拆分為獨(dú)立產(chǎn)品與品牌 CoDesign，并于同年開始對(duì)外服務(wù)。
在產(chǎn)品對(duì)外服務(wù)的過程中，產(chǎn)品一直在進(jìn)行高速的產(chǎn)品能力與體驗(yàn)優(yōu)化迭代，產(chǎn)品所服務(wù)的用戶類型也在不斷豐富。
今年，CoDesign 為滿足更多類型用戶的協(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)。
在與項(xiàng)目組、品牌團(tuán)隊(duì)多次溝通后，我們決定通過以下策略解決產(chǎn)品體驗(yàn)升級(jí)所面臨的挑戰(zhàn)：
一、產(chǎn)品體驗(yàn)升級(jí)工作構(gòu)成涉及到產(chǎn)品、交互、視覺、研發(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)品的差異性，完善「推廣視覺」到「產(chǎn)品視覺」的品牌體驗(yàn)閉環(huán)。我們將產(chǎn)品內(nèi)觸點(diǎn)進(jìn)行進(jìn)一步拆解，并在品牌聲量象限中定位，結(jié)合設(shè)計(jì)核心（Design DNA）進(jìn)行延展應(yīng)用。
我們對(duì)當(dāng)前版本進(jìn)行全方位視覺及體驗(yàn)走查，并且整理用戶反饋的缺陷問題，發(fā)現(xiàn)了 70 多個(gè)交互、視覺以及開發(fā)還原上的問題。總結(jié)歸納為框架擴(kuò)展性不足，體驗(yàn)不統(tǒng)一，效率低，品牌感知弱。
首先在交互上，我們的交互同學(xué)對(duì)產(chǎn)品原則，全局定義，通用流程，頁(yè)面框架，標(biāo)準(zhǔn)組件，文案規(guī)范進(jìn)行進(jìn)一步的定義和梳理，保證交互的規(guī)范性和一致性。
其次在視覺上，我們基于 1.0 的問題，在 2.0 上明確了形，色，構(gòu)，質(zhì)，大小，間距，組件等規(guī)范用法，并對(duì)其進(jìn)行文檔化。以便在后續(xù)工作中形成更加嚴(yán)謹(jǐn)?shù)脑O(shè)計(jì)規(guī)范，來保證多人合作中大家從開始的思維一致到最后產(chǎn)出的一致。
再次在研發(fā)上，我們將基礎(chǔ)組件和業(yè)務(wù)組件分開維護(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)目開始之初，不用急于陷入方案細(xì)節(jié)設(shè)計(jì)中，可以針對(duì)已知問題，拉通團(tuán)隊(duì)其他成員，對(duì)整體方案中各職能團(tuán)隊(duì)的前置工作進(jìn)行初步規(guī)劃，有助于后續(xù)工作中團(tuán)隊(duì)成員工作流的無縫銜接。」
2.1 結(jié)合產(chǎn)品方案，定義經(jīng)典頁(yè)面結(jié)構(gòu)
梳理整站經(jīng)典頁(yè)面類型，結(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)分別為：
從以上頁(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ì)，是我們希望用戶在使用工作臺(tái)時(shí)，不受其他因素的干擾，專注于內(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í)帶來簡(jiǎn)約的視覺感受。
「 不管是平面，左右還是上下結(jié)構(gòu)，都沒有絕對(duì)的好與壞，取決于我們希望用戶的視覺落點(diǎn)和視覺動(dòng)線在哪，例如在一個(gè)平面結(jié)構(gòu)中，人們的視覺落點(diǎn)往往是最重的顏色或者最大的文字等，相對(duì)應(yīng)你的視覺動(dòng)線就在依次去找第二，第三「重」的內(nèi)容，那當(dāng)這個(gè)平面中增加了空間維度，依然是先看到最「重」的內(nèi)容，只不過因?yàn)橛辛饲昂蟮年P(guān)系，在視覺感官上你會(huì)區(qū)分前后內(nèi)容的重量對(duì)比。
結(jié)合 CoDesign 首頁(yè)頁(yè)面結(jié)構(gòu)設(shè)計(jì)最終效果圖，你會(huì)發(fā)現(xiàn)首先視覺落點(diǎn)在前景白色內(nèi)容區(qū)的內(nèi)容卡片上，緊接著視覺動(dòng)線來到后景用戶高頻操作的新建操作，最后是左側(cè)導(dǎo)航欄的區(qū)域。」
我們將產(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è)面帶來了更為輕盈，靈動(dòng)的視覺感受。最后再根據(jù)品牌聲量象限，指導(dǎo)不同品牌出點(diǎn)的顏色使用。
3.2 輔助圖形
為了塑造統(tǒng)一的品牌語(yǔ)言，我們從品牌標(biāo)志中提取基礎(chǔ)輔助形，設(shè)計(jì)了一系列延展圖形，打造多樣化極具品牌調(diào)性和視覺表達(dá)。
3.3 品牌特征延展
通過品牌特征的運(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 核心界面效果展示
「 品牌視覺和產(chǎn)品視覺是相輔相成的，如何讓用戶有清晰的品牌感知，往往來源于一些細(xì)小的場(chǎng)景品牌運(yùn)用，這也是視覺一致性的重要體現(xià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)化處理，采用了一樣的視覺語(yǔ)言，框架，裁切方式，甚至開發(fā)邏輯，來增強(qiáng)視覺的統(tǒng)一性 ，減少維護(hù)成本的同時(shí)，兼容更多的場(chǎng)景。
4.2「一種」框架
設(shè)計(jì)開始規(guī)劃時(shí)，我們就用一套顏色 Token 搭建起設(shè)計(jì)和開發(fā)之間界面樣式的映射關(guān)系，為未來暗黑模式適配打下基礎(chǔ)。
新版的頁(yè)面結(jié)構(gòu)設(shè)計(jì)，也為不同屏幕設(shè)備提供更好的兼容性。
4.3「一套」視覺語(yǔ)言
隨著整個(gè)設(shè)計(jì)云生態(tài)的品牌形象的更新和統(tǒng)一，然而各個(gè)子產(chǎn)品內(nèi)的視覺風(fēng)格還是各異，那未來 CoDesign 會(huì)作為設(shè)計(jì)平臺(tái)的連接器，我們也有意識(shí)的讓新版的視覺風(fēng)格延續(xù)到各大平臺(tái)，來保持一致的視覺語(yǔ)言。那目前我們已經(jīng)陸續(xù)讓這套視覺風(fēng)格延續(xù)到了設(shè)計(jì)云企業(yè)管理后臺(tái)，OpenDesign，設(shè)計(jì)走查像素眼。
在視覺團(tuán)隊(duì)多人協(xié)作中，我們統(tǒng)一了協(xié)作環(huán)境，全文件的 Figma 化，并且將產(chǎn)品設(shè)計(jì)、運(yùn)營(yíng)設(shè)計(jì)組件化，方便團(tuán)隊(duì)成員使用更加靈活高效。
在視覺、研發(fā)多人協(xié)作中，設(shè)計(jì)與研發(fā)統(tǒng)一使用 TDesign 基礎(chǔ)組件，保證基礎(chǔ)組件一致性；業(yè)務(wù)組件在業(yè)務(wù)拓展過程中由業(yè)務(wù)開發(fā)獨(dú)立建設(shè)并維護(hù)，在最后通過視覺樣式 Token 化，建立設(shè)計(jì)和開發(fā)之間界面樣式的映射關(guān)系。
以上內(nèi)容是基于 CoDesign 體驗(yàn)升級(jí)應(yīng)用過程中的一些關(guān)鍵策略及執(zhí)行思路。
總體來說，我們?cè)谶@個(gè)版本的設(shè)計(jì)上，除了不斷解決產(chǎn)品的訴求和用戶反饋的體驗(yàn)問題之外，還在努力提升設(shè)計(jì)（交互、視覺）及研發(fā)一致性，構(gòu)建可輔助團(tuán)隊(duì)標(biāo)準(zhǔn)化的設(shè)計(jì)、研發(fā)的 Token 及組件庫(kù)；打好底層基礎(chǔ)框架，未來 CoDesign 會(huì)增加更多的功能，輻射更廣業(yè)務(wù)。我希望這些基礎(chǔ)面的建設(shè)，能帶來整個(gè)平臺(tái)一致性的用戶體驗(yàn)。
轉(zhuǎn)載：人人都是產(chǎn)品經(jīng)理
蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.hengshangtqd.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.hengshangtqd.cn