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

1、.產(chǎn)品標(biāo)準(zhǔn)化設(shè)計(jì)說(shuō)明書(shū)V1.0目錄1提示規(guī)范32驗(yàn)證規(guī)范53界面規(guī)范54控件規(guī)范75組件規(guī)范95.1表格95.2編號(hào)和序號(hào)145.3注冊(cè)表單165.4聯(lián)系方式215.5翻頁(yè)255.6日期輸入285.7進(jìn)度條335.8保留圖標(biāo)355.9彈出層365.10搜索385.11排序436其它規(guī)范461）常用規(guī)范462）開(kāi)發(fā)代碼規(guī)范471 提示規(guī)范通用提示：序號(hào)提示類型提示信息規(guī)范對(duì)應(yīng)按鈕1）必須選擇數(shù)據(jù)才能進(jìn)行操作的提示請(qǐng)選擇！確定2）必須輸入數(shù)據(jù)才能進(jìn)行操作的提示請(qǐng)?zhí)顚?xiě)！確定3）刪除校驗(yàn)可直接刪除確實(shí)要?jiǎng)h除選擇的記錄嗎？ 確定、取消有層級(jí)關(guān)系（單筆記錄）確實(shí)要?jiǎng)h除選擇的及子級(jí)嗎？不可直接刪除（單筆記錄

2、）當(dāng)前記錄已，不允許刪除！確定當(dāng)前存在數(shù)據(jù)，不允許刪除！確定當(dāng)前已被關(guān)聯(lián)，不允許刪除！確定批量刪除某些記錄不允許刪除：記錄，不允許刪除！確定全部允許刪除：確實(shí)要?jiǎng)h除選擇的記錄嗎？確定、取消4）字段超長(zhǎng)提示輸入字符不允許超出N個(gè)字節(jié)！確定5）唯一性校驗(yàn)單個(gè)字段不允許重復(fù)：下的不允許重復(fù)!確定雙字段不允許重復(fù)：下的和不允許重復(fù)！6）非空校驗(yàn)可編輯字段的非空校驗(yàn)：請(qǐng)輸入！確定不可編輯字段的非空校驗(yàn)：請(qǐng)選擇！既可編輯也可選擇的情況：請(qǐng)輸入！7）特殊字符的校驗(yàn)不允許輸入特殊字符：列出特殊字符，并以,隔開(kāi)確定8）查詢無(wú)條件的提示請(qǐng)輸入查詢條件確定9）業(yè)務(wù)原因無(wú)法操作不允許！確定10）數(shù)據(jù)關(guān)聯(lián)對(duì)應(yīng)的提示當(dāng)前

3、記錄已，不允許！當(dāng)前記錄存在，是否？確定11）日期字段輸入錯(cuò)誤校驗(yàn)對(duì)于YYYY-MM-DD格式：請(qǐng)輸入有效日期！確定對(duì)于YYYY-MM格式：請(qǐng)輸入有效月份！確定12）日期段輸入校驗(yàn)XX截止日期不允許早于XX起始日期！確定13）日期有效性校驗(yàn)XX日期必須在SS起止日期（YYYY-MM-DDYYYY-MM-DD）范圍內(nèi)！確定14）數(shù)值字段輸入錯(cuò)誤校驗(yàn)數(shù)值有范圍限制：請(qǐng)輸入從到之間的數(shù)值！確定數(shù)值必須大于0的情況：必須大于零！確定數(shù)值不允許等于0的情況：不允許等于零！確定15）操作失敗的提示操作失敗，請(qǐng)關(guān)閉重試！確定16）等待提示處理中，請(qǐng)稍候確定17）當(dāng)數(shù)據(jù)發(fā)生改變時(shí)的提示信息。提示信息如下圖所示

4、確定18）最多支持n級(jí)分類提示XXX最多支持n級(jí)分類，不允許新增！確定19）退出提示是否要退出系統(tǒng)？確定、取消2 驗(yàn)證規(guī)范范圍：主要用于表單數(shù)據(jù)及其它數(shù)據(jù)的驗(yàn)證提示，例如：身份證與年齡匹配驗(yàn)證等。需驗(yàn)證的對(duì)象用途標(biāo)準(zhǔn)化提示語(yǔ)身份證與年齡不相符檢查身份證與年齡是否匹配年齡與身份證不符合，請(qǐng)重新輸入！密碼驗(yàn)證檢查密碼是否正確密碼不正確，請(qǐng)重新輸入！用戶名檢查用戶名是否存在1、 用戶名存在的情況下，則提示：用戶名不正確，請(qǐng)重新輸入！2、 用戶名不存在的情況下，則提示：用戶不存在！字段為空或全是空格檢查輸入字符串是否為空或者全部都是空格1、 空的情況下，則提示：請(qǐng)?zhí)顚?xiě)*！2、 全是空格的情況下，則提示

5、：名稱包含空格！手機(jī)號(hào)碼檢查輸入手機(jī)號(hào)碼是否正確手機(jī)號(hào)碼不正確，請(qǐng)重新輸入！電話號(hào)碼檢查輸入字符串是否符合國(guó)內(nèi)固話或者傳真格式電話號(hào)碼不正確，請(qǐng)重新輸入！日期驗(yàn)證判斷是否是日期您輸入的日期格式有誤！時(shí)間驗(yàn)證檢查輸入字符串是否符合時(shí)間格式您輸入的時(shí)間格式有誤！字母數(shù)字下劃線驗(yàn)證檢查輸入字符串是否只由英文字母和數(shù)字和下劃線組成您輸入的格式有誤！郵箱驗(yàn)證檢查輸入對(duì)象的值是否符合E-Mail格式您輸入的郵箱格式有誤！數(shù)字驗(yàn)證檢查輸入字符串是否是數(shù)字您輸入的格式有誤！身份證驗(yàn)證檢查輸入字符串是否符合身份證格式您輸入的身份證有誤！復(fù)選框請(qǐng)選擇！單選按鈕請(qǐng)選擇！特殊字符驗(yàn)證您輸入的內(nèi)容包含非法字符！備注：1

6、、提示語(yǔ)顏色均為紅色！ 2、提示語(yǔ)位置均顯示在對(duì)應(yīng)的文本輸入框后方。3 界面規(guī)范序號(hào)界面內(nèi)容規(guī)范要求1顏色1、統(tǒng)一色調(diào)，采用標(biāo)準(zhǔn)Windows的基本色調(diào)，做到與操作系統(tǒng)統(tǒng)一，讀取系統(tǒng)標(biāo)準(zhǔn)色表。2、整個(gè)界面色彩盡量少的使用類別不同的顏色。除非特殊場(chǎng)合，杜絕使用對(duì)比強(qiáng)烈，讓人產(chǎn)生憎惡感的顏色。3、同時(shí)色調(diào)也具有一定的含義，在整個(gè)系統(tǒng)中應(yīng)保持色調(diào)含義的一致性，避免同一中顏色在不同的畫(huà)面中表示不同的意義。2文字表述提示信息、幫助文檔文字表達(dá)遵循以下準(zhǔn)則： 口語(yǔ)化，多用您、請(qǐng)，不要用或少用專業(yè)術(shù)語(yǔ)，杜絕錯(cuò)別字。斷句逗號(hào)句號(hào)頓號(hào)分號(hào)的用法， 提示信息比較多的話，應(yīng)該分段。所有的警告、信息、錯(cuò)誤和提示的對(duì)話

7、框統(tǒng)一采用提示信息格式。使用統(tǒng)一的語(yǔ)言描述，例如一個(gè)關(guān)閉退出功能按鈕，統(tǒng)一描述為退出，避免使用返回、關(guān)閉等描述。3控件選擇不要隨意使用控件，控件功能要專一，風(fēng)格統(tǒng)一。如果沒(méi)有好的控件，則使用標(biāo)準(zhǔn)控件。1、控件的風(fēng)格統(tǒng)一。2、同一類型的控件操作方式相同，避免出現(xiàn)一個(gè)控件雙擊可以執(zhí)行某些動(dòng)作，而同樣控件，雙擊卻沒(méi)有任何反映。一個(gè)控件只做單一功能，盡量不復(fù)用。4順序習(xí)慣用法，閱讀順序，從左到右，從上到下。5一致性用詞、配色、按鈕、字體等前后均要保持一致性。6文字對(duì)齊患者、申請(qǐng)醫(yī)生、會(huì)診專家等姓名字段，按三個(gè)字的姓名兩端對(duì)齊，三個(gè)字以上的姓名左對(duì)齊即可。例如：張三張三豐張三豐子7內(nèi)容顯示所有列表均按1

8、024768的分辨率固定每列的寬度。根據(jù)頁(yè)面內(nèi)容和字體大小進(jìn)行設(shè)計(jì)即可，字段的長(zhǎng)度如果超過(guò)列寬的，不能顯示的部分已省略號(hào)代替，當(dāng)鼠標(biāo)在該字段上面停放時(shí)，顯示全部?jī)?nèi)容，例如：8文字鏈接可鏈接的文字均采用藍(lán)色字體，鼠標(biāo)放置時(shí)顯示下劃線。9統(tǒng)計(jì)報(bào)表 所有報(bào)表支持打印，導(dǎo)出為Excel。 打印時(shí)支持打印預(yù)覽，可以先瀏覽頁(yè)面布局，再點(diǎn)擊“打印”按鈕才進(jìn)行打印。 如報(bào)表中的值為0，則顯示為“-”。 對(duì)齊：序號(hào)居中顯示，表示值的數(shù)字使用千分位分隔符并且右對(duì)齊，文字左對(duì)齊。 所有列表均按1024768的分辨率固定每列的寬度。根據(jù)頁(yè)面內(nèi)容和字體大小進(jìn)行設(shè)計(jì)即可，字段的長(zhǎng)度如果超過(guò)列寬的，不能顯示的部分用省略號(hào)代

9、替，當(dāng)鼠標(biāo)在該字段上面停放時(shí)，顯示全部?jī)?nèi)容。 列標(biāo)題加粗，用有顏色的底紋進(jìn)行標(biāo)識(shí)，如果可以點(diǎn)擊時(shí)，添加下劃線，字體用藍(lán)色。 提供分頁(yè)功能 導(dǎo)出的報(bào)表中，如有些值是計(jì)算出來(lái)的結(jié)果，則在導(dǎo)出的報(bào)表中顯示公式。 合計(jì)的值用粗體，進(jìn)行區(qū)分顯示10列表滾動(dòng)條當(dāng)頁(yè)面出現(xiàn)豎向滾動(dòng)條時(shí)，滾動(dòng)條需控制在列表內(nèi)，滾動(dòng)時(shí)，列表標(biāo)題不動(dòng)，只滾動(dòng)內(nèi)容。11圖片資源1、 退出按鈕：2、 保存按鈕：或3、 新建按鈕：或4、 打開(kāi)按鈕：5、 下個(gè)環(huán)節(jié)：6、 上個(gè)環(huán)節(jié)：7、 打印按鈕：或8、 打印預(yù)覽：或9、 刷新按鈕：10、 查詢按鈕：11、 復(fù)制按鈕：12、 粘貼按鈕：13、 取消按鈕：14、 刪除按鈕：備注：后期軟件需求

10、基礎(chǔ)設(shè)計(jì)均以此為主作為參考。4 控件規(guī)范序號(hào)控件名稱控件說(shuō)明及樣式1附件上傳備注：支持進(jìn)度條及上傳百分比顯示。例如：2圖片上傳當(dāng)鼠標(biāo)指向圖片時(shí)顯示“修改頭像”，點(diǎn)擊可打開(kāi)上傳圖片。例如：3分頁(yè)控件1) 提供首頁(yè)、末頁(yè)、上一頁(yè)、下一頁(yè)、跳轉(zhuǎn)到指定頁(yè)面的功能；當(dāng)只有1頁(yè)時(shí)，鏈接均無(wú)效；當(dāng)處于第1頁(yè)或最后一頁(yè)時(shí)，首頁(yè)/上一頁(yè)或下一頁(yè)/末頁(yè)的鏈接無(wú)效。2) 提供設(shè)置每頁(yè)顯示指定條數(shù)的功能，后臺(tái)可配置指定條數(shù)的選項(xiàng),如20、50、100。3) 列表上方與下方均需提供分頁(yè)欄。例如：4時(shí)間控件以YYYY-MM-DD格式顯示，不足兩位的以0補(bǔ)齊，譬如：2011-04-08。例如： 5文本編輯框功能包括：字體選

11、擇、字體大小、加粗、斜體、下劃線、引號(hào)、括號(hào)、無(wú)序列表、有序列表、插入圖片、插入視頻、清除格式。系統(tǒng)文本編輯框均采用以下樣式實(shí)現(xiàn)。6樹(shù)形控件 備注：后期軟件需求基礎(chǔ)設(shè)計(jì)均以此為主作為參考。5 組件規(guī)范5.1 表格主要應(yīng)用于大批量數(shù)據(jù)的展示、查看、維護(hù)等方面?；A(chǔ)表格是表格本身最原始的一些屬性集合，針對(duì)表格在不同場(chǎng)景下的狀況，在擴(kuò)展設(shè)計(jì)中會(huì)一一羅列出來(lái)?！驹O(shè)計(jì)意圖】 合理有效的組織數(shù)據(jù)信息； 幫助用戶快速、有效的查看表格數(shù)據(jù)； 幫助用戶快速、準(zhǔn)確的完成對(duì)表格的操作；【應(yīng)用條件】 適用于批量數(shù)據(jù)的展示和維護(hù)；【模式描述】組成： 表格標(biāo)題 + 表格表頭+ 表格行間隔線 + 表格行如下圖所示：圖 51

12、 基礎(chǔ)表格應(yīng)用規(guī)范：l 表格的標(biāo)題：標(biāo)題文字要與其它文字有所區(qū)別，如：加粗顯示；標(biāo)題文字內(nèi)容以“內(nèi)容+操作”的形式描述，標(biāo)題文字前需要有相應(yīng)的標(biāo)題圖標(biāo)，文字與圖標(biāo)之間間隔一定的距離，如：一個(gè)半角空格。l 表格的表頭與表格主體在外觀上要有區(qū)分；l 表格行間隔線：表格的主體內(nèi)容用表格線區(qū)分；表格線的粗細(xì)要適中，如1px。 【擴(kuò)展描述】 根據(jù)應(yīng)用場(chǎng)景的不同，可以對(duì)基礎(chǔ)表格進(jìn)行擴(kuò)展；可以為表格增加數(shù)據(jù)篩選區(qū)、命令按鈕區(qū)、操作按鈕區(qū)、表格主體區(qū)、翻頁(yè)區(qū)、操作按鈕區(qū)。整體效果如下圖所示：圖 52 表格操作區(qū)分布1）標(biāo)題列排序： l 表格列標(biāo)題可以排序時(shí)，表格的列標(biāo)題要體現(xiàn)出當(dāng)前排序狀態(tài)，并要區(qū)分于其他列標(biāo)

13、題顯示，如：背景和圖標(biāo)高亮顯示； 如下圖所示： 圖 53 標(biāo)題列排序l 表格列標(biāo)題進(jìn)行切換時(shí)，原列標(biāo)題恢復(fù)初始狀態(tài)，切換到的列標(biāo)題顯示為排序狀態(tài)；2）表格行選中操作：l 表格中的第一列，既可表示對(duì)行的選擇如復(fù)選框；同時(shí)還可以用圖標(biāo)標(biāo)示數(shù)據(jù)狀態(tài)；當(dāng)兩者都有時(shí)，顯示復(fù)選框在上，圖標(biāo)被覆蓋；l 在對(duì)表格行進(jìn)行選中（點(diǎn)選行的任意位置即可選中）時(shí)，此行要高亮顯示，同時(shí)此行前復(fù)選框?yàn)檫x中狀態(tài)，同時(shí)還可以進(jìn)行多行選擇；需要全選時(shí)，只需勾選列標(biāo)題中的復(fù)選框即可選中當(dāng)前列表的全部行數(shù)據(jù)。3）數(shù)據(jù)篩選區(qū)： l 當(dāng)數(shù)據(jù)內(nèi)容可以明確的按其狀態(tài)、類別進(jìn)行劃分時(shí)，可以應(yīng)用頁(yè)簽的形式來(lái)進(jìn)行設(shè)計(jì)；l 頁(yè)簽總寬度在表格寬度的7

14、5%之內(nèi)為佳，超出此范圍時(shí)，需應(yīng)用其他設(shè)計(jì)形式如下拉框顯示的形式等； 如下圖所示： 圖 54 數(shù)據(jù)篩選區(qū)l 當(dāng)前分類狀態(tài)的的頁(yè)簽要高亮顯示，要明顯區(qū)別于其他頁(yè)簽；l 頁(yè)簽內(nèi)的文字，需要簡(jiǎn)單明了，相同內(nèi)容的文字省略；如上圖中未處理（訂單）、處理中（訂單）、處理完成（訂單）；l 應(yīng)用頁(yè)簽設(shè)計(jì)時(shí)，頁(yè)簽類別要?jiǎng)澐置鞔_合理；如按照數(shù)據(jù)狀態(tài)或分類進(jìn)行劃分。4）命令按鈕區(qū)： l 針對(duì)整體頁(yè)面進(jìn)行操作或者對(duì)表格整體進(jìn)行操作的按鈕放置在此區(qū)域內(nèi)；如：導(dǎo)入、導(dǎo)出、新增等；l 按鈕的其它細(xì)則參見(jiàn)界面視覺(jué)規(guī)范。5）操作按鈕區(qū)： l 對(duì)表格主體的數(shù)據(jù)進(jìn)行操作的按鈕放置在此區(qū)域。如：刪除、發(fā)布、下架、上架、審核等；l 當(dāng)

15、列表的數(shù)據(jù)超過(guò)一屏顯示時(shí)，在列表上方也要顯現(xiàn)操作按鈕區(qū)，方便用戶對(duì)列表進(jìn)行操作；如下圖所示：圖 55 操作按鈕區(qū)l 按鈕的其它細(xì)則參見(jiàn)界面視覺(jué)規(guī)范。6）翻頁(yè)區(qū)： l 當(dāng)列表中的數(shù)據(jù)量超過(guò)默認(rèn)的數(shù)據(jù)顯示條數(shù)時(shí)，應(yīng)用翻頁(yè)模式來(lái)處理多條數(shù)據(jù)的顯示；l 翻頁(yè)在列表下方居中顯示；l 翻頁(yè)的詳細(xì)功能和模式參見(jiàn)“翻頁(yè)模式組件規(guī)范”。7）單條數(shù)據(jù)操作區(qū)： l 對(duì)行數(shù)據(jù)進(jìn)行操作的按鈕要與操作按鈕區(qū)的按鈕視覺(jué)上要有所區(qū)分；具體參見(jiàn)界面視覺(jué)規(guī)范；l 盡量不要在此處安排太多的操作，太多的操作給使用者過(guò)多的判斷負(fù)擔(dān)。應(yīng)考慮其他的界面布局方式。8）表格列標(biāo)題區(qū)： l 當(dāng)表格的數(shù)據(jù)列較多，屏幕顯示已經(jīng)達(dá)到最大限度，而這些數(shù)

16、據(jù)列又必不可少時(shí)，允許通過(guò)鼠標(biāo)拖動(dòng)的方式來(lái)對(duì)數(shù)據(jù)列的寬度進(jìn)行改變；同時(shí)可以使用橫向滾動(dòng)條；l 調(diào)整列寬度時(shí)，要在整體表格邊線內(nèi)進(jìn)行，以免整體頁(yè)面變形；l 數(shù)據(jù)項(xiàng)內(nèi)容顯示部分太長(zhǎng)時(shí)，省略多余部分并加省略號(hào)；鼠標(biāo)指針?？繒r(shí)，全部詳細(xì)內(nèi)容顯示；9）數(shù)據(jù)條目設(shè)置區(qū)： l 默認(rèn)顯示當(dāng)前頁(yè)面所能顯示的最大數(shù)據(jù)條目數(shù)；如：10條/頁(yè)；l 還要提供幾個(gè)數(shù)值選項(xiàng)，供用戶選擇；如：20、30、50；.5.2 編號(hào)和序號(hào)1）編號(hào)用來(lái)標(biāo)識(shí)某一個(gè)對(duì)象的唯一號(hào)碼。一個(gè)編號(hào)就代表著一個(gè)對(duì)象。 使用編號(hào)能夠更好的幫助用戶記憶和或管理對(duì)象。如下圖所示： 圖 56 編號(hào)示例【設(shè)計(jì)意圖】 更好的方便用戶記憶和管理對(duì)象； 合理的使用

17、編號(hào)，能方便用戶更好的進(jìn)行溝通；【應(yīng)用條件】 需要用唯一號(hào)碼來(lái)標(biāo)識(shí)對(duì)象時(shí)； 具有真實(shí)、合理、有效的意義；例如：訂單列表中訂單的編號(hào)、酒店客房管理中客房的實(shí)際編號(hào)等等；【模式描述】應(yīng)用規(guī)范：l 編號(hào)必需代表一個(gè)對(duì)象，不要讓編號(hào)無(wú)意義的存在；l 如果用戶更關(guān)注編號(hào)，也就是說(shuō)編號(hào)對(duì)于用戶是第一位的，則必須提供編號(hào)。比如，酒店系統(tǒng)中對(duì)房號(hào)的關(guān)注就比人名要重要，所以編號(hào)的視覺(jué)層次應(yīng)該突出。如果用戶不常使用編號(hào)而通常更關(guān)注別的屬性；比如人名、物品名等，可以默認(rèn)不顯示編號(hào)，當(dāng)用戶需要時(shí)能夠查到編號(hào)。2）序號(hào)序號(hào)是用來(lái)標(biāo)識(shí)一組有序?qū)ο蟮臄?shù)字，它具有先后順序的含義。如下圖所示： 圖 57 序號(hào)示例【設(shè)計(jì)意圖】

18、使用戶更好了解對(duì)象的先后順序或按一定的順序去了解對(duì)象； 更好的展示有先后順序的數(shù)據(jù)；【應(yīng)用條件】 需要標(biāo)識(shí)一組有序?qū)ο髸r(shí)；例如：如歌曲排行旁、熱銷商品排行、點(diǎn)擊率排行等設(shè)計(jì)中；【模式描述】應(yīng)用規(guī)范：l 序號(hào)必需代表一個(gè)對(duì)象在集體中的序列，不要讓序號(hào)沒(méi)有意義。l 如果用戶關(guān)注對(duì)象的排列順序，則必須提供序號(hào)。如果用戶根本不關(guān)注對(duì)象的順序，請(qǐng)不要使用序號(hào)，這樣會(huì)混淆用戶的注意。圖 58 錯(cuò)誤示例5.3 注冊(cè)表單注冊(cè)表單應(yīng)用于對(duì)用戶的輸入格式有一定的要求的設(shè)計(jì)中，幫助用戶更好的完成填寫(xiě)表單的操作。【設(shè)計(jì)意圖】 快速高效的幫助用戶完成注冊(cè)； 盡量減少用戶犯錯(cuò)； 在用戶出錯(cuò)后，友好的有效的告知錯(cuò)誤，并提供

19、解決方案； 給用戶提供及時(shí)有效的反饋信息?！緫?yīng)用條件】 超過(guò)5項(xiàng)表單信息填寫(xiě)修改時(shí)； 用戶出錯(cuò)的頻率較高時(shí)； 系統(tǒng)對(duì)數(shù)據(jù)的要求比較嚴(yán)格時(shí)；例如：應(yīng)用于填寫(xiě)注冊(cè)信息、修改密碼等設(shè)計(jì)中?！灸Ｊ矫枋觥拷M成：各輸入控件 + 必填項(xiàng)指示 + 格式要求提示 + 對(duì)錯(cuò)判斷反饋 + 提交按鈕 如下圖所示：圖 59 注冊(cè)表單應(yīng)用規(guī)范：表單的設(shè)計(jì)應(yīng)該遵循簡(jiǎn)潔的設(shè)計(jì)原則。在注冊(cè)填寫(xiě)時(shí)，盡可能的只提供必須填寫(xiě)的選項(xiàng)給用戶，其他非必填項(xiàng)，可以通過(guò)選填或者在日后需要時(shí)再進(jìn)行完善的方式來(lái)完成。a) 信息輸入對(duì)錯(cuò)判斷：信息輸入正確時(shí)，要給與填寫(xiě)正確的反饋；信息輸入錯(cuò)誤的時(shí)候，要給出錯(cuò)誤的反饋，并給出具體的錯(cuò)誤原因要高亮反饋，

20、同時(shí)注釋語(yǔ)位置整體給出反饋提示。如下圖所示：圖 510 信息輸入對(duì)錯(cuò)判斷用戶在輸入錯(cuò)誤時(shí)，要針對(duì)不同的輸入內(nèi)容給出相應(yīng)明確的錯(cuò)誤提示，必要的時(shí)候要提出簡(jiǎn)要的解決方法提示。例如：在用戶名填寫(xiě)時(shí)，可能出現(xiàn)的錯(cuò)誤提示；您輸入的用戶名過(guò)短！您輸入的用戶名中不能包含字符“&（等等）”！你輸入的用戶名“xxx”已經(jīng)被占用,請(qǐng)重新輸入！b) 輸入格式約定（注釋文本）： 當(dāng)用戶需要輸入某一項(xiàng)時(shí)，相應(yīng)注釋文本才顯示出來(lái)； 對(duì)于表單中的某些內(nèi)容除了需要給予用戶正確填寫(xiě)格式的提示外還需要簡(jiǎn)要說(shuō)明填寫(xiě)的必要性，如下圖所示：圖 5113) 驗(yàn)證碼： 驗(yàn)證碼中的圖示字母是隨機(jī)產(chǎn)生的，但要注意盡可能避免顯示一些不易區(qū)分的字

21、母和數(shù)字，讓用戶難以辨別（如：“0和o”），如下圖所示： 圖 512 驗(yàn)證碼 驗(yàn)證碼圖示，要求相對(duì)清晰容易辨別，驗(yàn)證碼的位數(shù)控制在4位為最佳； 驗(yàn)證碼由系統(tǒng)隨機(jī)產(chǎn)生，在個(gè)別情況下字母和數(shù)字可能會(huì)難以辨別，此時(shí)用戶可以點(diǎn)擊鏈接文字（看不清，換一張）來(lái)更換驗(yàn)證碼，如下圖所示： 圖 513驗(yàn)證碼示例 用戶在輸入框內(nèi)輸入驗(yàn)證碼后，要及時(shí)給出反饋提示（不要到提交時(shí)才給出提示），如下圖所示： 圖 514驗(yàn)證碼錯(cuò)誤判斷4) 提交按鈕： 存在驗(yàn)證或提交按鈕時(shí)，只有所驗(yàn)證或提交的部分輸入完畢并且正確后，按鈕才能由置灰狀態(tài)變?yōu)榭捎脿顟B(tài)，如下圖所示：圖 515 注冊(cè)按鈕5) 成功告知 表單最終填寫(xiě)提交完成后，要給出

22、“提交成功或注冊(cè)成功”的相關(guān)提示，明確告知用戶此操作正確完成；6) 協(xié)議 單擊“我接受”意味著：您同意并接受服務(wù)協(xié)議和隱私聲明。 【擴(kuò)展描述】應(yīng)用規(guī)范：1) 密碼強(qiáng)弱提示 當(dāng)用戶賬號(hào)的保密性相對(duì)較高時(shí)，可以應(yīng)用密碼的強(qiáng)弱提示來(lái)保證密碼的復(fù)雜度。如下圖所示：圖 516密碼強(qiáng)弱 在輸入密碼時(shí)，旁邊顯示注釋文本：明確注明密碼強(qiáng)弱的規(guī)則和提示，如下圖所示：圖 517 密碼強(qiáng)弱提示 當(dāng)用戶輸入的內(nèi)容錯(cuò)誤或不完全正確時(shí)，要求提示的反饋信息必須提示明確，同時(shí)給出正確的解決方法，如下圖所示： 圖 518 密碼強(qiáng)弱提示對(duì)照表2) 注冊(cè)進(jìn)度提示 根據(jù)產(chǎn)品的特性，要求用戶填寫(xiě)的注冊(cè)表單較長(zhǎng)、步數(shù)較多時(shí)，需要給出注冊(cè)

23、的進(jìn)度條提示，明確的告知當(dāng)前注冊(cè)的進(jìn)度。3) 分組線注冊(cè)內(nèi)容較長(zhǎng)時(shí)，要用分組線，對(duì)要求用戶輸入的選項(xiàng)進(jìn)行分類分隔顯示（具體使用參見(jiàn)“分組線規(guī)則”）?！咀⒁馐马?xiàng)】 例如婚介交友等場(chǎng)景當(dāng)對(duì)用戶信息要求嚴(yán)格時(shí)，可以應(yīng)用注冊(cè)向?qū)б龑?dǎo)注冊(cè)過(guò)程。 如果表單中需要填寫(xiě)的數(shù)據(jù)項(xiàng)較多，頁(yè)面較長(zhǎng)，必填項(xiàng)又比較分散且數(shù)量較少時(shí)，必須使用行的背景顏色來(lái)區(qū)分必填項(xiàng)與非必填項(xiàng)。5.4 聯(lián)系方式聯(lián)系方式是對(duì)表單中提供給用戶填寫(xiě)詳細(xì)聯(lián)系方式一種組件規(guī)定?！驹O(shè)計(jì)意圖】 幫助用戶有效、快速的填寫(xiě)聯(lián)系方式； 減少用戶輸入錯(cuò)誤的幾率?！緫?yīng)用條件】 需要用戶填寫(xiě)詳細(xì)聯(lián)系方式時(shí)。例如：網(wǎng)上注冊(cè)，網(wǎng)上購(gòu)物填寫(xiě)發(fā)貨地址。【模式描述】組成：各

24、輸入控件，包括：“國(guó)家地區(qū)”、“省份”、“城市”、“聯(lián)系電話”、“傳真號(hào)碼”、“手機(jī)號(hào)碼”、“聯(lián)系地址”、“郵政編碼”等（根據(jù)具體需要再增加）。 圖 519 聯(lián)系方式應(yīng)用規(guī)范：l “國(guó)家地區(qū)”、“省份”和“城市”要有連動(dòng)關(guān)系； “國(guó)家地區(qū)”：下拉列表選框； “省份”：下拉列表選框，與選擇的國(guó)家連動(dòng)（選擇“國(guó)家地區(qū)”，“省份”下拉框中選項(xiàng)相應(yīng)變化）；如果在“省份”中已經(jīng)選擇了直轄市，如“北京”，則后面的“城市”不用再選，自動(dòng)置灰； “城市”：下拉列表選框，與選擇的城市連動(dòng)（選擇“省份”，“城市”下拉框中選項(xiàng)相應(yīng)變化）。城市下拉列表選項(xiàng)的最后一項(xiàng)為“其他地區(qū)”，如下圖所示：圖 520 其他地區(qū)l

25、“聯(lián)系電話”、“傳真號(hào)碼”和“手機(jī)號(hào)碼”必須拆分成幾個(gè)字段； “聯(lián)系電話”：四個(gè)輸入框字段，分別為：國(guó)家代碼（可選）區(qū)號(hào)電話號(hào)碼分機(jī)號(hào)； “傳真號(hào)碼”：三個(gè)輸入框字段，分別為：國(guó)家代碼（可選）區(qū)號(hào)傳真電話； “手機(jī)號(hào)碼”：兩個(gè)輸入框字段，分別為：國(guó)家代碼（可選）手機(jī)號(hào)； “國(guó)家代碼”此項(xiàng)可根據(jù)具體產(chǎn)品的銷售人群不同自行選擇是否保留；如下圖所示：圖 521正確示例圖圖 522錯(cuò)誤示例圖l 各字段分別與上面的“國(guó)家地區(qū)”、“省份”、“城市”連動(dòng)：“國(guó)家地區(qū)”和“省份”、“城市”選擇后，國(guó)家代碼和區(qū)號(hào)自動(dòng)顯示，如下圖所示：圖 523 聯(lián)系方式標(biāo)注l “聯(lián)系地址”：一個(gè)輸入框，等待用戶輸入文本；l “

26、郵政編碼”：一個(gè)輸入框（6個(gè)字符），等待用戶輸入文本；l 除“國(guó)家地區(qū)”、“省份”和“城市”是只能讓用戶選擇外，其他的輸入框均可手動(dòng)輸入和編輯，用戶可以根據(jù)自己的需要進(jìn)行修改?！緮U(kuò)展描述】組成：郵政編碼幫助 如下圖所示：圖 524 郵政編碼應(yīng)用規(guī)范： l 用戶手動(dòng)輸入郵政編碼時(shí)，系統(tǒng)根據(jù)“省份”、“城市”給出一些不同地區(qū)郵政編碼的關(guān)聯(lián)提示，供用戶參考，l 用戶選擇郵政編碼輸入框后面“查詢郵政編碼”鏈接（如下圖所示），可點(diǎn)擊打開(kāi)新窗口查看本市的郵政編碼。圖 525 查詢郵政編碼【注意事項(xiàng)】 各輸入項(xiàng)的先后順序，根據(jù)各字段的邏輯順序和參照關(guān)系排列的同時(shí)，要綜合考慮用戶的輸入操作（盡量將數(shù)字輸入的放

27、在一起，將漢字輸入的放在一起，以避免用戶在鍵盤(pán)上頻繁切換輸入位置）； 系統(tǒng)自動(dòng)提供的電話區(qū)號(hào)和郵政編碼等，必須保證是與國(guó)家、省、市相對(duì)應(yīng)的最新的和準(zhǔn)確的數(shù)據(jù)； 用戶用tab鍵切換不同的輸入?yún)^(qū)域時(shí)，輸入?yún)^(qū)域中本來(lái)用的數(shù)據(jù)顯示為選中狀態(tài)（不清空）。5.5 翻頁(yè)翻頁(yè)模式應(yīng)用于列表數(shù)據(jù)條目較多，文章篇幅較長(zhǎng)的設(shè)計(jì)中，來(lái)對(duì)數(shù)據(jù)和篇幅進(jìn)行更好的展示。翻頁(yè)可以拆分為以下幾部分：基礎(chǔ)頁(yè)碼、上下頁(yè)、首末頁(yè)、跳轉(zhuǎn)、Ajax 拖動(dòng)條、數(shù)據(jù)統(tǒng)計(jì)；根據(jù)不同的應(yīng)用場(chǎng)景，可以選擇某一部分或幾部分組合起來(lái)使用。如下圖所示： 圖 526 翻頁(yè)【設(shè)計(jì)意圖】 滿足用戶在不同場(chǎng)景下的不同需要； 增加操作的易用性；【應(yīng)用條件】 列表數(shù)

28、據(jù)條目較多時(shí)； 文章篇幅較長(zhǎng)時(shí)；【模式描述】組成：頁(yè)碼 如下圖所示：圖 527頁(yè)碼 應(yīng)用規(guī)范：l 頁(yè)碼少于或等于10頁(yè)時(shí)，只顯示應(yīng)該出現(xiàn)的頁(yè)碼數(shù)； l 鼠標(biāo)指針經(jīng)過(guò)和按下某個(gè)頁(yè)碼區(qū)域（此區(qū)域高亮反饋），鼠標(biāo)彈起后頁(yè)面切換完成；l 當(dāng)前頁(yè)的頁(yè)碼在外觀上要明顯的區(qū)分于其它頁(yè)碼，且不再提供頁(yè)面鏈接；l 已訪問(wèn)過(guò)的頁(yè)碼和未訪問(wèn)過(guò)的頁(yè)碼要有所區(qū)分；l 顯示當(dāng)前頁(yè)碼的前4頁(yè)和后4頁(yè)；前頁(yè)和最后頁(yè)除外，默認(rèn)全部顯示；l 設(shè)計(jì)時(shí)，頁(yè)碼的可點(diǎn)區(qū)域要相對(duì)較大，方便點(diǎn)擊；如下圖所示 圖 528狀態(tài)標(biāo)注【擴(kuò)展描述】1) 上下頁(yè) 組成：三角符號(hào)，“”作為上一頁(yè)，以“”作為下一頁(yè)；如下圖所示：圖 529 上下頁(yè)狀態(tài)應(yīng)用規(guī)

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

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

31、被選定的頁(yè)碼給出高亮反饋，單擊后頁(yè)面刷新顯示信息列表；l 用戶在輸入框中輸入數(shù)字以外的其它字符時(shí)，系統(tǒng)要給出錯(cuò)誤提示；如：您輸入的字符錯(cuò)誤，請(qǐng)輸入數(shù)字?。ň唧w提示內(nèi)容參見(jiàn)“提示語(yǔ)規(guī)范”）l 用戶拖拽滑塊移動(dòng)時(shí)，輸入框中的頁(yè)碼數(shù)值同步變化；l 頁(yè)碼輸入后可以通過(guò)“確定”按鈕和“回車”鍵兩種方式。l 與其他元素保持適當(dāng)?shù)拈g隔距離；參見(jiàn)界面視覺(jué)規(guī)范3) 數(shù)據(jù)統(tǒng)計(jì) 組成：統(tǒng)計(jì)提示文字 + 統(tǒng)計(jì)數(shù)值 + 數(shù)量單位 如：共7315條5.6 日期輸入1）通過(guò)日歷選擇日期日歷選擇是使用日歷選擇控件進(jìn)行日期輸入?！驹O(shè)計(jì)意圖】 使用生活中最常見(jiàn)的日歷形式，使得日期輸入的形式更加直觀； 日歷選擇形式能夠使日期輸入更

32、加方便、快捷； 能夠減少用戶錯(cuò)誤輸入日期的幾率；【應(yīng)用條件】 需要進(jìn)行日期輸入時(shí)； 年份跨度較小，在10年以內(nèi)時(shí)；例如：2006年 日期顯示的一種形式； 需要進(jìn)行日期區(qū)間選擇時(shí)；例如：應(yīng)用于表單中時(shí)間的輸入、統(tǒng)計(jì)查詢等設(shè)計(jì)中；【模式描述】組成：輸入框 + 日歷的圖示 + 日歷顯示層 如下圖所示：圖 533 日歷輸入應(yīng)用規(guī)范：1) 日歷l 日歷中必須明確標(biāo)示出當(dāng)前系統(tǒng)日期；包括：年、月、日。如下圖所示：圖 534 日歷標(biāo)注l 年份和月份選擇 如下圖所示；圖 535 年份和月份選擇l 默認(rèn)顯示近10年的年份，前10后1；l 從當(dāng)年往上，滑動(dòng)滾動(dòng)條，查看到100個(gè)年份；往下，查看到10個(gè)年份；l 點(diǎn)

33、擊日歷中的月份12個(gè)月份全部顯示在下拉層中；l 當(dāng)前年份、月份均要區(qū)分于其他高亮顯示；2) 日期輸入l 通過(guò)鍵盤(pán)輸入日期；當(dāng)鼠標(biāo)移至輸入框內(nèi)時(shí)，輸入框中的內(nèi)容被全部選中并高亮顯示，鼠標(biāo)移開(kāi)后恢復(fù)；開(kāi)始鍵盤(pán)輸入時(shí)，默認(rèn)內(nèi)容將被清空；如下圖所示：默認(rèn)狀態(tài)鼠標(biāo)在輸入框內(nèi)點(diǎn)擊后輸入日期后l 通過(guò)日歷選擇輸入日期；點(diǎn)擊日歷圖標(biāo)后，輸入框、圖標(biāo)及文字均高亮顯示，給出用戶明確的反饋；選定日期要高亮顯示，同時(shí)區(qū)分于當(dāng)前系統(tǒng)日期；如下圖所示： 圖 536 日歷選擇3) 錯(cuò)誤提示只允許輸入0-9這十個(gè)數(shù)字；只要用戶輸入數(shù)字，無(wú)論幾位系統(tǒng)自動(dòng)按照“yyyy-mm-dd”的格式顯示給用戶；當(dāng)月份和日期超出正常值時(shí)，系

34、統(tǒng)給出提示；如“很抱歉！您輸入的月份或日期過(guò)大，請(qǐng)重新輸入！”4) 顯示某一時(shí)間點(diǎn)要求顯示當(dāng)前系統(tǒng)默認(rèn)時(shí)間不要求顯示當(dāng)前系統(tǒng)默認(rèn)時(shí)間【擴(kuò)展描述】組成：時(shí)間段的文本提示 + 兩個(gè)日期選擇 如下圖所示：圖 537 一段時(shí)間選擇應(yīng)用規(guī)范：l 時(shí)間段的文本提示“從至”；l 選定起始時(shí)間后，起始時(shí)間被回顯到日期框內(nèi) ，同時(shí)截至日期日歷框自動(dòng)被打開(kāi)，不需要用戶再次點(diǎn)擊，即可選擇日期； 2）年份跨度較大時(shí)的日期選擇應(yīng)用于日期選擇時(shí)的年份會(huì)出現(xiàn)跨度較大的設(shè)計(jì)中，方便快速的幫助用戶正確完成時(shí)間格式的輸入。適用于出生日期等方面。使得信息反饋及時(shí)明確，提示明顯易懂，減少了誤操作和重復(fù)操作的次數(shù)。【設(shè)計(jì)意圖】 方便用

35、戶快速定位年份、月份、日期； 減少用戶出錯(cuò)的幾率； 符合此類場(chǎng)景下用戶的心里預(yù)期；【應(yīng)用條件】 年份的選擇跨度較大，在10-90年之間時(shí)；例如：適用于出生日期等設(shè)計(jì)中；【模式描述】組成：輸入框 +下拉層 + 年月日的文本提示 整體效果如下圖：圖 538 年份選擇應(yīng)用規(guī)范：1）手動(dòng)輸入年月日的輸入均可以通過(guò)鍵盤(pán)操作的方式輸入，輸入內(nèi)容范圍在0-9十個(gè)數(shù)字之內(nèi)；如下圖所示：未輸入鼠標(biāo)聚焦到輸入框輸入后2）選擇輸入年月日的輸入均可以通過(guò)鼠標(biāo)點(diǎn)擊出現(xiàn)列表選擇的方式輸入；年的選擇方式；如下圖所示：圖 539 選擇年份默認(rèn)只提供顯示90個(gè)年份，當(dāng)前所在年份不足10年時(shí)，未來(lái)年份默認(rèn)置灰顯示。月的輸入方式；

36、如下圖所示：圖 540 選擇月份日的輸入方式；如下圖所示：圖 541 選擇日期5.7 進(jìn)度條應(yīng)用于用戶上網(wǎng)瀏覽頁(yè)面、執(zhí)行數(shù)據(jù)操作時(shí)進(jìn)行等待時(shí)的設(shè)計(jì)中； 【設(shè)計(jì)意圖】 避免因?yàn)榈却鹩脩舻膮挓┖驼`解； 讓用戶了解應(yīng)用程序正在執(zhí)行并且實(shí)時(shí)了解執(zhí)行情況，并給出用戶有效的即時(shí)反饋； 趣味性的進(jìn)度條，能增加用戶的愉悅性；【應(yīng)用條件】 系統(tǒng)需要用戶長(zhǎng)時(shí)間等待時(shí)； 上傳下載的文件較大時(shí)； 等待時(shí)間超過(guò)5秒鐘時(shí)；例如：數(shù)據(jù)上傳下載、頁(yè)面瀏覽、文件打開(kāi)關(guān)閉、復(fù)制、打印文檔等。【模式描述】組成：進(jìn)度單位+進(jìn)度框 如下圖所示：圖 542 進(jìn)度條應(yīng)用規(guī)范：l 根據(jù)進(jìn)度情況逐步顯示進(jìn)度單位，直到進(jìn)度完成；l 進(jìn)度條的

37、形式參見(jiàn)界面視覺(jué)規(guī)范?！緮U(kuò)展描述】1) 百分比數(shù)值組成：百分比數(shù)值 如下圖所示：圖 543 百分比數(shù)值應(yīng)用規(guī)范：l 根據(jù)完成的進(jìn)度，實(shí)時(shí)的顯示出完成部分的百分?jǐn)?shù)。l 執(zhí)行數(shù)據(jù)的具體操作時(shí)，需要顯示百分比數(shù)值，為用戶顯示任務(wù)完成信息的實(shí)時(shí)對(duì)比，2)“取消”按鈕組成：“取消”按鈕 如下圖所示：圖 544 “取消”按鈕應(yīng)用規(guī)范：l 針對(duì)某一數(shù)據(jù)的具體操作時(shí)，在等待的過(guò)程中，用戶可以對(duì)操作進(jìn)行終止操作。此時(shí)需要在進(jìn)度條的基礎(chǔ)添加“取消”按鈕，并且此按鈕要高亮顯示，提示用戶進(jìn)程中途可以取消。c)內(nèi)容提示組成：內(nèi)容提示 如下圖所示： 圖 545 內(nèi)容提示應(yīng)用規(guī)范：l 針對(duì)不同的內(nèi)容，可以添加提示文字，來(lái)對(duì)

38、進(jìn)度條進(jìn)行說(shuō)明。進(jìn)度條說(shuō)明文字后必須添加“.”表示進(jìn)行中。如下圖所示：【注意事項(xiàng)】 設(shè)計(jì)有意思的趣味性的進(jìn)度條，不但不會(huì)讓用戶反感還會(huì)增加用戶的愉悅性。5.8 保留圖標(biāo) 用戶經(jīng)常使用的圖標(biāo)，作為專用圖標(biāo)，避免理解上的歧義和誤解?！驹O(shè)計(jì)意圖】 用戶經(jīng)常使用的圖標(biāo)，作為專用圖標(biāo)，避免理解上的歧義和誤解；【應(yīng)用條件】 具體應(yīng)用參見(jiàn)表格中各個(gè)圖標(biāo)的具體說(shuō)明；【模式描述】名稱圖示說(shuō)明三角一側(cè)出現(xiàn)浮動(dòng)層是應(yīng)用存在下拉層時(shí)應(yīng)用箭頭降序排序時(shí)應(yīng)用升序排序時(shí)應(yīng)用置頂置底手機(jī)手機(jī)通知信封郵件通知軟盤(pán)保存打印機(jī)打印方氣泡批注對(duì)勾正確叉錯(cuò)誤、關(guān)閉嘆號(hào)！警告提示問(wèn)號(hào)？幫助說(shuō)明鉗子設(shè)置豎等于號(hào)暫停圓氣泡留言回復(fù)等圖 54

39、6 保留圖標(biāo)應(yīng)用規(guī)范：l 保留圖示的應(yīng)用范圍只能確定在以上幾方面，要避免在其它設(shè)計(jì)中使用。l 以上提出了部分的保留圖示，在以后的設(shè)計(jì)中可以根據(jù)應(yīng)用的情況不斷完善和添加；l 國(guó)際通用的圖標(biāo)必須保持原有意義。5.9 彈出層1）非獨(dú)占焦點(diǎn)層應(yīng)用于彈出層的信息對(duì)產(chǎn)品主界面操作流程沒(méi)有必然影響的一些非持續(xù)性的任務(wù)中；如站內(nèi)消息、模塊設(shè)置等。如下圖所示：圖 547 非獨(dú)占焦點(diǎn)層【設(shè)計(jì)意圖】 適時(shí)的友好的提醒告知用戶；【應(yīng)用條件】 不影響用戶的操作流程； 提示信息對(duì)用戶來(lái)說(shuō)只是參考和輔助作用；例如：站內(nèi)消息、模塊設(shè)置等設(shè)計(jì)中?！灸Ｊ矫枋觥繎?yīng)用規(guī)范：l 彈出層的位置需要根據(jù)具體操作的位置相應(yīng)調(diào)整；l 彈出層可

40、以用鼠標(biāo)隨意拖拽它在屏幕中的顯示位置；l 主界面的操作不受彈出層的影響；2）獨(dú)占焦點(diǎn)層應(yīng)用于彈出層的信息對(duì)產(chǎn)品主界面操作流程有直接影響的設(shè)計(jì)中；適用于分權(quán)限查看操作、系統(tǒng)超時(shí)、信息發(fā)送、接收過(guò)程等，如下圖所示：圖 548 獨(dú)占焦點(diǎn)層 【設(shè)計(jì)意圖】 緊急有效的提醒用戶； 保護(hù)并防止影響用戶之前的操作；【應(yīng)用條件】 提示信息對(duì)用戶來(lái)說(shuō)緊急而且特殊； 操作對(duì)系統(tǒng)整體后果影響巨大；例如：適用于分權(quán)限查看操作、系統(tǒng)超時(shí)、信息發(fā)送、接收過(guò)程等【模式描述】應(yīng)用規(guī)范：l 點(diǎn)擊彈出層后，直接影響主界面操作流程，此時(shí)主頁(yè)面處于不可用狀態(tài)；l 不可用狀態(tài)的視覺(jué)表現(xiàn)參見(jiàn)界面視覺(jué)規(guī)范l 主頁(yè)面處于不可用狀態(tài)時(shí)，不能進(jìn)行

41、任何操作；l 必須對(duì)彈出層進(jìn)行處理操作后，主界面才可以恢復(fù)繼續(xù)進(jìn)行其它操作；l 彈出層要居中顯示；l 彈出層不可以用鼠標(biāo)拖拽，無(wú)法變換位置。3）局部獨(dú)占焦點(diǎn)層應(yīng)用于彈出層的信息對(duì)產(chǎn)品主界面的局部操作流程有直接影響的設(shè)計(jì)中；適用于不同會(huì)員分權(quán)限查看、操作某部分信息等；如下圖所示：圖 549 局部獨(dú)占焦點(diǎn)層【設(shè)計(jì)意圖】 提示信息對(duì)用戶來(lái)說(shuō)緊急而且特殊； 保護(hù)并防止影響用戶的某些具體操作；【應(yīng)用條件】 提示信息對(duì)用戶來(lái)說(shuō)緊急而且特殊； 操作對(duì)系統(tǒng)局部的影響巨大；例如：適用于不同會(huì)員分權(quán)限查看、操作某部分信息等；【模式描述】應(yīng)用規(guī)范：l 彈出層要顯示在局部范圍之內(nèi)，且居中（局部之內(nèi)）顯示；l 彈出層不

42、可以用鼠標(biāo)拖拽，無(wú)法變換位置；l 點(diǎn)擊彈出層后，直接影響主界面局部的操作流程，此時(shí)只需將頁(yè)面的相應(yīng)局部置為不可用狀態(tài)即可；l 局部處于不可用狀態(tài)的部分，不能進(jìn)行任何操作；l 頁(yè)面其他部分，可以進(jìn)行正常操作；l 必須對(duì)彈出層進(jìn)行處理操作后，局部頁(yè)面才可以繼續(xù)進(jìn)行操作；5.10 搜索1）模糊搜索模糊搜索是只要用戶知道要查找的大概內(nèi)容和范圍時(shí)，給用戶提供的按照輸入的關(guān)鍵字進(jìn)行查詢的方式?！驹O(shè)計(jì)意圖】 幫助用戶正確使用模糊搜索； 幫助用戶方便快捷地輸入關(guān)鍵詞信息； 減少無(wú)效輸入的幾率，提高搜索的準(zhǔn)確性?！緫?yīng)用條件】 用戶對(duì)于要查找的信息沒(méi)有具體明確的數(shù)據(jù)限定時(shí)；例如：查找包含某主題的圖書(shū)、文章等相關(guān)資

43、源?！灸Ｊ矫枋觥拷M成：搜索輸入框 + 搜索按鈕 如下圖所示：圖 550 模糊搜索應(yīng)用規(guī)范： l 搜索輸入框中給出默認(rèn)的提示文本（如：請(qǐng)輸入商品名稱關(guān)鍵詞），以灰色字體顯示；l 提示文本的內(nèi)容要簡(jiǎn)潔并能夠指導(dǎo)用戶查詢；l 當(dāng)用戶鼠標(biāo)在輸入框內(nèi)定位（單擊）時(shí)，提示文本自動(dòng)清除，等待輸入；l 當(dāng)用戶鼠標(biāo)移到輸入框外單擊時(shí)，默認(rèn)的提示文本重新顯示；l 點(diǎn)擊“搜索”，系統(tǒng)根據(jù)輸入的關(guān)鍵詞搜索出相關(guān)內(nèi)容，要求對(duì)搜索結(jié)果有相應(yīng)文本統(tǒng)計(jì)或描述，如：“抱歉，沒(méi)有找到與“xxxx” 相關(guān)的信息。請(qǐng)檢查輸入字詞有無(wú)錯(cuò)誤。請(qǐng)換用另外的查詢字詞。請(qǐng)改用較常見(jiàn)的字詞?！?；或“約有123條信息符合您的搜索條件，以下是1-1

44、5條?！保籰 搜索結(jié)果提示頁(yè)面規(guī)范參見(jiàn)提示規(guī)范文檔。【擴(kuò)展描述】組成：類別選擇下拉框類別選擇下拉框圖 551 分類模糊搜索應(yīng)用規(guī)范： l 模糊搜索可以配合另外的精確搜索條件（如：?jiǎn)芜x、多選等）一起使用；l 下拉框中默認(rèn)顯示“全部”選項(xiàng)，提示用戶可以進(jìn)行選擇（如：全部類別）。 2）精確搜索精確搜索是在搜索的內(nèi)容可以設(shè)定多種組合條件時(shí)，提供給用戶的按照設(shè)定的限定條件進(jìn)行查詢的方式?！驹O(shè)計(jì)意圖】 幫助用戶快速有效的完成精確搜索； 默認(rèn)值幫助用戶方便快捷地設(shè)定各條件信息，減少無(wú)效輸入?！緫?yīng)用條件】 信息量較大，用戶很難通過(guò)其它途徑獲知時(shí)； 可以通過(guò)具體屬性縮小搜索范圍； 對(duì)象包含多個(gè)屬性。【模式描述】

45、組成：各種不同的搜索條件選框+搜索按鈕： 圖 552 精確搜索應(yīng)用規(guī)范： l 搜索條件要合理，容易理解。l 各控件的排列順序，主要依照該條件的關(guān)鍵程度以及用戶對(duì)該條件的熟知程度，其次依照控件的視覺(jué)布局效果；l 精確搜索根據(jù)搜索條件，提供輸入框、選擇下拉框或單選控件；l 在輸入框中默認(rèn)顯示文本“不限”；l 當(dāng)用戶鼠標(biāo)在輸入框內(nèi)定位（單擊）時(shí)，提示文本自動(dòng)清除，等待輸入；l 當(dāng)用戶鼠標(biāo)移到輸入框外單擊時(shí)，默認(rèn)的提示文本重新顯示；l 在選擇下拉列表框中默認(rèn)顯示選項(xiàng)文字“不限”；l 在單選組中默認(rèn)選中第一項(xiàng)；l 點(diǎn)擊“搜索”，系統(tǒng)根據(jù)輸入的關(guān)鍵詞搜索出相關(guān)內(nèi)容，要求對(duì)搜索結(jié)果有相應(yīng)文字統(tǒng)計(jì)或描述，如：

46、“抱歉，沒(méi)有找到相關(guān)的信息。請(qǐng)檢查輸入字詞有無(wú)錯(cuò)誤。請(qǐng)換用另外的查詢字詞。請(qǐng)改用較常見(jiàn)的字詞?！被颍骸凹s有123條信息符合您的搜索條件，以下是1-15條。”；l 搜索結(jié)果提示頁(yè)面規(guī)范參見(jiàn)提示規(guī)范文檔?！緮U(kuò)展描述】組成：標(biāo)簽 如圖所示：頁(yè)簽圖 553 分類精確搜索應(yīng)用規(guī)范： l 多類別搜索時(shí)，可以使用頁(yè)簽表示不同的類別。默認(rèn)是第一個(gè)頁(yè)簽的搜索條件。頁(yè)簽的順序遵循該條件的關(guān)鍵程度以及用戶對(duì)該條件的熟知程度，其次依照控件的視覺(jué)布局效果。圖 554 錯(cuò)誤與正確示例l 當(dāng)前選中的類別必須足夠明顯，并能清晰的表明頁(yè)簽與各搜索項(xiàng)是一體的關(guān)系；l 不同頁(yè)簽里的搜索項(xiàng)，要與當(dāng)前頁(yè)簽相符。應(yīng)用規(guī)范： l 可提升為標(biāo)簽的項(xiàng)目包含的選項(xiàng)不應(yīng)該超過(guò)3項(xiàng)（三項(xiàng)以上考慮應(yīng)用其它的控件表現(xiàn)，比如下拉選框）；l 該選項(xiàng)可作為劃分類型，一般為用戶進(jìn)行篩選的第一項(xiàng)條件；【注意事項(xiàng)】l 不強(qiáng)制用戶填寫(xiě)哪條或者幾條選項(xiàng)，故每一項(xiàng)搜索條件前面不添加任何單選或復(fù)選框；l 當(dāng)高級(jí)搜索點(diǎn)擊“搜索”后，頁(yè)面應(yīng)該在適當(dāng)位置顯示搜索結(jié)果，且保留用戶剛剛設(shè)置的搜索條件，并且提供“重置”按鈕，恢復(fù)為默認(rèn)：5.11 排序主要應(yīng)用于分類或