敏捷設(shè)計(jì)，高效協(xié)同，凸顯設(shè)計(jì)端云協(xié)同價(jià)值

DevUI是一支兼具設(shè)計(jì)視角和工程視角的團(tuán)隊(duì)，服務(wù)于華為云DevCloud平臺和華為內(nèi)部數(shù)個(gè)中后臺系統(tǒng)，服務(wù)于設(shè)計(jì)師和前端工程師。

官方網(wǎng)站：devui.design

Ng組件庫：ng-devui（歡迎Star）

引言

本文源自于DevUI團(tuán)隊(duì)內(nèi)部敏捷設(shè)計(jì)、開發(fā)/設(shè)計(jì)協(xié)同的實(shí)踐。

許多團(tuán)隊(duì)選擇使用輕量級的設(shè)計(jì)軟件Sketch來快速繪制一些原型和設(shè)計(jì)稿，由此生成的標(biāo)注設(shè)計(jì)稿，利于設(shè)計(jì)與開發(fā)的溝通。但設(shè)計(jì)價(jià)值不僅僅于此。

長久以來，設(shè)計(jì)圈與研發(fā)圈各自為戰(zhàn)，在規(guī)范化、規(guī)模化和一致性方面往往花費(fèi)大量的溝通成本，導(dǎo)致了一系列的效率問題。本文會針對這些問題，從設(shè)計(jì)價(jià)值、設(shè)計(jì)效率問題、如何提效三個(gè)方面去講DevUI團(tuán)隊(duì)實(shí)踐，最后做一些簡單呈現(xiàn)。

不論你是設(shè)計(jì)師、產(chǎn)品經(jīng)理、開發(fā)工程師還是團(tuán)隊(duì)Leader，閱讀本文，相信你都會有所收獲。

01 設(shè)計(jì)價(jià)值

設(shè)計(jì)價(jià)值趨向于賦能和牽引。

在現(xiàn)代互聯(lián)網(wǎng)產(chǎn)品競爭中，功能同質(zhì)化越發(fā)嚴(yán)重，細(xì)節(jié)決定成敗，所以設(shè)計(jì)的作用越發(fā)顯得至關(guān)重要。

設(shè)計(jì)價(jià)值逐漸從支撐轉(zhuǎn)移到賦能，參與到產(chǎn)品的討論中。

許多企業(yè)面臨著相似的問題：產(chǎn)品體系龐大、持續(xù)擴(kuò)充，人員與角色不斷擴(kuò)充，設(shè)計(jì)跟不上產(chǎn)品演進(jìn)速度。因此，如果設(shè)計(jì)師價(jià)值僅僅是支撐，已經(jīng)是無法跟上現(xiàn)代化產(chǎn)品研發(fā)節(jié)奏，形成一個(gè)瓶頸，并且產(chǎn)品比拼中無法獲取優(yōu)勢。

02 設(shè)計(jì)所面臨效率困境

當(dāng)產(chǎn)品規(guī)模化時(shí)，設(shè)計(jì)資產(chǎn)繁重

華為云應(yīng)用研發(fā)管理平臺包括DevCloud、PaaS、云龍等很多產(chǎn)品線，上百個(gè)微服務(wù)。幾十名設(shè)計(jì)師，每天都在產(chǎn)出大量的設(shè)計(jì)資產(chǎn)，包括產(chǎn)品、組件、圖標(biāo)的設(shè)計(jì)等，同時(shí)不同設(shè)計(jì)資產(chǎn)有大量的版本。日積月累之下，要管理這么多資產(chǎn)，是一件十分令人頭疼的事情。

讓我們設(shè)想一個(gè)場景，設(shè)計(jì)師小A在原有的稿上不斷修改，演進(jìn)了10個(gè)版本之后，跟第一版有著天壤之別。此時(shí)，領(lǐng)導(dǎo)或產(chǎn)品經(jīng)理PD又覺得第一稿比較好，但設(shè)計(jì)稿不像代碼，還可以基于github進(jìn)行分支管理，怎么辦？設(shè)計(jì)師是不是要瘋掉。

產(chǎn)品、規(guī)范、組件等設(shè)計(jì)同步困難

隨著公司產(chǎn)品面不斷擴(kuò)大，產(chǎn)品功能增多，團(tuán)隊(duì)成員增長，角色增多，大家的協(xié)同是低效的。因?yàn)椴煌慕巧幸惶鬃约旱墓ぞ吆屠斫夥绞健．?dāng)然產(chǎn)品從0到1的過程中，大家合作還是比較愉快的。

那么問題就是產(chǎn)品不總是從0到1，而是在原有的功能新增、改變、替換等等，這會導(dǎo)致團(tuán)隊(duì)的各個(gè)角色很難在積累資產(chǎn)的管理和信息同步方面達(dá)成一致。

另外因?yàn)閳F(tuán)隊(duì)之間存在地域隔閡，時(shí)間隔閡，目標(biāo)隔閡，導(dǎo)致很多人不想同步老的資產(chǎn)。隨著時(shí)間的流逝，就會導(dǎo)致和加劇信息不對稱，進(jìn)而導(dǎo)致溝通障礙。

這個(gè)問題在設(shè)計(jì)與開發(fā)團(tuán)隊(duì)之間尤為突出。

以DevUI的視覺按鈕為例，組件庫最初的版本，按鈕是圓角，顏色是綠色。

在18年的時(shí)候，我們按鈕圓角弧度變小，顏色也由紫色變成藍(lán)色，在未來，組件的視覺還會發(fā)生變化。如下圖所示：

如果我們的設(shè)計(jì)規(guī)則變化，設(shè)計(jì)師要花不少的時(shí)間精力去畫稿，校對，這個(gè)工作量很大但設(shè)計(jì)價(jià)值不高，卻又不得不做，即便花了很多力氣做，可能還是有一些不夠精確的地方。

視覺總會跟隨時(shí)代進(jìn)步不斷改進(jìn)，以滿足用戶需要。

冗繁、重復(fù)的設(shè)計(jì)工作導(dǎo)致產(chǎn)品創(chuàng)新乏力

互聯(lián)網(wǎng)時(shí)代，產(chǎn)品百花齊放，往往成功的只有老大。老大吃肉，后面的都只能喝湯。快速更新是產(chǎn)品研發(fā)過程中的一個(gè)顯著特征和主要優(yōu)勢。因此以整體流程的效率提升就變得至關(guān)重要。

基于DevOps理念的深刻實(shí)踐，在產(chǎn)品、大前端、后端開發(fā)、監(jiān)控、運(yùn)維等不同的階段實(shí)施流水線化、工具化，整個(gè)流程的效率得到了提升。

研發(fā)效率的提升伴隨可繼承資產(chǎn)的快速積累，極大地豐富了產(chǎn)品的功能。功能的豐富，導(dǎo)致業(yè)務(wù)功能很難具備足夠的競爭力。

聚焦于功能層面的核心競爭力往往擴(kuò)展性較差，帶來的問題就是設(shè)計(jì)標(biāo)準(zhǔn)不統(tǒng)一，工作流冗繁，最終導(dǎo)致體驗(yàn)差，質(zhì)量問題嚴(yán)重。

設(shè)計(jì)稿版本化問題

我們總是在不斷做選擇，比較，然后選擇最優(yōu)的。所以對資產(chǎn)進(jìn)行版本化是十分必要的。版本化在文檔和代碼類的資產(chǎn)非常常見。那為什么設(shè)計(jì)不可以？

這些都是我們正在面臨的問題，下面做一個(gè)簡單的小結(jié)：

如何面對產(chǎn)品規(guī)模增長的設(shè)計(jì)資產(chǎn)管理問題？

如何解決人員增長、角色增多，產(chǎn)品、設(shè)計(jì)、工程師等角色協(xié)同問題？

如何解放設(shè)計(jì)生產(chǎn)力，讓設(shè)計(jì)脫離重復(fù)工作，聚焦設(shè)計(jì)對產(chǎn)品賦能？

03 怎么提效

針對上一節(jié)提到的問題，我們聊一聊DevUI團(tuán)隊(duì)是如何嘗試通過技術(shù)的手段去解決的。

代碼維護(hù)設(shè)計(jì)資產(chǎn)

設(shè)計(jì)與開發(fā)屬于不同領(lǐng)域，我們所期待的協(xié)作與溝通方式是明確而不存在歧義的，從而達(dá)到提效的目的。

我們先梳理下平常設(shè)計(jì)與開發(fā)溝通內(nèi)容，無外乎針對設(shè)計(jì)稿開發(fā)工程師經(jīng)常向設(shè)計(jì)師確認(rèn)以下幾點(diǎn)。

屬性

顏色值

字體大小

用什么字體

圓角值

邊框?qū)挾?/p>

陰影值

間距

...

我們經(jīng)常聽到的溝通內(nèi)容是，開發(fā)問設(shè)計(jì)師，說我們規(guī)范是A，設(shè)計(jì)稿怎么是B呢，此時(shí)設(shè)計(jì)師說，細(xì)節(jié)方面沒有特別注意，所以設(shè)計(jì)稿100%還原其實(shí)是做不到的。

所以，進(jìn)一步思考，如果設(shè)計(jì)稿能抽象成各種各樣的基本數(shù)據(jù)，用數(shù)據(jù)來約束設(shè)計(jì)，用數(shù)據(jù)來約束開發(fā)，那是不是就可以解決這樣的問題。開發(fā)天然對數(shù)據(jù)敏感，而設(shè)計(jì)師對這些設(shè)計(jì)數(shù)據(jù)也不陌生。

所以設(shè)計(jì)協(xié)同，本質(zhì)上是數(shù)據(jù)協(xié)同。而JSON數(shù)據(jù)格式為我們提供了數(shù)據(jù)協(xié)同的橋梁。

產(chǎn)品開發(fā)里有前端和后端的分離，前端和后端之間的交互語言是json數(shù)據(jù)，json數(shù)據(jù)是能夠被前端和后端都易懂的格式，這種約定俗成的格式提高了前后端溝通的效率，只要一開始把交互數(shù)據(jù)的格式給定義出來。

在監(jiān)控產(chǎn)品中有一種錄屏功能，它的原理是，把用戶的操作和DOM的變化轉(zhuǎn)化成json數(shù)據(jù)，傳到后臺，再通過這些數(shù)據(jù)呈現(xiàn)出用戶的行為。

就設(shè)計(jì)協(xié)同而言，設(shè)計(jì)所使用的Sketch，最基本的就是幾種圖形，Sketch通過API封裝把圖形轉(zhuǎn)化成json數(shù)據(jù)格式，傳遞到上層，那js就完全可以處理這些json數(shù)據(jù)。

Sketch是設(shè)計(jì)師鐘愛的設(shè)計(jì)軟件，是因?yàn)槠浜唵我讓W(xué)，并且能夠高效進(jìn)行設(shè)計(jì)。Sketch在49版本開放了底層API。

通過這些API，設(shè)計(jì)稿最終轉(zhuǎn)化成了JSON數(shù)據(jù)。有了JSON數(shù)據(jù)，我們就可以為設(shè)計(jì)師、開發(fā)者、產(chǎn)品經(jīng)理等角色更好的協(xié)同做一些工作。如下圖所示：

這里列舉一個(gè)按鈕例子，我們先抽象出我們關(guān)注的一些屬性：

export const primaryButtonInfo = {

component: {

title: 'DevUI按鈕/Primary按鈕',

},

textInfo: {

title: '確定',

style: {

color: '#ffffff',

fontFamily:'PingFang SC',

fontSize: 14,

height:20,

lineHight: 20,

}

},

lineInfo: {

borderWidth:1,

borderRadius:1,

borderColor: 'transparent',

backgroundColor: '#5170ff',

},

commonInfo: {

flexDirection:'row',

justifyContent: 'center',

alignItems: 'center',

verticalAlign: 'middle',

paddingTop:5,

paddingBottom:5,

paddingLeft:20,

paddingRight:20,

width: 100,

}

};

最后我們再總結(jié)下帶來的價(jià)值。代碼維護(hù)設(shè)計(jì)資產(chǎn)帶來兩大價(jià)值：

價(jià)值之一：減少設(shè)計(jì)重復(fù)勞動(dòng)，極大提高設(shè)計(jì)效率，給設(shè)計(jì)創(chuàng)新騰出時(shí)間進(jìn)行創(chuàng)新設(shè)計(jì)，甚至開發(fā)人員都可以對設(shè)計(jì)稿進(jìn)行維護(hù)；

價(jià)值之二：代碼所維護(hù)的設(shè)計(jì)資產(chǎn)是精確的，避免前端開發(fā)不斷指引設(shè)計(jì)稿間距、邊框、顏色跟規(guī)范不一致。

當(dāng)交互設(shè)計(jì)稿設(shè)計(jì)好之后，如果后續(xù)在視覺方面需要就改，我們不希望還要針對性的去調(diào)整設(shè)計(jì)稿。而是修改數(shù)據(jù)就可以批量完成，如下圖所示：

設(shè)計(jì)資產(chǎn)版本化，選擇最優(yōu)版本

對于同一個(gè)Feature或者組件的設(shè)計(jì)，幾易其稿是經(jīng)常的事情，版本化管理是必然的。先看看DevUI對設(shè)計(jì)稿版本化歷程。

比較條目/方法

Espace

上傳到項(xiàng)目管理附件&文檔

上傳DevUI文檔

云狐 + DevUI文檔

設(shè)計(jì)稿文件

混亂

分散化

集中化

自由集中化

設(shè)計(jì)稿查看

需解壓查看

下載，解壓

在線預(yù)覽

在線預(yù)覽

設(shè)計(jì)稿版本化

無

無

弱

強(qiáng)

設(shè)計(jì)稿查找

困難

一般

中等

方便

設(shè)計(jì)稿協(xié)同

無

無

無

強(qiáng)

設(shè)計(jì)協(xié)同創(chuàng)新

協(xié)同創(chuàng)新，本質(zhì)上還是在于人與人如何快速溝通，在火花碰撞之后形成統(tǒng)一成熟的觀點(diǎn)。傳統(tǒng)的溝通方式是，產(chǎn)品與設(shè)計(jì)通過面對面或者電話溝通，溝通完設(shè)計(jì)進(jìn)行幾天時(shí)間設(shè)計(jì)，再與產(chǎn)品經(jīng)理進(jìn)行溝通，再優(yōu)化，這樣不斷重復(fù)，最終得到確定的設(shè)計(jì)稿。這樣的方式還有一個(gè)缺點(diǎn)就是，整個(gè)溝通過程是沒有被沉淀的。

我們在實(shí)踐中由于產(chǎn)品規(guī)模特別大，設(shè)計(jì)師人員跟產(chǎn)品人員數(shù)量不匹配，導(dǎo)致這種方式特別低效。我們嘗試一種用線上協(xié)同的方式。

1、產(chǎn)品經(jīng)理與設(shè)計(jì)師初步溝通之后，設(shè)計(jì)師對其中一個(gè)頁面進(jìn)行設(shè)計(jì)或者是初步的想法，完了之后就通過sketch插件上傳到DevUI文檔。

2、產(chǎn)品經(jīng)理或者是工程師針對設(shè)計(jì)稿關(guān)鍵點(diǎn)進(jìn)行評論，反饋給設(shè)計(jì)師，甚至可以對設(shè)計(jì)稿每一個(gè)區(qū)塊進(jìn)行評論。

3、設(shè)計(jì)師得到反饋之后，做一些探討和回復(fù)，針對性的進(jìn)行修改，再上傳，DevUI文檔會對這些設(shè)計(jì)稿進(jìn)行版本化，

設(shè)計(jì)師和產(chǎn)品經(jīng)理不用擔(dān)心設(shè)計(jì)稿會被覆蓋。這種整個(gè)協(xié)同過程都被記錄下來了。

04 產(chǎn)品演示

上面所有講的理念以及相關(guān)技術(shù)，無論是協(xié)同，還是規(guī)范，還是創(chuàng)新碰撞，最終是通過DevUI文檔去承載。在文檔中，不同的角色都可以通過搜索、關(guān)注等等方式獲取想要的數(shù)據(jù)以及資源。

我們會有一個(gè)畫板分類以及畫板列表，用于存放不同項(xiàng)目的設(shè)計(jì)稿。

在設(shè)計(jì)師的sketch端側(cè)，設(shè)計(jì)師可以通過插件進(jìn)行畫稿上傳。

那在設(shè)計(jì)稿標(biāo)注里，不同的決策針對設(shè)計(jì)稿的每一層進(jìn)行討論、開發(fā)，同時(shí)設(shè)計(jì)稿還有版本的概念，像git一樣，每次提交都會有一個(gè)變更歷史，以提供給產(chǎn)品和工程進(jìn)行參考。

當(dāng)然，我所展示出來的功能都是這套理念的冰山一角，在業(yè)界是有一套DesignOps的理念，這套理念中，包括角色定義、如何協(xié)同、工具提效、設(shè)計(jì)目標(biāo)牽引等等，在提效這條道路上，我們也會再接再厲，繼續(xù)深挖，讓不同角色有更多的協(xié)同創(chuàng)造力，跨界創(chuàng)造力。

也歡迎大家一起探討！

總結(jié)

科技產(chǎn)品競爭日趨激烈，設(shè)計(jì)的牽引價(jià)值凸顯。

認(rèn)識到設(shè)計(jì)的價(jià)值，DevUI團(tuán)隊(duì)從一年前就開始探索如何提高設(shè)計(jì)效率，設(shè)計(jì)師與工程師、產(chǎn)品團(tuán)隊(duì)的互動(dòng)協(xié)同來進(jìn)行產(chǎn)品創(chuàng)新，以及設(shè)計(jì)如何敏捷迭代也進(jìn)行了探索和實(shí)踐。

最后通過DevUI文檔去沉淀這些設(shè)計(jì)資產(chǎn)以及設(shè)計(jì)迸發(fā)的靈感和溝通。

加入我們

我們是DevUI團(tuán)隊(duì)，歡迎來這里和我們一起打造優(yōu)雅高效的人機(jī)設(shè)計(jì)/研發(fā)體系。招聘郵箱：muyang2@huawei.com。

文/DevUI Leozhou

往期文章推薦

《現(xiàn)代富文本編輯器Quill的模塊化機(jī)制》

JSON API

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。