某電網(wǎng)公司桌面可視化設(shè)計(jì)規(guī)范培訓(xùn)教材

《桌面可視化設(shè)計(jì)規(guī)范》培訓(xùn)

交互部分

Interactiondesign目錄1登錄4導(dǎo)航3表格2表單5信息搜索6消息7界面內(nèi)容跳轉(zhuǎn)8鍵盤9首次體驗(yàn)系統(tǒng)登錄的作用可概括為以下三點(diǎn)：告知用戶將要登錄的系統(tǒng)名稱；對登錄人信息進(jìn)行驗(yàn)證；鏈接系統(tǒng)界面。1登錄1.1原則1.3規(guī)范1.2模式【簡單性原則】登錄界面的交互設(shè)計(jì)應(yīng)簡單，降低用戶認(rèn)知成本，帶來高效的用戶體驗(yàn)?！編椭栽瓌t】系統(tǒng)應(yīng)對用戶的操作進(jìn)行幫助提示，引導(dǎo)用戶正確操作?！景踩栽瓌t】遵照國家電網(wǎng)公司對系統(tǒng)（產(chǎn)品）安全性的要求，避免非用戶進(jìn)入系統(tǒng)或進(jìn)行口令猜測。1登錄1.1原則1.3規(guī)范1.2模式輸入登錄模式：1登錄1登錄1.1原則1.3規(guī)范1.2模式強(qiáng)制規(guī)范建議規(guī)范1）應(yīng)包含單位企業(yè)標(biāo)志、系統(tǒng)（產(chǎn)品）名稱、輸入框（“用戶名”、“密碼”）、登錄按鈕。2）應(yīng)將用戶名輸入框作為當(dāng)前界面默認(rèn)輸入焦點(diǎn)。3）幫助性信息或提示應(yīng)及時有效。4）應(yīng)在用戶輸入格式錯誤時，進(jìn)行錯誤提示。用戶名為固定格式時的輸入錯誤，失去焦點(diǎn)及時提示。用戶名為空時填寫密碼，提示用戶填寫“用戶名”。5）應(yīng)在未輸入密碼直接點(diǎn)擊登錄時，對密碼輸入框進(jìn)行提示。6）用戶名、密碼錯誤提示文字顏色為紅色，放置于用戶名輸入框下方與輸入框左對齊。1登錄1.1原則1.3規(guī)范1.2模式強(qiáng)制規(guī)范建議規(guī)范7）應(yīng)將“用戶名”和“密碼”標(biāo)簽的對齊方式設(shè)置為“非字形”對齊方式。8）應(yīng)將登錄界面背景圖與登錄框在視覺上區(qū)分層次。9）應(yīng)在登錄過程中，將“登錄”按鈕變?yōu)椤叭∠卑粹o。原因：首先，根據(jù)國網(wǎng)特性，取消按鈕的使用頻率較低；把取消和登錄做成雙按鈕，會增加用戶一次選擇判斷；單按鍵更符合用戶點(diǎn)擊移動軌跡。1登錄1.1原則1.3規(guī)范1.2模式強(qiáng)制規(guī)范建議規(guī)范10）應(yīng)使用戶名輸入框的長度容納系統(tǒng)中最長用戶名長度。11）應(yīng)將版權(quán)信息放置于底部。12）應(yīng)將“Enter”鍵作為默認(rèn)“登錄”快捷鍵。1登錄13）應(yīng)將“Tab”鍵作為輸入焦點(diǎn)自動換行快捷鍵。1.1原則1.3規(guī)范1.2模式強(qiáng)制規(guī)范建議規(guī)范1登錄1）建議當(dāng)用戶名輸入錯誤，系統(tǒng)（產(chǎn)品）進(jìn)行錯誤提示后，輸入焦點(diǎn)自動置入用戶名輸入框。2）建議“用戶名”、“密碼”輸入框增加自動清空功能。3）建議“用戶名”、“密碼”輸入框增加虛擬鍵盤功能。1.1原則1.3規(guī)范1.2模式強(qiáng)制規(guī)范建議規(guī)范目錄1登錄4導(dǎo)航3表格2表單5信息搜索6消息7界面內(nèi)容跳轉(zhuǎn)8鍵盤9首次體驗(yàn)2表單系統(tǒng)表單的作用可概括為以下兩點(diǎn)：完成信息的填寫錄入；提交或注冊信息；【對齊原則】將表單中信息按照業(yè)務(wù)和用戶需求進(jìn)行組織，保證界面工整，便于用戶掃視和填寫?！炯皶r反饋原則】表單的填寫過程中，針對用戶可能存在填寫問題或必要的填寫幫助，系統(tǒng)（產(chǎn)品）及時進(jìn)行提醒反饋?！緷u次呈現(xiàn)原則】表單信息布局應(yīng)根據(jù)重要性，有選擇隱藏，由重要元素引導(dǎo)出次要元素，便于用戶更快找到首要信息?！疽恢滦栽瓌t】系統(tǒng)（產(chǎn)品）內(nèi)表單若無特殊要求，所有的交互體驗(yàn)和布局樣式應(yīng)保持一致。2表單2.1原則2.3規(guī)范2.2模式2表單2）分組表單：1）單頁表單：3）分步表單：2.1原則2.3規(guī)范2.2模式2表單1）保持統(tǒng)一的對齊方式。當(dāng)焦點(diǎn)移入輸入?yún)^(qū)后，標(biāo)簽消失，看不到問題，可能會忘記要回答什么，不得不清掉輸入好的字，把“問題”還原出來。這種組合比較適合只有一兩個輸入框的簡短表單，而且人們對他很熟悉，不用費(fèi)力去記住標(biāo)簽提出的問題，比如：搜索框單頁表單分組表單分步表單強(qiáng)制規(guī)范建議規(guī)范2.1原則2.3規(guī)范2.2模式2表單結(jié)合國家電網(wǎng)公司常見表單場景和以上數(shù)據(jù)，標(biāo)簽右對齊即非字形對齊適用性最佳。1）保持統(tǒng)一的對齊方式。單頁表單分組表單分步表單強(qiáng)制規(guī)范建議規(guī)范2.1原則2.3規(guī)范2.2模式2表單在非字形對齊的前提下，提示信息可有三個可選位置：輸入框右側(cè)、下方和內(nèi)部。但是下方位置適用性最強(qiáng)。右側(cè)放置：僅適用于單列表單，針對性過強(qiáng)，因此排除了右側(cè)放置。內(nèi)部放置：輸入文本信息時將不再出現(xiàn)提示信息，且有限顯示信息，因此適用于幫助提示，不適用于反饋提示。下方放置：結(jié)合上面分析結(jié)果和用戶習(xí)慣，下方更適用于放置反饋提示。3）必填符號放置于標(biāo)簽左側(cè)。2）填寫幫助提示，放置于輸入框內(nèi)，文字精煉。4）錯誤提示，放置于輸入框下方。單頁表單分組表單分步表單強(qiáng)制規(guī)范建議規(guī)范2.1原則2.3規(guī)范2.2模式2表單5）應(yīng)自動檢測用戶輸入內(nèi)容與標(biāo)簽相關(guān)性。6）應(yīng)自動檢查組合項(xiàng)是否填寫完整。7）應(yīng)使用簡潔友好的反饋提示語言，不應(yīng)責(zé)備用戶，避免術(shù)語化。8）表單提交時，應(yīng)檢測必填項(xiàng)是否填寫完整。9）表單提交后檢測到錯誤，當(dāng)用戶返回修改時，應(yīng)保留原有輸入項(xiàng)內(nèi)容。單頁表單分組表單分步表單強(qiáng)制規(guī)范建議規(guī)范2.1原則2.3規(guī)范2.2模式2表單1）建議使用下拉列表或選擇框，減少用戶輸入。2）建議記憶用戶常用輸入項(xiàng)和系統(tǒng)（產(chǎn)品）推薦輸入項(xiàng)功能。3）建議將特殊類型選項(xiàng)放置于下拉列表底部。單頁表單分組表單分步表單強(qiáng)制規(guī)范建議規(guī)范2.1原則2.3規(guī)范2.2模式2表單固定位置：采用固定位置方式，選擇全部狀態(tài)，需要將鼠標(biāo)移動到下方，選擇后，鼠標(biāo)再返回下拉框。自動位置：采用自動位置方式打開時，當(dāng)前選擇項(xiàng)與輸入框?qū)R，關(guān)聯(lián)性較強(qiáng)，且鼠標(biāo)選擇其他項(xiàng)時，移動距離較短。4）建議展開下拉列表時，將選中項(xiàng)與輸入框?qū)R。5）針對復(fù)雜輸入項(xiàng)，可提供幫助標(biāo)識。單頁表單分組表單分步表單強(qiáng)制規(guī)范建議規(guī)范2.1原則2.3規(guī)范2.2模式2表單6）表單未填完或未保存離開頁面時，可提示用戶離開操作確認(rèn)。7）建議多種輸入模式，在傳統(tǒng)輸入基礎(chǔ)上，增加圖形體驗(yàn)。8）建議根據(jù)用戶研究的結(jié)果，通過位置、形態(tài)和大小來界定同行中按鈕的排列順序。單頁表單分組表單分步表單強(qiáng)制規(guī)范建議規(guī)范2.1原則2.3規(guī)范2.2模式2表單2）應(yīng)將分組標(biāo)簽文本統(tǒng)一放置于各組填寫區(qū)域左上角。業(yè)務(wù)相關(guān)性分組：優(yōu)先根據(jù)內(nèi)容相關(guān)性進(jìn)行分組?？丶嗨菩苑纸M：在無明顯內(nèi)容相關(guān)性時，可根據(jù)控件形態(tài)相關(guān)性分組。1）應(yīng)進(jìn)行相關(guān)性分組。單頁表單分組表單分步表單強(qiáng)制規(guī)范建議規(guī)范2.1原則2.3規(guī)范2.2模式2表單2）表單內(nèi)容分組較多時，建議設(shè)置收起展開功能。1）默認(rèn)信息項(xiàng)可由系統(tǒng)（產(chǎn)品）自動填寫，減少用戶輸入。系統(tǒng)信息項(xiàng)，盡量由系統(tǒng)自動匹配填寫。歷史填寫項(xiàng)，用戶二次填寫時，自動填寫或者輸入時展開下拉項(xiàng)關(guān)聯(lián)。盡可能使用下拉列表或選擇框來代替輸入框。單頁表單分組表單分步表單強(qiáng)制規(guī)范建議規(guī)范2.1原則2.3規(guī)范2.2模式2表單2）應(yīng)在第二組頁面中出現(xiàn)“上一步”按鈕。返回查看上一組內(nèi)容，同時保留當(dāng)前填寫內(nèi)容。1）應(yīng)在用戶填寫完成當(dāng)前信息內(nèi)容時，方可點(diǎn)擊“下一步”按鈕跳轉(zhuǎn)到下一頁面，并保留當(dāng)前頁所填寫內(nèi)容。3）應(yīng)在分步表單提交完成后，提供提交完成反饋提示。單頁表單分組表單分步表單強(qiáng)制規(guī)范建議規(guī)范2.1原則2.3規(guī)范2.2模式2表單1）當(dāng)填寫的內(nèi)容步驟較多時，為避免用戶產(chǎn)生厭煩情緒，建議圖形化顯示分步填寫，在填寫區(qū)域上方提示當(dāng)前填寫位置和填寫流程。單頁表單分組表單分步表單強(qiáng)制規(guī)范建議規(guī)范2.1原則2.3規(guī)范2.2模式目錄1登錄4導(dǎo)航3表格2表單5信息搜索6消息7界面內(nèi)容跳轉(zhuǎn)8鍵盤9首次體驗(yàn)3表格表格的作用可以概括為以下三點(diǎn)：對信息結(jié)果的展示；對信息進(jìn)行排序或其他功能操作；鏈接信息詳情。【對齊原則】表格中的各類元素應(yīng)按照業(yè)務(wù)及用戶需求進(jìn)行組織，保證界面工整，信息呈現(xiàn)有序，便于用戶掃視?！厩逦曈X流原則】視覺流指用戶注視區(qū)域的順序。清晰的視覺流順序應(yīng)根據(jù)任務(wù)邏輯和用戶的瀏覽習(xí)慣來設(shè)計(jì)。保證其合理、

順暢、自然。3表格3.1原則3.3規(guī)范3.2模式【相近性原則】表格中信息應(yīng)根據(jù)相近性原則進(jìn)行布局設(shè)計(jì)，即將相關(guān)元素相近放置，引導(dǎo)用戶將其歸為一組。【相似性原則】表格中信息應(yīng)根據(jù)相似性原則進(jìn)行布局設(shè)計(jì)和信息分類，即將相似元素相近放置，引導(dǎo)用戶將其歸為一組。3表格3.1原則3.3規(guī)范3.2模式1）展示類表格：2）表頭操作類表格：3表格3.1原則3.3規(guī)范3.2模式3）操作類表格：3表格3.1原則3.3規(guī)范3.2模式3表格3.1原則3.3規(guī)范3.2模式展示類表格表頭操作類表格操作類表格強(qiáng)制規(guī)范建議規(guī)范1）應(yīng)在表格行數(shù)較多時，使用“斑馬線”（隔行變色），顏色對比不易過強(qiáng)且弱于表頭顏色，特殊展示情景例外，如：告警類表格。2）應(yīng)設(shè)置表格中最多字?jǐn)?shù)顯示限制。文本顯示未完全時，末尾文字應(yīng)加“…”，且鼠標(biāo)懸浮時提示完整文本。若必要性信息無法完全展示，可折行顯示。3表格表頭居中，列表左右對齊

表頭和列表對齊方式不統(tǒng)一時，視覺體驗(yàn)較差，因此建議排除。左右對齊更利于信息對比，居中對齊適用范圍更好，因此，默認(rèn)使用居中對齊，對關(guān)鍵類對比信息采用左右對齊方式。統(tǒng)一左右對齊居中對齊1）保持統(tǒng)一的對齊方式。2）表格采用左右對齊時，建議文字與表格邊緣保持恰當(dāng)間距。3.1原則3.3規(guī)范3.2模式展示類表格表頭操作類表格操作類表格強(qiáng)制規(guī)范建議規(guī)范3表格3.1原則3.3規(guī)范3.2模式展示類表格表頭操作類表格操作類表格強(qiáng)制規(guī)范建議規(guī)范1）應(yīng)提供鼠標(biāo)懸浮和鼠標(biāo)點(diǎn)擊狀態(tài)，顏色區(qū)別于隔行變色。2）表格默認(rèn)排序應(yīng)保持統(tǒng)一。3）應(yīng)提供信息排序功能。上箭頭表示為升序，下箭頭為降序。4）應(yīng)保證點(diǎn)擊排序箭頭和點(diǎn)擊表頭標(biāo)簽都可改變當(dāng)前排序。3表格1）關(guān)聯(lián)信息在表格列中建議相近放置，便于用戶關(guān)聯(lián)閱讀。2）對于進(jìn)行對比分析的數(shù)據(jù)，建議顯示差值或上下箭頭。3）表頭數(shù)量即表格列數(shù)建議為5-9列。3.1原則3.3規(guī)范3.2模式展示類表格表頭操作類表格操作類表格強(qiáng)制規(guī)范建議規(guī)范3表格3.1原則3.3規(guī)范3.2模式展示類表格表頭操作類表格操作類表格強(qiáng)制規(guī)范建議規(guī)范將表格中操作按鍵集中放置一處，便于用戶集中快速操作，根據(jù)菲茨定律中兩端更易點(diǎn)擊原理，排除中間放置

：左側(cè)放置：將按鈕放置于左側(cè)，多用于選擇排序等。右側(cè)放置：將操作按鈕放置在右側(cè)，更符合用戶從左到右的信息瀏覽習(xí)慣，適用性更強(qiáng)。1）應(yīng)將操作按鈕在表格內(nèi)放置于一處，便于用戶集中操作。3表格2）應(yīng)在批量操作時提供全選功能，全選應(yīng)包含“全選當(dāng)前頁”“選擇全部”和“取消全選”選項(xiàng)。3）應(yīng)為表格中的互斥功能，提供一個對應(yīng)按鈕，減少用戶判定。4）應(yīng)避免使用雙擊操作。5）應(yīng)對表格中不可用功能按鈕置灰，并在鼠標(biāo)懸浮時提供不可用提示。3.1原則3.3規(guī)范3.2模式展示類表格表頭操作類表格操作類表格強(qiáng)制規(guī)范建議規(guī)范3表格1）表格中操作功能，優(yōu)先使用圖標(biāo)按鈕，且鼠標(biāo)懸浮時，給予文字提示。專業(yè)性術(shù)語或非

常見功能，建議使用圖標(biāo)加文字同時顯示。3.1原則3.3規(guī)范3.2模式展示類表格表頭操作類表格操作類表格強(qiáng)制規(guī)范建議規(guī)范目錄1登錄4導(dǎo)航3表格2表單5信息搜索6消息7界面內(nèi)容跳轉(zhuǎn)8鍵盤9首次體驗(yàn)4導(dǎo)航系統(tǒng)導(dǎo)航的作用詳細(xì)可以概括為以下4點(diǎn)：引導(dǎo)用戶完成系統(tǒng)各內(nèi)容頁面間的跳轉(zhuǎn)。理清系統(tǒng)各內(nèi)容與鏈接間的聯(lián)系。定位用戶在網(wǎng)站中所處的位置。展現(xiàn)品牌形象。面包屑幫助定位展現(xiàn)品牌形象提供頁面跳轉(zhuǎn)4.1導(dǎo)航-全局導(dǎo)航【減輕認(rèn)知負(fù)擔(dān)原則】導(dǎo)航層次分類和命名應(yīng)清晰明了，符合用戶心理感知模型，以減少用戶的學(xué)習(xí)成本，便于用戶的使用。【一致性原則】同類系統(tǒng)（產(chǎn)品）間導(dǎo)航設(shè)計(jì)應(yīng)遵循一致性原則，保持一致的交互體驗(yàn)和布局樣式。4.1.1原則4.1.3規(guī)范4.1.2模式

全局導(dǎo)航又稱主導(dǎo)航，提供覆蓋整個系統(tǒng)（產(chǎn)品）的通路，主要包括系統(tǒng)（產(chǎn)品）標(biāo)志、用戶信息和基礎(chǔ)導(dǎo)航欄目三個基本要素。在系統(tǒng)（產(chǎn)品）界面中保持一致的操作體驗(yàn)，協(xié)助用戶完成訪問。圖：主導(dǎo)航圖：面包屑導(dǎo)航垂直導(dǎo)航欄：水平導(dǎo)航欄：樹形導(dǎo)航欄：4.1導(dǎo)航-全局導(dǎo)航4.1.1原則4.1.3規(guī)范4.1.2模式工作臺模式>普通工作臺模式：工作臺模式>隱藏式工作臺模式：4.1導(dǎo)航-全局導(dǎo)航4.1.1原則4.1.3規(guī)范4.1.2模式水平導(dǎo)航欄垂直導(dǎo)航欄樹形導(dǎo)航欄工作臺模式強(qiáng)制規(guī)范建議規(guī)范1）應(yīng)在水平導(dǎo)航欄中體現(xiàn)：系統(tǒng)（產(chǎn)品）標(biāo)志、用戶信息、基礎(chǔ)導(dǎo)航欄目三個要素。2）應(yīng)在點(diǎn)擊“系統(tǒng)（產(chǎn)品）標(biāo)志”后，返回系統(tǒng)（產(chǎn)品）首頁。3）應(yīng)在水平導(dǎo)航上突出從屬關(guān)系，通過視覺元素加以表達(dá)。4）應(yīng)確保全局導(dǎo)航的水平導(dǎo)航欄層級不超過三級。當(dāng)導(dǎo)航欄層級為兩級時：當(dāng)導(dǎo)航欄層級為三級時：為什么？4.1導(dǎo)航-全局導(dǎo)航4.1.1原則4.1.3規(guī)范4.1.2模式為什么導(dǎo)航不宜超過三級？為什么三級使用全展開的形式？

信息結(jié)構(gòu)過深不易于理解。

全展開一目了然，無需猜測三級標(biāo)所屬的二級。水平導(dǎo)航欄垂直導(dǎo)航欄樹形導(dǎo)航欄工作臺模式強(qiáng)制規(guī)范建議規(guī)范4.1導(dǎo)航-全局導(dǎo)航4.1.1原則4.1.3規(guī)范4.1.2模式5）導(dǎo)航欄目應(yīng)包含“默認(rèn)狀態(tài)”、“懸浮狀態(tài)”、“點(diǎn)擊狀態(tài)”。水平導(dǎo)航欄垂直導(dǎo)航欄樹形導(dǎo)航欄工作臺模式強(qiáng)制規(guī)范建議規(guī)范4.1導(dǎo)航-全局導(dǎo)航4.1.1原則4.1.3規(guī)范4.1.2模式1）導(dǎo)航欄目字號，建議下一級標(biāo)題不大于上一級標(biāo)題。2）導(dǎo)航欄目標(biāo)簽避免出現(xiàn)口語化、術(shù)語和縮寫，標(biāo)簽長度建議16字符以內(nèi)為宜。3）系統(tǒng)（產(chǎn)品）層級超過三級時，建議提供導(dǎo)航信息搜索。4）建議導(dǎo)航欄目出現(xiàn)在系統(tǒng)（產(chǎn)品）每個界面，給予用戶相同的操作體驗(yàn)。水平導(dǎo)航欄垂直導(dǎo)航欄樹形導(dǎo)航欄工作臺模式強(qiáng)制規(guī)范建議規(guī)范4.1導(dǎo)航-全局導(dǎo)航4.1.1原則4.1.3規(guī)范4.1.2模式水平導(dǎo)航欄垂直導(dǎo)航欄樹形導(dǎo)航欄工作臺模式強(qiáng)制規(guī)范建議規(guī)范1）、2）、3）、5）同水平導(dǎo)航欄模式。4）全局導(dǎo)航的垂直導(dǎo)航欄層級應(yīng)不超過三級。當(dāng)導(dǎo)航欄層級為兩級時：當(dāng)導(dǎo)航欄層級為三級時：4.1導(dǎo)航-全局導(dǎo)航4.1.1原則4.1.3規(guī)范4.1.2模式1）、2）、3）、5）同水平導(dǎo)航欄模式。4）當(dāng)前屏幕內(nèi)顯示不完全時，建議使用導(dǎo)航欄內(nèi)滾動條。水平導(dǎo)航欄垂直導(dǎo)航欄樹形導(dǎo)航欄工作臺模式強(qiáng)制規(guī)范建議規(guī)范4.1導(dǎo)航-全局導(dǎo)航4.1.1原則4.1.3規(guī)范4.1.2模式水平導(dǎo)航欄垂直導(dǎo)航欄樹形導(dǎo)航欄工作臺模式強(qiáng)制規(guī)范建議規(guī)范1）、2）同水平導(dǎo)航欄模式。3）應(yīng)在樹形導(dǎo)航上突出其層級關(guān)系，使用加/減號或者箭頭來表示展開和收起下級節(jié)點(diǎn)。4.1導(dǎo)航-全局導(dǎo)航4.1.1原則4.1.3規(guī)范4.1.2模式1）建議默認(rèn)展開第一個標(biāo)題項(xiàng)。2）當(dāng)導(dǎo)航內(nèi)標(biāo)題數(shù)量過多，不能完全顯示時，建議使用導(dǎo)航欄內(nèi)滾動條。3）內(nèi)容同前。默認(rèn)展開內(nèi)部滾動水平導(dǎo)航欄垂直導(dǎo)航欄樹形導(dǎo)航欄工作臺模式強(qiáng)制規(guī)范建議規(guī)范4.1導(dǎo)航-全局導(dǎo)航4.1.1原則4.1.3規(guī)范4.1.2模式水平導(dǎo)航欄垂直導(dǎo)航欄樹形導(dǎo)航欄工作臺模式強(qiáng)制規(guī)范建議規(guī)范1）、2）、3）內(nèi)容同前。4）隱藏式工作臺模式下，可隱藏展開工作臺。強(qiáng)制規(guī)范：建議規(guī)范：1）工作臺模式下若使用圖標(biāo)，應(yīng)將文字放置于圖標(biāo)下方，同圖標(biāo)居中對齊。4.1導(dǎo)航-全局導(dǎo)航4.1.1原則4.1.3規(guī)范4.1.2模式【減輕認(rèn)知負(fù)擔(dān)原則】導(dǎo)航層次分類和命名應(yīng)清晰明了，符合用戶預(yù)期心理，減少用戶學(xué)習(xí)成本，便于用戶的使用。局部導(dǎo)航是指在全局導(dǎo)航體系下，某個具體欄目內(nèi)的導(dǎo)航。局部導(dǎo)航用于系統(tǒng)（產(chǎn)品）某個功能域內(nèi)的導(dǎo)航設(shè)計(jì)，可以將全局導(dǎo)航過深的層級拆分到一個欄目內(nèi)，在局部范圍內(nèi)形成快捷的信息導(dǎo)航。4.2導(dǎo)航–局部導(dǎo)航4.2.1原則4.2.3規(guī)范4.2.2模式水平導(dǎo)航欄局部導(dǎo)航

>“水平排列”局部導(dǎo)航：水平導(dǎo)航欄局部導(dǎo)航>“倒L型”局部導(dǎo)航：4.2導(dǎo)航–局部導(dǎo)航4.2.1原則4.2.3規(guī)范4.2.2模式垂直導(dǎo)航欄局部導(dǎo)航

>“垂直排列”局部導(dǎo)航：垂直導(dǎo)航欄局部導(dǎo)航>“廠字型”局部導(dǎo)航：4.2導(dǎo)航–局部導(dǎo)航4.2.1原則4.2.3規(guī)范4.2.2模式樹形導(dǎo)航欄局部導(dǎo)航：4.2導(dǎo)航–局部導(dǎo)航4.2.1原則4.2.3規(guī)范4.2.2模式水平導(dǎo)航欄下垂直導(dǎo)航欄下樹形導(dǎo)航欄下強(qiáng)制規(guī)范建議規(guī)范1）應(yīng)在局部導(dǎo)航中表現(xiàn)出與水平導(dǎo)航欄的層級從屬關(guān)系。2）“倒L型”局部導(dǎo)航欄，提供展開和收起功能3）使用定位面包屑導(dǎo)航。4）確保統(tǒng)一性（同前）。4.2導(dǎo)航–局部導(dǎo)航4.2.1原則4.2.3規(guī)范4.2.2模式1）使用“倒L型”局部導(dǎo)航顯示五級及以上標(biāo)題時，建議使用樹狀結(jié)構(gòu)顯示。2）局部導(dǎo)航的層級深度要合理，建議不超過三級。3）當(dāng)“倒L型”局部導(dǎo)航內(nèi)標(biāo)題數(shù)量過多，建議使用導(dǎo)航欄內(nèi)滾動條。4）字號建議下一級標(biāo)題不大于上一級標(biāo)題。5）避免出現(xiàn)口語化、術(shù)語和縮寫，長度控制在16字符以內(nèi)。水平導(dǎo)航欄下垂直導(dǎo)航欄下樹形導(dǎo)航欄下強(qiáng)制規(guī)范建議規(guī)范4.2導(dǎo)航–局部導(dǎo)航4.2.1原則4.2.3規(guī)范4.2.2模式水平導(dǎo)航欄下垂直導(dǎo)航欄下樹形導(dǎo)航欄下強(qiáng)制規(guī)范建議規(guī)范1）、3）、4）內(nèi)容同前。2）

“垂直排列”局部導(dǎo)航欄中提供展開和收起功能。展開和收起功能。4.2導(dǎo)航–局部導(dǎo)航4.2.1原則4.2.3規(guī)范4.2.2模式1）“垂直排列”局部導(dǎo)航顯示五級及以上標(biāo)題時，建議使用樹狀結(jié)構(gòu)顯示。2）—5）內(nèi)容同前。6）“廠字型”局部導(dǎo)航標(biāo)題居中?！按怪迸帕小本植繉?dǎo)航同級標(biāo)題左對齊。水平導(dǎo)航欄下垂直導(dǎo)航欄下樹形導(dǎo)航欄下強(qiáng)制規(guī)范建議規(guī)范4.2導(dǎo)航–局部導(dǎo)航4.2.1原則4.2.3規(guī)范4.2.2模式該模式下遵循“樹形導(dǎo)航欄模式”下所有規(guī)范。水平導(dǎo)航欄下垂直導(dǎo)航欄下樹形導(dǎo)航欄下4.2導(dǎo)航–局部導(dǎo)航4.2.1原則4.2.3規(guī)范4.2.2模式4.3導(dǎo)航–輔助導(dǎo)航【快捷性原則】輔助導(dǎo)航能夠使用戶快速準(zhǔn)確的進(jìn)入目標(biāo)界面。【輔助性原則】輔助導(dǎo)航作為全局導(dǎo)航與局部導(dǎo)航的補(bǔ)充，是對系統(tǒng)（產(chǎn)品）整體層級結(jié)構(gòu)的有效補(bǔ)充。輔助導(dǎo)航是一種用來輔助、補(bǔ)充全局導(dǎo)航和局部導(dǎo)航，為相關(guān)內(nèi)容提供快捷跳轉(zhuǎn)方式的導(dǎo)航形式。4.3.1原則4.3.3規(guī)范4.3.2模式站點(diǎn)地圖導(dǎo)航模式：面包屑導(dǎo)航模式：分頁導(dǎo)航模式：定位面包屑導(dǎo)航路徑面包屑導(dǎo)航4.3導(dǎo)航–輔助導(dǎo)航4.3.1原則4.3.3規(guī)范4.3.2模式頁內(nèi)導(dǎo)航模式：選項(xiàng)卡Tab模式：頁腳導(dǎo)航模式：4.3導(dǎo)航–輔助導(dǎo)航4.3.1原則4.3.3規(guī)范4.3.2模式面包屑導(dǎo)航站點(diǎn)地圖分頁導(dǎo)航選項(xiàng)卡導(dǎo)航頁內(nèi)導(dǎo)航頁腳導(dǎo)航定位面包屑路徑面包屑強(qiáng)制規(guī)范：1）位于正文頂部，告知當(dāng)前層級。2）區(qū)分當(dāng)前與上級路徑。3）顯示弱于主導(dǎo)航。4）使用方向性符號分隔。5）依次顯示層級路徑。定位面包屑路線面包屑1）位于正文頂部，告知訪問路徑。2）—4）同上。強(qiáng)制規(guī)范：建議規(guī)范：用顏色突顯當(dāng)前頁面用字號和加粗突顯當(dāng)前頁面1）路徑個數(shù)控制在7個以內(nèi)。4.3導(dǎo)航–輔助導(dǎo)航4.3.1原則4.3.3規(guī)范4.3.2模式面包屑導(dǎo)航站點(diǎn)地圖分頁導(dǎo)航選項(xiàng)卡導(dǎo)航頁內(nèi)導(dǎo)航頁腳導(dǎo)航強(qiáng)制規(guī)范建議規(guī)范強(qiáng)制規(guī)范：1）文字鏈接正確有效。2）使用精煉準(zhǔn)確的關(guān)鍵詞短語。3）直觀羅列欄目，不隱藏。4）明確區(qū)分層級關(guān)系。5）及時更新。6）站點(diǎn)地圖入口顯而易見，位于界面頭部或頁面底部。建議規(guī)范：1）建議只展示系統(tǒng)（產(chǎn)品）結(jié)構(gòu)中的二到三級，提供主要鏈接和頁面。4.3導(dǎo)航–輔助導(dǎo)航4.3.1原則4.3.3規(guī)范4.3.2模式面包屑導(dǎo)航站點(diǎn)地圖分頁導(dǎo)航選項(xiàng)卡導(dǎo)航頁內(nèi)導(dǎo)航頁腳導(dǎo)航強(qiáng)制規(guī)范建議規(guī)范1）應(yīng)包含“上一頁”、“下一頁”和頁碼。2）應(yīng)默認(rèn)顯示第一頁，“上一頁”不可點(diǎn)擊，最后一頁時，“下一頁”不可點(diǎn)擊。3）應(yīng)合理設(shè)置頁碼、按鍵尺寸、間距。4）應(yīng)使可點(diǎn)擊頁碼和當(dāng)前頁碼有所區(qū)分。5）應(yīng)在頁數(shù)過多時，提供直接跳轉(zhuǎn)功能。4.3導(dǎo)航–輔助導(dǎo)航4.3.1原則4.3.3規(guī)范4.3.2模式1）采用“上一頁”、“下一頁”文字+方向性箭頭的形式，也可采用簡化形式。2）根據(jù)業(yè)務(wù)，展示每頁顯示的條數(shù)、總條數(shù)。3）居中位于下方。4）空間有限，采用下拉翻頁。面包屑導(dǎo)航站點(diǎn)地圖分頁導(dǎo)航選項(xiàng)卡導(dǎo)航頁內(nèi)導(dǎo)航頁腳導(dǎo)航強(qiáng)制規(guī)范建議規(guī)范4.3導(dǎo)航–輔助導(dǎo)航4.3.1原則4.3.3規(guī)范4.3.2模式面包屑導(dǎo)航站點(diǎn)地圖分頁導(dǎo)航選項(xiàng)卡導(dǎo)航頁內(nèi)導(dǎo)航頁腳導(dǎo)航強(qiáng)制規(guī)范建議規(guī)范1）應(yīng)將導(dǎo)航標(biāo)簽排布在同一行中，字?jǐn)?shù)應(yīng)盡量精簡，如過多應(yīng)使用“….”表示隱藏，懸浮時顯示完整。2）應(yīng)使標(biāo)簽包含：激活狀態(tài)、懸浮狀態(tài)和未激活狀態(tài)。3）應(yīng)將當(dāng)前標(biāo)簽和其內(nèi)容區(qū)體現(xiàn)為一個連續(xù)的整體。4.3導(dǎo)航–輔助導(dǎo)航4.3.1原則4.3.3規(guī)范4.3.2模式1）不要將橫向標(biāo)簽頁和縱向標(biāo)簽頁同時嵌套使用。2）標(biāo)簽個數(shù)控制在2—7個之間。3）Tab標(biāo)簽之間的切換實(shí)時響應(yīng)。4）小面積區(qū)域可使用鼠標(biāo)懸浮來選中標(biāo)簽內(nèi)容。錯誤示例。橫向標(biāo)簽縱向標(biāo)簽不宜嵌套使用。面包屑導(dǎo)航站點(diǎn)地圖分頁導(dǎo)航選項(xiàng)卡導(dǎo)航頁內(nèi)導(dǎo)航頁腳導(dǎo)航強(qiáng)制規(guī)范建議規(guī)范4.3導(dǎo)航–輔助導(dǎo)航4.3.1原則4.3.3規(guī)范4.3.2模式1）應(yīng)與主導(dǎo)航相區(qū)分，位置接近主體內(nèi)容。2）應(yīng)將信息內(nèi)容劃分明確，點(diǎn)擊錨點(diǎn)標(biāo)題，可以跳轉(zhuǎn)至相應(yīng)的內(nèi)容處。3）應(yīng)標(biāo)示當(dāng)前的位置，當(dāng)前位置不可點(diǎn)擊，其他標(biāo)題可點(diǎn)擊，包含懸浮、點(diǎn)擊狀態(tài)。4）頁面內(nèi)不同內(nèi)容間的跳轉(zhuǎn)不應(yīng)再刷新加載。強(qiáng)制規(guī)范：4.3.1原則4.3.3規(guī)范4.3.2模式面包屑導(dǎo)航站點(diǎn)地圖分頁導(dǎo)航選項(xiàng)卡導(dǎo)航頁內(nèi)導(dǎo)航頁腳導(dǎo)航模塊間跳轉(zhuǎn)回到頂部4.3導(dǎo)航–輔助導(dǎo)航強(qiáng)制規(guī)范：1）應(yīng)在超過三個屏幕時，使用“回到頂部”按鍵。滾動至第二屏?xí)r出現(xiàn)，置于屏幕的右下方。2）應(yīng)有“默認(rèn)”、“鼠標(biāo)懸浮”兩種狀態(tài)。建議規(guī)范：1）具有向上滾動至頂部的過渡動效。2）配以“回到頂部”、“返回頂部”的文字說明。4.3.1原則4.3.3規(guī)范4.3.2模式面包屑導(dǎo)航站點(diǎn)地圖分頁導(dǎo)航選項(xiàng)卡導(dǎo)航頁內(nèi)導(dǎo)航頁腳導(dǎo)航模塊間跳轉(zhuǎn)回到頂部4.3導(dǎo)航–輔助導(dǎo)航強(qiáng)制規(guī)范：1）應(yīng)位于頁面底部。2）應(yīng)對不同內(nèi)容進(jìn)行有效劃分，不可分類的內(nèi)容使用“丨”劃分，可分類的內(nèi)容使用區(qū)域模塊化劃分。3）應(yīng)采用文字鏈接的形式，可以配置圖標(biāo)。4.3.1原則4.3.3規(guī)范4.3.2模式面包屑導(dǎo)航站點(diǎn)地圖分頁導(dǎo)航選項(xiàng)卡導(dǎo)航頁內(nèi)導(dǎo)航頁腳導(dǎo)航強(qiáng)制規(guī)范建議規(guī)范4.3導(dǎo)航–輔助導(dǎo)航4.4導(dǎo)航-上下文導(dǎo)航【相關(guān)性原則】上下文導(dǎo)航與信息內(nèi)容應(yīng)具有很強(qiáng)的關(guān)聯(lián)性?！颈憬菪栽瓌t】上下文導(dǎo)航可使用戶快速瀏覽相關(guān)內(nèi)容信息。4.4.1原則4.4.3規(guī)范4.4.2模式上下文導(dǎo)航是一種非結(jié)構(gòu)化導(dǎo)航方式。一般置于信息內(nèi)容中，為信息內(nèi)容提供關(guān)聯(lián)性鏈接，指向新的內(nèi)容區(qū)域、其他頁面或者是一個新的系統(tǒng)產(chǎn)品。圖：相關(guān)性原則圖：便捷性原則相關(guān)鏈接模式：嵌入式鏈接模式：4.4.1原則4.4.3規(guī)范4.4.2模式4.4導(dǎo)航-上下文導(dǎo)航1）應(yīng)使用文字鏈接，置于內(nèi)容信息中。2）應(yīng)與非鏈接文字進(jìn)行區(qū)分。強(qiáng)制規(guī)范：嵌入式鏈接相關(guān)鏈接1）應(yīng)使用文字鏈接，置于當(dāng)前內(nèi)容附近。強(qiáng)制規(guī)范：2）應(yīng)包含標(biāo)題和列表，可點(diǎn)擊的文字與不可點(diǎn)擊文字進(jìn)行區(qū)分。3）應(yīng)采用垂直列表的形式。4.4.1原則4.4.3規(guī)范4.4.2模式嵌入式鏈接相關(guān)鏈接4.4導(dǎo)航-上下文導(dǎo)航目錄1登錄4導(dǎo)航3表格2表單5信息搜索6消息7界面內(nèi)容跳轉(zhuǎn)8鍵盤9首次體驗(yàn)【減輕記憶負(fù)擔(dān)原則】系統(tǒng)（產(chǎn)品）的關(guān)鍵字搜索功能應(yīng)根據(jù)已輸入的關(guān)鍵字，提供智能匹配功能，減少輸入并提高用戶工作效率。【即時反饋原則】用戶進(jìn)行操作后系統(tǒng)（產(chǎn)品）即時進(jìn)行響應(yīng)反饋，便于用戶清楚操作是否有效。信息搜索是從信息集合中找出所需要的信息的過程?！緷u次呈現(xiàn)原則】當(dāng)系統(tǒng)（產(chǎn)品）中信息搜索項(xiàng)過多時，可按照信息重要性有選擇的依次顯示。圖：減少記憶負(fù)擔(dān)原則圖：漸次呈現(xiàn)原則5.1原則5.3規(guī)范5.2模式5

信息搜索條件篩選模式：關(guān)鍵字搜索模式：條件查詢模式：5.1原則5.3規(guī)范5.2模式5

信息搜索關(guān)鍵字搜索模式條件篩選模式1）應(yīng)在全局關(guān)鍵字搜索中顯示“輸入框”、“提示文字”、“搜索按鍵”這三個信息元素。2）全局關(guān)鍵字搜索模式時，應(yīng)將搜索按鈕統(tǒng)一放置于搜索框右側(cè)。5.1原則5.3規(guī)范5.2模式5

信息搜索強(qiáng)制規(guī)范建議規(guī)范條件查詢模式3）應(yīng)在默認(rèn)搜索框內(nèi)應(yīng)有提示文字，提示用戶輸入的內(nèi)容或格式。4）應(yīng)在搜索無結(jié)果時，給予用戶反饋。關(guān)鍵字搜索模式條件篩選模式5.1原則5.3規(guī)范5.2模式5

信息搜索強(qiáng)制規(guī)范建議規(guī)范條件查詢模式5）應(yīng)確保在局部關(guān)鍵字搜索模式下，樣式及功能簡易。6）應(yīng)在搜索過程中出現(xiàn)加載提示。7）應(yīng)將“Enter”鍵作為搜索快捷鍵。8）使用關(guān)鍵字搜索時，首次搜索中輸入框?yàn)榭?，?yīng)給予用戶提示;已搜索后，清空輸入框再點(diǎn)擊搜索時界面內(nèi)容刷新展示全部內(nèi)容。關(guān)鍵字搜索模式條件篩選模式5.1原則5.3規(guī)范5.2模式5

信息搜索強(qiáng)制規(guī)范建議規(guī)范條件查詢模式1）建議全局關(guān)鍵字搜索提供智能匹配功能，可采用下拉列表形式顯示，匹配項(xiàng)過多時，僅顯示搜索頻率較高項(xiàng)，無

需顯示全部信息。2）建議搜索結(jié)果中相關(guān)聯(lián)關(guān)鍵字高亮顯示。關(guān)鍵字搜索模式條件篩選模式5.1原則5.3規(guī)范5.2模式5

信息搜索強(qiáng)制規(guī)范建議規(guī)范條件查詢模式1）應(yīng)將條件篩選內(nèi)容置于篩選結(jié)果上方。2）應(yīng)在用戶選擇篩選條件后，即時顯示篩選結(jié)果。3）應(yīng)在系統(tǒng)（產(chǎn)品）搜索過程中出現(xiàn)加載提示，加載提示包括動態(tài)圖標(biāo)和提示文字：“正在為您搜索,請等待…”。關(guān)鍵字搜索模式條件篩選模式5.1原則5.3規(guī)范5.2模式5

信息搜索強(qiáng)制規(guī)范建議規(guī)范條件查詢模式1）建議將下拉項(xiàng)文字應(yīng)精簡在16個字符，8個中文字以內(nèi)。2）下拉列表的選項(xiàng)中包含“全部”或“全選”時，應(yīng)將“全部”選項(xiàng)放置于下拉列表底部，如“全部類型”或“全

部狀態(tài)”。若無業(yè)務(wù)設(shè)定需要，則建議將“全部類型”作為系統(tǒng)（產(chǎn)品）默認(rèn)選擇。關(guān)鍵字搜索模式條件篩選模式5.1原則5.3規(guī)范5.2模式5

信息搜索強(qiáng)制規(guī)范建議規(guī)范條件查詢模式1）應(yīng)將查詢按鈕放置于查詢條件下方，居右顯示。2）條件查詢模式中信息輸入項(xiàng)應(yīng)遵循表單所有規(guī)范，例如：“非字形”對齊方式等

。3）應(yīng)對查詢條件填寫中的生僻項(xiàng)或易產(chǎn)生歧義選項(xiàng)提供填寫幫助。4）應(yīng)提供“清空搜索條件”功能，位置放置在查詢按鈕之后。5）應(yīng)在搜索過程中顯示加載提示，加載提示包括動態(tài)圖標(biāo)和提示文字：“正在為您搜索,請等待。關(guān)鍵字搜索模式條件篩選模式5.1原則5.3規(guī)范5.2模式5

信息搜索強(qiáng)制規(guī)范建議規(guī)范條件查詢模式1）建議當(dāng)查詢條件較多時根據(jù)業(yè)務(wù)要求選擇隱藏不常用的選項(xiàng)作為高級查詢。2）當(dāng)表單填寫內(nèi)容具有一定范圍或輸入內(nèi)容具有針對性時

，默認(rèn)信息項(xiàng)可由系統(tǒng)（產(chǎn)品）自動填寫，減少用戶輸入。3）建議將下拉項(xiàng)文字應(yīng)精簡在16個字符，8個中文字以內(nèi)。4）信息展示建議多使用圖形化，增加表單的視覺體驗(yàn)，如：日歷輸入框，增加日歷圖標(biāo)。5）建議加載提示中提供取消加載的功能，取消后回到加載前的信息。關(guān)鍵字搜索模式條件篩選模式5.1原則5.3規(guī)范5.2模式5

信息搜索強(qiáng)制規(guī)范建議規(guī)范條件查詢模式目錄1登錄4導(dǎo)航3表格2表單5信息搜索6消息7界面內(nèi)容跳轉(zhuǎn)8鍵盤9首次體驗(yàn)6.1

消息-錯誤消息【簡要原則】錯誤消息表述應(yīng)精煉準(zhǔn)確。6.1.1原則6.1.3規(guī)范【清晰原則】錯誤消息措辭通俗易懂?！久鞔_原則】6.1.2模式【禮貌原則】錯誤消息不應(yīng)責(zé)備用戶，避免使用歧視和侮辱性語言?！鞠嚓P(guān)性原則】錯誤消息所描述的問題是用戶所關(guān)心的?！炯皶r性原則】及時向用戶反饋出錯提示。錯誤消息在描述問題時應(yīng)使用肯定的語言，給出具體名稱、位置及數(shù)值。對話框：原地提示：氣球狀提示：6.1

消息-錯誤消息6.1.1原則6.1.3規(guī)范6.1.2模式對話框原地氣球狀1）應(yīng)包含標(biāo)題區(qū)、內(nèi)容區(qū)、操作區(qū)。標(biāo)題區(qū)：標(biāo)題簡潔易懂，置于標(biāo)題區(qū)左側(cè)。提供“關(guān)閉”按鈕，置于標(biāo)題區(qū)右側(cè)。內(nèi)容區(qū)：使用錯誤圖標(biāo)，置于內(nèi)容文字前。告知用戶問題、原因以及解決方法。操作區(qū)：包含“確定”按鈕，置于操作區(qū)右側(cè)。6.1

消息-錯誤消息6.1.1原則6.1.3規(guī)范6.1.2模式強(qiáng)制規(guī)范建議規(guī)范2）措辭要求：應(yīng)避免使用編程專業(yè)術(shù)語。應(yīng)避免責(zé)備或者暗示用戶造成了問題。應(yīng)避免使用雙重否定。將自己的問題歸因?yàn)榭陀^環(huán)境而他人的問題歸因于他人本身。VS使用日常物品時的錯誤歸因?yàn)樽约骸！对O(shè)計(jì)心理學(xué)》

歸因方式為什么？句子—圖畫匹配實(shí)驗(yàn)星形在十字之上星形不在十字之上星形在十字之下星形不在十字之下識別時間：真肯定句<假肯定句<假否定句<真否定句。—《實(shí)驗(yàn)心理學(xué)》對話框原地氣球狀6.1

消息-錯誤消息6.1.1原則6.1.3規(guī)范6.1.2模式強(qiáng)制規(guī)范建議規(guī)范2）措辭要求：應(yīng)避免使用編程專業(yè)術(shù)語。應(yīng)避免責(zé)備或者暗示用戶造成了問題。應(yīng)避免使用雙重否定。應(yīng)避免使用縮寫格式；應(yīng)避免使用特殊字符表意。應(yīng)避免在標(biāo)簽之后使用冒號；錯誤提示內(nèi)容后應(yīng)避免使用感嘆號。應(yīng)注意用語的合理性。對話框原地氣球狀6.1

消息-錯誤消息6.1.1原則6.1.3規(guī)范6.1.2模式強(qiáng)制規(guī)范建議規(guī)范1）內(nèi)容較多時，隱藏部分信息，點(diǎn)擊查看信息詳情。為什么？認(rèn)知負(fù)荷VS操作負(fù)荷腦力資源：認(rèn)知負(fù)荷＞操作負(fù)荷增加操作而減少認(rèn)知負(fù)荷?！对O(shè)計(jì)師要懂心理學(xué)》對話框原地氣球狀6.1

消息-錯誤消息6.1.1原則6.1.3規(guī)范6.1.2模式強(qiáng)制規(guī)范建議規(guī)范錯誤消息置于輸入框下方。錯誤消息置于輸入框左方。1）應(yīng)將提示放置于錯誤對象旁邊，凸顯錯誤對象：提示信息放置在操作對象下方提示信息放置在操作對象右方2）使用錯誤圖標(biāo)，置于提示文字前，使用紅色。為什么？對話框原地氣球狀6.1

消息-錯誤消息6.1.1原則6.1.3規(guī)范6.1.2模式強(qiáng)制規(guī)范建議規(guī)范1）應(yīng)將提示放置于錯誤對象旁邊，凸顯錯誤對象：提示信息放置在操作對象下方提示信息放置在操作對象右方2）使用錯誤圖標(biāo)，置于提示文字前，使用紅色。為什么？使用符合文化習(xí)慣的顏色。9%的男性和0.5%的女性是色盲?！对O(shè)計(jì)師要懂心理學(xué)》色盲用戶的存在。在文化習(xí)慣中，紅色表征危險(xiǎn)、警醒等。3）內(nèi)容包含問題和問題解決措施。4）操作正確后，錯誤提示消失。5）措辭要求：（內(nèi)容同上）對話框原地氣球狀6.1

消息-錯誤消息6.1.1原則6.1.3規(guī)范6.1.2模式強(qiáng)制規(guī)范建議規(guī)范1）建議信息填寫后及時進(jìn)行提示。2）建議原地提示只放置一行文字。對話框原地氣球狀6.1

消息-錯誤消息6.1.1原則6.1.3規(guī)范6.1.2模式強(qiáng)制規(guī)范建議規(guī)范1）包含指向錯誤對象的“小箭頭”，并凸顯錯誤對象。2）使用錯誤圖標(biāo)，且置于提示文字前。3）內(nèi)容包含出現(xiàn)的問題和解決方法。4）應(yīng)在問題解決后，錯誤提示消失。5）措辭要求：（內(nèi)容同上）強(qiáng)制規(guī)范：建議規(guī)范：1）錯誤提示內(nèi)容過多時，可折行顯示。對話框原地氣球狀6.1

消息-錯誤消息6.1.1原則6.1.3規(guī)范6.1.2模式強(qiáng)制規(guī)范建議規(guī)范6.2消息-警告消息6.2.1原則6.2.3規(guī)范6.2.2模式【預(yù)防錯誤性原則】讓用戶在進(jìn)行選擇時，知道如何采取避免問題發(fā)生的相關(guān)措施?！竞喴瓌t】警告消息的表述精煉準(zhǔn)確?！久鞔_原則】警告消息明確告知用戶警告來源、潛在問題以及如何避免。6.2

消息-警告消息對話框：原地提示：氣球狀提示：6.2.1原則6.2.3規(guī)范6.2.2模式1）包含標(biāo)題區(qū)、內(nèi)容區(qū)、操作區(qū)。標(biāo)題區(qū)：（內(nèi)容同上）內(nèi)容區(qū)：使用警告圖標(biāo)，置于內(nèi)容文字前。告知操作后果以及相應(yīng)的解決方法。操作區(qū)：需確認(rèn)的警告消息，包含繼續(xù)、放棄按鈕。對話框原地氣球狀強(qiáng)制規(guī)范建議規(guī)范6.2

消息-警告消息6.2.1原則6.2.3規(guī)范6.2.2模式1）包含標(biāo)題區(qū)、內(nèi)容區(qū)、操作區(qū)。標(biāo)題區(qū)：（內(nèi)容同上）內(nèi)容區(qū)：使用警告圖標(biāo)，置于內(nèi)容文字前。告知操作后果以及相應(yīng)的解決方法。操作區(qū)：需確認(rèn)的警告消息，包含繼續(xù)、放棄按鈕。僅用于告知用戶的警告消息，包含“確定”按鈕。2）措辭要求：（內(nèi)容同上）3）相同警告消息避免多次重復(fù)提示。對話框原地氣球狀強(qiáng)制規(guī)范建議規(guī)范6.2

消息-警告消息6.2.1原則6.2.3規(guī)范6.2.2模式為什么？符合用戶習(xí)慣和預(yù)期。window下：“取消”“否”

置于右側(cè)，“確定”“是”置于左側(cè)。1）提供避免問題發(fā)生的操作入口。2）內(nèi)容較多，建議隱藏部分信息，點(diǎn)擊查看詳情。3）無特殊業(yè)務(wù)需求，避免同時使用提示音。對話框原地氣球狀強(qiáng)制規(guī)范建議規(guī)范6.2

消息-警告消息6.2.1原則6.2.3規(guī)范6.2.2模式1）放置于警告對象旁邊，且凸顯警告對象。2）使用警告圖標(biāo)，且置于提示文字前。3）措辭要求：（內(nèi)容同上）強(qiáng)制規(guī)范：建議規(guī)范：（內(nèi)容同原地錯誤消息）對話框原地氣球狀強(qiáng)制規(guī)范建議規(guī)范6.2.1原則6.2.3規(guī)范6.2.2模式6.2

消息-警告消息內(nèi)容與“錯誤消息”中的“氣球狀”一致。對話框原地氣球狀6.2.1原則6.2.3規(guī)范6.2.2模式6.2

消息-警告消息【唯一原則】對于每種情況只顯示一個確認(rèn)消息?！狙訒r原則】在用戶做出決定的過程中設(shè)置時間障礙，保證用戶操作前充分思考。對話框模式：6.3.1原則6.3.3規(guī)范6.3.2模式6.3消息-確認(rèn)消息1）包含標(biāo)題區(qū)、內(nèi)容區(qū)、操作區(qū)。標(biāo)題區(qū)：（內(nèi)容同上）內(nèi)容區(qū)：使用確認(rèn)圖標(biāo)，置于內(nèi)容文字前。告知用戶確認(rèn)的內(nèi)容。操作區(qū)：應(yīng)包含“取消”按鈕，置于右側(cè)。應(yīng)包含“確定”按鈕，置于“取消”左側(cè)。2）措辭要求：（內(nèi)容同上）3）操作會引起嚴(yán)重后果且不可逆，必須使用確認(rèn)消息。4）使用模態(tài)對話框的形式。6.3.1原則6.3.3規(guī)范6.3.2模式6.3消息-確認(rèn)消息強(qiáng)制規(guī)范【可控原則】允許用戶控制接收通知的觸發(fā)條件。【簡要原則】信息提示表述精煉準(zhǔn)確。【清晰原則】信息提示應(yīng)使用完整的句子，措辭通俗易懂，便于用戶理解信息內(nèi)容，采取進(jìn)一步操作。氣球狀模式：6.4.1原則6.4.3規(guī)范6.4.2模式6.4消息-信息提示1）應(yīng)包含指向信息來源的“小箭頭”。2）寫明具體的提示事項(xiàng)，可點(diǎn)擊與不可點(diǎn)擊的文字進(jìn)行區(qū)分。3）使用信息提示圖標(biāo)。多條信息，每條信息前都應(yīng)放置圖標(biāo)。4）提供關(guān)閉的入口，信息被查閱后消失。5）措辭要求：（內(nèi)容同上）強(qiáng)制規(guī)范：建議規(guī)范：1）信息提示內(nèi)容過多時，可折行顯示。2）無特殊業(yè)務(wù)需求，提示在一段時間后消失。6.4.1原則6.4.3規(guī)范6.4.2模式6.4消息-信息提示強(qiáng)制規(guī)范建議規(guī)范【簡要原則】提示音應(yīng)直接的表達(dá)反饋的問題。負(fù)面聽覺引起焦慮等負(fù)面情緒；正面聽覺反饋更有可能給人帶來愉悅體驗(yàn)。正面聽覺—關(guān)門正面聽覺—敲鍵盤1）單個聲音文件時長不超過5秒強(qiáng)制規(guī)范：建議規(guī)范：1）支持用戶自定義聲音文件。2）提供聲音預(yù)覽功能。3）操作成功時給予成功聲音反饋。為什么？

負(fù)面聽覺反饋VS正面聽覺反饋?！禔boutFace》負(fù)面聽覺—火警警報(bào)4）無特殊業(yè)務(wù)需求，避免在使用警告消息的同時使用提示音。6.5.1原則6.5.3規(guī)范6.5.2模式6.5消息-提示音強(qiáng)制規(guī)范建議規(guī)范目錄1登錄4導(dǎo)航3表格2表單5信息搜索6消息7界面內(nèi)容跳轉(zhuǎn)8鍵盤9首次體驗(yàn)【即時反饋原則】用戶進(jìn)行操作后系統(tǒng)（產(chǎn)品）應(yīng)給用戶即時反饋，告知用戶操作是否有效?！竞喴瓌t】用于內(nèi)容切換的超鏈接文字或按鈕文字應(yīng)精簡，措辭通俗易懂，便于用戶理解?！疽恢滦栽瓌t】系統(tǒng)（產(chǎn)品）中界面跳轉(zhuǎn)方式應(yīng)保持一致。7.1原則7.3規(guī)范7.2模式7界面內(nèi)容跳轉(zhuǎn)界面局部刷新彈出層浮層顯示界面A界面B新窗口打開界面A當(dāng)前界面刷新正在加載……界面B7.1原則7.3規(guī)范7.2模式7界面內(nèi)容跳轉(zhuǎn)當(dāng)前界面刷新新窗口打開界面局部刷新浮層顯示彈出層1）使用加載提示，包括動態(tài)圖標(biāo)和提示文字。強(qiáng)制規(guī)范：為什么？客觀時間VS主觀時間單調(diào)事件：主觀時間>客觀時間豐富事件：主觀時間<客觀時間變速運(yùn)動增加趣味性顯示進(jìn)度百分比符合產(chǎn)品主題7.1原則7.3規(guī)范7.2模式7界面內(nèi)容跳轉(zhuǎn)強(qiáng)制規(guī)范當(dāng)前界面刷新新窗口打開界面局部刷新浮層顯示彈出層新窗口打開1）應(yīng)將新界面設(shè)置為焦點(diǎn)界面。強(qiáng)制規(guī)范：2）使用加載提示。（內(nèi)容同上）界面局部刷新1）使用加載提示。（內(nèi)容同上）浮層顯示強(qiáng)制規(guī)范：1）觸發(fā)和關(guān)閉的方式應(yīng)保持一致。強(qiáng)制規(guī)范：2）表明浮層所從屬的對象。彈出層1）彈出窗口的大小合理，樣式保持一致。2）設(shè)置關(guān)閉按鈕。強(qiáng)制規(guī)范：建議規(guī)范：1）增加顯示和消失過渡動畫。7.1原則7.3規(guī)范7.2模式7界面內(nèi)容跳轉(zhuǎn)目錄1登錄4導(dǎo)航3表格2表單5信息搜索6消息7界面內(nèi)容跳轉(zhuǎn)8鍵盤9首次體驗(yàn)【操作靈活性原則】【操作便捷性原則】用戶進(jìn)行信息輸入時，可通過設(shè)置快捷鍵輸入代替鼠標(biāo)操作，避免鼠標(biāo)和鍵盤間的重復(fù)切換，提高用戶操作效率。設(shè)定鍵盤快捷鍵時，需考慮用戶的認(rèn)知負(fù)荷和手指操作的便捷性，避免轉(zhuǎn)義常用快捷鍵、避免組合距離太遠(yuǎn)，造成單手操作困難。8.1原則8.3規(guī)范8.2模式8鍵盤【操作靈活性原則】【操作便捷性原則】用戶進(jìn)行信息輸入時，可通過設(shè)置快捷鍵輸入代替鼠標(biāo)操作，避免鼠標(biāo)和鍵盤間的重復(fù)切換，提高用戶操作效率。設(shè)定鍵盤快捷鍵時，需考慮用戶的認(rèn)知負(fù)荷和手指操作的便捷性，避免轉(zhuǎn)義常用快捷鍵、避免組合距離太遠(yuǎn)，造成單手操作困難。信息輸入快捷鍵輸入8.1原則8.3規(guī)范8.2模式8鍵盤1）應(yīng)避免與操作系統(tǒng)默認(rèn)快捷鍵相沖突，不應(yīng)對常規(guī)的快捷鍵組合進(jìn)行轉(zhuǎn)義。2）不應(yīng)使用復(fù)雜的快捷鍵組合。3）搜索或者登錄等操作時，應(yīng)將“Enter鍵”設(shè)置為默認(rèn)觸發(fā)鍵。4）應(yīng)為用戶頻繁使用的操作設(shè)置快捷鍵。強(qiáng)制規(guī)范8.1原則8.3規(guī)范8.2模式8鍵盤目錄1登錄4導(dǎo)航3表格2表單5信息搜索6消息7界面內(nèi)容跳轉(zhuǎn)8鍵盤9首次體驗(yàn)【幫助性原則】首次體驗(yàn)應(yīng)能夠幫助用戶學(xué)習(xí)系統(tǒng)（產(chǎn)品）操作?！竞唵涡栽瓌t】首次體驗(yàn)應(yīng)盡可能的簡單，讓用戶快速掌握系統(tǒng)（產(chǎn)品）的使用方法?！久鞔_性原則】首次體驗(yàn)應(yīng)準(zhǔn)確說明各個主要功能的作用和相應(yīng)的操作流程。9.1原則9.3規(guī)范9.2模式9首次體驗(yàn)前置引導(dǎo)頁9.1原則9.3規(guī)范9.2模式9首次體驗(yàn)全局引導(dǎo)游覽9.1原則9.3規(guī)范9.2模式9首次體驗(yàn)前置引導(dǎo)頁全局游覽引導(dǎo)強(qiáng)制規(guī)范建議規(guī)范1）精煉準(zhǔn)確的介紹主要功能。2）頁面瀏覽順序與用戶操作順序保持一致。強(qiáng)制規(guī)范：建議規(guī)范：1）設(shè)計(jì)盡量生動、具有趣味性。2）給予用戶隨時離開引導(dǎo)頁面的入口。3）提供給用戶再次打開引導(dǎo)頁面的入口。9.1原則9.3規(guī)范9.2模式9首次體驗(yàn)前置引導(dǎo)頁全局游覽引導(dǎo)強(qiáng)制規(guī)范建議規(guī)范1）引導(dǎo)說明位于說明對象旁邊。2）凸顯當(dāng)前說明對象與說明內(nèi)容。為什么？9.1原則9.3規(guī)范9.2模式9首次體驗(yàn)1）引導(dǎo)說明位于說明對象旁邊。2）凸顯當(dāng)前說明對象與說明內(nèi)容。強(qiáng)制規(guī)范：建議規(guī)范：1）設(shè)計(jì)盡量生動、具有趣味性。（內(nèi)容同上）3）確保引導(dǎo)說明指向其從屬對象。4）有序?qū)δ苓M(jìn)行介紹，符合真實(shí)使用順序。5）可以隨時關(guān)閉引導(dǎo)說明。前置引導(dǎo)頁全局游覽引導(dǎo)強(qiáng)制規(guī)范建議規(guī)范9.1原則9.3規(guī)范9.2模式9首次體驗(yàn)Спасибо

??????

謝謝Thanks

Merci.??????

?????.ありがとうございますGracias.2014年國家電網(wǎng)公司《桌面