如何打造自動化平臺設(shè)計規(guī)范?

2 評論 8555 瀏覽 74 收藏 11 分鐘

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

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

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

規(guī)范的種類

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

如何打造平臺設(shè)計規(guī)范

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

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

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

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

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

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

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

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

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

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

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

針對以上三類用戶需求,設(shè)計規(guī)范需要提供什么功能來滿足他們的需求。

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

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

分類方式有多種:可以按照用戶角色進(jìn)行分類,每個用戶可以在自己的頁簽下選擇自己想要的,缺點是頁面要進(jìn)行多次的跳轉(zhuǎn),或是容易造成架構(gòu)臃腫,因為其中有一些元素是共同的;普遍的做法是按照內(nèi)容進(jìn)行分類,一般會分為設(shè)計原則、組件、場景案例、資源下載這幾類。

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

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

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

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

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

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

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

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

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

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

最后的最后

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

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

雖然一點都不智能化,但也算滿足了最低層面的協(xié)作需求。設(shè)計工具日新月異,未來會有越來越多的工具出現(xiàn),解決我們?nèi)粘m椖恐杏龅降膯栴},替代工作中一些瑣碎的重復(fù)性工作。要懷抱對新工具的探索、學(xué)習(xí)和接納的態(tài)度。

學(xué)不可以已。

 

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

題圖來自unsplash,基于CC0協(xié)議

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

    來自浙江 回復(fù)