【文章內(nèi)容簡(jiǎn)介】 表格列標(biāo)題區(qū)： ? 當(dāng)表格的數(shù)據(jù)列較多，屏幕顯示已經(jīng)達(dá)到最大限度，而這些數(shù)據(jù)列又必不可少時(shí)，允許通過(guò)鼠標(biāo)拖動(dòng)的方式來(lái)對(duì)數(shù)據(jù)列的寬度進(jìn)行改變；同時(shí)可以使用橫向滾動(dòng)條；? 調(diào)整列寬度時(shí)，要在整體表格邊線內(nèi)進(jìn)行，以免整體頁(yè)面變形；? 數(shù)據(jù)項(xiàng)內(nèi)容顯示部分太長(zhǎng)時(shí)，省略多余部分并加省略號(hào)；鼠標(biāo)指針?？繒r(shí)，全部詳細(xì)內(nèi)容顯示；9）數(shù)據(jù)條目設(shè)置區(qū)： ? 默認(rèn)顯示當(dāng)前頁(yè)面所能顯示的最大數(shù)據(jù)條目數(shù)；如：10 條/頁(yè)；? 還要提供幾個(gè)數(shù)值選項(xiàng)，供用戶選擇；如：50；15 / 78 單元格數(shù)據(jù) 單元格數(shù)據(jù)展示以單元格為單位的數(shù)據(jù)展示是指應(yīng)用表格的單元格來(lái)描述每個(gè)數(shù)據(jù)對(duì)象的展示形式?！驹O(shè)計(jì)意圖】? 讓用戶更加清晰的瀏覽信息；? 方便查看選中單元格的信息?！緫?yīng)用條件】適用于多數(shù)據(jù)的查看、瀏覽和操作；例如：如短信中的收信人、郵件中的收件人等。【模式描述】組成：如下圖所示：圖 46 單元格數(shù)據(jù)展示應(yīng)用規(guī)范：? 鼠標(biāo)經(jīng)過(guò)或選中此類表格的單元格時(shí)，行或列的背景色高亮顯示。? 此類單元格請(qǐng)支持按“Shift”鍵進(jìn)行連續(xù)選定，整行整列選定時(shí)要有箭頭圖標(biāo)反饋給用戶。? 此類單元格請(qǐng)支持按“Ctrl”鍵進(jìn)行間斷選定。注意事項(xiàng)：數(shù)據(jù)類表格是指表格所描述內(nèi)容是由多個(gè)數(shù)據(jù)或一組對(duì)象（每個(gè)對(duì)象至少包含兩個(gè)數(shù)據(jù)項(xiàng)）組成，對(duì)于展示某些信息的表格不屬于數(shù)據(jù)類表格?！緮U(kuò)展描述】 16 / 78 通訊錄是以單元格數(shù)據(jù)展示形式為基礎(chǔ)的，集添加刪除修改等功能于一體的組件。【設(shè)計(jì)意圖】? 用戶不會(huì)再輸入通訊錄信息之間分隔符，更不會(huì)出現(xiàn)由于分隔符輸入不正確而導(dǎo)致的錯(cuò)誤操作；? 為用戶顯示人名，而不顯示地址，方便了查看，同時(shí)增加了自動(dòng)匹配，查找，將新信息增加到通訊錄和導(dǎo)出通訊錄的功能?！緫?yīng)用條件】? 適用于需要用戶多次填寫(xiě)同類信息的地方。如：競(jìng)價(jià)通中的“關(guān)鍵詞管理” ；日期格式中年份的展現(xiàn)方式；郵件、短信產(chǎn)品的收信人列表?！灸Ｊ矫枋觥? 組成： 如下圖所示：圖 47 通訊錄 1應(yīng)用規(guī)范：a）通訊錄中無(wú)此信息的高亮反饋? 通訊錄中存在姓名時(shí)表格內(nèi)只顯示姓名；? 通訊錄中沒(méi)有姓名只有手機(jī)號(hào)碼（或 地址）時(shí)則顯示號(hào)碼（或 地址） ；? 姓名、手機(jī)號(hào)碼（或 地址）兩者都無(wú)的單元格自動(dòng)高亮反饋給用戶。 b）默認(rèn)顯示 默認(rèn)顯示表格的一個(gè)空行；如下圖所示：17 / 78 圖 48 通訊錄 2 整行單元格數(shù)據(jù)被填滿時(shí)，表格自動(dòng)增加一行；如下圖所示： 圖 49 通訊錄 3 增加至 3 行時(shí)，出現(xiàn)滾動(dòng)條；如下圖： 圖 410 通訊錄 4 c）自動(dòng)匹配支持手動(dòng)輸入，可以輸入人名或地址；輸入地址時(shí)自動(dòng)匹配通訊錄中對(duì)應(yīng)的人名； d）快捷操作為高級(jí)用戶提供快捷操作,輸入新人名或新地址時(shí)，可以將其添加到通訊錄。如下圖：圖 411 通訊錄 5注意事項(xiàng)： 使用時(shí)遇到兩個(gè)人同名時(shí)可以采用“姓名（號(hào)碼） ”的方式顯示。18 / 78【擴(kuò)展描述】 無(wú) 信息列表信息列表是顯示單列信息集合的一種視圖展示。 【設(shè)計(jì)意圖】? 利于信息的展示，方便使用者檢索信息；? 快速定位信息條目。【應(yīng)用條件】? 單列信息集合；? 索引類的信息列表；例如：信息列表多應(yīng)用于索引類的信息列表，如：新聞列表、目錄等?！灸Ｊ矫枋觥拷M成：項(xiàng)目符號(hào)、列表行，如下圖所示：圖 412 信息列表應(yīng)用規(guī)范：? 項(xiàng)目符號(hào)可以是固定的符號(hào)，也可以是具有意義的圖標(biāo)；? 項(xiàng)目符號(hào)如果是圖標(biāo)，圖標(biāo)必須與應(yīng)用場(chǎng)景相符，盡量不使用無(wú)意義的僅為裝飾作用的視覺(jué)效果顯著的圖標(biāo)作為項(xiàng)目符號(hào)；? 列表行的內(nèi)容，可以為文字和圖標(biāo)，文字一般為簡(jiǎn)單的標(biāo)題；? 列表行的文字內(nèi)容應(yīng)該簡(jiǎn)單易懂，能夠明確的反應(yīng)所要說(shuō)明的信息。? 列表行內(nèi)容如果折行，行距必須小于兩個(gè)記錄行之間的段距；19 / 78? 由于信息列表多為展示信息的條目，因此信息列表的行間距要有一點(diǎn)留白，不要給使用者造成視覺(jué)上的負(fù)擔(dān)?！緮U(kuò)展描述】組成：列表標(biāo)題、單選按鈕、多選按鈕、分隔線、翻頁(yè)，如下圖所示：圖 413 信息列表 2應(yīng)用規(guī)范：? 列表標(biāo)題是對(duì)列表中的信息內(nèi)容的概括性標(biāo)題（標(biāo)題的寫(xiě)法請(qǐng)參見(jiàn)“標(biāo)題”控件的描述） ；? 單選按鈕，多選按鈕在需要時(shí)替換項(xiàng)目符號(hào)的位置；? 分隔線：在記錄行太多時(shí)需要提供分隔線（請(qǐng)參見(jiàn)“分隔線”控件中的相關(guān)描述） ；20 / 78? 翻頁(yè)（請(qǐng)參見(jiàn)“翻頁(yè)”組件中的相關(guān)描述） 。21 / 78 編號(hào)和序號(hào)用來(lái)標(biāo)識(shí)某一個(gè)對(duì)象的唯一號(hào)碼。一個(gè)編號(hào)就代表著一個(gè)對(duì)象。 使用編號(hào)能夠更好的幫助用戶記憶和或管理對(duì)象。如下圖所示： 圖 414 編號(hào)示例【設(shè)計(jì)意圖】? 更好的方便用戶記憶和管理對(duì)象；? 合理的使用編號(hào)，能方便用戶更好的進(jìn)行溝通；【應(yīng)用條件】? 需要用唯一號(hào)碼來(lái)標(biāo)識(shí)對(duì)象時(shí)；? 具有真實(shí)、合理、有效的意義；例如：訂單列表中訂單的編號(hào)、酒店客房管理中客房的實(shí)際編號(hào)等等；【模式描述】應(yīng)用規(guī)范：? 編號(hào)必需代表一個(gè)對(duì)象，不要讓編號(hào)無(wú)意義的存在；? 如果用戶更關(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)。【擴(kuò)展描述】 22 / 78序號(hào)是用來(lái)標(biāo)識(shí)一組有序?qū)ο蟮臄?shù)字，它具有先后順序的含義。如下圖所示： 圖 415 序號(hào)示例【設(shè)計(jì)意圖】? 使用戶更好了解對(duì)象的先后順序或按一定的順序去了解對(duì)象；? 更好的展示有先后順序的數(shù)據(jù)；【應(yīng)用條件】? 需要標(biāo)識(shí)一組有序?qū)ο髸r(shí)；例如：如歌曲排行旁、熱銷商品排行、點(diǎn)擊率排行等設(shè)計(jì)中；【模式描述】應(yīng)用規(guī)范：? 序號(hào)必需代表一個(gè)對(duì)象在集體中的序列，不要讓序號(hào)沒(méi)有意義。? 如果用戶關(guān)注對(duì)象的排列順序，則必須提供序號(hào)。如果用戶根本不關(guān)注對(duì)象的順序，請(qǐng)不要使用序號(hào)，這樣會(huì)混淆用戶的注意。23 / 78圖 416 錯(cuò)誤示例【擴(kuò)展描述】 24 / 78 注冊(cè)表單注冊(cè)表單應(yīng)用于對(duì)用戶的輸入格式有一定的要求的設(shè)計(jì)中，幫助用戶更好的完成填寫(xiě)表單的操作?！驹O(shè)計(jì)意圖】? 快速高效的幫助用戶完成注冊(cè)；? 盡量減少用戶犯錯(cuò)；? 在用戶出錯(cuò)后，友好的有效的告知錯(cuò)誤，并提供解決方案；? 給用戶提供及時(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ì)中。【模式描述】組成：各輸入控件 + 必填項(xiàng)指示 + 格式要求提示 + 對(duì)錯(cuò)判斷反饋 + 提交按鈕 如下圖所示：25 / 78圖 417 注冊(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ò)誤原因要高亮反饋，同時(shí)注釋語(yǔ)位置整體給出反饋提示。如下圖所示：26 / 78圖 418 信息輸入對(duì)錯(cuò)判斷用戶在輸入錯(cuò)誤時(shí)，要針對(duì)不同的輸入內(nèi)容給出相應(yīng)明確的錯(cuò)誤提示，必要的時(shí)候要提出簡(jiǎn)要的解決方法提示。例如：在用戶名填寫(xiě)時(shí)，可能出現(xiàn)的錯(cuò)誤提示；您輸入的用戶名過(guò)短！您輸入的用戶名中不能包含字符“amp。 （等等） ”！你輸入的用戶名“xxx”已經(jīng)被占用,請(qǐng)重新輸入！b) 輸入格式約定（注釋文本）： 當(dāng)用戶需要輸入某一項(xiàng)時(shí)，相應(yīng)注釋文本才顯示出來(lái)； 對(duì)于表單中的某些內(nèi)容除了需要給予用戶正確填寫(xiě)格式的提示外還需要簡(jiǎn)要說(shuō)明填寫(xiě)的必要性，如下圖所示：圖 4193) 驗(yàn)證碼： 驗(yàn)證碼中的圖示字母是隨機(jī)產(chǎn)生的，但要注意盡可能避免顯示一些不易區(qū)分的字母和數(shù)字，讓用戶難以辨別（如：“0 和 o”） ，如下圖所示： 圖 420 驗(yàn)證碼 驗(yàn)證碼圖示，要求相對(duì)清晰容易辨別，驗(yàn)證碼的位數(shù)控制在 4 位為最佳；27 / 78 驗(yàn)證碼由系統(tǒng)隨機(jī)產(chǎn)生，在個(gè)別情況下字母和數(shù)字可能會(huì)難以辨別，此時(shí)用戶可以點(diǎn)擊鏈接文字（看不清，換一張）來(lái)更換驗(yàn)證碼，如下圖所示： 圖 421 驗(yàn)證碼示例 用戶在輸入框內(nèi)輸入驗(yàn)證碼后，要及時(shí)給出反饋提示（不要到提交時(shí)才給出提示） ，如下圖所示： 圖 422 驗(yàn)證碼錯(cuò)誤判斷4) 提交按鈕： 存在驗(yàn)證或提交按鈕時(shí)，只有所驗(yàn)證或提交的部分輸入完畢并且正確后，按鈕才能由置灰狀態(tài)變?yōu)榭捎脿顟B(tài)，如下圖所示：圖 423 注冊(cè)按鈕5) 成功告知 表單最終填寫(xiě)提交完成后，要給出“提交成功或注冊(cè)成功”的相關(guān)提示，明確告知用戶此操作正確完成；6) 協(xié)議28 / 78 單擊“我接受” 意味著：您同意并接受服務(wù)協(xié)議和隱私聲明。 【擴(kuò)展描述】應(yīng)用規(guī)范：1) 密碼強(qiáng)弱提示 當(dāng)用戶賬號(hào)的保密性相對(duì)較高時(shí)，可以應(yīng)用密碼的強(qiáng)弱提示來(lái)保證密碼的復(fù)雜度。如下圖所示：圖 424 密碼強(qiáng)弱 在輸入密碼時(shí)，旁邊顯示注釋文本：明確注明密碼強(qiáng)弱的規(guī)則和提示，如下圖所示：圖 425 密碼強(qiáng)弱提示 當(dāng)用戶輸入的內(nèi)容錯(cuò)誤或不完全正確時(shí)，要求提示的反饋信息必須提示明確，同時(shí)給出正確的解決方法，如下圖所示： 圖 426 密碼強(qiáng)弱提示對(duì)照表29 / 782) 注冊(cè)進(jìn)度提示 根據(jù)產(chǎn)品的特性，要求用戶填寫(xiě)的注冊(cè)表單較長(zhǎng)、步數(shù)較多時(shí)，需要給出注冊(cè)的進(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)。30 / 78 聯(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ā)貨地址?！灸Ｊ矫枋觥拷M成：各輸入控件，包括：“國(guó)家地區(qū)” 、 “省份” 、 “城市” 、 “聯(lián)系電話” 、 “傳真號(hào)碼” 、“手機(jī)號(hào)碼” 、 “聯(lián)系地址” 、 “郵政編碼”等（根據(jù)具體需要再增加） 。 圖 427 聯(lián)系方式應(yīng)用規(guī)范：? “國(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ū)” ，如下圖所示：31 / 78圖 428 其他地區(qū)? “聯(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)品的銷售人群不同自行選擇是否保留；如下圖所示：圖 429 正確示例圖32 / 78圖 430 錯(cuò)誤示例圖? 各字段分別與上面的“國(guó)家地區(qū)” 、 “省份” 、 “城市”連動(dòng)：“國(guó)家地區(qū)”和“省份” 、 “城市”選擇后，國(guó)家代碼和區(qū)號(hào)自動(dòng)顯示，如下圖所示：圖 431 聯(lián)系方式標(biāo)注? “聯(lián)系地址”：一個(gè)輸入框，等待用戶輸入文本；? “郵政編碼”：一個(gè)輸入框（6 個(gè)字符） ，等待用戶輸入文本；? 除“國(guó)家地區(qū)” 、 “省份”和“城市”是只能讓用戶選擇外，其他的輸入框均可手動(dòng)輸入和編輯，用戶可以根據(jù)自己的需要進(jìn)行修改?！緮U(kuò)展描述】組成：郵政編碼幫助 如下圖所示：33 / 78圖 432 郵政編碼應(yīng)用規(guī)范： ? 用戶手動(dòng)輸入郵政編碼時(shí)，系統(tǒng)根據(jù)“省份” 、 “城市”給出一些不同地區(qū)郵政編碼的關(guān)聯(lián)提示，供用戶參考，? 用戶選擇郵政編碼輸入框后面“查詢郵政編碼”鏈接（如下圖所示） ，可點(diǎn)擊打開(kāi)新窗口查看本市的郵政編碼。圖 433 查詢郵政編碼【注意事項(xiàng)】? 各輸入項(xiàng)的先后順序，根據(jù)各字段的邏輯順序和參照關(guān)系排列的同時(shí)，要綜合考慮用戶的輸入操作（盡量將數(shù)字輸入的放在一起，將漢字輸入的放在一起，以避免用戶在鍵盤上頻繁切換輸入位置） ；? 系統(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)（不清空） 。34 / 78 圖片裁切主要應(yīng)用于