這篇文章是之後 WEB 端系列設計規範的前言部分，目的是起到拋磚引玉的作用，簡述如何製作屬於 “自己” 的 Web 端設計規範。
Web 端設計規範的價值
1. 可複用性
有了完整的設計規範和對應的組件控制組件。方便視覺和互動設計師反覆複用，不需要重複製作，減少工作量提高工作效率。
2. 統一性
有了統一的設計規範，設計師之間使用時，可避免自我創造組件控制組件，保持團隊產品的統一性體驗。
3. 提升能力
由於組件控制組件的可複用，這直接使設計師的工作效率得到極大提高節省了大量時間，可以有大量時間思考設計和業務背後的邏輯從而提高設計思維能力。同時完整的設計規範是系統的，設計師閲讀之後可以構建自我的設計體系，對於設計的提高有極大的好處。
4. 團隊文化沉澱
團隊有了設計規範之後，便於團隊以後做設計的依據和參考，不論是新員工的到來還是老員工的離去，都可以很好的對接工作提升團隊的協同效率。
Web 端設計規範包含哪些
目前網上大部分設計規範都是之針對組件控制組件的規範，缺少完整的設計思想和體系化的內容。
在制定設計規範過程中會形成設計理念、設計原則、組件控制組件、介面互動和輸出文件等。設計者可以依據自我的設計理念和原則按照功能需求直接呼叫規範中的標準控制組件，按照資訊結構呼叫元素尺寸進行設計，很輕易便能輸出中高保真原型圖，減輕了設計過程中對互動控制組件選擇和資訊排版思考的負擔。
Web 端設計規範之設計理念篇
不同的使用物件（B 端、 C 端），不同的終端裝置，設計的區別是完全不一樣的。所以設計理念也有所區別。
B 端產品一般較定製化，以業務為導向。可能有很多高階功能，突出高效易用，導致易學性打折扣。
C 端產品一般考慮絕大部分多用户使用場景和訴求，高階功能會相對少點。突出易學性。
所以在制定設計理念時，可根據團隊實際情況來設計制定。
Web 端設計規範之設計原則篇
設計原則目前已經有很多，例如尼爾森的十大可用性原則、格式塔原則、剃刀法則、費茨定律、以及設計中常見的對比、對齊等，那麼對於這麼多原則如何變成一套自己的設計規範的設計原則篇呢？這個需要設計師們根據自身情況或者自身團隊實際情況去把控梳理。
Web 端設計規範之組件控制組件篇
組件控制組件是整個設計規範的重要的內容之一，組件控制組件分類可以根據組件控制組件屬性進行分類，也可以根據組件控制組件的功能進行劃分。
按照設計師做設計的使用場景，還是按照組件控制組件的功能性進行劃分比較切合。
依據於功能劃分，例如表單類就可以劃分為：單文字輸入，多文字輸入、日曆時間選擇器、下拉選擇列表、單選多選等等
Web 端設計規範之介面互動篇
移動端的觸發手勢有單擊、長按、左右滑動、拖拽、旋轉、夾捏等。相對於移動端，Web 端的介面互動就很簡單了，基本就是懸浮和點選。
介面互動的本質用一個公式可表述即：觸發物件+操作行為+互動結果=介面互動
Web 端設計規範之團隊輸出物篇
作為一名互動設計師，我們的重點工作職責是起到承上啓下的作用。
比如對接上游的產品經理和專案經理，跟他們討論過產品規劃及需求後，他們會根據互動設計師輸出的互動文件來評審設計方案是否滿足多用户需求，以及在開發實施過程中的可行性；
其次要對接下游的視覺設計師和開發工程師，他們會根據互動文件中的線框圖、互動細節説明等來輸出視覺設計稿、用代碼實現互動設計方案，並以此為依據完成落地實現等工作。所以互動設計師重要的輸出物就是互動文件，它是對接上下游的重要紐帶。
的互動文件應該包含以下 7 點內容：完整的專案簡介、需求分析、新增修改紀錄、資訊架構、互動設計的方案闡述、頁面互動流程圖（包含介面佈局，操作手勢，反饋效果，元素的規則定義）、異常頁面和異常情況的説明。
作為視覺設計師而言，輸出物的是視覺稿、標註和切圖，這裏不做贅述。