產(chǎn)品頁(yè)面規(guī)范說(shuō)明書_v30

1、點(diǎn)威所有產(chǎn)品頁(yè)面規(guī)范說(shuō)明書文檔編號(hào)：dianvo-proj-doc/201306-ol文件狀態(tài)：草稿正式發(fā)布n正在修改當(dāng)前版本：v2.0密級(jí)：保密創(chuàng)建日期：2013-6-1批準(zhǔn)日期：2013-6-1創(chuàng)建人：李應(yīng)洪審核/批準(zhǔn)人：李應(yīng)洪版本號(hào)變化狀態(tài)簡(jiǎn)要說(shuō)明（變更內(nèi)容和變更范圍）日期變更人批準(zhǔn)人vi. 1c創(chuàng)建文檔2013-6-1李應(yīng)洪李應(yīng)洪vi. 2a內(nèi)容變更2014-7-16張霞備注:變化狀態(tài)：c創(chuàng)建，a增加”m參改，i）刪除，a審核1樹的規(guī)范41丄平臺(tái)基本上所有的樹都已經(jīng)規(guī)范，樹分為幾類：412樹的主要細(xì)節(jié)要求為：52. 按鈕及icon83. 頁(yè)面對(duì)象錯(cuò)誤!未定義書簽。3.1. 文本框103

2、.2. 代碼集選擇控件103.2.1當(dāng)代碼集只有1層：統(tǒng)一為下拉框"103.2.2. 當(dāng)代碼集只有多層：統(tǒng)一為彈出div"，但必須保證彈出的div中的文字不能換行，可以通過(guò)統(tǒng)一的彈出頁(yè)面參數(shù)控制div的寬度1133選擇框113.4. b期對(duì)象113.5. 輸入表單123.6. 驗(yàn)證134. 查詢134.1查詢條件（有樹狀）錯(cuò)誤!未定義書簽。42查詢條件（無(wú)樹狀）錯(cuò)誤!未定義書簽。43帶代碼集"的查詢條件144.4查詢結(jié)果145.提示信息規(guī)范175.1. 刪除：175.2. 修改：175.3啟用/停用：176. 頁(yè)面展示層級(jí)177. 界面規(guī)范187.1. 界面易用性

3、187.2界面規(guī)范性187.3.界面美觀與協(xié)調(diào)性188. 兼容性208丄瀏覽器208.2. 分辨率：209. 注意事項(xiàng)209.1. 規(guī)范測(cè)試:209.2. 流程測(cè)試：209.3. 數(shù)據(jù)測(cè)試：211頁(yè)面對(duì)象1.1.樹的規(guī)范1.1.1平臺(tái)基本上所有的樹都已經(jīng)規(guī)范,樹分為幾類:1）教職工樹：師資表獲取數(shù)據(jù)（查詢?cè)诼?、返聘狀態(tài)的教職工）;2 ）教職工用戶樹：教職工類的用戶表數(shù)據(jù)（查詢啟用狀態(tài)的用戶），當(dāng)業(yè)務(wù)選擇的對(duì)象是需要教職工 登陸軟件平臺(tái)的情況下,應(yīng)該選擇教職工用戶"樹，而不應(yīng)該選擇"教職工"樹；如下圖（因?yàn)?發(fā)送的郵件，需要教職工登陸軟件平臺(tái)去接收郵件，所以是從用戶

4、表選的可以登陸平臺(tái)的教職工用 戶,而非教職工基本檔案表去選擇一個(gè)收件人）；3 ）學(xué)生樹:學(xué)籍表中在校生數(shù)據(jù)（查詢?cè)谧x、復(fù)學(xué)、轉(zhuǎn)專業(yè).轉(zhuǎn)班級(jí)、跳級(jí)、留級(jí)狀態(tài)的學(xué)生）；4 ）學(xué)生用戶樹：在校生類的用戶表數(shù)據(jù)（查詢啟用狀態(tài)的用戶），當(dāng)業(yè)務(wù)選擇的對(duì)象是需要學(xué)生登陸軟彳牛平臺(tái)的情況下，應(yīng)該選擇"學(xué)生用戶"樹，而不應(yīng)該選擇學(xué)生"樹；5 ）校友樹：已畢業(yè)、已結(jié)業(yè)的學(xué)生類學(xué)籍表數(shù)據(jù)；6 ）機(jī)構(gòu)樹：?jiǎn)?dòng)狀態(tài)的機(jī)構(gòu),不包括停用和已刪除；7 ）班主任樹:通過(guò)班級(jí)找到的所有當(dāng)前班主任班；8 ）專業(yè)樹:啟動(dòng)狀態(tài)的專業(yè),不包括停用和已刪除；9 ）班級(jí)樹:啟動(dòng)狀態(tài)的班級(jí)，不包括停用和已刪除；1

5、0 ） 企業(yè)樹;11） 其蝕對(duì)；1丄2樹的主要細(xì)節(jié)要求:1）默認(rèn)展開(kāi)：點(diǎn)擊功能菜單，樹上第二層節(jié)點(diǎn)默認(rèn)展開(kāi)；如下圖：匚荃巴設(shè)資業(yè)r理鞏a臺(tái)理學(xué)年學(xué)期匚）蜒結(jié)業(yè)學(xué)箱異動(dòng)魏計(jì)芟誨2 ）第三層節(jié)點(diǎn)：點(diǎn)擊第三層節(jié)點(diǎn)，當(dāng)前節(jié)點(diǎn)展開(kāi)，其他同級(jí)節(jié)點(diǎn)折疊；如下圖:電子技才應(yīng)用0年飯l二年3 ）默認(rèn)查詢所有:從功能菜單點(diǎn)擊進(jìn)入.默認(rèn)查詢?yōu)闃渖细?jié)點(diǎn)之下的所有數(shù)據(jù)，如：班級(jí)管理,點(diǎn)擊菜單后，查詢所有班級(jí)列表,即與點(diǎn)擊班級(jí)根節(jié)點(diǎn)查詢的結(jié)果一致；c xuifix»學(xué)年學(xué)期學(xué)ii界動(dòng)負(fù)學(xué)<iir理系歩設(shè)>wairsid班a名稱:數(shù)疫技術(shù)應(yīng)用 計(jì) mmsffi 合計(jì)脈耐嚴(yán)務(wù)可皆趣法矗爭(zhēng)化學(xué)工藝 工業(yè)

6、分析馬&益 電子技術(shù)應(yīng)用連詵年月：汽車運(yùn)用烏維修 化工工藝計(jì)篡機(jī)隔r201 >0420r年總儀區(qū)r22012020l2<092012t年一r32011072oiiai+.|2011-09201牧務(wù)劉r420110820110kk.2011 09201§枚區(qū)r5201109201 m 計(jì)一2011-09201£枚區(qū)載務(wù)劉r6201110201 ia 計(jì)一2011-092011t總枚區(qū)r720120.2012tf 計(jì).2012-092012tfitte廠8201010voio«i+j201009201sue教務(wù)劉r9201009*)100# 201

7、009201 or 年0役區(qū)r1020100820100920£枚區(qū)91m（3幡加（3修改啟用®伶用序號(hào)血號(hào)刪絕戦年月頑換逅機(jī)沖4 ）查詢下級(jí)：當(dāng)點(diǎn)擊某個(gè)節(jié)點(diǎn)時(shí),默認(rèn)查詢其節(jié)點(diǎn)下的所有記錄，以及其下級(jí)節(jié)點(diǎn)下的所有記錄；如下圖：5 ）彈出頁(yè)面的樹：彈出頁(yè)面的樹已經(jīng)統(tǒng)一為之前描述的幾種。/ 頁(yè)面上確定按鈕,而不是保存"按鈕； / 彈出頁(yè)面的title :按照父頁(yè)面的業(yè)務(wù)來(lái)寫，統(tǒng)一為"選擇*",比如文件審批人,那就是"選擇文件審批人"，（盡管是從教職工表中選擇的班主任，但不能叫做選擇教職工）； “ 選擇樹：?jiǎn)芜x時(shí)用radio ,中

8、間不顯示 t "t按鈕，且若多次操作，后面選擇的數(shù)據(jù)自動(dòng)替換掉前面已選的，參考圖1 ；多選時(shí)用復(fù)選框，參考圖2 ;選擇樹具有快速檢索功能，只將查詢結(jié)果列在選擇框內(nèi)；具有快速索功能(3x封5文件玄擾人 敦3x用戶柯辦館訓(xùn) 字生弟 拾生取安金咖 印刖廠 生舌整務(wù)中心 實(shí)習(xí)工廠(尅寶 b|«55如辦）如辦） 辦）如如如辦）dta如驚j 単選時(shí)使用rado技紐oooo°wil*oiiit 甲幟§左五芯0o幺正友圖212按鈕及icon以下為產(chǎn)品中所用到所有功能按鈕，如果遇到不在此列表中的，請(qǐng)?zhí)釋鐏?lái)!序號(hào)按鈕名稱css樣式名稱效果截圖1增加icon_ add國(guó)18加

9、2修改icon_ edit修改3刪除icon_ delete4保存icon_ save5查詢icon _search6預(yù)覽icon _preview7鎖定icon _key8導(dǎo)入icon_in園導(dǎo)入9導(dǎo)出icon_out逼號(hào)出10上傳icon_ upload*上傳11下載icon_ dow nload2m下載12查看結(jié)果icon_ result回董5結(jié)果13返回icon _retur n14刷新icon_refresh>s0r15確定&提交icon_c on firm16關(guān)閉icon_closeg炯17啟用icon_enable©啟用18停用icon_disable停用

10、19打印icon _print冷打a20設(shè)置icon_setting21清空（查詢條件）ico n_q u e ry_e m ptyh麻（2®鈾22作廢iconj nvalid卜作廢23審批通過(guò)icon _pass迢市批il過(guò)24審批拒絕icon_refuse25文件icon_file運(yùn)文件26url文件夾icon_urluro文件夾27預(yù)覽icon_preview28撥款icon_ appropriatio n1撥款29獎(jiǎng)勵(lì)icon _rewardt題30收藏icon_collect31批閱icon_readover32提問(wèn)icon_quize沒(méi)問(wèn)33審核icon_audit34課

11、表icon _timetable35閱辦&授權(quán)icon _yueba n2權(quán)36回復(fù)icon _replyo回復(fù)37總結(jié)icon_ summarize38跟蹤icon _tracklamb39催辦icon_haste n40注冊(cè)icon_ register41報(bào)道icon_ report42授課icon_ schoolteachi ng43抽卷icon_ choujuan陵抽卷44開(kāi)始考評(píng)icon_ startevaluatio n45網(wǎng)絡(luò)課堂iconjnternetclassroom網(wǎng)絡(luò)課堂13文本框1）原則上高度、寬度統(tǒng)一；2）按照信息集要求，限制輸入的文字?jǐn)?shù)量；3 ）必須采用公共

12、的css樣式（只要采用公共樣式，就會(huì)做到查詢條件的輸入框和表單中的輸入框自 適應(yīng)寬度）；1.4代碼集選擇控件1.4.1. 當(dāng)代碼集只有1層：統(tǒng)一為下拉框1）原則上固定寬度，與"文本框?qū)R，下拉框統(tǒng)一適應(yīng)瀏覽器的行為（firefox目前可以,ie需要另寫樣式丫h 份證件號(hào)員無(wú)產(chǎn)主義宵鋒團(tuán)団員 fflrjt*©員會(huì)合員 民主rfflsfl員 民王尬35會(huì)會(huì)員 民王促邊合會(huì)員 農(nóng)工民主e員嵌公如員 九三丫社社員 臺(tái)4aimttmno員/無(wú)咒;眼主人士/i帕擇家ib住址岀生地行政區(qū)戶所衣地豈幟住址加工作年月載倉(cāng)工食序是否耳股敦師2）統(tǒng)一下拉列

13、表的默認(rèn)顯示,在沒(méi)有指定的數(shù)據(jù)時(shí)，輸入表單統(tǒng)一顯示請(qǐng)選擇；查詢條件統(tǒng)一顯田壹詢1.4.2. 當(dāng)代碼集只有多層：統(tǒng)一為彈出div，但必須保證彈出的div中的文字不能換行,可以通過(guò)統(tǒng)一的彈出頁(yè)面參數(shù)控制div的寬度1.5選擇框原則上，單選時(shí)使用radio ,復(fù)選使用checkbox ;16日期對(duì)象1）默認(rèn)值：默認(rèn)服務(wù)器的系統(tǒng)時(shí)間，而客戶端系統(tǒng)時(shí)間;2 ）錄入格式:yyyy-mm-dd. yyyy-mm-dd hh:ss、yyyy-mm-dd hh、yyyy-mm. yyyy ,統(tǒng)一采用日期控件；3 ）顯示格式 統(tǒng)一采用fmt標(biāo)簽顯示yyyymmdd、yyyymmdd hh:ssx yyyy-mm-

14、dd hh、 yyyy-mm. yyyy ;4）格式轉(zhuǎn)換：統(tǒng)一按照信息集的要求,存儲(chǔ)在數(shù)據(jù)庫(kù)中；5 ）根據(jù)業(yè)務(wù)需求,只需要"年月日"的,命名為"日期",需要加"時(shí)分秒"的命名為時(shí)間"。在查 詢列表中只顯示"yyyy-mm-dd"6）若是時(shí)間段，即起止時(shí)間的選擇，系統(tǒng)自動(dòng)控制開(kāi)始時(shí)間不能大于結(jié)束時(shí)間；7）在查詢條件中，時(shí)間為空的，默認(rèn)為所有時(shí)間；8 ）時(shí)間作為查詢條件，只顯示日期，日期控件寬度設(shè)置為剛好顯示10個(gè)字符（此處請(qǐng)開(kāi)發(fā)給定具體 值），所有根據(jù)時(shí)間查詢的地方都是選擇時(shí)間段，不能只有一個(gè)時(shí)間，列表中只

15、顯示日期；17輸入表單1）分欄：一行共分4列，其中每2列為一個(gè)頁(yè)面對(duì)象；2 ）比例：每2列占50% ;文字標(biāo)簽占15% ,輸入控件占35% ;3）對(duì)齊：文字標(biāo)簽右對(duì)齊，輸入控件（如文本框、下拉框等）左對(duì)齊；綜上述，如下圖:ifhtoe 二“二j用1上 列怡主主ma：a人4）原則上，所有按鈕統(tǒng)一浮動(dòng)顯示在最底部，保證在拖動(dòng)表單內(nèi)容的時(shí)，按鈕不被拖動(dòng)；特殊業(yè)務(wù)可以特殊處理；手生£»®一和電的酬 妣倉(cāng)總安鵝0 nger電 hquhmiio析與呦子ff*smhmvu£n|«9rv>lhkartt譽(yù)創(chuàng)hmrsb*-mv>pv3«wj

16、iushtlbnmm :和tthr卜assa<ipt y pa«n«!ojikhrtf劉uan0aii0«20005ahxl«umpos«mmms八："r祁20147*2014? t入科月2014-063*&«!u0m無(wú)mh«z7imr amk.* f 1»7s*t<i« ti*»ae 7i*eae 自京義錮 »fe*hsb m«aftlb wfr pw1.驗(yàn)證1）增加（修改）數(shù)據(jù)時(shí)，盡可能考慮各種邊界條件，如：記錄為空，輸入為空，輸入岀錯(cuò)等，當(dāng)

17、輸入 的信息滿足這些邊界條件時(shí)，將會(huì)彈出一個(gè)提示框提醒用戶，以便用戶能及時(shí)地做出修改;2）驗(yàn)證提示的提示語(yǔ)要統(tǒng)一,統(tǒng)一用彈出框提示,且用紅色框標(biāo)出不符合要求的輸入項(xiàng)；3）對(duì)于相同的字段,在增加和修改時(shí)驗(yàn)證的標(biāo)準(zhǔn)要一致；19提交1）增加（修改）數(shù)據(jù)時(shí)，點(diǎn)擊保存"后，原則上都返回到列表頁(yè)面，對(duì)特殊業(yè)務(wù)可以特殊處理, 在編輯頁(yè)上提供不同操作按鈕，如保存并跳轉(zhuǎn)到xx”、保存并繼續(xù)增加；2 ）點(diǎn)擊保存、“提交、"查詢"等按鈕后，若處理時(shí)間較長(zhǎng),須加圖層顯示"正在處理""正在處理.圖層需美化2查詢2.1常見(jiàn)查詢條件1）查詢條件頁(yè)面,查詢條件組成：

18、條件名稱"+ " +輸入控件（文本框,日期選擇控件，下拉列表);2 ）對(duì)齊：條件名稱居右（且加"全角"冒號(hào)）對(duì)齊；輸入框居左對(duì)齊;"查詢"按鈕居中；3）多行查詢條件與首行對(duì)齊排列,查詢按鈕擺放在首行右側(cè)；如圖：4 ）帶樹查詢條件分欄:一行共分7列：其中，查詢條件占6列（每2列為一個(gè)查詢條件），查詢 按鈕占1列，如下圖：卻19刪坯二翱舲：再：邦跡:腳：9耳員;金匚v入林月：獅:5 ）無(wú)樹查詢條件分欄：一行共分9列：其中，查詢條件占8列（每2列為一個(gè)查詢條件）,查詢 按鈕占1列，如下圖：匚aw： 9canj ' 2.3帶"

19、;代碼集"的查詢條件1）代碼集分為一層和多層；2 ） 層：查詢條件統(tǒng)一為下拉框，支持多選；3 ）多層：彈出框,選擇、清空；2.4查詢結(jié)果1）帶樹的查詢結(jié)果：原則上默認(rèn)不顯示查詢結(jié)果,根據(jù)條件點(diǎn)擊查詢"按鈕后顯示查詢結(jié)果；但對(duì)特殊業(yè)務(wù)、特殊用戶,默認(rèn)顯示相關(guān)查詢結(jié)果；2 ）默認(rèn)排序：查詢結(jié)果以"倒序掃咧,即最后新增數(shù)據(jù)排列在最前面；對(duì)于啟用/停用狀態(tài),啟用在前，停用在后；3 ）表頭排序:查詢結(jié)果支持點(diǎn)擊表頭對(duì)當(dāng)前頁(yè)進(jìn)行排序，列表右上方顯示的掃e序字段，點(diǎn)擊后對(duì)所有查詢結(jié)果進(jìn)行排序；4 ）表格列數(shù)：查詢結(jié)果列不宜過(guò)多，原則上不超過(guò)10列；5）預(yù)覽某條查詢結(jié)果的詳細(xì)信息

20、，在列表點(diǎn)擊"某某名稱"彈出頁(yè)面顯示；6）滾動(dòng)條：原則上查詢結(jié)果表格不支持橫向滾動(dòng)；帶翻頁(yè)的查詢結(jié)果表格不支持縱向滾動(dòng)；7 ）查詢結(jié)果列：序號(hào)、狀態(tài)、選擇、姓名、性別、專業(yè)、班級(jí)等通用的列，已經(jīng)在css中完成固定寬度，其余列自行設(shè)置（一定要在1024分辨率下設(shè)置"百分比"調(diào)試）;8 ）默認(rèn)記錄數(shù)：所有可翻頁(yè)的列表，原則上默認(rèn)設(shè)置每頁(yè)顯示10條記錄,從頁(yè)面美觀角度岀發(fā)根據(jù)頁(yè)面布局設(shè)置默認(rèn)顯示記錄數(shù)；9 ）統(tǒng)一命名：查詢條件與查詢結(jié)果列應(yīng)該是相同的命名，如姓名"，不要出現(xiàn)學(xué)生姓名"；學(xué)生法民硏務(wù)占®£（3査誨化學(xué)工藝j

21、工業(yè)分析與檢臉電子技術(shù)3増加c2修改2照片采集出生日期專業(yè)hrs身份證號(hào)導(dǎo)機(jī)樣加工技術(shù) 術(shù)應(yīng)用 -計(jì)算機(jī)應(yīng)用a4r1女5101822010.1996-01-03電子技術(shù)應(yīng)用20100（電子仁51018219941102. <r2女5101822010-.1998-09-21電子技術(shù)應(yīng)用201嗨電子仁51018219950311. a10 ）查詢結(jié)果列表中,若某字段沒(méi)有彳直則顯示空白，對(duì)于成績(jī)等數(shù)字可顯示特殊符號(hào)；原則上完整顯示字段內(nèi)容，可換行，盡量少用title功能;11 ）學(xué)年學(xué)期合并顯示時(shí)，顯示方式學(xué)年學(xué)期"12 ） 無(wú)查詢結(jié)果的顯示：若沒(méi)有滿足查詢條件的數(shù)據(jù)，在列表中顯示

22、"此次查詢沒(méi)有數(shù)據(jù)，如圖1所示，其他圖示均不規(guī)范學(xué)生欣長(zhǎng)檔察tofls來(lái)9mrsme 收炭瑤免如全焙金7菖處矽素藥異動(dòng)艮習(xí)燦角初自定義算他現(xiàn)1*分析si位分析成長(zhǎng)曲社合自我目標(biāo)動(dòng)手能力*業(yè)技能溝諭誠(chéng)值品復(fù)倦樣久恒性身心他度自養(yǎng)檢控團(tuán)趴桶神箱與與補(bǔ)發(fā)與財(cái)商invalid data石學(xué)生*長(zhǎng)檔宸丿. 丄.丄j®nfie酈分析崗位分析耒源(m成長(zhǎng)曲支rsfie 收貴 at免 肋乎金 焙全運(yùn)處 曼衰 彌素厲異動(dòng) 實(shí)習(xí) 效業(yè) 倉(cāng)初 包定義 他13 )查詢結(jié)果列表樣式：目前產(chǎn)品里有兩種查詢結(jié)果列表樣式。3 提示信息規(guī)范提示信息應(yīng)口語(yǔ)化,要友好，不允許出現(xiàn)錯(cuò)別字。文字信息應(yīng)盡量使用中文全

23、稱，少用縮寫或代號(hào)。3.1刪除:未選：請(qǐng)選擇您要?jiǎng)h除的數(shù)據(jù)!是否確定刪除？確定或取消3.2.修改:未選：請(qǐng)選擇一條您要修改的數(shù)據(jù)!多選/全選：只能選擇一條數(shù)據(jù)進(jìn)行修改！3.3啟用/停用：未選：請(qǐng)選擇您要啟用/停用的數(shù)據(jù)!多選/全選：是否確定啟用/停用？3.4.其他提示:1）對(duì)于一些不可逆的操作和對(duì)數(shù)據(jù)影響較大的操作，給予提示，確認(rèn)是否要執(zhí)行該操作;2）一些特殊的、非常規(guī)的、不易理解的操作，系統(tǒng)在特定的地方給出溫馨提示；4 頁(yè)面展示層級(jí)4.1.第一層頁(yè)面1）從查詢列表點(diǎn)擊增加修改"跳轉(zhuǎn)"到第二層頁(yè)面,不建議采用彈出窗口 ；特殊情況（如系統(tǒng)配置等簡(jiǎn)單的功能，可以彈出窗口）;4.

24、2第二層頁(yè)面1）第二層中數(shù)據(jù)進(jìn)行查看詳情時(shí)，使用彈框形式顯示，此彈框頁(yè)面可進(jìn)行打?。ǜ鶕?jù)業(yè)務(wù)需求） 操作；比如：查看某人詳細(xì)信息時(shí)，彈出窗口的形式查看；2）查看詳情的彈出頁(yè)面不需要關(guān)閉"按鈕，直接點(diǎn)擊窗口右上角 x 關(guān)閉；3）只要不是張一層頁(yè)面，都需要有"返回"按鈕，原則上返回到上一層列表頁(yè)面，根據(jù)具體業(yè)務(wù)定位 返回位置；5界面規(guī)范5.1界面易用性1）支持快捷鍵2 ）全鍵盤操作：tab鍵保留；頁(yè)面第一個(gè)對(duì)象默認(rèn)獲取焦點(diǎn)；輸入項(xiàng)較多，支持"enter"切換到下個(gè)頁(yè)面對(duì)象且支持方向鍵。5.2界面規(guī)范性1）按鈕擺放：工具欄中，操作范圍相同的按鈕要集中放在一起。2 ）頁(yè)面風(fēng)格：頁(yè)面風(fēng)格要保持一致，字的大小、顏色、字體要相同，標(biāo)點(diǎn)符號(hào)統(tǒng)一使用中文標(biāo)點(diǎn)符號(hào)。 有提示說(shuō)明的地方全部使用中文。5.3.界面美觀與協(xié)調(diào)性1）按鈕的大小要與界面的大小和空間要協(xié)調(diào)，避免空曠的界面上放置很大的按鈕；2）彈出窗口的大小寫應(yīng)與內(nèi)容多少協(xié)調(diào)，避免較大窗口顯示較少內(nèi)容或較小窗口顯示很多內(nèi)容；3 ）如果窗體支持最小化和最大化或放大時(shí),窗體上的控件也要隨著窗體而縮放；切忌只放大窗體而忽