? ? ? 說到視覺設(shè)計(jì)規(guī)范，設(shè)計(jì)師們都不算陌生。例如一款A(yù)PP，我們?nèi)糁皇窃O(shè)計(jì)界面而沒有視覺設(shè)計(jì)規(guī)范，會(huì)直接影響到項(xiàng)目的視覺統(tǒng)一性，上線后一看，你的大腦會(huì)浮現(xiàn)四個(gè)字--“慘不忍睹”。

一.設(shè)計(jì)規(guī)范作用

首先，我們要明確設(shè)計(jì)規(guī)范的作用有哪些。

1.促進(jìn)多人協(xié)作，解決視覺不統(tǒng)一現(xiàn)象

? ? ? 一個(gè)項(xiàng)目中往往會(huì)有多名設(shè)計(jì)師共同參與，每位設(shè)計(jì)師都有各自的風(fēng)格，這樣容易造成視覺不統(tǒng)一，從而導(dǎo)致用戶體驗(yàn)不佳。例如項(xiàng)目中的一個(gè)高頻次按鈕，可能會(huì)出現(xiàn)圓角、高度、顏色、文字樣式、點(diǎn)擊效果等不同。即使一個(gè)項(xiàng)目只有一個(gè)設(shè)計(jì)師，面對(duì)幾十個(gè)頁面，也會(huì)不小心造成視覺的不統(tǒng)一。俗話說“力往一處使”，所以制作設(shè)計(jì)規(guī)范，設(shè)計(jì)師們的設(shè)計(jì)創(chuàng)作能達(dá)到視覺統(tǒng)一。

2.減少標(biāo)注時(shí)間，提高前端開發(fā)質(zhì)量

雖然現(xiàn)在很多設(shè)計(jì)師用了Sketch，用了一些插件，大大減少標(biāo)注時(shí)間甚至不用標(biāo)注，但仍有相當(dāng)一部分設(shè)計(jì)師還需要標(biāo)注。有了設(shè)計(jì)規(guī)范，設(shè)計(jì)師可以大大減少標(biāo)注頁面以及與前端工程師溝通的時(shí)間。同時(shí)，也會(huì)提高前端的開發(fā)質(zhì)量，例如同個(gè)模塊在不同頁面，有時(shí)前端會(huì)不小心忽視，從而造成視覺不統(tǒng)一。當(dāng)然在前端工作之前，需要與設(shè)計(jì)師們一起參與視覺規(guī)范的評(píng)審，可能需要進(jìn)一步完善設(shè)計(jì)規(guī)范，從而運(yùn)用到開發(fā)過程中。

二.設(shè)計(jì)規(guī)范內(nèi)容

設(shè)計(jì)規(guī)范內(nèi)容主要有：標(biāo)準(zhǔn)色、標(biāo)準(zhǔn)字、圖標(biāo)、控件（頂部導(dǎo)航、底部導(dǎo)航、二級(jí)導(dǎo)航、標(biāo)題欄、列表、輸入框、按鈕、彈窗、toast、加載、刷新、空白頁等）。

具體案例可以看我收集的：huaban.com/boards/25014802/

三.適用人群

設(shè)計(jì)規(guī)范完成后需要發(fā)送以下人員：設(shè)計(jì)師（交互+視覺）、前端工程師、產(chǎn)品經(jīng)理、運(yùn)營(yíng)（例如banner的一些規(guī)范）。

四.規(guī)范何時(shí)做

首先，設(shè)計(jì)規(guī)范一般都是先完成幾個(gè)主要頁面后才制作的。我們不可能一開始就做，畢竟對(duì)頁面沒有一定的了解；也不可能頁面完成后再做，因?yàn)閯?chuàng)作過程中需要設(shè)計(jì)規(guī)范。

1.設(shè)計(jì)師只有一名：這種情況，你第一版可以做的相對(duì)簡(jiǎn)單點(diǎn)，畢竟一個(gè)人，例如標(biāo)準(zhǔn)色和標(biāo)準(zhǔn)字可以做一些記錄，相同控件在不同頁面要確保相同。

2.設(shè)計(jì)師兩名以上：這種情況，需要其中一名經(jīng)驗(yàn)豐富的設(shè)計(jì)師制作較為詳細(xì)的視覺設(shè)計(jì)規(guī)范，根據(jù)規(guī)范，設(shè)計(jì)師們開展工作。

最后設(shè)計(jì)創(chuàng)作完成，再整理一份全面的設(shè)計(jì)規(guī)范。

如果你產(chǎn)品在1.0階段，那么設(shè)計(jì)規(guī)范很有可能不是那么完善。但1.0升級(jí)2.0階段，因?yàn)轫撁鏁?huì)全面修改，設(shè)計(jì)規(guī)范的作用會(huì)大大增強(qiáng)，同時(shí)也有了規(guī)范制定的經(jīng)驗(yàn)，將更加容易制定，更加全面。

五.設(shè)計(jì)規(guī)范不可變動(dòng)嗎

設(shè)計(jì)規(guī)范的正面作用很明顯，但另一面，一不小心，設(shè)計(jì)師的思維會(huì)受到限制。例如在現(xiàn)有的規(guī)范下，隨著業(yè)務(wù)發(fā)展和需求增加，發(fā)現(xiàn)未必適合，那么就需要修改、增減規(guī)范。這樣一來，新頁面勢(shì)必與現(xiàn)有規(guī)范不一致。有些設(shè)計(jì)師會(huì)陷入兩難境地。怎么辦？要明確的一點(diǎn)，設(shè)計(jì)規(guī)范是可以隨時(shí)更改的。

說到這里，就要提一下，何為優(yōu)秀的設(shè)計(jì)規(guī)范：我認(rèn)為規(guī)范在各種功能需求頁面中都能適用才是優(yōu)秀的。功能有先后順序，誰也不能確保規(guī)范都能適用，所以不斷修改調(diào)整規(guī)范是很有必要的。作為設(shè)計(jì)師，千萬不要一根筋，需要靈活應(yīng)用。

誰能變動(dòng)設(shè)計(jì)規(guī)范呢? 常見的是設(shè)計(jì)師和前端工程師。設(shè)計(jì)師可以理解，而前端在開發(fā)過程中，可能會(huì)出現(xiàn)一些問題，需要調(diào)整設(shè)計(jì)規(guī)范。

有一些優(yōu)秀的設(shè)計(jì)規(guī)范已經(jīng)經(jīng)過多年的積累、調(diào)整，逐漸形成了一種設(shè)計(jì)語言，例如微信weui:weui.io/，Ant Design:ant.design/index-cn,還有谷歌安卓的Material Design,微軟的Fluent Design等等。

六.結(jié)語

有人會(huì)說，做好了設(shè)計(jì)規(guī)范，甚至形成了設(shè)計(jì)語言，可能不需要設(shè)計(jì)師。其實(shí)，這是不對(duì)的。設(shè)計(jì)規(guī)范只是一個(gè)工具，協(xié)助我們完成設(shè)計(jì)創(chuàng)作。同時(shí)，它也不是一成不變的，再完美的設(shè)計(jì)規(guī)范，也會(huì)有修改。業(yè)務(wù)不斷發(fā)展，需求不斷增加，未來是不可預(yù)料的。我們切勿草率對(duì)待設(shè)計(jì)規(guī)范，它是幫助產(chǎn)品變得更好的工具之一。