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

　　Web端設(shè)計規(guī)范的價值

　　1.可復(fù)用性

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

　　2.統(tǒng)一性

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

　　3.提升能力

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

　　4.團隊文化沉淀

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　根據(jù)功能劃分，如表單類可分為：單文本輸入、多文本輸入、日歷時間選擇器、下拉選擇列表、單選多選等

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

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

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

　　Web端設(shè)計規(guī)范團隊輸出物的文章

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

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

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

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

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