2022-4-24 周周
設(shè)計(jì)規(guī)范是指對(duì)設(shè)計(jì)的具體技術(shù)要求，是設(shè)計(jì)工作的指導(dǎo)規(guī)則。一般包括總體目標(biāo)的技術(shù)描述、功能的技術(shù)描述、技術(shù)指標(biāo)的技術(shù)描述,以及限制條件的技術(shù)描述等。
Design System 最開(kāi)始是 Guide 演化而來(lái)，Guide 是一套可指導(dǎo)、可延續(xù)、可擴(kuò)展、可統(tǒng)一的、可區(qū)分的視覺(jué)指引手冊(cè)，指導(dǎo)相關(guān)設(shè)計(jì)結(jié)構(gòu)完成統(tǒng)一性與對(duì)外區(qū)分性。具象層，它是一種設(shè)計(jì)方法；抽象層，它是一種思考模型。
設(shè)計(jì)規(guī)范一般會(huì)具體到公司級(jí)別、某一類(lèi)產(chǎn)品線、某個(gè)產(chǎn)品等。今天主要講具體某個(gè)產(chǎn)品的設(shè)計(jì)規(guī)范，主要是為該產(chǎn)品制定統(tǒng)一的用戶體驗(yàn)、品牌、視覺(jué)等方面的規(guī)范，當(dāng)然是在滿足以上公司級(jí)別和某一類(lèi)產(chǎn)品線層次的設(shè)計(jì)規(guī)范的基礎(chǔ)上。
設(shè)計(jì)規(guī)范由設(shè)計(jì)原則、設(shè)計(jì)語(yǔ)言和組件庫(kù)構(gòu)成，在設(shè)計(jì)原則的指導(dǎo)下使用設(shè)計(jì)語(yǔ)言和組件庫(kù)創(chuàng)建體驗(yàn)一致的用戶界面。
設(shè)計(jì)原則是指：整個(gè)設(shè)計(jì)體系所要遵循的全局原則，是為我們?cè)O(shè)計(jì)提供方向指導(dǎo)的。
設(shè)計(jì)語(yǔ)言：是指設(shè)計(jì)所包含的語(yǔ)言體系。具體包含了：色彩、字體、圖標(biāo)、布局等。
組件庫(kù)：相當(dāng)于積木玩具的一個(gè)個(gè)積木，每個(gè)組件就是一塊積木，通過(guò)組件的拼搭可以迅速搭建出一個(gè)個(gè)頁(yè)面。下面我會(huì)具體說(shuō)明組件庫(kù)。組件庫(kù)具體包括：按鈕、導(dǎo)航、表單、數(shù)據(jù)等等。
B端產(chǎn)品和C端產(chǎn)品制定設(shè)計(jì)規(guī)范差別還是蠻大的，最主要的差異大致是：
C端產(chǎn)品的設(shè)計(jì)規(guī)范：目標(biāo)幾乎都是為了更好的打磨用戶體驗(yàn)的一致性和標(biāo)準(zhǔn)化；
B端產(chǎn)品設(shè)計(jì)規(guī)范：由于用戶體驗(yàn)更復(fù)雜，學(xué)習(xí)成本更高，所以它的目標(biāo)側(cè)重點(diǎn)是：除了布局的不同外， 相同業(yè)務(wù)場(chǎng)景下，相同產(chǎn)品功能需要有一致的，標(biāo)準(zhǔn)化的體驗(yàn)，降低學(xué)習(xí)成本，提高工作效率，即統(tǒng)一體驗(yàn)。
創(chuàng)建原型時(shí)可直接調(diào)用組件庫(kù)，能搭建出高保真的原型。
與設(shè)計(jì)師和前端溝通更加順暢，小的修改可以直接和開(kāi)發(fā)溝通不需要通過(guò)設(shè)計(jì)師出圖，極大增加了前期的節(jié)奏，提升溝通效率。
對(duì)于只有一個(gè)設(shè)計(jì)師的項(xiàng)目：可以讓那個(gè)設(shè)計(jì)更加規(guī)范，有些簡(jiǎn)單功能迭代可以直接個(gè)研發(fā)溝通，不用再單獨(dú)出圖，減少重復(fù)性的工作。
對(duì)于同一個(gè)項(xiàng)目由多個(gè)設(shè)計(jì)師共同協(xié)作時(shí)：可保證設(shè)計(jì)各方面包含體驗(yàn)、設(shè)計(jì)、交互等等的統(tǒng)一性。減少設(shè)計(jì)成本，提升設(shè)計(jì)及溝通效率。
對(duì)于接手新項(xiàng)目，能盡快的了解產(chǎn)品，快速入手。
對(duì)于開(kāi)發(fā)完成驗(yàn)收走查，有了前期的規(guī)范及比較詳細(xì)的設(shè)計(jì)尺寸，開(kāi)發(fā)的設(shè)計(jì)還原度會(huì)更高，減少重復(fù)及沒(méi)必要的設(shè)計(jì)走查。
開(kāi)發(fā)可以按照設(shè)計(jì)規(guī)范建立好公共組件庫(kù)，極大的提升開(kāi)發(fā)效率。
可復(fù)用的東西確定了下來(lái)不會(huì)頻繁改動(dòng)，設(shè)計(jì)走查的問(wèn)題也會(huì)逐漸減少。
對(duì)于模棱兩可的交互可以有地方看交互樣式了，不需要再詢問(wèn)設(shè)計(jì)師。有更多的時(shí)間專注于測(cè)試功能上的問(wèn)題了。
通用的組件前期測(cè)試后了以后，后續(xù)就不需要重復(fù)測(cè)試，極大的提升工作效率，避免重復(fù)工作。
前期制定及評(píng)審設(shè)計(jì)規(guī)范以后，有一套筆記明確的規(guī)范，可減少各個(gè)職位方面的溝通成本，提高溝通效率。
目前市面上有很多多的第三方設(shè)計(jì)規(guī)范，比如：antdesign，element，那有人就會(huì)問(wèn)有必要自己重復(fù)造輪子做一遍嗎？
我覺(jué)得是非常有必要的，為什么呢？
1、每個(gè)產(chǎn)品有各自獨(dú)有的品牌調(diào)性，如果都用第三方 的設(shè)計(jì)規(guī)范，那同質(zhì)化會(huì)很?chē)?yán)重，很難做到差異化，也就很難在競(jìng)爭(zhēng)中脫穎而出。
2、 世上本沒(méi)有萬(wàn)能的設(shè)計(jì)規(guī)范，那些設(shè)計(jì)規(guī)范的組件并不能100%滿足我們產(chǎn)品的需求。另外一方面使用封裝好的第三方設(shè)計(jì)規(guī)范，在此基礎(chǔ)上進(jìn)行修改，效率很低，適配的復(fù)雜度和重新開(kāi)發(fā)相差無(wú)幾。
3、第三方的的成熟的組件庫(kù)，我認(rèn)為應(yīng)該把它當(dāng)成模式，在他們的基礎(chǔ)上去做自己的設(shè)計(jì)規(guī)范。
個(gè)人工作中總結(jié)出兩個(gè)比較建議的規(guī)范建立時(shí)間點(diǎn)，探索期和成長(zhǎng)期。
產(chǎn)品在導(dǎo)入階段，產(chǎn)品還在處于極大變動(dòng)的時(shí)候，這個(gè)時(shí)候做設(shè)計(jì)規(guī)范，其中就蘊(yùn)含可極大的風(fēng)險(xiǎn)。但是也不是不做規(guī)范，這階段規(guī)范主要涉及到色彩，字體，間距，布局，柵格等通用設(shè)計(jì)原則以及常用業(yè)務(wù)組件的定制。此階段搭建的規(guī)范具備高效性以及靈活性的特點(diǎn)。
不適合搭建特殊的業(yè)務(wù)組件，比如：當(dāng)領(lǐng)導(dǎo)想要突然調(diào)轉(zhuǎn)方向也不會(huì)很慌，改動(dòng)較小就可以完成整體的規(guī)范轉(zhuǎn)向）此時(shí)搭建規(guī)范組件庫(kù)需要考慮到預(yù)留后續(xù)更改的空間。
當(dāng)產(chǎn)品進(jìn)入成長(zhǎng)期處于較為穩(wěn)定的版本，整個(gè)團(tuán)隊(duì)對(duì)業(yè)務(wù)的理解也都很熟悉了，這個(gè)適合創(chuàng)建符合業(yè)務(wù)場(chǎng)景的組件庫(kù)，有了前期的積累這個(gè)組件庫(kù)會(huì)更加符合產(chǎn)品及業(yè)務(wù)邏輯。
在制定規(guī)范前，設(shè)計(jì)師需要明確產(chǎn)品中主要有哪幾種分類(lèi)，將最基礎(chǔ)的分類(lèi)定義好方便后續(xù)針對(duì)分類(lèi)內(nèi)容進(jìn)行整理。B端產(chǎn)品與C端產(chǎn)品既有共同性也有著很大的差異化，可以借鑒但是切忌生搬硬套C端的設(shè)計(jì)規(guī)范。
Ant Design是由螞蟻集團(tuán)體驗(yàn)技術(shù)部經(jīng)過(guò)大量的項(xiàng)目實(shí)踐與總結(jié)，逐步打磨出來(lái)的，基于「自然」、「確定性」、「意義感」、「生長(zhǎng)性」四大設(shè)計(jì)價(jià)值觀，通過(guò)模塊化解決方案，降低冗余的生產(chǎn)成本，讓設(shè)計(jì)者專注于更好的用戶體驗(yàn)，是非常完整的一套設(shè)計(jì)規(guī)范。
TDesign是騰訊企業(yè)級(jí)設(shè)計(jì)體系，也是去年才發(fā)布的。雖然才發(fā)布，但是作為一款誕生于騰訊內(nèi)部開(kāi)源，卻是經(jīng)過(guò)了超500項(xiàng)內(nèi)部業(yè)務(wù)檢驗(yàn)的企業(yè)級(jí)設(shè)計(jì)體系，TDesign 匯集了騰訊眾多優(yōu)秀組件庫(kù)能力和設(shè)計(jì)研發(fā)經(jīng)驗(yàn)。
內(nèi)含豐富可復(fù)用的設(shè)計(jì)組件資源，如色彩體系、文字系統(tǒng)、動(dòng)效設(shè)計(jì)等，覆蓋支持 Axure、Sketch、Figma、Adobe XD 等各大產(chǎn)品設(shè)計(jì)軟件。可以按照需求查看對(duì)應(yīng)組件的使用教程和代碼演示，只需簡(jiǎn)單的引入操作，即可搭建屬于自己的產(chǎn)品界面。
Element是由餓了么公司前端團(tuán)隊(duì)開(kāi)源一套為開(kāi)發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 2.0 的組件庫(kù)，提供了配套設(shè)計(jì)資源。4、AT-UIAT-UI 是一款基于 Vue 2.x 的前端 UI 組件庫(kù)，主要用于快速開(kāi)發(fā) PC 網(wǎng)站產(chǎn)品，在眾多的的組件庫(kù)中，AT-UI 屬于視覺(jué)風(fēng)格比較清新的一款。
是有贊 PC 端 Web UI 規(guī)范的 React 實(shí)現(xiàn)版本，提供了一整套基礎(chǔ)的 UI 組件以及常用的業(yè)務(wù)組件。通過(guò) Zent，可以快速搭建出風(fēng)格統(tǒng)一的頁(yè)面，提升開(kāi)發(fā)效率。目前有 50+ 組件，這些組件都已經(jīng)在有贊的各類(lèi) PC 業(yè)務(wù)中廣泛使用。
谷歌在 2014 年的 Google I/O 上推出了 Material Design，它的目標(biāo)是創(chuàng)造一個(gè)將經(jīng)典的設(shè)計(jì)原則和科技、創(chuàng)新相結(jié)合的設(shè)計(jì)語(yǔ)言，并且在不同設(shè)備上提供一致的體驗(yàn)底層系統(tǒng)，并同時(shí)支持觸摸、語(yǔ)音、鼠標(biāo)、鍵盤(pán)等輸入方式。
iOS 的人機(jī)規(guī)范指南，保持了蘋(píng)果一貫的風(fēng)格。雖然沒(méi)有 Material Design 規(guī)范那么細(xì)致全面，但是核心的設(shè)計(jì)原則在每個(gè)組件的設(shè)計(jì)說(shuō)明中都有滲透。作為 iOS 系統(tǒng)的設(shè)計(jì)基礎(chǔ)，建議每個(gè)設(shè)計(jì)師都需要仔細(xì)研究。
Vant 是有贊前端團(tuán)隊(duì)開(kāi)源的移動(dòng)端組件庫(kù)，于 2017 年開(kāi)源，已持續(xù)維護(hù) 4 年時(shí)間。Vant 對(duì)內(nèi)承載了有贊所有核心業(yè)務(wù)，對(duì)外服務(wù)十多萬(wàn)開(kāi)發(fā)者，是業(yè)界主流的移動(dòng)端組件庫(kù)之一。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本。
NutUI-JDL 是一套基于京東物流視覺(jué)規(guī)范的移動(dòng)端組件庫(kù)，包含了36+高質(zhì)量組件和詳盡的文檔和實(shí)例。
設(shè)計(jì)師在開(kāi)始準(zhǔn)備設(shè)計(jì)規(guī)范時(shí)，首先需要確定設(shè)計(jì)風(fēng)格和設(shè)計(jì)尺寸，頁(yè)面布局是做居中固定式，還是全屏響應(yīng)式。如果是全屏響應(yīng)式的網(wǎng)頁(yè)設(shè)計(jì)，那要選擇怎么樣的屏幕來(lái)做效果？等等這些問(wèn)題
接下來(lái)分別來(lái)展開(kāi)說(shuō)明。
純白風(fēng)（網(wǎng)頁(yè)大背景是純白色;文字背景是線框，輕淡色（灰）;文字一般用深色）
輕淡風(fēng) (網(wǎng)頁(yè)大背景是淺灰色;文字背景是白色;文字一般用深色）；
深色風(fēng)（網(wǎng)頁(yè)大背景是深色;文字背景是帶有透明度的純色；文字一般用白色）
我們?cè)陂_(kāi)始設(shè)計(jì)之前，要確定好使用哪種風(fēng)格，一旦確定下來(lái)，后面的所有頁(yè)面和元件的設(shè)計(jì)，都得基于這個(gè)風(fēng)格來(lái)設(shè)計(jì)。
據(jù)數(shù)據(jù)顯示，目前市面上比較流行的是：輕淡色背景風(fēng)+全屏響應(yīng)式的設(shè)計(jì)風(fēng)格，也是相對(duì)比較保守安全的設(shè)計(jì)。
接下來(lái)需要考慮尺寸是做居中固定式，還是全屏響應(yīng)式。全屏響應(yīng)式的網(wǎng)頁(yè)設(shè)計(jì)，選擇怎么樣的屏幕來(lái)做效果。
設(shè)計(jì)規(guī)范中，分辨率尺寸的問(wèn)題，一直以來(lái)是我們?cè)O(shè)計(jì)師討論最多的。
決定產(chǎn)品設(shè)計(jì)尺寸分辨率大小的因素大致包含以下兩點(diǎn)：
目前市面上主流的排在前3的屏幕分辨率為1920*1080，1440*900，1366*768。
做B端產(chǎn)品時(shí)，現(xiàn)在市場(chǎng)上的設(shè)計(jì)師一般都會(huì)采用的是1440*900。為什么不用市場(chǎng)占有率最高的1920*1080和1366*768呢？
1、由于B端產(chǎn)品的特殊性，它的尺寸分辨率大小，是取決于用戶使用的電腦設(shè)備條件。由于員工電腦顯示屏大部分都是統(tǒng)一采購(gòu)的，尺寸也就大致統(tǒng)一，所以開(kāi)發(fā)適配的分辨率可以按這個(gè)統(tǒng)一尺寸進(jìn)行設(shè)計(jì)。
2、因?yàn)樗募嫒菽芰?huì)比較強(qiáng)，向上適配或者向下適配誤差會(huì)比較小，不管是市場(chǎng)占比最高的主流1920*1080尺寸，還是一般般的1366*768尺寸，都完全可兼容。
注意：別忘了設(shè)計(jì)出極端情況（寬度為1280，以及寬度為1920）的效果圖，力求前端開(kāi)發(fā)實(shí)現(xiàn)的效果和高保真設(shè)計(jì)圖誤差最小。
假如你產(chǎn)品的用戶用的設(shè)備主要是市面上占有率最高的24寸辦公室顯示器，也就是1920*1080分辨率的話，那毫無(wú)疑問(wèn)，在選擇設(shè)計(jì)尺寸上，直接選擇1920*1080分辨率。
比如我現(xiàn)在做的產(chǎn)品，除了移動(dòng)辦公，web基本都是固定辦公，管理人員使用的辦公設(shè)備（電腦）屏幕一般都是臺(tái)式電腦，那這個(gè)時(shí)候，我們?cè)谠O(shè)計(jì)時(shí)就會(huì)同時(shí)考慮它的占有率和兼容能力。所以我們采用的是：1920*1080分辨率。
所以設(shè)計(jì)師們?cè)谶x擇尺寸上，一定要靈活使用，不能一味的認(rèn)死理只選擇1920 或1440某一尺寸，而是要對(duì)您的產(chǎn)品用戶的具體情況做好分析，從而得出最適合你們產(chǎn)品的設(shè)計(jì)稿的尺寸。
注意點(diǎn)：
如果希望設(shè)計(jì)稿完全還原程度高的話，還特別要考慮瀏覽器的適配，比如說(shuō)它的頂部固定區(qū)域（當(dāng)前網(wǎng)址，書(shū)簽欄等的高度）必須排除在外，剩余的部分才是我們?cè)O(shè)計(jì)稿的真實(shí)高度。
拿我們常用的谷歌瀏覽器舉例，如下面公式所示：設(shè)計(jì)實(shí)際高度=電腦分辨率 -（網(wǎng)址欄+書(shū)簽欄+頁(yè)簽高度)
上下布局包括："頂部菜單欄、主體內(nèi)容"兩大區(qū)域。其中頂部菜單欄是固定不變的，主體內(nèi)容根據(jù)不同分辨率進(jìn)行自適應(yīng)動(dòng)態(tài)縮放。另外還需要把主體內(nèi)容左右兩邊空白區(qū)域最小值確定好；
優(yōu)勢(shì)：內(nèi)容區(qū)域可操作空間大。
劣勢(shì)：導(dǎo)航區(qū)域限制數(shù)量，如果導(dǎo)航選項(xiàng)內(nèi)容比較多，用頂部橫向?qū)Ш降脑挘蜁?huì)顯得很擁擠。另外，橫向?qū)Ш揭话阌小罢归_(kāi)”，“折疊”，和“收起”三種狀態(tài)，加上內(nèi)容很多的情況下，橫向?qū)Ш骄吞貏e難做到尺寸適配。
左右布局包括："左側(cè)菜單欄、頂部欄、主體內(nèi)容"三大區(qū)域。其中頂部菜單欄、左側(cè)菜單欄是固定不變的，右側(cè)主體內(nèi)容根據(jù)分辨率進(jìn)行自適應(yīng)動(dòng)態(tài)縮放。
左右布局時(shí)，左側(cè)菜單是支持收縮或展開(kāi)，收縮狀態(tài)下也需要有固定的寬度。
優(yōu)勢(shì)：導(dǎo)航部分可擴(kuò)展性強(qiáng)，適合導(dǎo)航選項(xiàng)內(nèi)容都是比較多的情況。且只有“展開(kāi)“和”收起”兩種狀態(tài)，在不同屏幕情況下，寬度的自適應(yīng)也能更加得心應(yīng)手。
劣勢(shì)：相對(duì)內(nèi)容區(qū)域空間變少。
現(xiàn)在很多后臺(tái)管理系統(tǒng)采用，"頂部一級(jí)導(dǎo)航欄、左側(cè)二級(jí)菜單欄、主體內(nèi)容"三大區(qū)域。其中頂部菜單欄、左側(cè)菜單欄是固定不變的，右側(cè)主體內(nèi)容根據(jù)分辨率進(jìn)行自適應(yīng)動(dòng)態(tài)縮放。
優(yōu)勢(shì)：結(jié)構(gòu)更清晰。可承載更多層級(jí)內(nèi)容。更適用于復(fù)雜且層級(jí)多的產(chǎn)品。
所以，可以得出結(jié)論：設(shè)計(jì)師在選頁(yè)面布局的時(shí)候，要全局考慮產(chǎn)品框架及內(nèi)容。
1、如果導(dǎo)航選項(xiàng)內(nèi)容比較多的話，或者不確定有多少內(nèi)容的情況，從美觀和操作難易程度、可用性來(lái)評(píng)估的話，選擇第二種左側(cè)導(dǎo)航是最適合B端產(chǎn)品使用的。
2、如果內(nèi)容選項(xiàng)確定很少，就沒(méi)那么多限制，“左側(cè)縱向”"頂部橫向"都好使
特別要注意
1、同一個(gè)產(chǎn)品需要考慮它的統(tǒng)一性，不能這里使用頂部橫向，那里用左側(cè)縱向。
2、如果是個(gè)更新迭代的版本，就還得考慮老用戶之前的使用習(xí)慣，避免引起不必要的麻煩。
在確定好導(dǎo)航的布局后，就基本上能確定整個(gè)產(chǎn)品的頁(yè)面布局了。
B端產(chǎn)品，一般會(huì)在整個(gè)頁(yè)面的左上角放企業(yè)的LOGO，頂部欄高度48+8n，側(cè)邊欄寬度200+8n。
我常用的是頂部欄高度：56px或80px，側(cè)邊欄寬度：200px，側(cè)邊欄收縮狀態(tài)寬度：56px或80px，右側(cè)的側(cè)浮窗寬度：400px。（具體高度寬度尺寸，設(shè)計(jì)師可根據(jù)具體情況來(lái)定，不需要按部就班這么死板）。
同時(shí)需要確定好主體內(nèi)容的上下左右邊距，以及主體內(nèi)容區(qū)域中各模塊的安全距離，內(nèi)容超出區(qū)域的，通過(guò)滾動(dòng)查閱更多。
Windows系統(tǒng)：中文Microsoft YaHei(微軟雅黑），英文Arial；
Mac字體：中文PingFang SC（平方字體），英文 Helvetica；
常見(jiàn)的字體大小為：12px、14px、16px、18px、20px、24px、26px、28px、30px（一般都是采用偶數(shù)字號(hào)，文字大小12+4n）。
注意：
在設(shè)計(jì)過(guò)程中，設(shè)計(jì)師對(duì)字號(hào)應(yīng)該有一個(gè)全局觀，在同一個(gè)界面內(nèi)，盡量少用大小太接近的字號(hào)。比如一個(gè)頁(yè)面中，如果同時(shí)用了12px、13px、14px、15px、16px、18px排版，文字的層級(jí)對(duì)比會(huì)比較弱，沒(méi)有主次之分，用戶閱讀困難，視覺(jué)效果也顯得凌亂。
所以，剛接觸B端產(chǎn)品的小白設(shè)計(jì)師，如果不知道怎么運(yùn)用不同字號(hào)字體的情況下，可以直接以這組字號(hào)12px、14px、16px、20px、34px的字號(hào)為參考使用，這樣的分布會(huì)層次明晰，能夠有個(gè)比較不錯(cuò)的布局結(jié)構(gòu)。
“行高”根據(jù)文字大小和使用場(chǎng)景來(lái)定，公式如下，
行高=文字大小+8px（或6px，視情況而定，我常用8）
例如：12號(hào)字體的行高=12+8=20px
同一個(gè)界面中，一定不要出現(xiàn)多個(gè)不同字體。盡量選擇用戶設(shè)備里自帶的字體來(lái)進(jìn)行設(shè)計(jì)，比如說(shuō)WIN系統(tǒng)默認(rèn)用系統(tǒng)自帶的“微軟雅黑”，不能使用特殊字體。
如果必須要用特殊字體，建議用圖片替代。如果用戶的設(shè)備里沒(méi)有你使用的這些字體的話，會(huì)默認(rèn)顯示設(shè)備的系統(tǒng)自帶字體，最終效果就會(huì)和你的設(shè)計(jì)稿相差很多。
從視覺(jué)方面來(lái)講，為了讓整體界面更簡(jiǎn)潔具有美感，體驗(yàn)感更好，在使用字體方面，一般字體種類(lèi)不超過(guò)2種，越少越好。因?yàn)轫?yè)面的層次感主要是靠字號(hào)大小及顏色拉開(kāi)層次，如果字號(hào)在變，字體種類(lèi)也各種變化，整體就會(huì)感覺(jué)很凌亂，沒(méi)有統(tǒng)一性。
顏色規(guī)范包含“品牌色”、“輔助色”、“中性色、圖表色”四部分。
品牌色系：即產(chǎn)品主色調(diào)，主色調(diào)的設(shè)定直接影響產(chǎn)品氣質(zhì)和直觀感受，也是產(chǎn)品的對(duì)外的形象。品牌色是根據(jù)這個(gè)產(chǎn)品的特征和定位、用戶群，以及使用場(chǎng)景等綜合考慮最后確定的。
品牌色的一般用于LOGO 、操作狀態(tài)、按鈕顏色、其他一些可操作圖標(biāo)等。
1、品牌色一般建議選擇冷色系。這樣有效避免與“錯(cuò)誤提醒”的紅色、黃色相沖突，讓人誤解。但要是被硬性要求必須選暖色系作為主色調(diào)，就得格外注意調(diào)節(jié)好主色調(diào)與錯(cuò)誤提醒的區(qū)別了。
2、注意選的品牌色（主色調(diào)）不要太刺眼。要保證用戶長(zhǎng)時(shí)間使用也不至于顏色太亮太刺眼，而產(chǎn)生的視覺(jué)疲勞。
輔助色系：輔助色一般用于“提示”。類(lèi)似：成功、失敗、警告、無(wú)效等內(nèi)容等。
中性色系：中性色涵蓋黑、白、灰三個(gè)不同層級(jí)，通常在文本、背景、邊框、分割線用到它們。同一色相，只要改變它的透明度就能表現(xiàn)出不同的層級(jí)。
B端產(chǎn)品的文字中，一般會(huì)有：一級(jí)標(biāo)題、二級(jí)標(biāo)題、一級(jí)正文、二級(jí)正文、提示文字、輔助文字、說(shuō)明文字等。
為了區(qū)分層級(jí)，提升用戶的閱讀體驗(yàn)感，通常會(huì)根據(jù)具體需求，把字體顏色的深淺，大致分成3到5個(gè)層級(jí)。常見(jiàn)的有#333333、#666666、#999999這個(gè)組合，這個(gè)組合的層級(jí)區(qū)分比較分明，適應(yīng)性比較廣，設(shè)計(jì)師在設(shè)計(jì)時(shí)可以直接作為參考。
圖表色：我們常見(jiàn)的后臺(tái)管理類(lèi)產(chǎn)品， 像數(shù)據(jù)可視化、統(tǒng)計(jì)圖、多個(gè)標(biāo)簽的不同配色方案，所以一般還會(huì)設(shè)定圖表的顏色。
按鈕是任何用戶界面不可或缺的交互元素，B端產(chǎn)品中用到按鈕的場(chǎng)景特別多，類(lèi)似：登錄注冊(cè)，保存，表單，彈窗，導(dǎo)航，提交，確認(rèn)等等。
常見(jiàn)的按鈕形式包含這六大類(lèi)：圖標(biāo)文字組合的按鈕 ，主按鈕，次按鈕（線性按鈕），按鈕菜單，文字按鈕，圖標(biāo)按鈕。
常見(jiàn)的按鈕交互狀態(tài)包含六種：
正常狀態(tài)、聚焦?fàn)顟B(tài)（使用Tab鍵或方向鍵來(lái)對(duì)網(wǎng)頁(yè)進(jìn)行訪問(wèn)輸入的聚焦?fàn)顟B(tài)，在設(shè)計(jì)時(shí)很多設(shè)計(jì)師都會(huì)把這一狀態(tài)忘記，導(dǎo)致用戶無(wú)法用方向鍵控制光標(biāo)位置，會(huì)降低用戶的使用體驗(yàn)感）
懸停狀態(tài)（鼠標(biāo)正在按鈕上，但不點(diǎn)擊，需要注意的是平板電腦和移動(dòng)端設(shè)備上不會(huì)展示懸停狀態(tài)，因?yàn)槭种父鈽?biāo)不一樣，無(wú)法在屏幕上進(jìn)行懸停 ）
激活狀態(tài)（點(diǎn)擊按下?tīng)顟B(tài)）
加載狀態(tài)（等待期間不可操作，在B端產(chǎn)品中Loading狀態(tài)特別重要，能緩解用戶的焦慮情緒）
禁用狀態(tài)（不可操作狀態(tài)，置灰顯示和透明度（40%）代表不可操作狀態(tài)）
按鈕圓角：在開(kāi)始設(shè)計(jì)產(chǎn)品之前，設(shè)計(jì)師都需要對(duì)按鈕圓角有具體的規(guī)劃。按鈕四角都是直角會(huì)比較有距離感和強(qiáng)烈的引導(dǎo)性，容易分散用戶注意力，所以我們一般會(huì)采用視覺(jué)上給人比較柔和親近感覺(jué)的圓角按鈕。
但按鈕的圓角并不是越大越好，因?yàn)樵谙嗤叽缦?，按鈕圓角小的，操作熱區(qū)會(huì)更大，頁(yè)面的使用效率也會(huì)更高，更容易操作。同時(shí)還要特別考慮到下拉菜單的設(shè)計(jì)，所以圓角大小一般采用偶數(shù)：2px,4px,6px,8px,16px為宜，不宜過(guò)大（這里的圓角弧度的值有一定的倍數(shù)關(guān)系或基數(shù)關(guān)系，例如：4/8/16, 4/6/8，4/8/12，都是可行的）。
注意：圓角大小也會(huì)跟著按鈕尺寸的大小有相應(yīng)的變化。
在B端產(chǎn)品中，當(dāng)確定好網(wǎng)格基數(shù)時(shí)（通常網(wǎng)格設(shè)定為：4px。按鈕的高度會(huì)分兩種情況：
1、一種是寬度為高度的倍數(shù)關(guān)系。
2、第二種是如果寬度為高度的倍數(shù)關(guān)系，從視覺(jué)上看達(dá)不到想要的效果的話，設(shè)計(jì)師就可以靈活設(shè)置。
討論到按鈕的尺寸，我們需要大致知道如何設(shè)置網(wǎng)格基數(shù)。
在設(shè)計(jì)中，我們需要在常用的繪圖軟件（如：Ps、Sketch）里找到我們的網(wǎng)格功能，設(shè)定好一個(gè)數(shù)為基數(shù)，然后按照這個(gè)基數(shù)來(lái)進(jìn)行按鈕的繪制，按鈕就相對(duì)比較規(guī)范了。
那如何用繪圖工具設(shè)置網(wǎng)格基數(shù)呢？方法如下：在Sketch繪圖工具中找到：【視圖】-【畫(huà)布】-【網(wǎng)格設(shè)置】- 彈出網(wǎng)格設(shè)置對(duì)話框進(jìn)行設(shè)置就好了
把網(wǎng)格基數(shù)設(shè)置為【4】的原因：它是谷歌Material Design繪制小組件的規(guī)范，模塊之間定義的基數(shù)就是【8】。
假設(shè)我們定這個(gè)基數(shù)為4，那采用的尺寸數(shù)值就需要是基數(shù)4的倍數(shù)。比如B端產(chǎn)品中，常用的按鈕高度尺寸有：24px、32px、36px 、40px、48px，這些都是可以整除基數(shù)4的值。例如：32/4=8，40/4=10，這里的4為基數(shù)。
按鈕的寬度尺寸，一般是確定好文字到邊框左右兩邊的距離（例如如圖Padding值為12px)后，開(kāi)發(fā)會(huì)根據(jù)文字內(nèi)容的多少自適應(yīng)的。
按鈕間距，按鈕之間的間距也遵循基數(shù)為4的倍數(shù)，比如：16，24，32，40，48等。這里的基數(shù)定為偶數(shù)（一般為4或8）
從廣義的定義來(lái)講，表單是指用于數(shù)據(jù)錄入的一切形式。從狹義上來(lái)講，表單在大家更廣泛的認(rèn)知印象中，表單則是一類(lèi)包含輸入框、下拉選擇框等常見(jiàn)控件的組合形式的頁(yè)面才屬于表單。表單的本質(zhì)核心是提交數(shù)據(jù)，所以凡是具備采集數(shù)據(jù)并完成采集后提交數(shù)據(jù)的交互形式均可稱之為表單。
表單在設(shè)計(jì)上的結(jié)構(gòu)有：1、標(biāo)題；2、表單標(biāo)簽；3、占位符；4、表單域；5、提示信息；6、操作按鈕；
表單的設(shè)計(jì)必須優(yōu)先考慮為用戶減負(fù)，提高效率并簡(jiǎn)化填寫(xiě)流程。另外表單中組件的選擇需要依據(jù)具體的數(shù)據(jù)類(lèi)型和具體的業(yè)務(wù)場(chǎng)景進(jìn)行合理正確的選用，為用戶提供高效的數(shù)據(jù)錄入表單，降低用戶操作成本、認(rèn)知負(fù)擔(dān)，并提高數(shù)據(jù)采集效率才是表單設(shè)計(jì)的根本目的。
可交互輸入域，是構(gòu)成表單的核心內(nèi)容，是表單用來(lái)采集數(shù)據(jù)的入口。輸入?yún)^(qū)是用戶交互最多也是最能影響使用體驗(yàn)的區(qū)域，不同類(lèi)型數(shù)據(jù)選擇與之相應(yīng)的錄入方式，對(duì)提高表單操作效率和用戶體驗(yàn)大有裨益。
表單并不是把一些不同類(lèi)型的輸入框排排版、標(biāo)清楚必填非必填、哪些表單比較復(fù)雜適當(dāng)?shù)募觽€(gè)說(shuō)明就完了
其實(shí)，表單設(shè)計(jì)遠(yuǎn)遠(yuǎn)不止這些，表單本身也是一個(gè)小產(chǎn)品，它也需要有需求的支撐、也需要嵌套使用情境、也需要考慮用戶的心理模型；從表單的產(chǎn)生到表單在頁(yè)面上如何呈現(xiàn)，再到使用表單時(shí)與表單之間的交互，每一步都需要投入大量的思考來(lái)做好表單。
后面我會(huì)專門(mén)有一篇16000+的文章聊聊這個(gè)B端產(chǎn)品中比較核心的表單，有興趣的朋友可以關(guān)注一下，大概五月份就會(huì)發(fā)。
表格在整個(gè)B端產(chǎn)品比較常見(jiàn)的，它的地位也是相當(dāng)重要的，我們?cè)谠O(shè)計(jì)表格時(shí)需要注意一下幾點(diǎn)：
一般以左對(duì)齊為準(zhǔn)。與左邊表格邊距盡量保持在10px以上的間距。（特別注意：金額和操作的標(biāo)題和內(nèi)容需要右對(duì)齊）
默認(rèn)展示的列數(shù)為3-8列，如果需要展示更多列數(shù)，則需要優(yōu)先固定展示重要列，其余的列的內(nèi)容會(huì)以滾動(dòng)條滑動(dòng)而展展示出來(lái)。
寬度的尺寸大小自適應(yīng)，但需要根據(jù)文字的重要性顯示，重要文字內(nèi)容優(yōu)先完整顯示。
字符不要多，最多可輸入8個(gè)。如果文字太多，就需要做文字信息精簡(jiǎn)化。
表格內(nèi)容超過(guò)一屏，就需要顯示豎向滾動(dòng)條，注意：表頭需要固定，但表格內(nèi)容可滾動(dòng)展示。
表格的某些單元格無(wú)數(shù)據(jù)內(nèi)容時(shí)，需要用“—”表示，需要區(qū)別于“0”。
標(biāo)題欄高度（標(biāo)準(zhǔn)高度為56px）；內(nèi)容欄（標(biāo)準(zhǔn)高度為56px，偏大的標(biāo)題欄高度為80px），內(nèi)容區(qū)和標(biāo)題欄水平居中對(duì)齊。
列的對(duì)齊方式（垂直方向）除了需要始終保持“右對(duì)齊”的：金額，最右側(cè)操作列內(nèi)容外，其他的內(nèi)容可自行左對(duì)齊或右對(duì)齊。行的對(duì)齊方式（水平方向）
當(dāng)表格欄的高度尺寸小于80px 時(shí)，一般只有一排內(nèi)容，內(nèi)容水平需要居中對(duì)齊。當(dāng)表格欄的高度尺寸大于80px時(shí)，如果是有兩排內(nèi)容，所有的內(nèi)容需要頂對(duì)齊；但是如果既有一排內(nèi)容 又有多拍內(nèi)容的話 ，內(nèi)容水平則需要居中對(duì)齊。
表格中的內(nèi)容，會(huì)根據(jù)字段的長(zhǎng)短定義所占的百分比，完成表格占比，從而達(dá)到希望實(shí)現(xiàn)的最佳效果。
滾動(dòng)條分為橫豎兩種，當(dāng)表格內(nèi)容超過(guò)一屏?xí)r，就需要顯示滾動(dòng)條。豎向滾動(dòng)條時(shí)， 需要固定表頭標(biāo)題欄和頁(yè)碼。只需滾動(dòng)表格內(nèi)容部分即可。橫向滾動(dòng)條時(shí)， 需要固定第一列 和 正在操作的項(xiàng)列。只滾動(dòng)表格內(nèi)容部分即可。
僅提示用戶相關(guān)內(nèi)容，不需要用戶做任何交互動(dòng)作。類(lèi)似：toast弱提示通知提示等彈窗（（一般3-5秒會(huì)自動(dòng)消失：包含普通信息，成功信息，失敗信息，警告信息）。
另外還有，鼠標(biāo)經(jīng)過(guò)的時(shí)候即可出現(xiàn)而不用點(diǎn)擊的彈窗（這個(gè)彈窗通常會(huì)設(shè)計(jì)一個(gè)浮動(dòng)帶有陰影效果的框，不需要遮罩）。比如提示說(shuō)明，顯示更多信息，鼠標(biāo)移過(guò)后立即消失，它不會(huì)影響下一層（當(dāng)前頁(yè)面內(nèi)容）頁(yè)面的視覺(jué)效果和操作。弱彈窗尺寸一般根據(jù)文字多少自行適配。
第二種是強(qiáng)彈窗。它是一個(gè)需要用戶必須對(duì)這個(gè)對(duì)話框進(jìn)行操作后才可以離開(kāi)。
例如彈出的列表，詳情，表單等的確認(rèn)信息彈窗、錯(cuò)誤提示彈窗。這些強(qiáng)彈窗一般會(huì)對(duì)下面一層的頁(yè)面做一些遮罩處理，例如添加上一層有透明度（例如30%，50%都可以）的黑色/白色，給下一層頁(yè)面的內(nèi)容做模糊濾鏡等等；
在寫(xiě)彈框規(guī)范時(shí)，應(yīng)了解各自項(xiàng)目中需使用彈框的有哪些內(nèi)容，給出相關(guān)大小彈框的比例，哪些為固定尺寸，哪些為適配比例。以及對(duì)于通知提示給出停留多少時(shí)間后自動(dòng)消失，彈窗彈出狀態(tài)等等相關(guān)的交互規(guī)范。
缺省頁(yè)是互聯(lián)網(wǎng)中常見(jiàn)的場(chǎng)景，當(dāng)遇到網(wǎng)絡(luò)不好、頁(yè)面中沒(méi)有內(nèi)容數(shù)據(jù)、暫無(wú)資料等等情況，所導(dǎo)致的空白頁(yè)面。
大致分可為：系統(tǒng)類(lèi)缺省頁(yè)，信息類(lèi)缺省頁(yè)，空白類(lèi)缺省頁(yè)。
遇到這些情況時(shí)，設(shè)計(jì)師一般采用一些插畫(huà)&文字的組合放置本來(lái)空白的頁(yè)面中提示或引導(dǎo)用戶進(jìn)行下一步操作，以緩解用戶的焦慮情緒。（也就是我們常說(shuō)的情感化設(shè)計(jì)的一種方式）
設(shè)計(jì)規(guī)范很大一部分是組件庫(kù)，所以就把組件庫(kù)單獨(dú)拎出來(lái)聊聊。
做一個(gè)比喻，組件庫(kù)相當(dāng)于積木玩具的一個(gè)個(gè)積木，每個(gè)組件就是一塊積木，通過(guò)組件的拼搭可以迅速搭建出一個(gè)頁(yè)面，而設(shè)計(jì)規(guī)范就相當(dāng)于搭建的“說(shuō)明書(shū)”。
通常我們將組件庫(kù)分為基礎(chǔ)組件和業(yè)務(wù)組件兩大類(lèi)，前者是系統(tǒng)通用組件（圖標(biāo)/按鈕/輸入框等），后者是由業(yè)務(wù)決定的相對(duì)更復(fù)雜的組件模塊。
而對(duì)于B端產(chǎn)品和C端產(chǎn)品，二者的組件庫(kù)又有些許差異。C端的組件庫(kù)更追求極致的交互和視覺(jué)體驗(yàn)，因此需要考慮視覺(jué)、性能、實(shí)現(xiàn)、兼容性，另一方面，C端會(huì)根據(jù)活動(dòng)、節(jié)日切換不同的主題，也要考慮組件視覺(jué)上的個(gè)性化擴(kuò)展。對(duì)于B端而言，組件庫(kù)更看重可復(fù)用性和穩(wěn)定性，保證可以支持業(yè)務(wù)快速迭代。另外B端會(huì)涉及到各種各樣的數(shù)據(jù)錄入與展示，因此相對(duì)更高的要求是大而全，覆蓋面廣。
在業(yè)務(wù)已經(jīng)發(fā)展到一定體量情況下，需要將項(xiàng)目中具備復(fù)用性及拓展性的模塊進(jìn)行拆解，對(duì)于B端產(chǎn)品來(lái)說(shuō)篩選的時(shí)候會(huì)依據(jù)之前迭代的版本內(nèi)容，把頁(yè)面一一羅列出來(lái)，將可替換與相似的模塊提取，并利用思維導(dǎo)圖的方式統(tǒng)一歸納，并做成可以被替換的組件。組件的替換建議合成一個(gè)大的排期進(jìn)行替換，避免了線上組件不一致導(dǎo)致體驗(yàn)問(wèn)題。
以我們現(xiàn)在的產(chǎn)品為例：依據(jù)產(chǎn)品類(lèi)型將組件拆分為：基礎(chǔ)組件 、業(yè)務(wù)組件、數(shù)據(jù)可視化組件、常用模塊。
將產(chǎn)品拆分后，此時(shí)得到很多可復(fù)用組件。我們?cè)僖罁?jù)原子設(shè)計(jì)理論針對(duì)性進(jìn)行拆解直至拆分出5個(gè)層面：
從原子開(kāi)始重新依據(jù)定好的視覺(jué)規(guī)范進(jìn)行更改，再由原子組成新的分子。
在與開(kāi)發(fā)溝通設(shè)計(jì)規(guī)范制定的過(guò)程中，常提到他們寫(xiě)CSS樣式的時(shí)候是采用盒子（box）去寫(xiě)的。通過(guò)一個(gè)個(gè)盒子填充來(lái)將我們的組件元素放入其中，最終形成前端展示的頁(yè)面。
走查時(shí)使用瀏覽器我們也可以看到開(kāi)發(fā)寫(xiě)的盒子，了解盒子也可以方便我們走查時(shí)知道問(wèn)題在哪。
搭建組件庫(kù)的步驟
對(duì)于新產(chǎn)品來(lái)說(shuō)，業(yè)務(wù)體量較小，較難抽取共性，組件也不全面，因此較好的方式是參考大廠的組件庫(kù)確定要做哪些組件，它們的相對(duì)成熟，參考價(jià)值較高。
對(duì)于已經(jīng)成熟的產(chǎn)品來(lái)說(shuō)，我們可以直接全面體驗(yàn)查看頁(yè)面，找出所有用到的組件，除基礎(chǔ)組件外，提煉出復(fù)用率高的業(yè)務(wù)組件進(jìn)行結(jié)構(gòu)化和組件制定。
以提示彈窗為例，演示單個(gè)組件的建立方法。
1. 定義組件：根據(jù)業(yè)務(wù)定義提示彈窗使用場(chǎng)景，用于重要信息的提醒，且需要用戶自己關(guān)閉操作。
2. 拆分組件：這一步是將組件拆分為元件。對(duì)提示組件進(jìn)行拆分后得到如下：
3. 重組輸出根據(jù)業(yè)務(wù)場(chǎng)景，我們把各個(gè)元件重組為組件，建成組件集，并定義各種組件的使用規(guī)則。
在組件庫(kù)建立完成后，只有在日常設(shè)計(jì)中真正使用組件庫(kù)，提高組件庫(kù)在設(shè)計(jì)稿中的覆蓋率，才能真正達(dá)到組件庫(kù)的效果。這就要求我們要輸出一份完整的組件庫(kù)描述文檔，在團(tuán)隊(duì)中進(jìn)行推廣，加強(qiáng)設(shè)計(jì)團(tuán)隊(duì)的公用意識(shí)。設(shè)計(jì)團(tuán)隊(duì)內(nèi)部可以直接維護(hù)一套組件庫(kù)，設(shè)計(jì)師設(shè)計(jì)時(shí)直接調(diào)用公共組件庫(kù)組件使用。
另外，我們還要與開(kāi)發(fā)工程師配合逐步完成現(xiàn)有頁(yè)面的組件替換。
組件庫(kù)的內(nèi)容并非一成不變，而是在不斷地更新，以保證所包含的組件都是最新和有用的。與其他數(shù)據(jù)一樣，組件也會(huì)有增刪改。我們需要定期對(duì)組件庫(kù)進(jìn)行維護(hù)。
增加：當(dāng)有新的組件產(chǎn)生時(shí)，我們需要通過(guò)判斷它的拓展性和復(fù)用率，以確定是否將它入庫(kù)。
刪除：隨著產(chǎn)品的不斷升級(jí)迭代，如果某個(gè)組件已經(jīng)不用或復(fù)用率很低時(shí)，我們可以考慮是否要將它刪除。
改：不可避免的，組件會(huì)隨著業(yè)務(wù)而進(jìn)行升級(jí)，我們可以通過(guò)數(shù)據(jù)埋點(diǎn)和A/B test的方式來(lái)確定某個(gè)組件是否要進(jìn)行改動(dòng)。
組件擴(kuò)展性弱：
有時(shí)候設(shè)計(jì)師做出來(lái)的組件雖然看著很好，但是實(shí)際上使用時(shí)，適配效率很低，用組件去擴(kuò)展和重新做的效率差不多。
大部分時(shí)候設(shè)計(jì)師手中都有任務(wù)，于是這個(gè)任務(wù)就落在了相對(duì)不是那么忙的設(shè)計(jì)師手里（一般是新設(shè)計(jì)師），但是新設(shè)計(jì)了解業(yè)務(wù)相對(duì)來(lái)說(shuō)是不夠的，做出來(lái)的東西就像是是空中樓閣，拋開(kāi)業(yè)務(wù)談設(shè)計(jì)規(guī)范的都是很難落地的。
設(shè)計(jì)師不了解開(kāi)發(fā)的實(shí)現(xiàn)方式，可能會(huì)做出來(lái)以后，開(kāi)發(fā)較難實(shí)現(xiàn)，然后開(kāi)發(fā)也就不會(huì)做。
首先，設(shè)計(jì)規(guī)范的作用是巨大而延遲的，不能即時(shí)產(chǎn)出很大的價(jià)值，另外一方面，設(shè)計(jì)規(guī)范的落地會(huì)增加開(kāi)發(fā)工程師很多的工作量，且無(wú)法量化成果。這也導(dǎo)致很多時(shí)候設(shè)計(jì)師無(wú)法爭(zhēng)取到足夠的開(kāi)發(fā)資源來(lái)做這件事，所以，很難導(dǎo)致達(dá)到預(yù)期的效果。
設(shè)計(jì)師需要更加全面的了解產(chǎn)品及業(yè)務(wù)流程。
前期需要做好用戶畫(huà)像，弄明白產(chǎn)品的目標(biāo)用戶的差異，不同用戶的使用場(chǎng)景。只有弄清楚各個(gè)角色的關(guān)系以及功能設(shè)計(jì)的邏輯，具體用戶年齡，解決什么問(wèn)題，才可以產(chǎn)出更符合用戶需求的設(shè)計(jì)。
如果是新的產(chǎn)品，那就需要去詳細(xì)的看類(lèi)似的競(jìng)品的功能及業(yè)務(wù)流，并且了解公司產(chǎn)品的定位及方向，所以就大致清楚設(shè)計(jì)的大方向。
系統(tǒng)整理產(chǎn)品情況，最好是做思維導(dǎo)圖形式，可以更好的梳理同類(lèi)型的產(chǎn)品功能及組件，也就能更好的提高組件的復(fù)用性。
在制定規(guī)范前，需要明確產(chǎn)品中主要有哪幾種分類(lèi)，將最基礎(chǔ)的分類(lèi)定義好方便后續(xù)針對(duì)分類(lèi)內(nèi)容進(jìn)行整理。
團(tuán)隊(duì)溝通其實(shí)是一門(mén)藝術(shù)，那需要如何做呢？
首先，寫(xiě)一份設(shè)計(jì)規(guī)范的價(jià)值的提案給領(lǐng)導(dǎo)，爭(zhēng)取到足夠的資源，包含設(shè)計(jì)資源、開(kāi)發(fā)資源。如果領(lǐng)導(dǎo)的主導(dǎo)參與，那這個(gè)事情就好推動(dòng)多了。
然后，把設(shè)計(jì)規(guī)范的設(shè)計(jì)工作交給熟悉業(yè)務(wù)的設(shè)計(jì)師來(lái)做，通過(guò)業(yè)務(wù)提煉復(fù)用率高的典型元素，優(yōu)先開(kāi)發(fā)，最大化投入產(chǎn)出比。
搭建設(shè)計(jì)規(guī)范和我們?nèi)粘Ｌ幚砉ぷ餍枨箢?lèi)似，并非輸出一份文檔就結(jié)束了。我們還需要將做好的設(shè)計(jì)規(guī)范推廣給各個(gè)職能部門(mén)的同事包括設(shè)計(jì)小伙伴，PM和開(kāi)發(fā)小伙伴的團(tuán)隊(duì)內(nèi)外，并且需要得到團(tuán)隊(duì)內(nèi)的一致認(rèn)可才算是初步完成。
召開(kāi)專門(mén)的設(shè)計(jì)規(guī)范會(huì)議，以清晰明確且有效的方式把詳細(xì)的內(nèi)容傳達(dá)給各個(gè)相關(guān)人員，在一致認(rèn)可規(guī)范的情況下，以達(dá)到內(nèi)容的傳達(dá)到位。同時(shí)，這個(gè)時(shí)候，就可以依據(jù)開(kāi)發(fā)人員的反饋，做落地的修改規(guī)范文檔。
1、如何推廣給PM
利益點(diǎn)：提升協(xié)作效率，減少工作成本
在啟動(dòng)設(shè)計(jì)規(guī)范的整理之前，內(nèi)部宣講讓PM對(duì)于設(shè)計(jì)規(guī)范的搭建已經(jīng)有了一個(gè)基礎(chǔ)的概念。然后爭(zhēng)取到更多的開(kāi)發(fā)資源。否則PM不會(huì)分配資源給予時(shí)間去搭建整體的設(shè)計(jì)規(guī)范。
可以從提升PM與設(shè)計(jì)的效率和降低原型搭建成本作為切入點(diǎn)，通過(guò)組件庫(kù)以及通用模版的搭建，PM只需要極低的成本學(xué)習(xí)一下組件庫(kù)怎么使用，即可搭建高保真的原型界面。甚至完善好組件庫(kù)后直接不需要設(shè)計(jì)的參與，開(kāi)發(fā)通過(guò)原型組件庫(kù)搭建頁(yè)面。
利益點(diǎn)：提升設(shè)計(jì)效率，減少人力損耗，保持體驗(yàn)一致性
設(shè)計(jì)規(guī)范一般由團(tuán)隊(duì)內(nèi)小伙伴共同制定，基本上已經(jīng)對(duì)規(guī)范的優(yōu)勢(shì)達(dá)成共識(shí)。因此主要講講如何更好在團(tuán)隊(duì)內(nèi)部使用規(guī)范。
團(tuán)隊(duì)設(shè)定主要負(fù)責(zé)維護(hù)的設(shè)計(jì)人員，其他人員在設(shè)計(jì)時(shí)候，通過(guò)Sketch Library 共享組件庫(kù)可以直接調(diào)用組件，并建立更新日志規(guī)范項(xiàng)目流程提升效率，定期維護(hù)的時(shí)候其他人員統(tǒng)一告知負(fù)責(zé)維護(hù)的設(shè)計(jì)人員，統(tǒng)一定期修改更新升級(jí)維護(hù)。
利益點(diǎn)：封裝組件，更少的更改，提高驗(yàn)效率，縮短研發(fā)流程
需要研發(fā)團(tuán)隊(duì)認(rèn)可設(shè)計(jì)規(guī)范，前期前端的參與是必不可少的。
在制作規(guī)范時(shí)設(shè)計(jì)師了解了前端開(kāi)發(fā)的一些簡(jiǎn)單原理，前端開(kāi)發(fā)也能及時(shí)了解設(shè)計(jì)師的想法，大家不再是各司其職而是串聯(lián)起來(lái)共同協(xié)作，當(dāng)規(guī)范確認(rèn)下來(lái)前端就不會(huì)頻繁改動(dòng)組件，而且在有限的項(xiàng)目時(shí)間中。設(shè)計(jì)規(guī)范的統(tǒng)一極大縮短了設(shè)計(jì)和前端開(kāi)發(fā)所需的時(shí)間，為后面的項(xiàng)目爭(zhēng)取了空間。
一套完整的規(guī)范包含內(nèi)容是非常多的，難以在1個(gè)版本迭代里面修改完。
因此可以采用敏捷開(kāi)發(fā)的思想，小步迭代快速推進(jìn)，將設(shè)計(jì)規(guī)范的覆蓋放在每次迭代過(guò)程中。設(shè)計(jì)師需要將自己作為設(shè)計(jì)規(guī)范這個(gè)項(xiàng)目的產(chǎn)品經(jīng)理，針對(duì)現(xiàn)有的需求進(jìn)行拆分，并排出優(yōu)先級(jí)分版本迭代進(jìn)產(chǎn)品里面。
可以依據(jù)從大到小的原則進(jìn)行優(yōu)先級(jí)排序。對(duì)產(chǎn)品設(shè)計(jì)風(fēng)格影響大的先排，影響小的后排。
設(shè)計(jì)規(guī)范的制定不單單是對(duì)于設(shè)計(jì)師，在嵌入版本里面要隨時(shí)與產(chǎn)品和開(kāi)發(fā)多溝通，以便達(dá)到更好的落地效果。
接近1.5萬(wàn)的文字梳理，感謝你看到了最后。接近尾聲了，制定及梳理設(shè)計(jì)規(guī)范對(duì)于設(shè)計(jì)師來(lái)說(shuō)個(gè)人成長(zhǎng)有哪些方面呢？我個(gè)人覺(jué)得可以從這幾個(gè)方面來(lái)說(shuō)；
通過(guò)整理規(guī)范，需要收集目標(biāo)用戶，使用場(chǎng)景、前期調(diào)研、產(chǎn)品功能梳理等眾多資料，這期間我們需要去發(fā)現(xiàn)信息以及整理信息。龐大的信息收集，那對(duì)于個(gè)人的收集整理信息的能力是一個(gè)很好的提升，同時(shí)對(duì)產(chǎn)品會(huì)有更全面的認(rèn)識(shí)。
歸納總結(jié)能力
將收集好的信息進(jìn)行分類(lèi)整理，這要求需要一定對(duì)邏輯性。在設(shè)計(jì)基礎(chǔ)框架時(shí)合理對(duì)分類(lèi)可以協(xié)助我們處理好每個(gè)控件對(duì)層級(jí)，這項(xiàng)能力無(wú)論實(shí)在工作還是日常中都有著巨大對(duì)好處，可以幫助我們從一堆繁雜的事物中“提綱挈領(lǐng)”，換言之就是“化整為零”，做減法，提取出最關(guān)鍵對(duì)因素。
將信息歸納整理好后，需要對(duì)全局進(jìn)行思考，全局的設(shè)計(jì)及交互都需要考慮到位，比如什么情況下適合跳轉(zhuǎn)頁(yè)面，什么情況下適合給與用戶彈窗。大體符合什么交互原則。
除了對(duì)大體交互需要考慮到位，細(xì)節(jié)上也不可以忽視，比如異常情況，極端情況該如何去處理，組件之間該怎么去配合等。在日常工作中我們也可以逐漸有意識(shí)去培養(yǎng)此類(lèi)技能，對(duì)項(xiàng)目全局思考的越多，那么對(duì)整體項(xiàng)目對(duì)把控能力也就越強(qiáng)，與他人合作也會(huì)越顯得專業(yè)。
在整個(gè)推廣設(shè)計(jì)規(guī)范的過(guò)程，就是提升溝通表達(dá)能力的過(guò)程。
另外，整理設(shè)計(jì)規(guī)范時(shí)，難免會(huì)遇到模凌兩可舉棋不定的時(shí)候。此時(shí)可以尋求向上或者向下的資源尋求幫助，具備良好的表達(dá)能力能迅速幫助我們將問(wèn)題闡述清楚，表達(dá)能力是設(shè)計(jì)師需要具備的重要技能之一。
我們每次在求助他人或向他人匯報(bào)，都需要在全面復(fù)盤(pán)問(wèn)題過(guò)后做到心里有數(shù)，將問(wèn)題自己復(fù)述一次是否有漏洞或者沒(méi)考慮清楚的地方。長(zhǎng)此以往你表達(dá)的事情會(huì)更清晰，別人也更容易聽(tīng)懂你說(shuō)的事情快速理解內(nèi)在邏輯，那么說(shuō)服別人推動(dòng)工作的難度也會(huì)越小。同事對(duì)自己的邏輯思維，表達(dá)能力都是很好的鍛煉。
這里總結(jié)了幾個(gè)工作中與上下游溝通的小技巧希望能幫助到小伙伴們：在開(kāi)始與他人溝通之前我們需要搞清楚我們溝通的原因與對(duì)象
原因里面包含：
對(duì)象里面包含：
當(dāng)然在溝通時(shí)還需要考慮方式和語(yǔ)氣，這些都需要好后斟酌。如果遇到情緒不太好的開(kāi)發(fā)，這個(gè)時(shí)候反倒我們更不能將情緒激化，一般這些情緒化對(duì)態(tài)度過(guò)一會(huì)都會(huì)消散，可以采取冷處理等情緒過(guò)后換一種方式溝通看看。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://bouu.cn