產(chǎn)品UI設(shè)計操作規(guī)范

產(chǎn)品UI設(shè)計規(guī)范（初稿）修訂記錄*類別：A–增加M–修改D–刪除日期版本號類別描述作者批準日期批準人2016-3-10.0.01A初稿產(chǎn)品UI設(shè)計規(guī)范【擬制】產(chǎn)品部【日期】2016年3月1日【審評人】產(chǎn)品設(shè)計部【日期】【批準】【日期】【簽發(fā)】【日期】目錄TOC\o"1-4"\h\z\u版權(quán)所有侵權(quán)必究 1第一章 前言 51.1 產(chǎn)品現(xiàn)狀 51.2 規(guī)范原則 51.3 規(guī)范目標 6第二章 界面布局與操作順序 72.1 總體布局細則 72.2 選項框與下拉列表 72.3 菜單、工具條與右鍵快捷菜單 72.4 彈出窗口 82.5 工具欄與工具箱 82.6 滾動條與狀態(tài)條 92.7 按鈕排列 92.8 操作順序細則 9第三章 操作指引 103.1 操作指引細節(jié) 10第四章 美觀與協(xié)調(diào)性 114.1 美觀細則 124.2 協(xié)調(diào)性細則 134.3 風格的一致性 14第五章 快捷鍵 155.1 快捷鍵細則 15第六章 頁面跳轉(zhuǎn) 16第七章 鼠標點擊次數(shù) 177.1 鼠標點擊次數(shù) 17第八章 刷新等待時間 18第九章 用戶輸入與提示信息 199.1 輸入框輸入錯誤提示處理方式： 199.2 查詢信息提示方式 199.3 時間控件輸入方式 19前言產(chǎn)品現(xiàn)狀公司已經(jīng)實施上線運行的產(chǎn)品線目前有數(shù)條，每條產(chǎn)品線的產(chǎn)品成熟度和業(yè)務(wù)成熟度都有所不同，而產(chǎn)品使用客戶覆蓋不同層次的用戶，有業(yè)務(wù)執(zhí)行層面，有業(yè)務(wù)管理層面同時也有領(lǐng)導管理層面。每個不同層面的客戶對產(chǎn)品界面和操作的需求感受是不同的。 從我們產(chǎn)品目前的風格角度來看，多條產(chǎn)品線所呈現(xiàn)的UI風格各有不同，既沒有考慮產(chǎn)品本身的特性，也未考慮產(chǎn)品的客戶需求，造成產(chǎn)品UI設(shè)計風格雜亂，操作雜亂的現(xiàn)狀。因此，產(chǎn)品UI設(shè)計應(yīng)遵循同一操作規(guī)范，利于交叉工作的平緩順利交接。以標準化方式，提高溝通和技術(shù)協(xié)作的水平，提高工作效率。減少和改變責任不明，任務(wù)不清，和由此產(chǎn)生的信息溝通不暢、反復修改、重復勞動、效率低下的現(xiàn)象。規(guī)范原則以用戶為中心。設(shè)計由用戶控制的界面，而不是界面控制用戶。清楚一致的設(shè)計。所有界面的風格保持一致，所有具有相同含義的術(shù)語保持一致，且易于理解較快的響應(yīng)速度。簡單且美觀。規(guī)范目標操作直觀，容易學習 在用戶具有業(yè)務(wù)背景知識的前提下，通過少量培訓，甚至不需培訓，即可掌握系統(tǒng)的基本使用，而且不容易忘記。使用便捷操作流程設(shè)計合理；減少實現(xiàn)某一功能的頁面點擊數(shù)；提供鍵盤快捷鍵，使用戶不依賴鼠標即可完成操作。美觀大方 頁面布局合理，顏色搭配協(xié)調(diào)，減少視覺疲勞，具有現(xiàn)代感和專業(yè)感。但切忌無謂的花俏。性能較高 目前系統(tǒng)部署在外網(wǎng)，運行效率不高。需提高頁面展現(xiàn)速度，使操作更加順暢。兼容性好 目前NTS系統(tǒng)只能用于IE6。一些用戶希望使用更高版本IE或Firefox等其它瀏覽器。其它問題回退鍵問題：當用戶點擊瀏覽器回退鍵時，有時會導致數(shù)據(jù)錯誤。應(yīng)采取措施解決。界面布局與操作順序界面布局應(yīng)按照從左到右，從上到下的順序排列，操作順序也應(yīng)遵循此順序。理想的情況是用戶不用查閱幫助就能知道該界面的功能并進行相關(guān)的正確操作?？傮w布局細則完成相同或相近功能的按鈕用Frame框括起來，常用按鈕要支持快捷方式。完成同一功能或任務(wù)的元素放在集中位置，減少鼠標移動的距離。按功能將界面劃分局域塊，用Frame框括起來,并要有功能說明或標題。同一界面上的控件數(shù)不要超過10個，多于10個時建議使用分頁界面顯示。選項框與下拉列表選項數(shù)相同時多用選項框而不用下拉列表框。界面控件較小時使用下拉框而不用選項框。選項數(shù)較少時使用選項框，相反使用下拉列表框。當采用下拉列表時，保證下拉列表在獲得焦點時是處于界面最上層。菜單、工具條與右鍵快捷菜單沒有順序要求的菜單項按使用頻率和業(yè)務(wù)重要性排列，常用的放在開頭，不常用的靠后放置；重要的放在開頭，次要的放在后邊。菜單前的圖標不宜太大，與字高保持一直最好。主菜單的寬度要相同，字數(shù)不應(yīng)多于四個，每個菜單的字數(shù)能相同最好。主菜單數(shù)目不應(yīng)太多，最好為單排布置。菜單結(jié)構(gòu)最多不要超過3層，多于3層考慮另分類。完成相同或相近功能的菜單用橫線隔開放在同一位置。菜單前的圖標能直觀的代表要完成的操作。菜單和工具條要有清楚的界限;菜單要求凸出顯示，這樣在移走工具條時仍有立體感。菜單和狀態(tài)條中通常使用五號字體。工具條一般比菜單要寬，但不要寬的太多，保持界面整體協(xié)調(diào)。右鍵快捷菜單采用與菜單相同的準則。彈出窗口彈出窗口不能超過兩層，多于2層可考慮在同一窗口顯示。父窗體或主窗體的中心位置應(yīng)該在對角線焦點附近。子窗體位置應(yīng)該在主窗體的左上角或正中。多個子窗體彈出時應(yīng)該依次向右下方偏移，以顯示窗體出標題為宜。在多窗口系統(tǒng)中，有些界面要求必須保持在最頂層，避免用戶在打開多個窗口時，不停的切換甚至最小化其他窗口來顯示該窗口。工具欄與工具箱工具欄要求可以根據(jù)用戶的要求自己選擇定制。相同或相近功能的工具欄放在一起。工具欄中的每一個按鈕要有及時提示信息。一條工具欄的長度不能超出屏幕寬度。工具欄的圖標能直觀的代表要完成的操作。系統(tǒng)常用的工具欄設(shè)置默認放置位置。工具欄太多時可以考慮使用工具箱。工具箱要具有可增減性，由用戶自己根據(jù)需求定制。工具箱的默認總寬度不要超過屏幕寬度的1/5。滾動條與狀態(tài)條滾動條的長度要根據(jù)顯示信息的長度或?qū)挾饶芗皶r變換，以利于用戶了解顯示信息的位置和百分比。狀態(tài)條的高度以放置五號字為宜，滾動條的寬度比狀態(tài)條的略窄。按鈕排列重要的命令按鈕與使用較頻繁的按鈕要放在界面上注目的位置（并且設(shè)置快捷鍵）。錯誤使用容易引起界面退出或關(guān)閉的按鈕不應(yīng)該放在易點位置。橫排開頭或最后與豎排最后為易點位置。與正在進行的操作無關(guān)的按鈕應(yīng)該加以屏蔽(Windows中用灰色顯示，無法操作該按鈕)。操作順序細則界面要支持鍵盤自動瀏覽按鈕功能，即按Tab鍵的自動切換功能，切換應(yīng)遵循從左到右從上到下的順序。（若是控件非可輸入或選擇，可跳過Tab鍵）。界面上首要輸入和重要信息的控件在Tab順序中應(yīng)當靠前,位置也應(yīng)放在窗口較醒目的位置。復選框和選項框按選擇幾率的高底而先后排列。復選框和選項框要有默認選項，并支持Tab選擇。操作指引用戶登錄后應(yīng)有一定的指引性，最好能引導用戶使用此軟件，提高用戶的認知度。若用戶第一次登錄，應(yīng)有操作指引（也就是幫助提示，例如：Office里的小助手）。操作指引細節(jié)狀態(tài)條要能顯示用戶切實需要的信息，常用的有：前一次登錄時間、目前的操作、系統(tǒng)狀態(tài)、用戶信息、提示信息、錯誤信息等，如果某一操作需要的時間較長，還應(yīng)該顯示進度條和進程提示用戶第一次登錄時，應(yīng)有操作指引，引導用戶操作。提供路徑指明用戶所在功能或菜單位置。信息欄顯示用戶當前操作信息。界面布局排列應(yīng)有指引用戶的作用，引導用戶輸入首要信息和重要信息。按鈕名稱應(yīng)該易懂，用詞準確，摒棄模棱兩可的字眼，要與同一界面上的其他按鈕易于區(qū)分，能望文知義?？蓪懣丶z測到非法輸入后應(yīng)給出說明并能自動獲得焦點。對可能造成數(shù)據(jù)無法恢復的操作必須提供確認信息,給用戶放棄選擇的機會。對運行過程中出現(xiàn)問題而引起錯誤的地方要有提示，讓用戶明白錯誤出處，避免形成無限期的等待，系統(tǒng)異?；蝈e誤需保證留有日志，供技術(shù)人員排查。在運行過程中出現(xiàn)的異?；蝈e誤提示必須是中文顯示，不允許是純英文提示信息；在提示信息中必須具有指引性信息。（如“系統(tǒng)出現(xiàn)異常，請聯(lián)系系統(tǒng)管理員（張三：136000000）”）美觀與協(xié)調(diào)性界面應(yīng)該大小適合美學觀點，感覺協(xié)調(diào)舒適，能在有效的范圍內(nèi)吸引用戶的注意力。以下圖為例（圖4-1）：界面分布分別是：上為菜單、工具欄；左為樹形結(jié)構(gòu)（不超過3層）；右為實際操作區(qū)；美觀細則從左到右比例：左邊為18%，右邊為82%若在只有菜單的情況下（如：NTS非稅系統(tǒng)）則遵循上下比例：上為12%，下位88%若有菜單和工具條的情況下（如：Windows資源管理）則遵循菜單和工具條之間的比例,菜單中字體大小9-14號，字體上下距離為5-10像素；工具欄中的字體和菜單欄一樣，字體上下距離為8-12像素工具條中的圖片與文字比例。圖片與文字以橫放，則圖片與文字的大小要相近高度，圖片不能大于（或小于）文字上下超過5像素（圖例4-5）。圖例（4-5）工具條中的圖片與文字比例。圖片與文字以豎放，則文字寬度不得大于（或小于）圖片左右超過20像素（圖例4-6）。圖例（4-6）協(xié)調(diào)性細則按鈕大小相同，忌用太長的名稱，免得占用過多的界面位置。按鈕的大小要與界面的大小和空間要協(xié)調(diào)。避免空曠的界面上放置很大的按鈕。放置完控件后界面不應(yīng)有很大的空缺位置。字體的大小要與界面的大小比例協(xié)調(diào),通常使用的字體中宋體9-16較為美觀，不用超過16號的字體。前景與背景色搭配合理協(xié)調(diào)，反差不宜太大，少用鮮艷的顏色，如大紅、大綠等。主色要柔和，具有親和力與磁力，堅決杜絕刺目的顏色。界面風格要保持一致，字的大小、顏色、字體要相同，除非是需要藝術(shù)處理或有特殊要求的地方。如果窗體支持最小化和最大化或放大時，窗體上的控件也要隨著窗體而縮放；切忌只放大窗體而忽略控件的縮放。對于彈出窗口（即子窗體）不應(yīng)有放大縮小，即右上角只有關(guān)閉功能。父窗體支持縮放時，子窗體無需支持縮放。建議能給用戶提供自定義界面風格則更好，由用戶自己選擇顏色、字體等。風格的一致性安裝界面上應(yīng)有單位介紹或產(chǎn)品介紹，并有自己的圖標。主界面，最好是大多數(shù)界面上要有公司圖標或名稱。登錄界面上要有本產(chǎn)品的標志，同時包含公司圖標或名稱。“關(guān)于”中應(yīng)有版權(quán)和產(chǎn)品信息。公司的系列產(chǎn)品要保持一直的界面風格，如背景色、字體、菜單排列方式、圖標、安裝過程、按鈕用語等應(yīng)該大體一致?？旖萱I在菜單及按鈕中使用快捷鍵可以讓喜歡使用鍵盤的用戶操作得更快一些，快捷鍵應(yīng)用應(yīng)與Windows中快捷鍵是一致的?？旖萱I細則面向事務(wù)的組合有:Ctrl-D刪除；Ctrl-F尋找；Ctrl–H替換；Ctrl-I插入；Ctrl-N新記錄；Ctrl-S保存Ctrl-O打開。列表:Ctrl-R，Ctrl-G定位；Ctrl-Tab下一分頁窗口或反序瀏覽同一頁面控件。編輯:Ctrl-A全選；Ctrl-C拷貝；Ctrl-V粘貼；Ctrl-X剪切；Ctrl-Z撤消；Ctrl-Y恢復。文件操作:Ctrl-P打?。籆trl-W關(guān)閉。MSWindows保留鍵:Ctrl-Esc任務(wù)列表；Ctrl-F4關(guān)閉窗口；Alt-F4結(jié)束應(yīng)用；Alt-Tab下一應(yīng)用；Enter缺省按鈕/確認；Esc取消按鈕/取消。按鈕中：可以根據(jù)系統(tǒng)需要而調(diào)節(jié)，以下只是常用的組合。Alt-Y確定(是)；Alt-C取消；Alt-N否；Alt-D刪除；Alt-Q退出；Alt-A添加；Alt-E編輯；Alt-B瀏覽；Alt-R讀；Alt-W寫。這些快捷鍵也可以作為開發(fā)中文應(yīng)用軟件的標準,但亦可使用漢語拼音的開頭字母。頁面跳轉(zhuǎn)同一個業(yè)務(wù)功能的頁面跳轉(zhuǎn)次數(shù)要求在3次以下，嚴禁超過5次。當頁面跳轉(zhuǎn)次數(shù)超過3次以后，必須要有操作說明或指引。能夠在同一個頁面中完成的功能操作必須在一個頁面完成。在同一個頁面中，新打開的頁面不允許覆蓋或替換已經(jīng)打開的頁面區(qū)域。鼠標點擊次數(shù)操作鼠標次數(shù)越少，用戶越能加快使用；減少操作率，提高用戶使用速度。鼠標點擊次數(shù)用戶登錄鼠標點擊次數(shù)在2次以下。從菜單到功能，