這篇文章是后來(lái)的WEB端系列設(shè)計(jì)規(guī)范的前言部分旨在起到拋磚引玉的作用，簡(jiǎn)要介紹如何制作屬于自己的部分Web端設(shè)計(jì)規(guī)范。

　　Web端設(shè)計(jì)規(guī)范的價(jià)值

　　1.可復(fù)用性

　　具有完整的設(shè)計(jì)規(guī)范和相應(yīng)的組件控制。方便視覺(jué)和交互設(shè)計(jì)師重復(fù)使用，無(wú)需重復(fù)制作，減少工作量，提高工作效率。

　　2.統(tǒng)一性

　　有了統(tǒng)一的設(shè)計(jì)規(guī)范，設(shè)計(jì)師可以避免自我創(chuàng)造組件控件，保持團(tuán)隊(duì)產(chǎn)品的統(tǒng)一體驗(yàn)。

　　3.提升能力

　　由于組件控件的可重復(fù)使用，直接大大提高了設(shè)計(jì)師的工作效率，節(jié)省了大量的時(shí)間，有大量的時(shí)間思考設(shè)計(jì)和業(yè)務(wù)背后的邏輯，從而提高設(shè)計(jì)思維能力。同時(shí)，完整的設(shè)計(jì)規(guī)范是系統(tǒng)的。設(shè)計(jì)師可以在閱讀后建立自己的設(shè)計(jì)系統(tǒng)，這對(duì)改進(jìn)設(shè)計(jì)有很大的好處。

　　4.團(tuán)隊(duì)文化沉淀

　　有了設(shè)計(jì)規(guī)范后，方便團(tuán)隊(duì)以后做設(shè)計(jì)的依據(jù)和參考。無(wú)論是新員工的到來(lái)還是老員工的離開(kāi)，都可以很好的對(duì)接工作，提高團(tuán)隊(duì)的協(xié)同效率。

　　Web端設(shè)計(jì)規(guī)范包括哪些？

網(wǎng)站設(shè)計(jì)-沙漠風(fēng)網(wǎng)站建設(shè)公司" />

　　目前，大多數(shù)在線設(shè)計(jì)規(guī)范都是組件控件的規(guī)范，缺乏完整的設(shè)計(jì)理念和系統(tǒng)的內(nèi)容。

　　設(shè)計(jì)概念、設(shè)計(jì)原則、組件控件、界面交互和輸出文檔將在制定設(shè)計(jì)規(guī)范的過(guò)程中形成。設(shè)計(jì)師可以根據(jù)自己的設(shè)計(jì)概念和原則，根據(jù)功能要求直接調(diào)用規(guī)范中的標(biāo)準(zhǔn)控制器，并根據(jù)信息結(jié)構(gòu)調(diào)用元素尺寸進(jìn)行設(shè)計(jì)，輕松輸出中高保真原型圖，減輕設(shè)計(jì)過(guò)程中交互控制器選擇和信息排版思維的負(fù)擔(dān)。

　　Web端設(shè)計(jì)規(guī)范的設(shè)計(jì)理念

　　使用對(duì)象不同（B端、C端)，不同的終端設(shè)備，設(shè)計(jì)差異完全不同。因此，設(shè)計(jì)理念也不同。

　　B端產(chǎn)品一般更定制，以業(yè)務(wù)為導(dǎo)向?？赡苡泻芏喔呒?jí)功能，突出高效易用，導(dǎo)致易學(xué)性打折。

　　C端產(chǎn)品一般考慮大多數(shù)用戶的使用場(chǎng)景和需求，高級(jí)功能相對(duì)較少。突出易學(xué)性。

　　因此，在制定設(shè)計(jì)理念時(shí)，可以根據(jù)團(tuán)隊(duì)的實(shí)際情況進(jìn)行設(shè)計(jì)和制定。

　　Web端設(shè)計(jì)規(guī)范設(shè)計(jì)原則

　　目前，有許多設(shè)計(jì)原則，如尼爾森的十大可用性原則、格式塔原則、剃刀法則、費(fèi)茨定律、設(shè)計(jì)中常見(jiàn)的對(duì)比和對(duì)齊。那么，如何將這么多原則變成一套自己的設(shè)計(jì)規(guī)范呢？這需要設(shè)計(jì)師根據(jù)自己的情況或團(tuán)隊(duì)的實(shí)際情況進(jìn)行控制和梳理。

　　Web組件控件設(shè)計(jì)規(guī)范

　　組件控件是整個(gè)設(shè)計(jì)規(guī)范的重要組成部分之一，可根據(jù)組件控件的屬性或功能對(duì)組件控件進(jìn)行分類。

　　根據(jù)設(shè)計(jì)師設(shè)計(jì)的使用場(chǎng)景，或根據(jù)組件控件的功能進(jìn)行劃分更合適。

　　根據(jù)功能劃分，如表單類可分為：?jiǎn)挝谋据斎?、多文本輸入、日歷時(shí)間選擇器、下拉選擇列表、單選多選等

　　Web界面交互設(shè)計(jì)規(guī)范

　　移動(dòng)終端的觸發(fā)手勢(shì)包括單擊、長(zhǎng)按、左右滑動(dòng)、拖動(dòng)、旋轉(zhuǎn)、夾緊等。與移動(dòng)終端相比，Web終端界面交互非常簡(jiǎn)單，基本上是懸掛和點(diǎn)擊。

　　界面交互的本質(zhì)可以用一個(gè)公式來(lái)表達(dá)：觸發(fā)對(duì)象操作行為交互結(jié)果=界面交互

　　Web端設(shè)計(jì)規(guī)范團(tuán)隊(duì)輸出物的文章

　　作為交互設(shè)計(jì)師，我們的重點(diǎn)工作職責(zé)是承上啟下。

　　例如，在與上游產(chǎn)品經(jīng)理和項(xiàng)目經(jīng)理討論產(chǎn)品規(guī)劃和需求后，他們將評(píng)估設(shè)計(jì)方案是否滿足用戶的需求，并根據(jù)交互設(shè)計(jì)師輸出的交互文檔在開(kāi)發(fā)和實(shí)施過(guò)程中的可行性；

　　其次，我們應(yīng)該與下游的視覺(jué)設(shè)計(jì)師和開(kāi)發(fā)工程師建立聯(lián)系。他們將輸出視覺(jué)設(shè)計(jì)草案，使用代碼實(shí)現(xiàn)交互設(shè)計(jì)方案，并在此基礎(chǔ)上完成實(shí)施。因此，交互設(shè)計(jì)師的重要輸出是交互文檔，這是連接上下游的重要環(huán)節(jié)。

　　交互文檔應(yīng)包括以下7點(diǎn)：完整的項(xiàng)目介紹、需求分析、新的修改記錄、信息架構(gòu)、交互設(shè)計(jì)解釋、頁(yè)面交互流程圖（包括界面布局、操作手勢(shì)、反饋效果、元素規(guī)則定義）、異常頁(yè)面和異常情況。

　　作為視覺(jué)設(shè)計(jì)師，輸出是視覺(jué)稿、標(biāo)記和切割，這里不重復(fù)。