如何打造自動(dòng)化平臺(tái)設(shè)計(jì)規(guī)范?

2 評(píng)論 8285 瀏覽 74 收藏 11 分鐘

這篇文章的內(nèi)容主要來(lái)自于上個(gè)月在uxpa大會(huì)上參加的一個(gè)騰訊的高級(jí)設(shè)計(jì)師謝奕老師的工作坊,主要內(nèi)容是打造自動(dòng)化平臺(tái)設(shè)計(jì)規(guī)范。

筆者在日常工作中接觸了許多企業(yè)后臺(tái)的設(shè)計(jì),在設(shè)計(jì)規(guī)范的制定和執(zhí)行層面遇到許多問(wèn)題。最主要的問(wèn)題就是沒(méi)有一份平臺(tái)級(jí)的設(shè)計(jì)規(guī)范,因此我所設(shè)計(jì)的子應(yīng)用的后臺(tái)和其他設(shè)計(jì)師設(shè)計(jì)的后臺(tái)存在許多不統(tǒng)一的地方。這次能夠近距離去了解和學(xué)習(xí)一個(gè)規(guī)范從0到60再到80的一個(gè)過(guò)程,以及應(yīng)該以怎么樣的一個(gè)思考方式去打造一份設(shè)計(jì)規(guī)范,非常幸運(yùn)。

在工作坊之后,我發(fā)現(xiàn)我現(xiàn)在所面臨的問(wèn)題在他們看來(lái)根本已經(jīng)不成其為問(wèn)題,并且深深地感受到危機(jī)感。

規(guī)范的種類(lèi)

開(kāi)篇明義。所謂規(guī)范,「不以規(guī)矩,不成方圓」。各行各業(yè)都有自己的規(guī)范,互聯(lián)網(wǎng)行業(yè)中的不同領(lǐng)域有不同的規(guī)范,如角色設(shè)計(jì)規(guī)范、品牌規(guī)范、圖表可視化規(guī)范、系統(tǒng)規(guī)范、平臺(tái)規(guī)范等。其中系統(tǒng)規(guī)范普適性最高,如谷歌和蘋(píng)果的系統(tǒng)規(guī)范;品牌規(guī)范適用性最低,只適用于自身的品牌應(yīng)用。這篇文章主要討論的是平臺(tái)級(jí)規(guī)范的制定。

如何打造平臺(tái)設(shè)計(jì)規(guī)范

做設(shè)計(jì)規(guī)范的時(shí)候容易陷入一個(gè)誤區(qū),那就是僅僅為了有一份規(guī)范而去做一份規(guī)范,照貓畫(huà)虎,沒(méi)有根據(jù)實(shí)際需求去制定一份適合自身團(tuán)隊(duì)的設(shè)計(jì)規(guī)范。這樣做出來(lái)的規(guī)范往往在實(shí)際應(yīng)用場(chǎng)景中會(huì)出現(xiàn)很多適用性的問(wèn)題,因?yàn)槊總€(gè)平臺(tái)的特性都是不一樣的。

謝老師提供了一個(gè)思路:把一份設(shè)計(jì)規(guī)范當(dāng)作一個(gè)產(chǎn)品來(lái)設(shè)計(jì)。按照用戶(hù)體驗(yàn)要素來(lái)分析和制作規(guī)范,來(lái)確保規(guī)范的質(zhì)量。

戰(zhàn)略層:明確用戶(hù)需求和產(chǎn)品目標(biāo)

這是第一步也是最重要的一步,同時(shí)也是很多設(shè)計(jì)師在制定設(shè)計(jì)規(guī)范時(shí)最容易忽略的一步:制定設(shè)計(jì)規(guī)范是為了解決什么問(wèn)題?誰(shuí)需要這份設(shè)計(jì)規(guī)范,他們的需求是什么?

設(shè)計(jì)規(guī)范的用戶(hù)主要有三類(lèi):設(shè)計(jì)師、產(chǎn)品經(jīng)理以及前端工程師。

設(shè)計(jì)師需要的設(shè)計(jì)規(guī)范可以快速?gòu)?fù)用,同時(shí)標(biāo)準(zhǔn)化設(shè)計(jì)團(tuán)隊(duì)的設(shè)計(jì),統(tǒng)一整個(gè)平臺(tái)的設(shè)計(jì)風(fēng)格及操作體驗(yàn)。解放生產(chǎn)力,讓自己有更多時(shí)間去思考用戶(hù)需求和業(yè)務(wù)目標(biāo)而不是死摳界面;

產(chǎn)品經(jīng)理需要的設(shè)計(jì)規(guī)范是可以快速搭建出一個(gè)生動(dòng)形象的需求原型,而不是每次都使用競(jìng)品的截圖。當(dāng)然,這個(gè)頁(yè)面最好是可以進(jìn)行交互操作,能直接生成前端界面更佳;

前端工程師需要的設(shè)計(jì)規(guī)范是一份詳細(xì)的樣式標(biāo)注,最好是可以直接復(fù)用代碼,不需要敲代碼就可以生成的話(huà)更佳。

綜合以上用戶(hù)需求,「設(shè)計(jì)規(guī)范」的產(chǎn)品目標(biāo)就是提升生產(chǎn)效率,將設(shè)計(jì)師和前端工程師從重復(fù)性勞動(dòng)中解放出來(lái),并最終取代設(shè)計(jì)師和前端工程師(其實(shí)我認(rèn)為最終更有可能被取代的是產(chǎn)品經(jīng)理,因?yàn)樵O(shè)計(jì)師和前端將有更多的時(shí)間去思考用戶(hù)和業(yè)務(wù)層面的問(wèn)題了)。

需要注意的是以上指出的三類(lèi)用戶(hù)只是一般情況,還有另外一些產(chǎn)品可能會(huì)有更多角色需要使用到設(shè)計(jì)規(guī)范。例如電商類(lèi)產(chǎn)品的產(chǎn)品團(tuán)隊(duì)中,需要使用到設(shè)計(jì)規(guī)范的除了以上三類(lèi)用戶(hù)外,還會(huì)有攝影師、運(yùn)營(yíng)專(zhuān)員等。

范圍層:確定用戶(hù)的主要需求,轉(zhuǎn)化為核心功能點(diǎn)

針對(duì)以上三類(lèi)用戶(hù)需求,設(shè)計(jì)規(guī)范需要提供什么功能來(lái)滿(mǎn)足他們的需求。

?結(jié)構(gòu)層:將產(chǎn)品需要呈現(xiàn)給用戶(hù)的功能點(diǎn)按照一定的模式和順序進(jìn)行組織

這一層面的設(shè)計(jì)將和設(shè)計(jì)規(guī)范最終呈現(xiàn)的界面布局以及導(dǎo)航體系強(qiáng)相關(guān)。因此進(jìn)行分類(lèi)和組織的形式將影響到用戶(hù)在使用設(shè)計(jì)規(guī)范時(shí)是否易用,用戶(hù)是否能夠在頁(yè)面中快速找到自己的目標(biāo),在頁(yè)面中是否會(huì)迷失。

分類(lèi)方式有多種:可以按照用戶(hù)角色進(jìn)行分類(lèi),每個(gè)用戶(hù)可以在自己的頁(yè)簽下選擇自己想要的,缺點(diǎn)是頁(yè)面要進(jìn)行多次的跳轉(zhuǎn),或是容易造成架構(gòu)臃腫,因?yàn)槠渲杏幸恍┰厥枪餐?;普遍的做法是按照?nèi)容進(jìn)行分類(lèi),一般會(huì)分為設(shè)計(jì)原則、組件、場(chǎng)景案例、資源下載這幾類(lèi)。

這里需要注意的問(wèn)題是結(jié)構(gòu)層的設(shè)計(jì)還需要根據(jù)具體的產(chǎn)品特點(diǎn)來(lái)進(jìn)行。還是拿電商類(lèi)產(chǎn)品來(lái)做一個(gè)例子,設(shè)計(jì)師、攝影師、運(yùn)營(yíng)專(zhuān)員等多種角色都會(huì)使用到「圖片」,因此「圖片」相關(guān)的規(guī)定面向的用戶(hù)多、細(xì)則多、要求也多。

如果按照普遍的做法,以?xún)?nèi)容進(jìn)行分類(lèi),容易造成組件中「圖片」相關(guān)的類(lèi)目過(guò)于臃腫,整個(gè)設(shè)計(jì)體系不平衡,而且每個(gè)用戶(hù)角色想要找到相關(guān)的內(nèi)容會(huì)比較困難。針對(duì)這種情況,可以考慮將圖片單獨(dú)作為一個(gè)分類(lèi),把和圖片相關(guān)的規(guī)范內(nèi)容都放在這個(gè)分類(lèi)下面,方便查找。

框架層:產(chǎn)品的界面、導(dǎo)航、內(nèi)容

  • 界面設(shè)計(jì):確定框架,“按鈕、輸入框、界面控件”的領(lǐng)域;
  • 導(dǎo)航設(shè)計(jì):呈現(xiàn)信息;
  • 信息設(shè)計(jì):呈現(xiàn)有效地信息溝通。

在信息設(shè)計(jì)上,最重要的是讓用戶(hù)可以一眼找到自己想要的目標(biāo),并且可以快速使用。在設(shè)計(jì)時(shí)可以參考簡(jiǎn)約至上中的交互設(shè)計(jì)四策略:刪除、隱藏、組織、轉(zhuǎn)移。簡(jiǎn)約、克制,突出頁(yè)面重點(diǎn)。(具體可以參考ant deaign,可以說(shuō)做的很好了)

表現(xiàn)層:重視索引、簡(jiǎn)潔專(zhuān)注、多樣化統(tǒng)一

  • 重視索引:關(guān)注用戶(hù)使用規(guī)范的主要路徑、快速定位;
  • 簡(jiǎn)潔專(zhuān)注:視覺(jué)設(shè)計(jì)上刪繁就簡(jiǎn),確保突出重點(diǎn)信息的表達(dá);
  • 多樣化統(tǒng)一:包括簡(jiǎn)單和復(fù)雜的統(tǒng)一、多樣化平臺(tái)中尋求統(tǒng)一、文案構(gòu)成具有一致性。

智能化設(shè)計(jì)規(guī)范

到這一步,設(shè)計(jì)規(guī)范已經(jīng)從0做到了60分,算作是一份基本可用的設(shè)計(jì)規(guī)范,但是距離「解放生產(chǎn)力」的產(chǎn)品目標(biāo)還遠(yuǎn)遠(yuǎn)不夠。

庸者止步于此,優(yōu)者保持探索。謝老師的設(shè)計(jì)團(tuán)隊(duì)在智能化平臺(tái)上進(jìn)行了很多探索,包括圖標(biāo)智能化、控件智能化、圖標(biāo)智能化、主題智能化等等。他們所做的就是不斷探索設(shè)計(jì)規(guī)律,從而進(jìn)行量化,最終寫(xiě)進(jìn)代碼做到自動(dòng)化。由此我不禁感嘆「一切可以被量化的都是可以被代替的」。

最后的最后

雖然參加這個(gè)工作坊使我的心靈和思維都受到了震蕩,但是實(shí)際工作中我們還是很難做到像大廠(chǎng)一樣做一份如此高水平的設(shè)計(jì)規(guī)范。但是我們還是可以通過(guò)一些其他的工具去彌補(bǔ)其中的不足。以下我將結(jié)合自身經(jīng)歷簡(jiǎn)單談一談我們這個(gè)普通的設(shè)計(jì)團(tuán)隊(duì)是如何進(jìn)行協(xié)作的。

  1. 使用sketch library建立控件庫(kù),同步給團(tuán)隊(duì)內(nèi)部每一個(gè)設(shè)計(jì)師
  2. 使用藍(lán)湖進(jìn)行設(shè)計(jì)歸檔,實(shí)時(shí)同步最新設(shè)計(jì)稿,同時(shí)邀請(qǐng)產(chǎn)品經(jīng)理、前端
  3. 使用iconfont管理圖標(biāo)庫(kù),和前端進(jìn)行協(xié)作

雖然一點(diǎn)都不智能化,但也算滿(mǎn)足了最低層面的協(xié)作需求。設(shè)計(jì)工具日新月異,未來(lái)會(huì)有越來(lái)越多的工具出現(xiàn),解決我們?nèi)粘m?xiàng)目中遇到的問(wèn)題,替代工作中一些瑣碎的重復(fù)性工作。要懷抱對(duì)新工具的探索、學(xué)習(xí)和接納的態(tài)度。

學(xué)不可以已。

 

本文由 @?janedaring 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來(lái)自u(píng)nsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 好棒,學(xué)習(xí)了

    來(lái)自浙江 回復(fù)