如何構(gòu)建Web端網(wǎng)頁設(shè)計(jì)規(guī)范

Web端網(wǎng)頁設(shè)計(jì)規(guī)范的價(jià)值

1、可復(fù)用性：有了完整的設(shè)計(jì)規(guī)范和對(duì)應(yīng)的組件控件。方便視覺和交互設(shè)計(jì)師反復(fù)復(fù)用，不需要重復(fù)制作，減少工作量提高工作效率。

2、統(tǒng)一性：有了統(tǒng)一的設(shè)計(jì)規(guī)范，設(shè)計(jì)師之間使用時(shí)，可避免自我創(chuàng)造組件控件，保持團(tuán)隊(duì)產(chǎn)品的統(tǒng)一性體驗(yàn)。

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

4、團(tuán)隊(duì)文化沉淀：團(tuán)隊(duì)有了設(shè)計(jì)規(guī)范之后，便于團(tuán)隊(duì)以后做設(shè)計(jì)的依據(jù)和參考，不論是新員工的到來還是老員工的離去，都可以很好的對(duì)接工作提升團(tuán)隊(duì)的協(xié)同效率。

Web端設(shè)計(jì)規(guī)范包含哪些

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

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

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

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

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

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

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

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

設(shè)計(jì)原則目前已經(jīng)有很多，例如尼爾森的十大可用性原則、格式塔原則、剃刀法則、費(fèi)茨定律、以及設(shè)計(jì)中常見的對(duì)比、對(duì)齊等，那么對(duì)于這么多原則如何變成一套自己的設(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ì)的使用場(chǎng)景，還是按照組件控件的功能性進(jìn)行劃分比較切合。例如表單類就可以劃分為：?jiǎn)挝谋据斎耄辔谋据斎?、日歷時(shí)間選擇器、下拉選擇列表、單選框復(fù)選框等等

界面交互

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

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

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

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

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

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

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

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

網(wǎng)頁標(biāo)題：如何構(gòu)建Web端網(wǎng)頁設(shè)計(jì)規(guī)范
本文網(wǎng)址：http://bm7419.com/news/156699.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、軟件開發(fā)、商城網(wǎng)站、網(wǎng)站制作、定制開發(fā)、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)