怎么樣構建Web端設計規(guī)范

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

Web端設計規(guī)范的價值

1.可復用性

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

2.統(tǒng)一性

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

3.提升能力

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

4.團隊文化沉淀

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

Web端設計規(guī)范包含哪些

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

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

Web端設計規(guī)范之設計理念篇

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

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

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

所以在制定設計理念時，可根據(jù)團隊實際情況來設計制定。

Web端設計規(guī)范之設計原則篇

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

Web端設計規(guī)范之組件控件篇

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

按照設計師做設計的使用場景，還是按照組件控件的功能性進行劃分比較切合。

依據(jù)于功能劃分，例如表單類就可以劃分為：單文本輸入，多文本輸入、日歷時間選擇器、下拉選擇列表、單選多選等等

Web端設計規(guī)范之界面交互篇

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

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

Web端設計規(guī)范之團隊輸出物篇

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

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

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

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

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

網(wǎng)頁標題：怎么樣構建Web端設計規(guī)范
文章鏈接：http://www.muchs.cn/news31/59481.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、App開發(fā)、標簽優(yōu)化、定制開發(fā)、網(wǎng)站設計公司、搜索引擎優(yōu)化

廣告

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