組件制作規(guī)范

1、最小化切分原則：在制作組件時(shí)，遵循最小化原則，保證新的組件能進(jìn)行上下左右擴(kuò)展、變化字體、增加新的數(shù)據(jù)項(xiàng)等。?

2、內(nèi)部交互原則：如果組件能內(nèi)部完成交互，在制作時(shí)就要加上交互的命名，減少后期的操作。

3、遵循設(shè)計(jì)規(guī)范原則：如果產(chǎn)品已經(jīng)有成形的設(shè)計(jì)規(guī)范，那么自行制作的組件必須大體遵循設(shè)計(jì)規(guī)范。制作新的組件所使用的基本元素也要從設(shè)計(jì)規(guī)范產(chǎn)生。

庫制作規(guī)范?

1、公共區(qū)域（具體指頁頭、頁腳、導(dǎo)航條、頁面內(nèi)的公共元素）：要求采用庫，以減少修改量；?

2、對于位置固定的庫，須設(shè)置為：Place ?in Background ?

3、根據(jù)視覺規(guī)范，制作通用庫。??

導(dǎo)航制作規(guī)范??

1、單個(gè)頁面的命名規(guī)范：制定通用的命名規(guī)范?

1) ?頂層頁面：? ? ?

a) ?前端頁面，這是用戶使用的頁面。

b)管理員的管理頁；

c)數(shù)據(jù)統(tǒng)計(jì)功能頁；

2) ?子頁面： ? ??

a) 匯總頁： ?

b) 瀏覽頁： ?

c) 增加數(shù)據(jù)： ?

d) 修改數(shù)據(jù)： ?

e) 修改分類： ?

f) 創(chuàng)建數(shù)據(jù)： ?

g) 重新命名： ??

3) ?擴(kuò)展：子頁面的命名可以擴(kuò)展 ?

2、增加數(shù)據(jù)、刪除數(shù)據(jù)、修改數(shù)據(jù)，原則上從屬于匯總頁。但必須遵守產(chǎn)品設(shè)計(jì)思路。另外，如果在頁面內(nèi)完成可不遵守此原則； ?

3、對于復(fù)雜業(yè)務(wù)，要求單獨(dú)提供流程。展示頁面的業(yè)務(wù)邏輯和判斷條件。 ? ?

交互動(dòng)作規(guī)范

1、對于文本型內(nèi)容的鏈接：在文字上面增加一個(gè)熱區(qū)，在該層上面加鏈接。

2、Axure的交互動(dòng)作總有如下幾種： ?

a) ?Onclick?

b) Onmouseenter ?

c) Onmouseout ?

d) ?Onkeyup

e) Onfocus ?

f) Onlostfocus ?

g) ?Onchange

h) ?Onpageload ?

3、對于同一個(gè)位置的條件判斷，要求在按鈕上如下提示，以方便技術(shù)和制作人員閱讀。對于高保真的原型，則應(yīng)該加上數(shù)據(jù)判斷，避免這種提示。?

注釋規(guī)范??

1、注釋的內(nèi)容：一個(gè)完整的注釋需要包含以下說明： ?

1) ?功能說明：說明該對象的主要完成的功能。

2) ?交互效果：說明該對象的交互動(dòng)作以及產(chǎn)生的交互結(jié)果；此處應(yīng)該包含各種判斷的說明。

3) ?優(yōu)先級：也可以理解為重要性。標(biāo)明該控件在交互中的重要性。

4) ?關(guān)聯(lián)關(guān)系：包含觸發(fā)方式（默認(rèn)顯示 / ?被動(dòng)觸發(fā)），以及其他對象/數(shù)據(jù)的關(guān)聯(lián)關(guān)系。對于同時(shí)擁有管理后臺、用戶后臺的地方，需要說明數(shù)據(jù)關(guān)系。

5) ?測試用例：提供測試方法及測試應(yīng)該使用的數(shù)據(jù)。

6) ?注意事項(xiàng)：注意事項(xiàng)。 ?

2、可以針對各個(gè)特殊控件、組件自定義其他注釋。 ??

整體制作要求??

1、任何一個(gè)完整的產(chǎn)品，包括3部分，這3部分在原型需要獨(dú)立展示：?

1) ?用戶前端頁面：

a) ?用戶在不登錄、登錄情況下進(jìn)行瀏覽的頁

b) ?用戶自行管理數(shù)據(jù)/帳戶的頁面。

2) ?管理員的管理頁：主要數(shù)據(jù)的增刪改查、審核。 ? ??

3) ?數(shù)據(jù)統(tǒng)計(jì)功能：主要包括流量統(tǒng)計(jì)（IP、PV、UV、登陸用戶數(shù)、活躍用戶數(shù)）。 ?

2、Tab使用：

1) ?選項(xiàng)卡不要超過5個(gè)，最多不能超過7個(gè)。可以考慮使用2級選項(xiàng)卡來減少數(shù)量。 ?

2) ?被選中的選項(xiàng)卡和底下的區(qū)域要保持同色或接近同色。?

3、頁腳的pagenotes區(qū)域：默認(rèn)使用兩個(gè)字段，在任何文檔中均需要保留著3個(gè)字段。

1) ?功能說明。說明本頁面主要的功能，以及與其他頁面的關(guān)系。

2) ?測試用例。說明本頁面使用哪些數(shù)據(jù)進(jìn)行常規(guī)測試和邊界測試。

3) ?注意事項(xiàng)。說明本頁面在設(shè)計(jì)、制作、開發(fā)和測試中需要注意的事項(xiàng)。 ? ??

4、保真度（僅針對前端頁面）：?

1) ?創(chuàng)新型產(chǎn)品、產(chǎn)品改版：為了體現(xiàn)新產(chǎn)品的業(yè)務(wù)邏輯，或展示產(chǎn)品的改進(jìn)功能，本類原型要求高保真原型。具體包含： ?

a) ?所有頁面有完整的鏈接，能順利跳轉(zhuǎn)、關(guān)閉；

b) ?任何交互均有完整的流程和結(jié)束；

c) ?關(guān)鍵功能、創(chuàng)新點(diǎn)要上色，避免使用自帶的灰白色、黑色；

d) ?按鈕的點(diǎn)擊變化能實(shí)時(shí)體現(xiàn)：文本框、輸入框、文字、層的變化。

e) ?使用條件判斷，并根據(jù)條件做不同的提示。

f) ?對于各個(gè)控件有完整的說明文檔； ? ??

2) ?傳統(tǒng)產(chǎn)品、新增功能：可以使用一般的線框圖，使用黑白灰原型。具體包括：

a) ?對于頁面大部無改進(jìn)，可以直接截取靜態(tài)圖；

b) ?對于無關(guān)或者傳統(tǒng)功能，可以部分忽略跳轉(zhuǎn)和交互效果；

c) ?提供關(guān)鍵的條件判斷。

d) ?不要求完整的說明文檔； ? ??

3) ?具體保真度，還可以參考產(chǎn)品文檔的使用人員的知識結(jié)構(gòu)、工作經(jīng)驗(yàn)、配合默契度等靈活掌握。 ?