這篇文章是(shi)之后WEB端(duan)系列(lie)設(she)計規(gui)范(fan)的前言部分，目的是(shi)起到拋磚(zhuan)引玉的作用(yong)，簡述如何制(zhi)作屬于“自己”的Web端(duan)設(she)計規(gui)范(fan)。
Web端設(she)計規(gui)范的價(jia)值
1.可復用性
有(you)了完(wan)整的設(she)計(ji)規范和(he)對應的組件(jian)控件(jian)。方(fang)便視覺和(he)交互設(she)計(ji)師反復(fu)復(fu)用，不需要重復(fu)制作，減(jian)少工(gong)作量提(ti)高工(gong)作效率。
2.統一性
有(you)了統(tong)(tong)一的設計規范，設計師之間使(shi)用時，可避免自我創(chuang)造(zao)組件控件，保持團(tuan)隊產(chan)品的統(tong)(tong)一性體驗。
3.提升能力
由于組件控件的(de)(de)(de)(de)可(ke)復用(yong)，這直接使設(she)計(ji)師的(de)(de)(de)(de)工作效率得到極(ji)大(da)(da)提高(gao)節省了(le)大(da)(da)量(liang)時間，可(ke)以(yi)有大(da)(da)量(liang)時間思(si)考(kao)設(she)計(ji)和業務背后(hou)的(de)(de)(de)(de)邏輯從而(er)提高(gao)設(she)計(ji)思(si)維(wei)能力。同時完整的(de)(de)(de)(de)設(she)計(ji)規范是系統的(de)(de)(de)(de)，設(she)計(ji)師閱讀之后(hou)可(ke)以(yi)構建自我的(de)(de)(de)(de)設(she)計(ji)體系，對于設(she)計(ji)的(de)(de)(de)(de)提高(gao)有極(ji)大(da)(da)的(de)(de)(de)(de)好處(chu)。
4.團隊文化(hua)沉淀
團(tuan)(tuan)隊有了設計規(gui)范之后，便于團(tuan)(tuan)隊以(yi)后做(zuo)設計的(de)依(yi)據(ju)和參考，不論是(shi)新員(yuan)工(gong)的(de)到(dao)來還是(shi)老員(yuan)工(gong)的(de)離去，都(dou)可(ke)以(yi)很好(hao)的(de)對(dui)接工(gong)作提升(sheng)團(tuan)(tuan)隊的(de)協同(tong)效(xiao)率(lv)。
Web端(duan)設(she)計規范(fan)包含(han)哪些
目(mu)前網(wang)上大部(bu)分設(she)(she)計規范(fan)都是之(zhi)針(zhen)對組件控件的規范(fan)，缺少完整的設(she)(she)計思想和體系化(hua)的內(nei)容。
在制(zhi)定設(she)計(ji)規范過程(cheng)中會形成設(she)計(ji)理(li)念(nian)、設(she)計(ji)原則(ze)、組件控件、界面(mian)交互和(he)輸出文檔等。設(she)計(ji)者可以依據自(zi)我(wo)的(de)(de)設(she)計(ji)理(li)念(nian)和(he)原則(ze)按照功能需求(qiu)直(zhi)接(jie)調用規范中的(de)(de)標準控件，按照信息(xi)結構調用元素尺寸進行設(she)計(ji)，很輕易便(bian)能輸出中高保真原型圖，減輕了設(she)計(ji)過程(cheng)中對交互控件選擇和(he)信息(xi)排版思考的(de)(de)負擔。
Web端設(she)計(ji)規范之設(she)計(ji)理念(nian)篇
不(bu)同的(de)使(shi)用對(dui)象（B端、C端），不(bu)同的(de)終端設(she)備，設(she)計(ji)(ji)的(de)區別是(shi)完(wan)全(quan)不(bu)一樣的(de)。所以設(she)計(ji)(ji)理(li)念也有所區別。
B端產品一(yi)般較定制化，以業(ye)務為(wei)導(dao)向。可能有很多高(gao)級功(gong)能，突出高(gao)效易用，導(dao)致易學性(xing)打折扣(kou)。
C端產品一般考慮絕(jue)大部分用(yong)戶使用(yong)場景和(he)訴求(qiu)，高級功能會(hui)相對(dui)少(shao)點(dian)。突(tu)出易學性。
所以在制定設計理念時，可根據(ju)團隊(dui)實際情況來設計制定。
Web端設計規范(fan)之設計原則篇
設(she)計原(yuan)(yuan)則(ze)目前已經有很多(duo)，例如尼爾(er)森的(de)(de)(de)十(shi)大可用性原(yuan)(yuan)則(ze)、格式(shi)塔原(yuan)(yuan)則(ze)、剃(ti)刀法則(ze)、費茨定律、以(yi)及設(she)計中常見的(de)(de)(de)對比、對齊等，那么(me)對于這么(me)多(duo)原(yuan)(yuan)則(ze)如何變成(cheng)一套自(zi)己(ji)的(de)(de)(de)設(she)計規范(fan)的(de)(de)(de)設(she)計原(yuan)(yuan)則(ze)篇呢？這個需要設(she)計師們根據自(zi)身情況(kuang)或者自(zi)身團隊實際情況(kuang)去把控(kong)梳理。
Web端設計規范之(zhi)組件控件篇
組件(jian)控(kong)(kong)(kong)件(jian)是整個(ge)設(she)計規(gui)范的最重要的內容之一，組件(jian)控(kong)(kong)(kong)件(jian)分(fen)類可(ke)以根據(ju)組件(jian)控(kong)(kong)(kong)件(jian)屬(shu)性進(jin)行分(fen)類，也可(ke)以根據(ju)組件(jian)控(kong)(kong)(kong)件(jian)的功能進(jin)行劃(hua)分(fen)。
按照設計(ji)師做設計(ji)的(de)使用場景，還(huan)是按照組件控(kong)件的(de)功能性進行劃分比較切(qie)合。
依據于(yu)功(gong)能劃分(fen)，例如表單類(lei)就可以劃分(fen)為：單文本輸入，多文本輸入、日歷時間選擇(ze)(ze)器、下拉選擇(ze)(ze)列表、單選多選等等
Web端設計規(gui)范(fan)之界(jie)面交互篇
移(yi)動(dong)端(duan)的觸(chu)發(fa)手勢有(you)單(dan)擊、長(chang)按(an)、左右滑動(dong)、拖拽、旋(xuan)轉、夾捏等。相對于移(yi)動(dong)端(duan)，Web端(duan)的界面(mian)交互就很簡(jian)單(dan)了，基本就是懸浮和點擊。
界面(mian)交(jiao)互的本質用一個公式可(ke)表述即：觸發對象+操作行為+交(jiao)互結果=界面(mian)交(jiao)互
Web端設計規范之團隊(dui)輸出物篇
作(zuo)(zuo)為一名交互設(she)計師，我們的重點工(gong)作(zuo)(zuo)職責(ze)是起(qi)到承(cheng)上啟下的作(zuo)(zuo)用(yong)。
比如對(dui)接上游(you)的產(chan)品(pin)(pin)經理和項目經理，跟他們討論過(guo)產(chan)品(pin)(pin)規劃及需(xu)求后，他們會根據交(jiao)互設計師輸(shu)出的交(jiao)互文檔來評審(shen)設計方案是否滿足(zu)用戶需(xu)求，以(yi)及在開(kai)發實施過(guo)程中的可行(xing)性；
其次要(yao)(yao)對接(jie)下游的視覺設計師(shi)和開發工程師(shi)，他們(men)會根據交互(hu)文檔中的線框圖(tu)、交互(hu)細節說明等(deng)來(lai)輸出視覺設計稿、用代碼實(shi)現交互(hu)設計方(fang)案，并以(yi)此(ci)為依據完成落地實(shi)現等(deng)工作。所以(yi)交互(hu)設計師(shi)最重要(yao)(yao)的輸出物就(jiu)是交互(hu)文檔，它(ta)是對接(jie)上(shang)下游的重要(yao)(yao)紐帶。
專業的(de)交互文檔(dang)應該包含以下7點(dian)內容：完(wan)整的(de)項(xiang)目簡介、需求分析、新增修(xiu)改紀錄(lu)、信息架構(gou)、交互設(she)計的(de)方案闡述、頁面交互流程圖（包含界面布局，操作手勢，反(fan)饋效(xiao)果(guo)，元素的(de)規則定義）、異(yi)(yi)常頁面和異(yi)(yi)常情況的(de)說明。
作為(wei)視覺(jue)設計(ji)師(shi)而言，輸出物的(de)是視覺(jue)稿、標注和切圖，這里不做贅述(shu)。
