產品設計交互規范(編輯修改稿)

　

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