5/10交互設(shè)計(jì)規(guī)范概述設(shè)計(jì)說明交互設(shè)計(jì)是很自由的事情，因此規(guī)范不會對細(xì)微之處作明確規(guī)定。該文檔為通用性質(zhì)，通用交互規(guī)范目的是保證整站的交互體驗(yàn)的一致性。并且保證一些體驗(yàn)較好的交互方式能在各個(gè)模塊中得以使用，從而保證產(chǎn)品設(shè)計(jì)的一致性，提升整體產(chǎn)品質(zhì)量。注：本交互規(guī)范基于55后臺制定，與前臺部分設(shè)計(jì)可參考。頁面信息規(guī)范針對頁面交互信息的標(biāo)準(zhǔn)，包括：頁面標(biāo)題、鏈接新窗口打開規(guī)范、圖片信息。信息交互規(guī)范交互流程中包含的信息交互方式，包括：預(yù)先提示信息、操作提示信息、結(jié)果信息提示。通用組件規(guī)范對于一些可在多頁面中使用的通用組件進(jìn)行規(guī)范，包括：按鈕、導(dǎo)航、輸入框、搜索、浮層、列表。讀者對象產(chǎn)品開發(fā)人員，產(chǎn)品交互人員，產(chǎn)品UI設(shè)計(jì)人員名詞解釋名詞解釋通用組件指的是在各頁面均有使用的功能，比如導(dǎo)航欄ALT圖片無法顯示的時(shí)候顯示替代文字TITLE指針指向圖片的時(shí)候顯示的文字BLANK超鏈接預(yù)先信息提示操作說明，比如某一輸入框后面顯示的輸入內(nèi)容太提示語。通用組件指在很多頁面出現(xiàn)的功能組件，比如按鈕，輸入框，導(dǎo)航條。浮層頁面中點(diǎn)擊操作之后在該頁面之上彈出的界面。該區(qū)域叫浮層。頁面信息規(guī)范頁面標(biāo)題規(guī)范用于規(guī)范整個(gè)產(chǎn)品中所有不同層級不同功能的頁面應(yīng)該使用的標(biāo)題。標(biāo)題需要加粗，不同層級的標(biāo)題均需要加粗，設(shè)計(jì)過程中可自定義字體大小。鏈接新窗口規(guī)范用于規(guī)范頁面鏈接是采用新窗口打開還是本窗口打開。本窗口打開查詢結(jié)果、上下翻頁、內(nèi)容保存等操作在本窗口打開。新窗口打開各類詳情頁面、商品預(yù)覽頁面（編輯）采用新窗口打開、頁面圖片信息規(guī)范用于規(guī)范頁面圖片信息顯示是否帶有alt、title值、BLANK鏈接。目前后臺圖片分為：按鈕圖片、內(nèi)容型圖片按鈕圖片Alt：交互使用的按鈕圖片（不帶文字）：如編輯、添加、警告等。圖片ALT必須為交互操作的名稱。Title：按鈕圖片不增加Title值內(nèi)容型圖片Alt：服務(wù)器中保存該圖片，在圖片無法顯示的時(shí)候可顯示替代文字各詳情頁面中該圖片預(yù)覽框中顯示替代文字各列表的圖片預(yù)覽框中不顯示替代文字。Title：鼠標(biāo)過去顯示的文字后臺各詳情頁面指針指向該圖片時(shí)顯示文字后臺各列表頁面指針指向該圖片時(shí)顯示文字BLANK鏈接后臺各詳情頁面點(diǎn)擊該圖片無效，不激活BLAN鏈接后臺各列表頁面點(diǎn)擊列表中的圖片則在新窗口打開商品詳情頁面。信息交互規(guī)范預(yù)先信息提示所有交互都應(yīng)該提供較多的預(yù)先信息提示讓用戶知道該怎么做，做的后果什么，可填寫什么。大體分為內(nèi)容提交類、謹(jǐn)慎類操作、差異化規(guī)則內(nèi)容提交類每個(gè)輸入項(xiàng)、條件選選項(xiàng)（包括時(shí)間選擇）均需要給出提示信息。該提示信息可放置在輸入框內(nèi)或者控件尾部（如密碼要多少多少位。搜索框提示用戶輸入什么內(nèi)容等。）謹(jǐn)慎類操作針對不可修改、重要操作選擇等操作屬于謹(jǐn)慎類操作，均需給出提示信息。如審核是否通過操作、退款申請操作、價(jià)格輸入等。差異化規(guī)則如果某一項(xiàng)操作與用戶操作習(xí)慣相悖需要給出提示信息，比如渠道想添加某個(gè)商品但是該商品的供應(yīng)商資料不完善沒通過審核，需要提給出提出和幫助鏈接。操作信息提示發(fā)生任何操作時(shí)都需要進(jìn)行信息提示，不管成功與失敗。比如操作提交，數(shù)據(jù)輸入。分為三大類：確認(rèn)提示、錯(cuò)誤提示、讀取提示確認(rèn)提示修改設(shè)置、刪除數(shù)據(jù)等操作時(shí)需要彈出提示框，用戶需要選擇后方可執(zhí)行。比如品控審核某商品點(diǎn)擊通過按鈕之后，彈出提示框品控人員需選擇是或否，方可完成操作。錯(cuò)誤提示當(dāng)用戶的操作不符合規(guī)則、輸入數(shù)據(jù)不符合規(guī)則需要給出操作提示。比如輸入數(shù)值不符系統(tǒng)規(guī)定，則進(jìn)行提示。錯(cuò)誤提示分為：即時(shí)提示、提交后提示即時(shí)提示需手動輸入/選擇的項(xiàng)目可以進(jìn)行即時(shí)提示，當(dāng)輸入焦點(diǎn)移除之后不管輸入框內(nèi)是否有內(nèi)容即可進(jìn)行判斷如果有誤即顯示提示，比如在添加商品過程中輸入商品價(jià)格，價(jià)格如果超過系統(tǒng)設(shè)定當(dāng)輸入焦點(diǎn)移除之后則進(jìn)行判斷并進(jìn)行錯(cuò)誤提示。注：上線時(shí)間不做判斷當(dāng)選擇完下線時(shí)間之后即可判斷如有錯(cuò)即可進(jìn)行提示，服務(wù)開始結(jié)束時(shí)間也可如此?？杉皶r(shí)判斷的項(xiàng)目包括：輸入框、日期選擇提交后提示對于未作任何輸入操作和選擇的項(xiàng)目不做及時(shí)判斷，只能當(dāng)提交表單之后才做判斷并進(jìn)行錯(cuò)誤提示。比如商品是否可退未必選，但是沒有系統(tǒng)默認(rèn)選項(xiàng)，操作人員未做選擇點(diǎn)擊了提交定稿按鈕，這時(shí)才會顯示是否可退的錯(cuò)誤提示信息。對于提交后判斷的項(xiàng)目包括：圖片是否上傳、單選/多選、下來菜單選擇。讀取提示涉及到大量信息讀取緩慢的時(shí)候應(yīng)該進(jìn)行提示。比如進(jìn)入后臺查看商品列表時(shí)，由于網(wǎng)絡(luò)、數(shù)據(jù)量大等原導(dǎo)致載入緩慢，應(yīng)該顯示讀取提示信息，已避免用戶過度重復(fù)點(diǎn)擊操作。結(jié)果信息提示當(dāng)成功完成某一操作之后需要顯示反饋的結(jié)果信息提示，比如查詢商品，未查詢到與條件匹配的商品則需要顯示信息提示。提示分為：保存結(jié)果提示、查詢結(jié)果提示、添加結(jié)果提示保存結(jié)果提示當(dāng)進(jìn)行商品添加/修改此類涉及到數(shù)據(jù)保存的操作，不管是否成功均需給出提示。查詢結(jié)果提示任何信息列表、查詢結(jié)果，當(dāng)對應(yīng)信息結(jié)果的時(shí)候需要給出有無結(jié)果狀態(tài)提示。不得使用空白信息。添加結(jié)果提示當(dāng)涉及到填寫評審未通過原因這類的內(nèi)容添加操作。保存之后可直接顯示結(jié)果頁面。通用組件規(guī)范導(dǎo)航后才操作頁面導(dǎo)航分為兩部分：導(dǎo)航條、軟文導(dǎo)航導(dǎo)航條：平臺標(biāo)題+各功能標(biāo)簽。（上下隸屬關(guān)系，平臺標(biāo)題字體大于功能標(biāo)簽字體）軟文導(dǎo)航：平臺標(biāo)題>功能標(biāo)簽（字體相同顏相同）激活標(biāo)簽與未激活標(biāo)簽顯示不同顏色指針指向未激活標(biāo)簽時(shí)標(biāo)簽字體顯示下劃線表示可激活按鈕按鈕分為兩大類，一類是各頁面中的功能操作按鈕，比如確定、取消按鈕；一類是數(shù)據(jù)表格下方的翻頁按鈕，功能操作按鈕各頁面操作按鈕需采用統(tǒng)一樣式，按鈕上的操作名稱采用統(tǒng)一字體、顏色。不可用按鈕需要致灰顯示翻頁按鈕翻頁按鈕可采用純文字鏈接，比如：首頁、上一頁、下一頁、尾頁。文字屬性必須統(tǒng)一。當(dāng)表格只有一頁時(shí)翻頁按鈕需致灰顯示。輸入框規(guī)范各頁面中的文本輸入框。同一頁面內(nèi)單行文本輸入框長寬尺寸必須統(tǒng)一，比如商品添加頁面中的商品原價(jià)、商品現(xiàn)價(jià)兩個(gè)輸入框的尺寸就必須要統(tǒng)一。多行文本輸入框長寬尺寸可根據(jù)允許最大輸入字符數(shù)來做決定。比如商品添加中的商品長標(biāo)題輸入框。所有頁面內(nèi)單行與多行文本輸入框均有邊框所有頁面內(nèi)輸入框中所輸入的字符屬性必須統(tǒng)一（字體，顏色，字號）搜索規(guī)范各平臺中的搜索設(shè)計(jì)所有平臺中的搜過功能均采用：名稱標(biāo)簽+條件輸入框/條件篩選+搜索按鈕的模式名稱標(biāo)簽需要規(guī)范，搜索與查詢不能同時(shí)出現(xiàn)，比如“訂單搜索”“商品查詢”就不符規(guī)范，需要統(tǒng)一為“訂單查詢”“商品查詢”按鈕需要規(guī)范，按鈕功能名稱統(tǒng)一為“查詢”或者“搜索”浮層用于規(guī)范各頁面內(nèi)的浮層設(shè)計(jì)，是否可以禁止