中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

背景介紹

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

在產(chǎn)品對外服務(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)行了大幅度的升級；以及設(shè)計(jì)云產(chǎn)品生態(tài)的逐漸成熟與對生態(tài)品牌運(yùn)營的規(guī)劃，都對 CoDesign 的品牌與體驗(yàn)有著迫切的升級訴求。

一、闡明策略

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

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

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

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

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

三、最后，為了進(jìn)一步加強(qiáng)產(chǎn)品體驗(yàn)與競品的差異性，完善「推廣視覺」到「產(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)用。

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

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

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

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

其次在視覺上，我們基于 1.0 的問題，在 2.0 上明確了形，色，構(gòu)，質(zhì)，大小，間距，組件等規(guī)范用法，并對其進(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ì)中，可以針對已知問題，拉通團(tuán)隊(duì)其他成員，對整體方案中各職能團(tuán)隊(duì)的前置工作進(jìn)行初步規(guī)劃，有助于后續(xù)工作中團(tuán)隊(duì)成員工作流的無縫銜接?！?/p>

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

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

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

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

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

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

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

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

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

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

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

結(jié)合 CoDesign 首頁頁面結(jié)構(gòu)設(shè)計(jì)最終效果圖，你會發(fā)現(xiàn)首先視覺落點(diǎn)在前景白色內(nèi)容區(qū)的內(nèi)容卡片上，緊接著視覺動(dòng)線來到后景用戶高頻操作的新建操作，最后是左側(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)用，我們在品牌主色基礎(chǔ)上降低了色彩的飽和度，延展出一系列輔助色，提供了較為豐富的色彩運(yùn)用，同時(shí)為頁面帶來了更為輕盈，靈動(dòng)的視覺感受。最后再根據(jù)品牌聲量象限，指導(dǎo)不同品牌出點(diǎn)的顏色使用。

3.2 輔助圖形

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

3.3 品牌特征延展

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

CoDesign 圖標(biāo)

CoDesign 登錄頁

CoDesign 演示文件封面

CoDesign 空狀態(tài)

CoDesign 分享頁&加載

CoDesign 核心界面效果展示

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

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

4.1「一個(gè)」樣式

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

4.2「一種」框架

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

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

4.3「一套」視覺語言

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

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

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

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

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

在視覺、研發(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)系。

結(jié)語

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

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

相關(guān)鏈接：

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

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