軟件產(chǎn)品標(biāo)準(zhǔn)化設(shè)計規(guī)范說明

1、產(chǎn)品標(biāo)準(zhǔn)化設(shè)計說明書V1.0目錄1 提示規(guī)范32 驗證規(guī)范43 界面規(guī)范 54 控件規(guī)范75 組件規(guī)范85.1 表格85.2 編號和序號135.3 注冊表單155.4 聯(lián)系方式195.5 翻頁245.6 日期輸入275.7 進(jìn)度條325.8 保留圖標(biāo)345.9 彈出層355.10 搜索375.11 排序426其它規(guī)范 451）常用規(guī)范452）開發(fā)代碼規(guī)范461提示規(guī)范通用提示:序號提示類型提示信息規(guī)范對應(yīng)按鈕1)必須選擇數(shù)據(jù)才能進(jìn)行操作的提 示請選擇xxx!R確定12)必須輸入數(shù)據(jù)才能進(jìn)行操作的提 示請?zhí)顚憍xx!R確定1可直接刪 除確實要刪除選擇的記 錄嗎？有層級夫 系（單筆 記錄）確實要刪

2、除選擇的X X及子級XX嗎?R取消3)刪除校驗當(dāng)前記錄已XX,不 允許刪除！R確定1個口JH債 刪除（單 筆記錄）當(dāng)前X X存在X X數(shù) 據(jù)，不允許刪除！R確定1當(dāng)前X X已被X X關(guān) 聯(lián)，不允許刪除！R確定1批量刪除某些記錄不允許刪 除：XX記錄，不允 許刪除！R確定1全部允許刪除：確實 要刪除選擇的記錄 嗎？R確定1R取消、4)字段超長提示輸入字符不允許超出N個字節(jié)！R確定15)唯一性校驗單個字段不允許重 復(fù)：XX下的字段名 稱不允許重復(fù)！R確定1雙字段不允許重復(fù)： XX下的字段名稱 1和字段名稱 2不 允許重復(fù)！6)非空校驗可編輯字段的非空校 驗：請輸入字段名 稱！R確定1不可編輯字段的

3、非空 校驗：請選擇字段名 稱！既可編輯也可選擇的情況：請輸入字段名稱！7)特殊字符的校驗不允許輸入特殊字符：列出特殊字符，并以， 隔開R確定18)查詢無條件的提示請輸入查詢條件R確定19)業(yè)務(wù)原因無法操作XXXX不允許按 鈕名稱!R確定110)數(shù)據(jù)關(guān)聯(lián)對應(yīng)的提示當(dāng)前記錄已XX,不 允許XXX !當(dāng)前記錄存在X X X X,是否XX?R確定111)日期字段輸入錯誤校驗對于YYYY-MM-D潞 式：請輸入有效日期！R確定1對于YYYY-M超式：請輸入有效月份！R確定112)日期段輸入校驗XX截止日期不允許 早于XX起始日期！R確定113)日期有效性校驗XX日期必須在SS起 止日期(YYYY-MM-

4、DD YYYY-MM-DDE圍內(nèi)！R確定114)數(shù)值字段輸入錯誤校驗數(shù)值有范圍限制：請 輸入從X X X到X X X之間的數(shù)值！R確定1數(shù)值必須大于0的情 況：字段名稱 必須 大于零！R確定1數(shù)值不允許等于0的 情況：字段名稱 不 允許等于零！R確定115)操作失敗的提示操作失敗，請關(guān)閉重 試！R確定116)等待提不處理中，請稍候R確定I117)當(dāng)數(shù)據(jù)發(fā)生改變時的提示信息。提示信息如卜圖所不R確定18)最多支持n級分類提示XXX最多支持n級分 類，不允許新增！R確定119)退出提示是否要退出系統(tǒng)？R確定1R取消、2驗證規(guī)范范圍：主要用于表單數(shù)據(jù)及其它數(shù)據(jù)的驗證提示，例如：身份證與年齡匹配驗證等

5、。需驗證的對象用途標(biāo)準(zhǔn)化提示語身份證與年齡不相符檢查身份證與年齡是否匹配年齡與身份證不符合，請重新輸入！密碼驗證檢查密碼是否止確管他不止確，請重新輸入！用戶名檢查用戶名是否存在1、用戶名存在的情況下，則提示：用戶 名小止確，請重新輸入！2、用戶名不存在的情況下，則提示：用 戶不存在！字段為空或全是空格檢查輸入字符串是否為空或者全部都是空 格1、 空的情況下，則提示：請?zhí)顚? !2、 全是空格的情況下， 則提示：名稱包含空格！手機號碼檢查輸入手機號碼是否止確手機萬他不止確，請重新輸入！電話號碼檢查輸入字符串是否符合國內(nèi)固話或者傳 真格式電話勺他不止確，詁重新輸入！日期驗證判斷是否是日期您輸入的日

6、期格式有誤！時間驗證檢查輸入字符串是否符合時間格式您輸入的時間格式有誤！字母數(shù)字下劃線驗證檢查輸入字符串是否只由英文字母和數(shù)字 和下劃線組成您輸入的格式有誤！郵箱驗證檢查輸入對象的值是否符合E-Mail格式您輸入的郵箱格式有誤！數(shù)字驗證檢查輸入字符串是否是數(shù)字您輸入的格式有誤！身份證驗證檢查輸入字符串是否符合身份證格式您輸入的身份證有誤！復(fù)選框請選擇！單選按鈕請選擇！特殊字符驗證您輸入的內(nèi)容包含非法字符！備注：1、提示語顏色均為紅色！2、提示語位置均顯示在對應(yīng)的文本輸入框后方。3界面規(guī)范序號界面內(nèi)容規(guī)范要求1顏色1、紜-色調(diào)，米用標(biāo)準(zhǔn) Windows的基本色調(diào)，做到與操作系統(tǒng)紜讀取系統(tǒng)標(biāo)準(zhǔn)色表

7、。2、整個界面色彩盡量少的使用類別不向的顏色。除非特殊場合，杜絕使用對比強烈，讓人產(chǎn) 生，憎惡感的顏色。3、同時色調(diào)也具有一定的含義，在整個系統(tǒng)中應(yīng)保持色調(diào)含義的一致性，避免同一中顏色在小何的回向中表7K不同的意義。2文字表述提示信息、幫助文檔義字表達(dá)遵循以下準(zhǔn)則：口語化，多用您、請，不要用或少用專業(yè)術(shù)語，杜絕錯別字。斷句逗號句號頓號分號的用法，提示信息比較多的話，應(yīng)該分段。所有的警告、信息、錯誤和提示的對話框統(tǒng)一采用提示信息格式。使用統(tǒng)一的語言描述，例如一個關(guān)閉退出功能按鈕，統(tǒng)一描述為退出，避免使用返回、關(guān)閉 等描述。3控件選擇不要隨意使用控件，控件功能要專一，風(fēng)格統(tǒng)一。如果沒有好的控件，則

8、使用標(biāo)準(zhǔn)控件。1、控件的風(fēng)格統(tǒng)一。2、同一類型的控件操作方式相同，避免出現(xiàn)一個控件雙擊可以執(zhí)行某些動作，而同樣控件， 雙擊卻沒有任何反映。一個控件只做單一功能，盡量不復(fù)用。4順序習(xí)慣用法，閱讀順序，從左到右，從上到下。5一B性用詞、配色、按鈕、字體等前后均要保持一致性。6文字對齊患者、申請醫(yī)生、會診專家等姓名字段，按三個字的姓名兩端對齊，三個字以上的姓名左對齊即可。例如：張三張三豐張二豐子7內(nèi)容顯示所有列表均按1024X 768的分辨率固定每列的寬度。根據(jù)頁面內(nèi)容和字體大小進(jìn)行設(shè)計即可， 字段的長度如果超過列寬的，不能顯示的部分已省略號代替，當(dāng)鼠標(biāo)在該字段上面停放時， 顯示全部內(nèi)容，例如：全國

9、基層衛(wèi)生和新農(nóng)舍工作議新聞稿之六 張茅；各級衛(wèi)生部門玨*市1rTy一7TF全日上刁目基層衛(wèi)生和新農(nóng)合工作金議新聞稿之六張茅 口生部門要結(jié)合創(chuàng)先爭優(yōu)活動大力推動基層衛(wèi)生K平8文字鏈接可鏈接的文字均米用藍(lán)色字體，鼠標(biāo)放置時顯示卜劃線。9統(tǒng)計報表所有報表支持打印，導(dǎo)出為 Excel。打印時支持打印預(yù)覽，可以先瀏覽頁面布局，再點擊“打印”按鈕才進(jìn)行打印。如報表中的值為0,則顯示為“-”。對齊：序號居中顯示，表示值的數(shù)字使用千分位分隔符并且右對齊，文字左對齊。所有列表均按1024X 768的分辨率固定每列的寬度。根據(jù)頁面內(nèi)容和字體大小進(jìn)行設(shè)計 即可，字段的長度如果超過列寬的，不能顯示的部分用省略號代替，

10、當(dāng)鼠標(biāo)在該字段上 面停放時，顯示全部內(nèi)容。列標(biāo)題加粗，用有顏色的底紋進(jìn)行標(biāo)識，如果可以點擊時，添加下劃線，字體用藍(lán)色。提供分頁功能導(dǎo)出的報表中，如有些值是計算出來的結(jié)果，則在導(dǎo)出的報表中顯示公式。合計的值用粗體，進(jìn)行區(qū)分顯示10列表滾動條當(dāng)貝囿出現(xiàn)豎向滾動條時，滾動條需控制在列表內(nèi)，滾動時，列表標(biāo)題不動，只滾動內(nèi)容。11圖片資源1、退出按鈕：2、保存按鈕：3、新建按鈕：4、打開按鈕：。&gI I.H 或小-D 或5、下個環(huán)節(jié)：06、上個環(huán)節(jié)：O7、打印按鈕：©或日8、打印預(yù)覽：或限9、刷新按鈕：10、 查詢按鈕：11、 復(fù)制按鈕：Q12、 粘貼按鈕：13、 取消按鈕：用14、

11、 刪除按鈕：X備注：后期軟件需求基礎(chǔ)設(shè)計均以此為主作為參考。4控件規(guī)范序號控件名稱控件說明及樣式1附件上傳備注：支持進(jìn)度條及上傳百分比顯示。例如：p linn 3 戰(zhàn)）2圖片上傳蘭傷2*I修改頭像顯示“修改頭像”，點擊可打開上傳圖片。I3分頁控件1）提供首頁、末頁、上一頁、下一頁、跳轉(zhuǎn)到指定頁面的功能；當(dāng)只有1頁時，鏈接均無效；當(dāng)處于第1頁或最舟-頁時，首頁/上一頁或下一頁/末頁的鏈接無效。2）提供設(shè)置每頁顯示指定條數(shù)的功能，后臺可配置指定條數(shù)的選項，如20、50、100。3）列表上方與卜力均需提供分頁欄。例如：共工315條 MO 4123456789* 未頁轉(zhuǎn)到 lioc1 1更 E：國4時

12、間控件以YYYY-MM-D潞式顯示，不足兩位的以補齊，譬如：。例如：200T_- 07 日X上一月今天下一月日-二三四五六12345676910111213141516171B19 zo Z1 立 Z3242E26 27 28 293031燈5小L|TO上二月日 一410 1117 1824 2531111*97 5g羽 ggg>000>001>002?003>0041?？?51?OOB?007?008 .1VU2月 入月口4月 05月0E目 。月0日月 09月10月11月12月j月六291&2330文本編輯功能包括：字體選擇、字體大小、加粗、斜體、下劃線、引號

13、、括號、無序列表、有序列表、插框入圖片、插入視頻、清除格式。系統(tǒng)文本編輯框均采用以下樣式實現(xiàn)。.由 口口口口口 m-DHa-. &9-:.8.；9-.:*.;.9-.;$-.一樹形控件IP中國g U北京市升口由掛氐, I0縣 天津市 河北省 山西省 內(nèi)一吉白旗區(qū) “省 吉林省 訂省卜海市備注：后期軟件需求基礎(chǔ)設(shè)計均以此為主作為參考O5組件規(guī)范5.1表格主要應(yīng)用于大批量數(shù)據(jù)的展示、查看、維護(hù)等方面。基礎(chǔ)表格是表格本身最原始的一些屬性集合，針對表格在不同場景下的狀況，在擴展設(shè)計中會一一羅列出來?！驹O(shè)計意圖】? 合理有效的組織數(shù)據(jù)信息；? 幫助用戶快速、有效的查看表格數(shù)據(jù)；? 幫助用戶快速、

14、準(zhǔn)確的完成對表格的操作；【應(yīng)用條件】適用于批量數(shù)據(jù)的展示和維護(hù)；【模式描述】組成： 表格標(biāo)題+表格表頭+表格行間隔線 +表格行如下圖所示：表格標(biāo)題一訂單列表_L 仃單號訂單時間商晶總價訂單忘仇貨物狀態(tài)款頂狀態(tài)2O070422-0U0-Q022D07-05-0510D.001C0.00未處貨已付款I(lǐng)O 1J 1T1 ml v-i£口口7口必-皿口 優(yōu)12007-06435100.001C0.0C未食貨m付款表格行如口了口42土口口 UPCI22C07-0&-05100,00100,00未發(fā)貨已付款包口7 口 424口。ci-Hn2007-0&-05100,00100,0

15、0未發(fā)貸已付款2口了 口424-口口口-口 口22007-06-05100.00ICO ,00未竟貸已付款2口口加425-4口口-口口12007-0&-05100.00100.00未發(fā)貨已付款2口 口了口425-口口口-口口工2D07-0O-C5100.00100.00未發(fā)貨已付款7眸白-口口口 口口 12007-06-051DO.OOICO ,00未域貸m付款NU了口鈣-口口口-W22QD7-0&-05100.00ICQ,00未發(fā)貨已付款2D07-0S-051DD.OO10C.00未發(fā)貸已付款圖5-1基礎(chǔ)表格應(yīng)用規(guī)范：表格的標(biāo)題：標(biāo)題文字要與其它文字有所區(qū)別，如：加粗顯示；標(biāo)

16、題文字內(nèi)容以“內(nèi)容+操作”的形式描述，標(biāo)題文字前需要有相應(yīng)的標(biāo)題圖標(biāo)，文字與圖標(biāo)之間間隔一定的距離，如：一個半角空格。表格的表頭與表格主體在外觀上要有區(qū)分；表格行間隔線：表格的主體內(nèi)容用表格線區(qū)分；表格線的粗細(xì)要適中，如 1px。【擴展描述】根據(jù)應(yīng)用場景的不同，可以對基礎(chǔ)表格進(jìn)行擴展；可以為表格增加數(shù)據(jù)篩選區(qū)、命令按鈕區(qū)、操作按鈕區(qū)、表格主體區(qū)、翻頁區(qū)、操作按鈕區(qū)。整體效果如下圖所示：數(shù)據(jù)麻選區(qū)排序命等按留區(qū)未處理處理中處理完成無效訂單gg未處理訂單冽表 a訂單號 20070422 -OOD-DOi比仃704靖-口口口-001訂單時間商品總價訂單總階黃物狀總2D07-05-05100,0013

17、0.00未發(fā)貨2DD7-0&-05100.00130.00未發(fā)貨臊作刪除朋除2?？?0424-口口口-口口22口口口曄4-口口口-口口2空口口7 口4裳4-口口口-0口22007-06-05 100.D011D.00未殘貨2D07-05-05100.00未發(fā)貨2007-06-05 100.00laa.oo耒廢貨刪除刪除刪除2 口口。眸5-口口口 0口12口口7。4252D07-05-05100.001叩,口口未發(fā)貨20D7-0S-05100,0013D.00未發(fā)貨刪除刪除2007-0&-05 ioo.no icin.oo 珪貨姍除2 口口7口4裳 6-口口口-口口22口口774

18、%-口口口-口口工2D07-06-05100.001叩,口口未發(fā)貨2007-06-05100,00110.00未液貨隔除刪除翻頁區(qū)12 3 4 6 6 7 610 豺頁操作按鈕區(qū)確定應(yīng)用取消數(shù)據(jù)家數(shù)般置區(qū)圖5-2表格操作區(qū)分布1）標(biāo)題列排序：表格列標(biāo)題可以排序時，表格的列標(biāo)題要體現(xiàn)出當(dāng)前排序狀態(tài)，并要區(qū)分于其他 列標(biāo)題顯示，如：背景和圖標(biāo)高亮顯示； 如下圖所示:訂單時值商品總價 訂單總價貨物狀態(tài)圖5-3標(biāo)題列排序表格列標(biāo)題進(jìn)行切換時，原列標(biāo)題恢復(fù)初始狀態(tài)，切換到的列標(biāo)題顯示為排序狀 態(tài)；2）表格行選中操作：表格中的第一列，既可表示對行的選擇如復(fù)選框；同時還可以用圖標(biāo)標(biāo)示數(shù)據(jù)狀 態(tài)；當(dāng)兩者都有時

19、，顯示復(fù)選框在上，圖標(biāo)被覆蓋； 在對表格行進(jìn)行選中（點選行的任意位置即可選中）時，此行要高亮顯示，同時 此行前復(fù)選框為選中狀態(tài)，同時還可以進(jìn)行多行選擇；需要全選時，只需勾選列 標(biāo)題中的復(fù)選框即可選中當(dāng)前列表的全部行數(shù)據(jù)。3）數(shù)據(jù)篩選區(qū)：當(dāng)數(shù)據(jù)內(nèi)容可以明確的按其狀態(tài)、類別進(jìn)行劃分時，可以應(yīng)用頁簽的形式來進(jìn)行 設(shè)計；頁簽總寬度在表格寬度的 75%之內(nèi)為佳，超出此范圍時，需應(yīng)用其他設(shè)計形式如 下拉框顯示的形式等；如下圖所示：未處理 處理中 處理完成無效訂單番未處理訂單列表圖5-4數(shù)據(jù)篩選區(qū)當(dāng)前分類狀態(tài)的的頁簽要高亮顯示，要明顯區(qū)別于其他頁簽；頁簽內(nèi)的文字，需要簡單明了，相同內(nèi)容的文字省略； 如上圖中

20、未處理（訂單）、 處理中（訂單）、處理完成（訂單）；應(yīng)用頁簽設(shè)計時，頁簽類別要劃分明確合理；如按照數(shù)據(jù)狀態(tài)或分類進(jìn)行劃分。4）命令按鈕區(qū)：針對整體頁面進(jìn)行操作或者對表格整體進(jìn)行操作的按鈕放置在此區(qū)域內(nèi)；如：導(dǎo)入、導(dǎo)出、新增等；按鈕的其它細(xì)則參見界面視覺規(guī)范。5）操作按鈕區(qū)：對表格主體的數(shù)據(jù)進(jìn)行操作的按鈕放置在此區(qū)域。如：刪除、發(fā)布、下架、上架、審核等；當(dāng)列表的數(shù)據(jù)超過一屏顯示時，在列表上方也要顯現(xiàn)操作按鈕區(qū)，方便用戶對列表進(jìn)行操作；如下圖所示：未處理處理中處理月成無效訂單訂單錄入未處理訂單列表確定取消操作按鈕已口 a記單號*訂單時間2007-0&-05商品總價100X0訂單總價1DD,

21、OD貨物狀態(tài) 未發(fā)貸單如數(shù)據(jù)2口3口422-口口口-口口？20D70423-000-00120D7-05-05100 .C0loo.oa未發(fā)貨操他S2口口7口423 -口口口-口口22007-06-05100 .COlOD.OO耒版貨回2口口了口母-口口口-皿2007-06-05100.00100,OU未發(fā)貨2口口7口424 <1口。-口口22007-06-05100 ,co100.00未發(fā)貨2口。7口4252007-06-05100 .CL)lOD.OO親發(fā)貨20070425 06-05100 .DO100.03關(guān)發(fā)貨圖5-5 操作按鈕區(qū)按鈕的其它細(xì)則參見界面

22、視覺規(guī)范。6）翻頁區(qū)：當(dāng)列表中的數(shù)據(jù)量超過默認(rèn)的數(shù)據(jù)顯示條數(shù)時，應(yīng)用翻頁模式來處理多條數(shù)據(jù)的顯示；翻頁在列表下方居中顯示；翻頁的詳細(xì)功能和模式參見“翻頁模式組件規(guī)范”。7）單條數(shù)據(jù)操作區(qū)：對行數(shù)據(jù)進(jìn)行操作的按鈕要與操作按鈕區(qū)的按鈕視覺上要有所區(qū)分；具體參見界面視覺規(guī)范；盡量不要在此處安排太多的操作，太多的操作給使用者過多的判斷負(fù)擔(dān)。應(yīng)考慮其他的界面布局方式。8）表格列標(biāo)題區(qū)：當(dāng)表格的數(shù)據(jù)列較多，屏幕顯示已經(jīng)達(dá)到最大限度，而這些數(shù)據(jù)列又必不可少時, 允許通過鼠標(biāo)拖動的方式來對數(shù)據(jù)列的寬度進(jìn)行改變；同時可以使用橫向滾動條；調(diào)整列寬度時，要在整體表格邊線內(nèi)進(jìn)行，以免整體頁面變形；數(shù)據(jù)項內(nèi)容顯示部分太

23、長時，省略多余部分并加省略號；鼠標(biāo)指針?？繒r，全部詳細(xì)內(nèi)容顯示；9）數(shù)據(jù)條目設(shè)置區(qū)：默認(rèn)顯示當(dāng)前頁面所能顯示的最大數(shù)據(jù)條目數(shù)；如：10條/頁；還要提供幾個數(shù)值選項，供用戶選擇；如:20、 30、 50;5.2編號和序號1）編號用來標(biāo)識某一個對象的唯一號碼。一個編號就代表著一個對象。使用編號能夠更好的幫助用戶記憶和或管理對象。如下圖所示：訂單號訂單時同訂單來淳071?？?2007-04-96前臺訂購2007-04-36后臺錄入gey7cm 曰 口 4200T-04-06后合泰入2100707100 ：i2007-04-S6后臺錄入2007-04-06后告錄入1 效陰51蜘12007-04-06后

24、臺錄入!褊號標(biāo)志唯一 突出顯示圖5-6編勺/、例【設(shè)計意圖】? 更好的方便用戶記憶和管理對象；? 合理的使用編號，能方便用戶更好的進(jìn)行溝通；【應(yīng)用條件】? 需要用唯一號碼來標(biāo)識對象時；? 具有真實、合理、有效的意義；例如：訂單列表中訂單的編號、酒店客房管理中客房的實際編一號等等；【模式描述】應(yīng)用規(guī)范：編號必需代表一個對象，不要讓編號無意義的存在；如果用戶更關(guān)注編號，也就是說編號對于用戶是第一位的，則必須提供 編號。比如，酒店系統(tǒng)中對房號的關(guān)注就比人名要重要，所以編號的視 覺層次應(yīng)該突出。如果用戶不常使用編號而通常更關(guān)注別的屬性；比如 人名、物品名等，可以默認(rèn)不顯示編號，當(dāng)用戶需要時能夠查到編號

25、。2）序號序號是用來標(biāo)識一組有序?qū)ο蟮臄?shù)字，它具有先后順序的含義。如下圖所示:Top Sonu*fii/E UmSarg胃akIk1- 21*94 Bi4«i9lng 耶 S&厘9- 4KU Wfoman 物 Svcnrt Pum0»3l 3- S （An Ton Wlh hl* Nov?Faiaoa<M*Ac4h«r On B4h Th* Chii-. QtrtWi0CUS>W C TWw Q« Lsw * 心耳iQ$191#Mih avWihGiMn Yau UZQ7. IM . .MBkdioiwdeI修 g diwH,：Ql1

26、Song or tba Swm 的 sac旗 Fa&aigei*IM * OunH Atcp Jimn'q jatimay 。10. ?0& # Any W*/H 如_ QI序號.有先后順序圉含義（歌曲前I 口位排名）圖5-7序號示例【設(shè)計意圖】?使用戶更好了解對象的先后順序或按一定的順序去了解對象；?更好的展示有先后順序的數(shù)據(jù)；【應(yīng)用條件】?需要標(biāo)識一組有序?qū)ο髸r；例如：如歌曲排行旁、熱銷商品排行、點擊率排行等設(shè)計中；【模式描述】 應(yīng)用規(guī)范：序號必需代表一個對象在集體中的序列，不要讓序號沒有意義。如果用戶關(guān)注對象的排列順序，則必須提供序號。如果用戶根本不關(guān)注 對象的順

27、序，請不要使用序號，這樣會混淆用戶的注意。序號技有意義,應(yīng)談恃苴刪除接索結(jié)內(nèi)容摘要在企動力數(shù)商改版中企劭力數(shù)商3. 0改版中企劫力數(shù)商3.0改版中企動力數(shù)面3 U改版5中企動力數(shù)地3一瞰版中企動力數(shù)百工 口改版中企動力數(shù)商工毆版卬企動力數(shù)曲3"改版中企動力數(shù)商生嘮版中企動力數(shù)商3"改醺中企動力數(shù)商3.瞰版卬企動力薇商3 口改版中企動力數(shù)商34改版中企動力繳商3.毆版中企動力敷商3畋版中企動力數(shù)商3. 口改版中企動力數(shù)南3.瞰版中企動力數(shù)商3 口改版圖5-8錯誤示例5.3注冊表單注冊表單應(yīng)用于對用戶的輸入格式有一定的要求的設(shè)計中，幫助用戶更好的完成填寫表 單的操作?！驹O(shè)計意圖

28、】快速高效的幫助用戶完成注冊;盡量減少用戶犯錯;在用戶出錯后，友好的有效的告知錯誤，并提供解決方案;給用戶提供及時有效的反饋信息。【應(yīng)用條件】超過5項表單信息填寫修改時;用戶出錯的頻率較高時;系統(tǒng)對數(shù)據(jù)的要求比較嚴(yán)格時;例如：應(yīng)用于填寫注冊信息、修改密碼等設(shè)計中?！灸Ｊ矫枋觥拷M成：各輸入控件+必填項指示 +格式要求提示 +對錯判斷反饋 +提交按鈕 如下圖所示：圖5-9 注冊表單應(yīng)用規(guī)范：表單的設(shè)計應(yīng)該遵循簡潔的設(shè)計原則。在注冊填寫時，盡可能的只提供必須填寫的選 項給用戶，其他非必填項，可以通過選填或者在日后需要時再進(jìn)行完善的方式來完成。a）信息輸入對錯判斷：信息輸入正確時，要給與填寫正確的反饋

29、；信息輸入錯誤的時候，要給出錯誤的反饋, 并給出具體的錯誤原因要高亮反饋，同時注釋語位置整體給出反饋提示。如下圖所示：場表現(xiàn)案給人用戶名:個字符C包括小寫手理、數(shù)字、下寄修 中文3個祖字為兩個字符推薦使用中文臺員名輸入錯源用尸名：* 555彳您輸入的用尸名過短,3 6-2口個字符包括小寫字母，敷字、下戈岷 中文）雙字為兩個字符推薦使用中文會員名用戶名；邛據(jù)-| J 6加字符（包括小寫字眼 數(shù)字、下劃嬲”中文入一個勵、正睛漢字為兩個字將推薦使用中文會同名用戶在輸入錯誤時，要針對不同的輸入內(nèi)容給出相應(yīng)明確的錯誤提示，必要的時候要 提出簡要的解決方法提示。例如：在用戶名填寫時，可能出現(xiàn)的錯誤提示；您

30、輸入的用戶名過短！您輸入的用戶名中不能包含字符“& （等等）” ！你輸入的用戶名“ xxx”已經(jīng)被占用，請重新輸入！b）輸入格式約定（注釋文本）：當(dāng)用戶需要輸入某一項時，相應(yīng)注釋文本才顯示出來；對于表單中的某些內(nèi)容除了需要給予用戶正確填寫格式的提示外還需要簡要說明填 寫的必要性，如下圖所示：只包含字母、數(shù)字，句點J連字符1-下劃投 具體數(shù)據(jù)的妁束內(nèi)容港輸入有效郵件,E將成為堤找回雷科的重要催據(jù)-內(nèi)容埴罵的必要性說明圖 5-113）驗證碼：驗證碼中的圖示字母是隨機產(chǎn)生的，但要注意盡可能避免顯示一些不易區(qū)分的字母和數(shù)字，讓用戶難以辨別（如：“0和o”），如下圖所示：mas j康無善一避免出

31、現(xiàn)圖5-12 驗證碼驗證碼圖示，要求相對清晰容易辨別，驗證碼的位數(shù)控制在4位為最佳；驗證碼由系統(tǒng)隨機產(chǎn)生，在個別情況下字母和數(shù)字可能會難以辨別，此時用戶可以點 擊鏈接文字（看不清，換一張）來更換驗證碼，如下圖所示：點擊刷新，更換驗證嗎!射證嗎：r 'EI Ob,看不丁.檢一張圖5-13驗證碼示例用戶在輸入框內(nèi)輸入驗證碼后，要及時給出反饋提示（不要到提交時才給出提示） 如下圖所示：圖5-14驗證碼錯誤判斷4）提交按鈕：存在驗證或提交按鈕時，只有所驗證或提交的部分輸入完畢并且正確后，按鈕才能由 置灰狀態(tài)變?yōu)榭捎脿顟B(tài)，如下圖所示：圖5-15注冊按鈕5）成功告知表單最終填寫提交完成后，要給出“

32、提交成功或注冊成功”的相關(guān)提示，明確告知用 戶此操作正確完成；6）協(xié)議單擊 我接受”意味著：您同意并接受服務(wù)協(xié)議和隱私聲明。【擴展描述】應(yīng)用規(guī)范：1）密碼強弱提示當(dāng)用戶賬號的保密性相對較高時，可以應(yīng)用密碼的強弱提示來保證密碼的復(fù)雜度。 如下圖所示：圖5-16密碼強弱在輸入密碼時，旁邊顯示注釋文本：明確注明密碼強弱的規(guī)則和提示，如下圖所示:密碼：*密碼硬度：才弱W強度高的密叫包含7-16個字符,不包含密碼強常見詞語或名稱，并且包含三種類型的字符弱觀則.大寫字希、小寫字符.顏字或符號.和提示圖5-17密碼強弱提示當(dāng)用戶輸入的內(nèi)容錯誤或不完全正確時，要求提示的反饋信息必須提示明確，同時給 出正確的解

33、決方法，如下圖所示：場景表現(xiàn)要求樣人密四在度：*未的時無任何反饋，置灰顯示密碼強度：* 弱,。您輸入的密碼強度較弱,存在安全隱患E整體寬度的前U調(diào)強度高的航碼承包含常見詞語或定林表示更均強度為弱密碼強度；“中整體寬度的1/3至2/3區(qū)域表平示密螞強度為中.密相強度；審E強整體寬度的后I片區(qū)疇強示密明強度為強.圖5-18 密碼強弱提示對照表2）注冊進(jìn)度提示根據(jù)產(chǎn)品的特性，要求用戶填寫的注冊表單較長、步數(shù)較多時，需要給出注冊的進(jìn)度 條提示，明確的告知當(dāng)前注冊的進(jìn)度。3）分組線注冊內(nèi)容較長時，要用分組線，對要求用戶輸入的選項進(jìn)行分類分隔顯示（具體使用 參見“分組線規(guī)則”）。【注意事項】? 例如婚介交

34、友等場景當(dāng)對用戶信息要求嚴(yán)格時，可以應(yīng)用注冊向?qū)б龑?dǎo)注冊過程。? 如果表單中需要填寫的數(shù)據(jù)項較多，頁面較長，必填項又比較分散且數(shù)量較少時，必 須使用行的背景顏色來區(qū)分必填項與非必填項。5.4聯(lián)系方式聯(lián)系方式是對表單中提供給用戶填寫詳細(xì)聯(lián)系方式一種組件規(guī)定。【設(shè)計意圖】? 幫助用戶有效、快速的填寫聯(lián)系方式；? 減少用戶輸入錯誤的幾率?！緫?yīng)用條件】? 需要用戶填寫詳細(xì)聯(lián)系方式時。例如：網(wǎng)上注冊，網(wǎng)上購物填寫發(fā)貨地址?！灸Ｊ矫枋觥拷M成：各輸入控件，包括：“國家地區(qū)”、“省份”、“城市”、“聯(lián)系電話”、“傳真號碼”、“手機號碼”、“聯(lián)系地址”、“郵政編碼”等（根據(jù)具體需要再增加）。器屐系方式圖5-19

35、聯(lián)系方式應(yīng)用規(guī)范:國家地區(qū)”、“省份”和“城市”要有連動關(guān)系;“國家地區(qū)”：下拉列表選框;“省份”：下拉列表選框，與選擇的國家連動（選擇“國家地區(qū)” ，“省份”下 拉框中選項相應(yīng)變化）；如果在“省份”中已經(jīng)選擇了直轄市，如“北京” ， 則后面的“城市”不用再選，自動置灰；“城市”：下拉列表選框，與選擇的城市連動（選擇“省份” ，“城市”下拉框 中選項相應(yīng)變化）。城市下拉列表選項的最后一項為“其他地區(qū)” ，如下圖所 示：黠聯(lián)系方式區(qū) 陽安雞中木南陽林硯 西寶漢神渭咸渝其要有其他地 區(qū)的選項圖5-20其他地區(qū)“聯(lián)系電話”、“傳真號碼”和“手機號碼”必須拆分成幾個字段;“聯(lián)系電話”：四個輸入框字段，

36、分別為：國家代碼（可選）一區(qū)號一電話號 碼一分機號；“傳真號碼”：三個輸入框字段，分別為：國家代碼（可選）一區(qū)號一傳真電 話；“手機號碼”：兩個輸入框字段，分別為：國家代碼（可選）一手機號；“國家代碼”此項可根據(jù)具體產(chǎn)品的銷售人群不同自行選擇是否保留；如下圖所示：圖5-21正確示例圖圖5-22錯誤示例圖各字段分別與上面的“國家地區(qū)”、“省份”、“城市”連動：“國家地區(qū)”和“省 份”、“城市”選擇后，國家代碼和區(qū)號自動顯示，如下圖所示：國寥選定后相應(yīng)的國寥代碼既圖5-23聯(lián)系方式標(biāo)注“聯(lián)系地址”：一個輸入框，等待用戶輸入文本；“郵政編碼”：一個輸入框（6個字符），等待用戶輸入文本;除“國家地區(qū)”

37、、“省份”和“城市”是只能讓用戶選擇外，其他的輸入框均可手 動輸入和編輯，用戶可以根據(jù)自己的需要進(jìn)行修改?！緮U展描述】郵政編碼；組成：郵政編碼幫助如下圖所示:系統(tǒng)根據(jù)省尚人" 城市”給出一些不同地 區(qū)由瞰編碼的關(guān)聯(lián)提示，供用戶參考通州區(qū)101100平谷縣101200胤義區(qū)10130。懷柔縣101400密云縣101500盟慶思102100昌平區(qū)102加0圖5-24 郵政編碼應(yīng)用規(guī)范：用戶手動輸入郵政編碼時，系統(tǒng)根據(jù)“省份”、“城市”給出一些不同地區(qū)郵政編碼的關(guān)聯(lián)提示，供用戶參考， 用戶選擇郵政編碼輸入框后面“查詢郵政編碼”鏈接（如下圖所示） 開新窗口查看本市的郵政編碼。提供登詢的功 能

38、I方便查找 淮麗的郵政編 碼器聯(lián)系方式國家地區(qū)二中國V笆分：陜西7 域市：咸陽V聯(lián)系電話二066 -1010-530ZE£6&-佶理號門: 066 - 010 - 58022266手機號碼: OSt - 136ZS2S2ML聯(lián)系地址；郵政編螞：100110查詢郵政編碼圖5-25查詢郵政編碼【注意事項】? 各輸入項的先后順序，根據(jù)各字段的邏輯順序和參照關(guān)系排列的同時，要綜合考慮用 戶的輸入操作（盡量將數(shù)字輸入的放在一起，將漢字輸入的放在一起，以避免用戶在 鍵盤上頻繁切換輸入位置）；系統(tǒng)自動提供的電話區(qū)號和郵政編碼等，必須保證是與國家、省、市相對應(yīng)的最新的 和準(zhǔn)確的數(shù)據(jù)；用戶用t

39、ab鍵切換不同的輸入?yún)^(qū)域時，輸入?yún)^(qū)域中本來用的數(shù)據(jù)顯示為選中狀態(tài)（不 清空）。5.5翻頁翻頁模式應(yīng)用于列表數(shù)據(jù)條目較多，文章篇幅較長的設(shè)計中，來對數(shù)據(jù)和篇幅進(jìn)行更好的展示。翻頁可以拆分為以下幾部分：基礎(chǔ)頁碼、上下頁、首末頁、跳轉(zhuǎn)、 Ajax拖動條、數(shù)據(jù)統(tǒng)計；根據(jù)不同的應(yīng)用場景，可以選擇某一部分或幾部分組合起來使用。如下圖所示：共工31s條 片直典412345678 9»邀耍臭N轉(zhuǎn)到叫“災(zāi)圖5-26翻頁【設(shè)計意圖】? 滿足用戶在不同場景下的不同需要；? 增加操作的易用性；【應(yīng)用條件】? 列表數(shù)據(jù)條目較多時；? 文章篇幅較長時；【模式描述】組成：頁碼 如下圖所示：1 2 3 4 5 6

40、7 6 9圖5-27頁碼應(yīng)用規(guī)范：頁碼少于或等于10頁時，只顯示應(yīng)該出現(xiàn)的頁碼數(shù)；鼠標(biāo)指針經(jīng)過和按下某個頁碼區(qū)域（此區(qū)域高亮反饋），鼠標(biāo)彈起后頁面切換完成；當(dāng)前頁的頁碼在外觀上要明顯的區(qū)分于其它頁碼，且不再提供頁面鏈接；已訪問過的頁碼和未訪問過的頁碼要有所區(qū)分；顯示當(dāng)前頁碼的前 4頁和后4頁；前9頁和最后9頁除外，默認(rèn)全部顯示；設(shè)計時，頁碼的可點區(qū)域要相對較大，方便點擊；如下圖所示鼠標(biāo)停靠、按下時已訪問過的更科當(dāng)前頁留圖5-28狀態(tài)標(biāo)注【擴展描述】1）上下頁組成：三角符號，作為上一頁，以“ ”作為下一頁；如下圖所示:RI上5I下f圖5-29 上下頁狀態(tài)應(yīng)用規(guī)范：列表的頁數(shù)在11頁以上時，要提供

41、“彳”和“陽”的鏈接，“上一頁”和“下一頁”在不可點擊時變?yōu)椴豢捎脿顟B(tài)；具體不可用狀態(tài)參見界 面設(shè)計規(guī)范與其他元素保持適當(dāng)?shù)拈g隔距離；參見界面視覺規(guī)范2）首末頁組成：三角截止符號（“叫”首頁截止圖標(biāo)，以“末頁截止圖標(biāo)）+文字（首頁、末頁），如下圖所示：H首頁頡13紀(jì)圖5-30 首末頁應(yīng)用規(guī)范：列表的頁數(shù)在50頁以上時，要提供“首頁”“末頁（326）”的鏈接；鼠標(biāo)指針?？康绞醉撴溄由?，有明確的反饋提示，點擊鼠標(biāo)主鍵，頁面切換到首頁，首頁變?yōu)椴豢捎脿顟B(tài)；鼠標(biāo)指針?？康侥╉撴溄由?，有明確的反饋提示，點擊鼠標(biāo)主鍵，頁面切換至最后一頁，末頁變?yōu)椴豢捎脿顟B(tài)；如下圖所示：圖5-31首末頁狀態(tài)標(biāo)注末頁的鏈接上

42、要注明最后一頁的頁碼數(shù);與其他元素保持適當(dāng)?shù)拈g隔距離；參見界面視覺規(guī)范3）跳轉(zhuǎn)組成：文字（轉(zhuǎn)到 頁）+輸入框+下拉圖標(biāo)+頁碼拖動條+確定按鈕 如下圖所示:直接輸入數(shù)值通過拖動滑塊來改 變頁碼數(shù)值應(yīng)用規(guī)范：頁碼超過50頁時，顯示跳轉(zhuǎn)框；鼠標(biāo)指針移到跳轉(zhuǎn)輸入框上，輸入框給出反饋，點擊鼠標(biāo)主鍵，光標(biāo)被定位到輸入框中，此時進(jìn)入可輸入狀態(tài)，輸入目標(biāo)頁數(shù)，鼠標(biāo)點擊“確定”按鈕或“回車鍵”，頁面刷新后顯示信息列表；鼠標(biāo)指針移到跳轉(zhuǎn)輸入框上， 輸入框給出反饋，點擊輸入框右側(cè)的“三角”小標(biāo)， 下拉出現(xiàn)浮動層，顯示出系統(tǒng)默認(rèn)提供的部分頁碼，移動鼠標(biāo)指針到某一頁碼上，被選定的頁碼給出高亮反饋，單擊后頁面刷新顯示信息

43、列表；用戶在輸入框中輸入數(shù)字以外的其它字符時，系統(tǒng)要給出錯誤提示；如： 您輸入的字符錯誤，請輸入數(shù)字?。ň唧w提示內(nèi)容參見“提示語規(guī)范”）用戶拖拽滑塊移動時，輸入框中的頁碼數(shù)值同步變化；頁碼輸入后可以通過“確定”按鈕和“回車”鍵兩種方式。與其他元素保持適當(dāng)?shù)拈g隔距離；參見界面視覺規(guī)范3）數(shù)據(jù)統(tǒng)計組成：統(tǒng)計提示文字 +統(tǒng)計數(shù)值+數(shù)量單位如：共7315條圖5-32 跳轉(zhuǎn)5.6日期輸入1）通過日歷選擇日期日歷選擇是使用日歷選擇控件進(jìn)行日期輸入?！驹O(shè)計意圖】? 使用生活中最常見的日歷形式，使得日期輸入的形式更加直觀;日歷選擇形式能夠使日期輸入更加方便、快捷;能夠減少用戶錯誤輸入日期的幾率;【應(yīng)用條件】?

44、 需要進(jìn)行日期輸入時;年份跨度較小，在 10年以內(nèi)時；例如：2006年 日期顯示的一種形式;需要進(jìn)行日期區(qū)間選擇時;例如：應(yīng)用于表單中時間的輸入、統(tǒng)計查詢等設(shè)計中；【模式描述】組成：輸入框+日歷的圖示 +日歷顯示層如下圖所示:I-U今天下1月日-二三四五六12345 s 7 8g101112 13 H IS L6171S19 20 21 Z2 232425E6 27 2B 29 3031圖5-33日歷輸入應(yīng)用規(guī)范:1）日歷日歷中必須明確標(biāo)示出當(dāng)前系統(tǒng)日期；包括：年、月、日。如下圖所示:幫助年份匙擇月1分選擇1用前轉(zhuǎn)換上一月今天日一二三四下一月一五六一向后轉(zhuǎn)鐵123 H!1 Q0” diCir0

45、j?10131213H1516171319202122232425262726292031圖 5-34日歷標(biāo)注年份和月份選擇如下圖所示;上一月igg7 日 一w 二1C 3117 1S24 2S31101112六 Z 916233013931999200020012002200320042005200520072008圖5-35年份和月份選擇默認(rèn)顯示近10年的年份，前10后1；從當(dāng)年往上，滑動滾動條，查看到100個年份；往下，查看到 10個年份;點擊日歷中的月份 12個月份全部顯示在下拉層中；當(dāng)前年份、月份均要區(qū)分于其他高亮顯示；2）日期輸入通過鍵盤輸入日期;當(dāng)鼠標(biāo)移至輸入框內(nèi)時，輸入框中的內(nèi)

46、容被全部選中并高亮顯示，鼠標(biāo)移開后恢復(fù)；開始鍵盤輸入時，默認(rèn)內(nèi)容將被清空；如下圖所示：默認(rèn)狀態(tài)Wmm-dd九鼠標(biāo)在輸入框內(nèi)點擊后行輸入日期后aOQT-OT-15行通過日歷選擇輸入日期;點擊日歷圖標(biāo)后，輸入框、圖標(biāo)及文字均高亮顯示， 給出用戶明確的反饋; 選定日期要高亮顯示，同時區(qū)分于當(dāng)前系統(tǒng)日期；如下圖所示：圖5-36日歷選擇3）錯誤提示只允許輸入 0-9這十個數(shù)字；只要用戶輸入數(shù)字，無論幾位系統(tǒng)自動按照“yyyy-mm-dd ”的格式顯示給用戶；當(dāng)月份和日期超出正常值時，系統(tǒng)給出提示;如“很抱歉！您輸入的月份或日期過大，請重新輸入！”4）顯示某一時間點2007-05-16 國yyyy-mm-

47、Jd 囪要求顯示當(dāng)前系統(tǒng)默認(rèn)時間不要求顯示當(dāng)前系統(tǒng)默認(rèn)時間【擴展描述】組成：時間段的文本提示 +兩個日期選擇 如下圖所示:至惻？-mm-dd圖5-37 一段時間選擇應(yīng)用規(guī)范：時間段的文本提示“從 至”；選定起始時間后，起始時間被回顯到日期框內(nèi)，同時截至日期日歷框自動被打開，不需要用戶再次點擊，即可選擇日期；2）年份跨度較大時的日期選擇應(yīng)用于日期選擇時的年份會出現(xiàn)跨度較大的設(shè)計中，方便快速的幫助用戶正確完成時間格式的輸入。適用于出生日期等方面。使得信息反饋及時明確，提示明顯易懂，減少了誤操 作和重復(fù)操作的次數(shù)?！驹O(shè)計意圖】? 方便用戶快速定位年份、月份、日期；? 減少用戶出錯的幾率；? 符合此類

48、場景下用戶的心里預(yù)期；【應(yīng)用條件】? 年份的選擇跨度較大，在 10-90年之間時；例如：適用于出生日期等設(shè)計中；【模式描述】組成：輸入框+下拉層+年月日的文本提示整體效果如下圖：用通過鼠標(biāo)點,擊 選擇年愉出生日期：年| 三月| 二日1920 1921 1922 123 19Z4 1925 1226 19Z7 L92Q 192911930 1931 1932 1際 1934 1935 1936 1 叼 1933 19391940 1941 1942 1043 19441646 147 1348 1949可逋過建盤 直接輸入1950 1951 1952 1953 1954 1 溺 1956 195

49、7 1950 1959 1960 1喇 1962 1953 19B4 19&5 19t6 I 95T 1 洸下 1969198019T0 19T1 1972 LOTS 19T4 1算5 6 19T7 1973 197919 S2 1903 1984 1985 19的 1 9S7 1969 1969 1990 1啊 L9Q2 1 物 1994 IMS 196 1097 19gB 199920D0 20Q1 2002 2003 2004 2005 2006 20OT圖5-38年份選擇應(yīng)用規(guī)范：1）手動輸入年月日的輸入均可以通過鍵盤操作的方式輸入，輸入內(nèi)容范圍在0-9十個數(shù)字之內(nèi);2）選擇輸入年月日的輸入均可以通過鼠標(biāo)點擊出現(xiàn)列表選擇的方式輸入;年的選擇方式；如下圖所示：1920 1921 1922 1923 1924 1925 1920 1QZT 1928 19291950 131 132 1933 1934 1 935 18 擊 1S3T 1933 1 圜3194。154.1 141343 1S44 1945 國始 1Q47 194S 1 配電1950 1951 152 1953 1954 1955 1956 19S7 1