Web端網(wǎng)頁設(shè)計(jì)規(guī)范都包含哪些

　　Web端網(wǎng)頁設(shè)計(jì)規(guī)范都包含哪些？

　　一、設(shè)計(jì)理念

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

　　B端產(chǎn)品一般較定制化，以業(yè)務(wù)為導(dǎo)向?？赡苡泻芏喔呒壒δ埽怀龈咝б子?，導(dǎo)致易學(xué)性打折扣。

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

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

　　二、設(shè)計(jì)原則

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

　　三、組件控件

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

　　按照設(shè)計(jì)師做設(shè)計(jì)的使用場景，還是按照組件控件的功能性進(jìn)行劃分比較切合。例如表單類就可以劃分為：單文本輸入，多文本輸入、日歷時(shí)間選擇器、下拉選擇列表、單選框復(fù)選框等等

　　四、界面交互

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

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

　　五、團(tuán)隊(duì)輸出物

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

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

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

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

　　作為視覺設(shè)計(jì)師而言，輸出物的是視覺稿、標(biāo)注和切圖，這里不做贅述。