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

1、點威所有產(chǎn)品頁面規(guī)范說明書文檔編號：dianvo-proj-doc/201306-ol文件狀態(tài)：草稿正式發(fā)布n正在修改當(dāng)前版本：v2.0密級：保密創(chuàng)建日期：2013-6-1批準(zhǔn)日期：2013-6-1創(chuàng)建人：李應(yīng)洪審核/批準(zhǔn)人：李應(yīng)洪版本號變化狀態(tài)簡要說明（變更內(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丄平臺基本上所有的樹都已經(jīng)規(guī)范，樹分為幾類：412樹的主要細(xì)節(jié)要求為：52. 按鈕及icon83. 頁面對象錯誤!未定義書簽。3.1. 文本框103

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

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

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

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

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

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

8、間不顯示 t "t按鈕，且若多次操作，后面選擇的數(shù)據(jù)自動替換掉前面已選的，參考圖1 ；多選時用復(fù)選框，參考圖2 ;選擇樹具有快速檢索功能，只將查詢結(jié)果列在選擇框內(nèi)；具有快速索功能(3x封5文件玄擾人 敦3x用戶柯辦館訓(xùn) 字生弟 拾生取安金咖 印刖廠 生舌整務(wù)中心 實習(xí)工廠(尅寶 b|«55如辦）如辦） 辦）如如如辦）dta如驚j 単選時使用rado技紐oooo°wil*oiiit 甲幟§左五芯0o幺正友圖212按鈕及icon以下為產(chǎn)品中所用到所有功能按鈕，如果遇到不在此列表中的，請?zhí)釋鐏?序號按鈕名稱css樣式名稱效果截圖1增加icon_ add國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逼號出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審批通過icon _pass迢市批il過24審批拒絕icon_refuse25文件icon_file運文件26url文件夾icon_urluro文件夾27預(yù)覽icon_preview28撥款icon_ appropriatio n1撥款29獎勵icon _rewardt題30收藏icon_collect31批閱icon_readover32提問icon_quize沒問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注冊icon_ register41報道icon_ report42授課icon_ schoolteachi ng43抽卷icon_ choujuan陵抽卷44開始考評icon_ startevaluatio n45網(wǎng)絡(luò)課堂iconjnternetclassroom網(wǎng)絡(luò)課堂13文本框1）原則上高度、寬度統(tǒng)一；2）按照信息集要求，限制輸入的文字?jǐn)?shù)量；3 ）必須采用公共

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

13、表的默認(rèn)顯示,在沒有指定的數(shù)據(jù)時，輸入表單統(tǒng)一顯示請選擇；查詢條件統(tǒng)一顯田壹詢1.4.2. 當(dāng)代碼集只有多層：統(tǒng)一為彈出div，但必須保證彈出的div中的文字不能換行,可以通過統(tǒng)一的彈出頁面參數(shù)控制div的寬度1.5選擇框原則上，單選時使用radio ,復(fù)選使用checkbox ;16日期對象1）默認(rèn)值：默認(rèn)服務(wù)器的系統(tǒng)時間，而客戶端系統(tǒng)時間;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)一按照信息集的要求,存儲在數(shù)據(jù)庫中；5 ）根據(jù)業(yè)務(wù)需求,只需要"年月日"的,命名為"日期",需要加"時分秒"的命名為時間"。在查 詢列表中只顯示"yyyy-mm-dd"6）若是時間段，即起止時間的選擇，系統(tǒng)自動控制開始時間不能大于結(jié)束時間；7）在查詢條件中，時間為空的，默認(rèn)為所有時間；8 ）時間作為查詢條件，只顯示日期，日期控件寬度設(shè)置為剛好顯示10個字符（此處請開發(fā)給定具體 值），所有根據(jù)時間查詢的地方都是選擇時間段，不能只有一個時間，列表中只

15、顯示日期；17輸入表單1）分欄：一行共分4列，其中每2列為一個頁面對象；2 ）比例：每2列占50% ;文字標(biāo)簽占15% ,輸入控件占35% ;3）對齊：文字標(biāo)簽右對齊，輸入控件（如文本框、下拉框等）左對齊；綜上述，如下圖:ifhtoe 二“二j用1上 列怡主主ma：a人4）原則上，所有按鈕統(tǒng)一浮動顯示在最底部，保證在拖動表單內(nèi)容的時，按鈕不被拖動；特殊業(yè)務(wù)可以特殊處理；手生£»®一和電的酬 妣倉總安鵝0 nger電 hquhmiio析與呦子ff*smhmvu£n|«9rv>lhkartt譽創(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無mh«z7imr amk.* f 1»7s*t<i« ti*»ae 7i*eae 自京義錮 »fe*hsb m«aftlb wfr pw1.驗證1）增加（修改）數(shù)據(jù)時，盡可能考慮各種邊界條件，如：記錄為空，輸入為空，輸入岀錯等，當(dāng)

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

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

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

20、，在列表點擊"某某名稱"彈出頁面顯示；6）滾動條：原則上查詢結(jié)果表格不支持橫向滾動；帶翻頁的查詢結(jié)果表格不支持縱向滾動；7 ）查詢結(jié)果列：序號、狀態(tài)、選擇、姓名、性別、專業(yè)、班級等通用的列，已經(jīng)在css中完成固定寬度，其余列自行設(shè)置（一定要在1024分辨率下設(shè)置"百分比"調(diào)試）;8 ）默認(rèn)記錄數(shù)：所有可翻頁的列表，原則上默認(rèn)設(shè)置每頁顯示10條記錄,從頁面美觀角度岀發(fā)根據(jù)頁面布局設(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身份證號導(dǎo)機樣加工技術(shù) 術(shù)應(yīng)用 -計算機應(yīng)用a4r1女5101822010.1996-01-03電子技術(shù)應(yīng)用20100（電子仁51018219941102. <r2女5101822010-.1998-09-21電子技術(shù)應(yīng)用201嗨電子仁51018219950311. a10 ）查詢結(jié)果列表中,若某字段沒有彳直則顯示空白，對于成績等數(shù)字可顯示特殊符號；原則上完整顯示字段內(nèi)容，可換行，盡量少用title功能;11 ）學(xué)年學(xué)期合并顯示時，顯示方式學(xué)年學(xué)期"12 ） 無查詢結(jié)果的顯示：若沒有滿足查詢條件的數(shù)據(jù)，在列表中顯示

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

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

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