這篇文章是之后WEB端系列設計規范的前言部分，目的是起到拋磚引玉的作用，簡(jiǎn)述如何制作屬于“自己”的Web端設計規范。

　　Web端設計規范的價(jià)值

　　1.可復用性

　　有了完整的設計規范和對應的組件控件。方便視覺(jué)和交互設計師反復復用，不需要重復制作，減少工作量提高工作效率。

　　2.統一性

　　有了統一的設計規范，設計師之間使用時(shí)，可避免自我創(chuàng )造組件控件，保持團隊產(chǎn)品的統一性體驗。

　　3.提升能力

　　由于組件控件的可復用，這直接使設計師的工作效率得到極大提高節省了大量時(shí)間，可以有大量時(shí)間思考設計和業(yè)務(wù)背后的邏輯從而提高設計思維能力。同時(shí)完整的設計規范是系統的，設計師閱讀之后可以構建自我的設計體系，對于設計的提高有極大的好處。

　　4.團隊文化沉淀

　　團隊有了設計規范之后，便于團隊以后做設計的依據和參考，不論是新員工的到來(lái)還是老員工的離去，都可以很好的對接工作提升團隊的協(xié)同效率。

　　Web端設計規范包含哪些

　　目前網(wǎng)上大部分設計規范都是之針對組件控件的規范，缺少完整的設計思想和體系化的內容。

　　在制定設計規范過(guò)程中會(huì )形成設計理念、設計原則、組件控件、界面交互和輸出文檔等。設計者可以依據自我的設計理念和原則按照功能需求直接調用規范中的標準控件，按照信息結構調用元素尺寸進(jìn)行設計，很輕易便能輸出中高保真原型圖，減輕了設計過(guò)程中對交互控件選擇和信息排版思考的負擔。

　　Web端設計規范之設計理念篇

　　不同的使用對象（B端、C端），不同的終端設備，設計的區別是完全不一樣的。所以設計理念也有所區別。

　　B端產(chǎn)品一般較定制化，以業(yè)務(wù)為導向。可能有很多高級功能，突出高效易用，導致易學(xué)性打折扣。

　　C端產(chǎn)品一般考慮絕大部分用戶(hù)使用場(chǎng)景和訴求，高級功能會(huì )相對少點(diǎn)。突出易學(xué)性。

　　所以在制定設計理念時(shí)，可根據團隊實(shí)際情況來(lái)設計制定。

　　Web端設計規范之設計原則篇

　　設計原則目前已經(jīng)有很多，例如尼爾森的十大可用性原則、格式塔原則、剃刀法則、費茨定律、以及設計中常見(jiàn)的對比、對齊等，那么對于這么多原則如何變成一套自己的設計規范的設計原則篇呢？這個(gè)需要設計師們根據自身情況或者自身團隊實(shí)際情況去把控梳理。

　　Web端設計規范之組件控件篇

　　組件控件是整個(gè)設計規范的重要的內容之一，組件控件分類(lèi)可以根據組件控件屬性進(jìn)行分類(lèi)，也可以根據組件控件的功能進(jìn)行劃分。

　　按照設計師做設計的使用場(chǎng)景，還是按照組件控件的功能性進(jìn)行劃分比較切合。

　　依據于功能劃分，例如表單類(lèi)就可以劃分為：?jiǎn)挝谋据斎耄辔谋据斎搿⑷諝v時(shí)間選擇器、下拉選擇列表、單選多選等等

　　Web端設計規范之界面交互篇

　　移動(dòng)端的觸發(fā)手勢有單擊、長(cháng)按、左右滑動(dòng)、拖拽、旋轉、夾捏等。相對于移動(dòng)端，Web端的界面交互就很簡(jiǎn)單了，基本就是懸浮和點(diǎn)擊。

　　界面交互的本質(zhì)用一個(gè)公式可表述即：觸發(fā)對象+操作行為+交互結果=界面交互

　　Web端設計規范之團隊輸出物篇

　　作為一名交互設計師，我們的重點(diǎn)工作職責是起到承上啟下的作用。

　　比如對接上游的產(chǎn)品經(jīng)理和項目經(jīng)理，跟他們討論過(guò)產(chǎn)品規劃及需求后，他們會(huì )根據交互設計師輸出的交互文檔來(lái)評審設計方案是否滿(mǎn)足用戶(hù)需求，以及在開(kāi)發(fā)實(shí)施過(guò)程中的可行性；

　　其次要對接下游的視覺(jué)設計師和開(kāi)發(fā)工程師，他們會(huì )根據交互文檔中的線(xiàn)框圖、交互細節說(shuō)明等來(lái)輸出視覺(jué)設計稿、用代碼實(shí)現交互設計方案，并以此為依據完成落地實(shí)現等工作。所以交互設計師重要的輸出物就是交互文檔，它是對接上下游的重要紐帶。

　　的交互文檔應該包含以下7點(diǎn)內容：完整的項目簡(jiǎn)介、需求分析、新增修改紀錄、信息架構、交互設計的方案闡述、頁(yè)面交互流程圖（包含界面布局，操作手勢，反饋效果，元素的規則定義）、異常頁(yè)面和異常情況的說(shuō)明。

　　作為視覺(jué)設計師而言，輸出物的是視覺(jué)稿、標注和切圖，這里不做贅述。

http://ezekroy.com/jianzhanzhishi/6597.html 怎么樣構建Web端設計規范-深圳網(wǎng)站設計