有幸在剛?cè)氩块T時(shí)就參與設(shè)計(jì)規(guī)范制定,前前后后大概花費(fèi)一個(gè)月時(shí)間。本篇文章結(jié)合親身參與的制定規(guī)范項(xiàng)目,圍繞:1,設(shè)計(jì)規(guī)范的重要性;2,制定規(guī)范的時(shí)機(jī);3,制定的過(guò)程和后續(xù)工作這幾個(gè)方面來(lái)總結(jié)和分享。
1,設(shè)計(jì)規(guī)范的重要性 設(shè)計(jì)總監(jiān)剛開(kāi)始召集設(shè)計(jì)師討論立項(xiàng)制作設(shè)計(jì)規(guī)范時(shí),就有設(shè)計(jì)師提出“規(guī)范只是公司給外部看的一種噱頭”,更像是體現(xiàn)一種公司視覺(jué)形象(VI)。其實(shí)互聯(lián)網(wǎng)公司的產(chǎn)品設(shè)計(jì)規(guī)范并非是僅僅用來(lái)宣傳形象的,更多用來(lái)使用、簡(jiǎn)化開(kāi)發(fā)過(guò)程、使多個(gè)產(chǎn)品擁有一致的體驗(yàn),是落到實(shí)處的東西。 在一個(gè)部門含有多個(gè)產(chǎn)品線的情況下,此時(shí)產(chǎn)品設(shè)計(jì)規(guī)范最能體現(xiàn)其作用。 統(tǒng)一產(chǎn)品用戶體驗(yàn) 由于負(fù)責(zé)各個(gè)產(chǎn)品線的產(chǎn)品經(jīng)理并非同一人,如果此時(shí)設(shè)計(jì)師們又是滲透到各個(gè)產(chǎn)品組中,那么產(chǎn)品之間的體驗(yàn)就根本讓用戶感覺(jué)不出是一個(gè)部門設(shè)計(jì)開(kāi)發(fā)出來(lái)的。 不同產(chǎn)品線的產(chǎn)品經(jīng)理交予設(shè)計(jì)師的線框圖就千差萬(wàn)別。比如實(shí)現(xiàn)一個(gè)篩選功能,有的采用下拉菜單,有的采用彈窗。相同的情景不同的交互方式,先拋開(kāi)各自的優(yōu)劣不談,產(chǎn)品之間本身就出現(xiàn)體驗(yàn)上的矛盾。產(chǎn)品經(jīng)理間缺少溝通,而產(chǎn)品團(tuán)隊(duì)基本會(huì)按照產(chǎn)品經(jīng)理的規(guī)劃設(shè)計(jì)產(chǎn)品,這就造成產(chǎn)品間存在體驗(yàn)差別。 不同產(chǎn)品線上的設(shè)計(jì)師設(shè)計(jì)風(fēng)格也存在差別。比如外觀尺寸設(shè)計(jì),配色選擇。當(dāng)沒(méi)有獨(dú)立的設(shè)計(jì)組時(shí),產(chǎn)品線上的設(shè)計(jì)師均各自為政,并直接對(duì)產(chǎn)品經(jīng)理負(fù)責(zé),更加深化了產(chǎn)品間的不協(xié)調(diào)。 產(chǎn)品設(shè)計(jì)者沒(méi)有錯(cuò),只是缺少了讓各個(gè)產(chǎn)品線之間協(xié)調(diào)統(tǒng)一的橋梁。通過(guò)設(shè)計(jì)師間的討論并協(xié)商各產(chǎn)品線上的產(chǎn)品經(jīng)理,制定一套規(guī)范,架起這座橋梁,讓產(chǎn)品設(shè)計(jì)者們有參考、有準(zhǔn)則。 方便設(shè)計(jì)開(kāi)發(fā)產(chǎn)品 在制定設(shè)計(jì)規(guī)范的過(guò)程中,會(huì)形成統(tǒng)一標(biāo)準(zhǔn)控件庫(kù)、頁(yè)面元素尺寸規(guī)定、配色方案規(guī)定和視覺(jué)風(fēng)格統(tǒng)一指導(dǎo)。設(shè)計(jì)者可以按照功能需求直接調(diào)用規(guī)范中的標(biāo)準(zhǔn)控件,按照信息結(jié)構(gòu)需求調(diào)用不同的元素尺寸進(jìn)行設(shè)計(jì)。很輕易便能輸出高保真原型圖,減輕了設(shè)計(jì)過(guò)程中對(duì)交互控件選擇和信息排版的思考負(fù)擔(dān)。 形成備案和文庫(kù) 如同技術(shù)文檔一樣,產(chǎn)品在設(shè)計(jì)方面也需要文檔與規(guī)范。由于業(yè)務(wù)需求的變化,設(shè)計(jì)規(guī)范不會(huì)一成不變。通過(guò)文檔備案記錄每次設(shè)計(jì)調(diào)整,調(diào)整的初衷和理論依據(jù),便于日后的回顧與總結(jié)。自己在剛?cè)氩块T時(shí)既沒(méi)有產(chǎn)品設(shè)計(jì)規(guī)范文檔,又沒(méi)有規(guī)范的技術(shù)框架文檔,在產(chǎn)品成長(zhǎng)與傳承中出現(xiàn)了中斷。形成簡(jiǎn)單易讀的文檔規(guī)范是一種對(duì)產(chǎn)品負(fù)責(zé)任的體現(xiàn)。
2,制定規(guī)范的時(shí)機(jī) 規(guī)范出現(xiàn)時(shí)機(jī)應(yīng)恰到好處,過(guò)早或過(guò)晚,均會(huì)為產(chǎn)品迭代帶來(lái)麻煩和阻礙。 在產(chǎn)品剛剛起步或僅迭代幾代版本后便想總結(jié)出一套規(guī)范為時(shí)尚早。此時(shí)產(chǎn)品僅僅擁有大體發(fā)展方向和基本功能,很多細(xì)分工功能不夠完善,產(chǎn)品整體不夠豐滿。此時(shí)制定出的規(guī)范并不能起到概括和統(tǒng)一作用,隨著產(chǎn)品不斷完善,大量功能需求會(huì)添加進(jìn)來(lái),而規(guī)范也要隨之大更改,增加各個(gè)部門修改調(diào)整負(fù)擔(dān)。如此大規(guī)模修改規(guī)范本身就失去了規(guī)范作為一個(gè)準(zhǔn)則的意義。 在產(chǎn)品已經(jīng)成熟之后再制定規(guī)范則為時(shí)較晚。此時(shí)每個(gè)產(chǎn)品線上的產(chǎn)品功能、結(jié)構(gòu)信息組織框架已經(jīng)定型,只有偶爾優(yōu)化提升體驗(yàn)細(xì)節(jié)修改和輔助類功能的添加。產(chǎn)品技術(shù)框架邏輯,尤其是前端技術(shù)框架已成型,且技術(shù)人員在開(kāi)發(fā)過(guò)程中對(duì)于產(chǎn)品界面設(shè)計(jì),交互方式也諳熟于心。如果迭代過(guò)程中產(chǎn)品間差別不大還好,產(chǎn)品差別很大時(shí),再出臺(tái)規(guī)范會(huì)增加很多技術(shù)人員調(diào)整的成本,拖延新版本上線時(shí)間。 如果部門同時(shí)存在成熟與剛起步的產(chǎn)品,按照成熟產(chǎn)品設(shè)計(jì)方向制定規(guī)范會(huì)更方便后續(xù)調(diào)整。即使規(guī)范出臺(tái)時(shí)間較晚,也要比部門內(nèi)部沒(méi)有統(tǒng)一規(guī)范使產(chǎn)品間不統(tǒng)一、不一致好得多。
3,制定設(shè)計(jì)規(guī)范過(guò)程 設(shè)計(jì)規(guī)范雖然只是簡(jiǎn)單幾頁(yè),但那是濃縮概括的結(jié)果,并非一蹴而就。 早期注意積累和歸納 設(shè)計(jì)師在設(shè)計(jì)初期產(chǎn)品效果圖時(shí)要注意實(shí)時(shí)歸納和總結(jié),原文件和導(dǎo)出文件進(jìn)行分類整理,對(duì)設(shè)計(jì)過(guò)程中使用的控件和模式及時(shí)歸納,同時(shí)簡(jiǎn)單記錄一些界面設(shè)計(jì)的初衷,有爭(zhēng)議的設(shè)計(jì)點(diǎn)等等。及時(shí)地總結(jié)對(duì)后期設(shè)計(jì)規(guī)范的制定打下良好基礎(chǔ),否則很容易忘記設(shè)計(jì)初衷,找不到文件或者設(shè)計(jì)負(fù)責(zé)人等等問(wèn)題。 總結(jié)歸納會(huì)議 準(zhǔn)備制作設(shè)計(jì)規(guī)范時(shí),需要召集各產(chǎn)品線上的設(shè)計(jì)師將設(shè)計(jì)結(jié)果進(jìn)行匯總和提煉。這樣的會(huì)議既是討論性會(huì)議又是決策性會(huì)議,所以耗時(shí)較長(zhǎng),但這又是要制定設(shè)計(jì)規(guī)范的必要會(huì)議。 可以預(yù)先將規(guī)范劃分成各個(gè)模塊,分步進(jìn)行會(huì)議討論和決議,并將不同模塊對(duì)應(yīng)到不同設(shè)計(jì)師來(lái)負(fù)責(zé)總結(jié)。當(dāng)遇到難以解決、產(chǎn)品間互相沖突的問(wèn)題要即時(shí)溝通相關(guān)產(chǎn)品負(fù)責(zé)人,當(dāng)涉及到一些產(chǎn)品需要重大樣式修改時(shí)更要即時(shí)溝通,設(shè)計(jì)組內(nèi)部意見(jiàn)統(tǒng)一的同時(shí)也要得到外部支持和認(rèn)可。 制作 在動(dòng)手制作之前,設(shè)計(jì)師間要對(duì)規(guī)范自身的展現(xiàn)形式和樣式達(dá)成一致。設(shè)計(jì)師按照會(huì)議討論決議出的結(jié)果制作自己負(fù)責(zé)模塊的規(guī)范。模塊分為:配色,圖標(biāo),字體,控件尺寸,控件交互等等 匯總和微調(diào) 將各部分規(guī)范匯總,再修改細(xì)節(jié)、微調(diào)排版后便可發(fā)布了。為了使規(guī)范更方便傳播和閱讀,個(gè)人建議將規(guī)范以網(wǎng)頁(yè)形式呈現(xiàn)更為合適。
4,規(guī)范標(biāo)準(zhǔn) 先看幾個(gè)優(yōu)秀的設(shè)計(jì)規(guī)范:微信Weui 與 Weui文檔;Ant Design; Material Design;IBM Design Language。 優(yōu)秀設(shè)計(jì)規(guī)范擁有明確層級(jí)和邏輯,便于其他組員查找相應(yīng)內(nèi)容,便于設(shè)計(jì)師日后對(duì)不同模塊進(jìn)行內(nèi)容完善。 優(yōu)秀設(shè)計(jì)規(guī)范是高度精簡(jiǎn)和概括的,將相同情境下的不同設(shè)計(jì)樣式統(tǒng)一成適應(yīng)性更強(qiáng)、更科學(xué)合理的設(shè)計(jì)樣式,減少很多所謂的特殊情況設(shè)計(jì)和繁瑣的重復(fù)尺寸標(biāo)注。參與設(shè)計(jì)開(kāi)發(fā)的組員可以結(jié)合情景直接調(diào)用適合的設(shè)計(jì)樣式。當(dāng)然在設(shè)計(jì)過(guò)程中會(huì)出現(xiàn)特殊情景,需要規(guī)范中不包含的特殊設(shè)計(jì)樣式,此時(shí)設(shè)計(jì)師要單獨(dú)給出設(shè)計(jì)效果圖。當(dāng)特殊情況越來(lái)越多就要考慮將這些情況整合,補(bǔ)充進(jìn)現(xiàn)有的規(guī)范中。 后續(xù)補(bǔ)充 規(guī)范制定出來(lái)并非一成不變,隨著業(yè)務(wù)發(fā)展、需求增加,規(guī)范要在原有內(nèi)容基礎(chǔ)上進(jìn)行需改、增刪。規(guī)范的弊端就是每次有重大更改,會(huì)造成很多產(chǎn)品線多個(gè)產(chǎn)品的相應(yīng)調(diào)整,甚至還會(huì)牽扯到結(jié)構(gòu)架構(gòu)的修改。慎重修改已制定出的規(guī)范,多采用小更改迭代的方式對(duì)規(guī)范進(jìn)行補(bǔ)充修改。 擁有設(shè)計(jì)規(guī)范并不代表團(tuán)隊(duì)不再需要設(shè)計(jì)師,也不代表團(tuán)隊(duì)中誰(shuí)都可以使用規(guī)范組件拼拼湊湊就輸出設(shè)計(jì)效果圖。產(chǎn)品設(shè)計(jì)含有感性的成分,需要設(shè)計(jì)師通過(guò)調(diào)研和認(rèn)知去設(shè)計(jì)、把握產(chǎn)品的體驗(yàn)。規(guī)范是工具、是標(biāo)尺,需要設(shè)計(jì)開(kāi)發(fā)人員的靈活運(yùn)用和不斷完善,適應(yīng)變化。規(guī)范擁有重要作用,但不可拿著規(guī)范把產(chǎn)品做死、做僵。