界面設(shè)計(jì)需求文檔

1、精選優(yōu)質(zhì)文檔-傾情為你奉上界面設(shè)計(jì)需求文檔專心-專注-專業(yè)界面設(shè)計(jì)的行業(yè)標(biāo)準(zhǔn)總結(jié)一 2011.09.23的整體標(biāo)準(zhǔn)包括以下四個(gè)方面：1.規(guī)范性2.合理性3.一致性4.界面定制性一、GUI設(shè)計(jì)的規(guī)范遵循一致的準(zhǔn)則，確立標(biāo)準(zhǔn)并遵循，是軟件界面設(shè)計(jì)中必不可必的環(huán)節(jié)。確立界面標(biāo)準(zhǔn)的好處：1.便于用戶操作：戶使用起來能夠建立起精確的心里模型，使用熟練了一個(gè)界面后，切換到另外一個(gè)界面能夠很輕松的推測(cè)出各種功能2.使用戶感覺到統(tǒng)一、規(guī)范，在使用軟件的過程中愉快輕松的完成操作，提高對(duì)軟件的認(rèn)知3.降低培訓(xùn)、支持成本，不必花費(fèi)較多的人力對(duì)客戶進(jìn)行逐個(gè)指導(dǎo)二、GUI布局的合理性界面的合理性是指界面是否與軟件功能相

2、融洽，界面的顏色和布局是否協(xié)調(diào)等。例如：1.界面布局a.屏幕不能擁擠* Mayhew在1992年的試驗(yàn)結(jié)果表明屏幕總體覆蓋度不應(yīng)該超過40，而分組覆蓋度不應(yīng)該超過62。* 整個(gè)項(xiàng)目，采用統(tǒng)一的控件間距，通過調(diào)整窗體大小達(dá)到一致，即使在窗體大小不變的情況下，寧可留空部分區(qū)域，也不要破壞控件間的行間距。b.控件按區(qū)域排列* 一行控件縱向中對(duì)齊, 控件間距基本保持一致，行與行之間間距相同，靠窗體的控件距窗體邊緣的距離應(yīng)大于行間距。* 當(dāng)屏幕有多個(gè)編輯區(qū)域，要以視覺效果和效率來組織這些區(qū)域c.有效組合邏輯上相關(guān)聯(lián)的控件應(yīng)當(dāng)加以組合以表示其關(guān)聯(lián)性，反之，任何不相關(guān)的項(xiàng)目應(yīng)當(dāng)分隔開。在項(xiàng)目集合間用間隔對(duì)其

3、進(jìn)行分組，或者使用方框劃分各自區(qū)域d.窗口縮放時(shí)，控件位置、布局* 固定窗口大小，不允許改變尺寸* 改變尺寸的窗口，在窗口尺寸發(fā)生變化時(shí)控件的位置、大小做出相應(yīng)的改變* 改變尺寸的窗口，在窗口改變尺寸時(shí)增加相應(yīng)在的縱向、橫向滾動(dòng)條，以方便用戶使用窗體上的控件2.界面顏色搭配使用恰當(dāng)?shù)念伾?，可以使軟件的界面看起來更加?guī)范：a.統(tǒng)一色調(diào)針對(duì)軟件類型以及用戶工作環(huán)境選擇恰當(dāng)色調(diào)，如：安全軟件，根據(jù)工業(yè)標(biāo)準(zhǔn)，可以選取黃色。綠色體現(xiàn)環(huán)保，藍(lán)色表現(xiàn)時(shí)尚清新、紫色表現(xiàn)浪漫等等，淡色可以使人舒適，暗色做背景使人不覺得累等。b.與統(tǒng)一，讀取系統(tǒng)標(biāo)準(zhǔn)色表c.遵循對(duì)比原則在淺色背景上使用深色文字，深色背景上使用淺色

4、文字，如藍(lán)色文字以白色背景容易識(shí)別，而在紅色背景則不易分辨。除非特殊場(chǎng)合，杜絕使用對(duì)比強(qiáng)烈，讓人產(chǎn)生憎惡感的顏色d.整個(gè)界面色彩盡量少的使用類別不同的顏色e.顏色方案也許會(huì)因?yàn)轱@示器、顯卡、操作系統(tǒng)等原因顯示出不同的色彩f.針對(duì)色盲、色弱用戶，可以使用特殊指示符e.顏色方案也許會(huì)因?yàn)轱@示器、顯卡、操作系統(tǒng)等原因顯示出不同的色彩f.針對(duì)色盲、色弱用戶，可以使用特殊指示符三、GUI風(fēng)格的一致性界面的一致性既包括使用標(biāo)準(zhǔn)的控件，也指相同的信息表現(xiàn)方法，如在字體、標(biāo)簽風(fēng)格、顏色、術(shù)語、顯示錯(cuò)誤信息等方面確保一致。1.在不同分辨率下的美觀程度軟件界面要有一個(gè)默認(rèn)的分辨率，而在其他分辨率下也可以運(yùn)行，分別

5、在800600，1024768，1280768，12801024，12001600分辨率下的大字體、小字體下的界面表現(xiàn)。2.界面布局要一致如所有窗口按鈕的位置和對(duì)齊方式要保持一致。3.界面的外觀要一致如控件的大小、顏色、背景和顯示信息等屬性要一致，一些需要特殊處理或有特殊要求的地方除外。4.界面所用顏色要一致顏色的前后一致會(huì)使整個(gè)應(yīng)用軟件有同樣的觀感，反之會(huì)讓用戶覺得所操作的軟件雜亂無章，沒有規(guī)則或言。5.操作方法要一致如雙擊其中的項(xiàng)，觸發(fā)某事件，那么雙擊任何其他列表框中的項(xiàng)，都應(yīng)該有同樣的事件發(fā)生。6.控件風(fēng)格、控件功能要專一a.不錯(cuò)誤的使用控件例如使用Button樣式做Table的功能，拿

6、主菜單條顯示版權(quán)信息等b.一個(gè)控件只做單一功能，不復(fù)用如果在特殊情況下出現(xiàn)復(fù)用的時(shí)候，可采用以下兩種方法解決：* 分組，使用雙份控件* 使用Table頁，給用戶很明顯的視覺變化7.標(biāo)簽和訊息的措詞要一致如在提示、菜單和幫助中產(chǎn)生相同的術(shù)語。8.標(biāo)簽中文字信息的對(duì)齊方式要一致如某類描述信息的標(biāo)題行定為居中，那么其他類似的功能也應(yīng)該與此一致。9.快捷鍵在各個(gè)配置項(xiàng)上語義保持一致如Tab鍵的習(xí)慣用法是閱讀順序從從左到右，從上到下。在定義軟件快捷鍵時(shí)也可以將現(xiàn)有一些快捷鍵的屬性作為參考，如表1-3-1（見附件）列出了常用的快捷鍵及其功能。四、GUI界面操作可定制性界面的可定制性大致可分為以下幾個(gè)特性：

7、1.界面元素可定制允許用戶定義工具欄、狀態(tài)欄是否顯示，工具欄顯示在界面上的位置；允許用戶定義菜單的位置等。2.工具欄可定制不同用戶對(duì)常用工具的使用是不同的，因此允許用戶建立新的工具欄，選擇要顯示的工具欄，定制工具欄上的按鈕等功能在軟件系統(tǒng)中經(jīng)常被用到3.統(tǒng)計(jì)檢索可定制對(duì)于某些特殊行業(yè)的軟件可以提供統(tǒng)計(jì)檢索的可定制性，在充分了解用戶需求的基礎(chǔ)上制定大量的安全供用戶選擇。所包含各類元素標(biāo)準(zhǔn)的定制GUI的元素大致可分為以下幾個(gè)方面：1.窗口2.菜單3.圖標(biāo)4.控件5.鼠標(biāo)6. 文字7. 聯(lián)機(jī)幫助界面設(shè)計(jì)的行業(yè)標(biāo)準(zhǔn)總結(jié)二一、GUI窗口的標(biāo)準(zhǔn)窗口是顯示設(shè)備中的一個(gè)區(qū)域，用于觀看對(duì)象、對(duì)象相關(guān)信息以及應(yīng)用

8、與對(duì)象的動(dòng)作進(jìn)行交互。從外觀上來說，通常窗口是由標(biāo)題、邊框、菜單、工作區(qū)、滾動(dòng)條等組成。窗口的標(biāo)題欄可以進(jìn)行打開、關(guān)閉、創(chuàng)建、縮放、移動(dòng)、刪除、重疊等操作好的GUI窗口應(yīng)該具備以下標(biāo)準(zhǔn)：1.窗口控件的大小、對(duì)齊方向、顏色、背景等屬性的設(shè)置和程序設(shè)計(jì)規(guī)約相一致2.顯示相關(guān)的下拉菜單、工具條、滾動(dòng)條、對(duì)話框、按鈕、圖標(biāo)和其他控制，既能正確顯示又能調(diào)用3.若窗口無法顯示，所有內(nèi)容能夠改變大小、移動(dòng)和滾動(dòng)4.活動(dòng)窗口能夠反顯加亮5.窗口能夠正確的關(guān)閉6.多個(gè)窗口疊加時(shí)窗口的名稱正確顯示7.窗口的數(shù)據(jù)能夠利用、功能鍵、方向前頭和操作8.當(dāng)窗口被覆蓋并重新調(diào)用后，窗口能夠正確再生9.如果使用多任務(wù)，所有的

9、窗口能夠被實(shí)時(shí)更新10.窗口支持最小化和最大化或放大11.窗口上的控件隨著窗體的縮放而縮放12.父窗體支持縮放時(shí)，子窗體也應(yīng)該支持縮放13. 一個(gè)窗口中按Tab鍵，移動(dòng)聚焦按順序移動(dòng)。先從左至右，再從上到下14.子窗口位置在父窗口的左上角或正中，正上方1/4處為易吸引用戶注意力的位。父窗口或主窗口的中心位置應(yīng)該在對(duì)角線焦點(diǎn)附近，如下圖2-1-2所示15.當(dāng)多個(gè)子窗口彈出時(shí)依次向右下方偏移，并且顯示出窗口標(biāo)題，如下圖2-1-3所示16.重要的命令按鈕與使用頻繁的按鈕放在了界面醒目的位置17.與正在進(jìn)行的操作無關(guān)的按鈕應(yīng)該加以屏蔽18.按鈕大小要與界面的大小和空間協(xié)調(diào)19.窗口中所包含的標(biāo)簽左對(duì)齊

10、排列20.多窗口的切換響應(yīng)時(shí)間不宜過長(zhǎng)二、GUI菜單的標(biāo)準(zhǔn)菜單是否易用主要體現(xiàn)在它能否提供線索幫助用戶識(shí)別，而不用強(qiáng)迫用戶去記憶，一個(gè)好的菜單設(shè)置可以分為以下幾個(gè)方面：1.菜單設(shè)置符合軟件的需求2.菜單項(xiàng)的措詞準(zhǔn)確，能夠表達(dá)出所要進(jìn)行設(shè)置的功能3.菜單項(xiàng)的順序合理，具有邏輯關(guān)聯(lián)的項(xiàng)目集中放置4.圖形布局一致5.菜單設(shè)置在窗體標(biāo)題欄的下方三、GUI圖標(biāo)的標(biāo)準(zhǔn)圖標(biāo)是表示實(shí)體信息簡(jiǎn)潔、抽象的符號(hào)，它還可以作為可視按鈕項(xiàng)，當(dāng)被選中激活時(shí)，可以完成指定的功能。那么圖標(biāo)的設(shè)計(jì)當(dāng)中應(yīng)該著重考慮哪些問題呢，以下提供幾點(diǎn)可供參考：1.圖標(biāo)的設(shè)置符合常規(guī)的表達(dá)習(xí)慣2.不同的目標(biāo)采用不同的圖標(biāo)3.圖標(biāo)具有清晰的輪廓

11、，輪廓清晰的圖標(biāo)可保證圖像在不同背景色上都具有較好的效果4.選擇合適的尺寸來定義圖標(biāo)。Windows XP系統(tǒng)的圖標(biāo)有四種尺寸（以像素為單位）可作為參考： 4848， 3232，2424以及1616，圖標(biāo)大小的選取決定于工具欄所定義的寬度5.圖標(biāo)的外形與實(shí)際功能相似，應(yīng)盡量避免抽象。這樣的圖標(biāo)可以使用戶很輕松、容易地認(rèn)識(shí)圖標(biāo)的作用6.在圖標(biāo)上加以標(biāo)注，用來說明圖標(biāo)所完成的功能7.圖標(biāo)放置在菜單欄的下方四、GUI中控件的標(biāo)準(zhǔn)軟件系統(tǒng)功能的實(shí)現(xiàn)與控件是密不可分的，各控件位置的擺放直接影響到軟件的使用，及其美觀程度。下面舉例說明軟件系統(tǒng)中最常用到的控件對(duì)其元素間距、擺放位置進(jìn)行說明：1.控件元素的間

12、距a.單個(gè)元素間距* 輸入框之間垂直間距為5px* Label文本標(biāo)簽和輸入元素之間水平間距為8-22px* 復(fù)選框、單選按鈕之間垂直間距為8px* 多種元素混合垂直排列時(shí)，復(fù)選框和單選按鈕邊上的間距無論在什么情況下都為8pxb.元素分組間距* 窗口邊框和內(nèi)容區(qū)域的四周邊距為11px；* 父組和子組之間的四周間距為10px；* 分組框邊框和內(nèi)部?jī)?nèi)容區(qū)域的四周邊距為5px；* 復(fù)選框組、單選框組的組水平間距為15px2.按鈕的位置，如下表2-4-1對(duì)按鈕擺放位置的規(guī)則做了總結(jié)五、鼠標(biāo)、手指、觸屏筆、利器等在GUI中的標(biāo)準(zhǔn)用戶會(huì)把鼠標(biāo)移進(jìn)、移出窗口，或當(dāng)光標(biāo)在窗口，或當(dāng)光標(biāo)在窗口中，用戶按下、釋放

13、鼠標(biāo)鍵，鼠標(biāo)是否準(zhǔn)確、靈活，對(duì)一個(gè)軟件系統(tǒng)來說也很重要。以下幾點(diǎn)標(biāo)準(zhǔn)可作為在軟件系統(tǒng)中鼠標(biāo)設(shè)計(jì)的參考：1.在整個(gè)交互的過程中，可以識(shí)別鼠標(biāo)操作2.多次點(diǎn)擊鼠標(biāo)后，仍能夠正確識(shí)別3.鼠標(biāo)有多個(gè)按鈕的情況下，能夠正確識(shí)別每個(gè)按鈕所要完成的功能4.光標(biāo)、處理指示器和識(shí)別指針隨操作恰當(dāng)?shù)母淖?.點(diǎn)擊選中時(shí)，鼠標(biāo)指針停留在選中內(nèi)容上，而不會(huì)滑動(dòng)6.支持鼠標(biāo)滑輪上下翻動(dòng)操作7.對(duì)于相同種類的元素采用相同的操作激活8.采用動(dòng)態(tài)圖標(biāo)形象的表示出當(dāng)前的操作，如用水漏表示系統(tǒng)忙，用手型表示可以點(diǎn)擊等9.鼠標(biāo)無規(guī)則點(diǎn)擊時(shí)不會(huì)產(chǎn)生不良后果10.單擊鼠標(biāo)右鍵彈出快捷菜單，取消右鍵后該菜單隱藏11.鼠標(biāo)光標(biāo)樣式統(tǒng)一，盡量

14、使用系統(tǒng)標(biāo)準(zhǔn)，杜絕出現(xiàn)重復(fù)的情況六、GUI文字的標(biāo)準(zhǔn)文字在視覺上向用戶傳達(dá)各種信息，界面文字包括界面文字的字體和界面文字的用語兩個(gè)方面，那這兩方面都有哪些要求呢？以下分別闡述。1.字體a.使用統(tǒng)一字體，如規(guī)定軟件系統(tǒng)的中文字體為“宋體”，英文及數(shù)據(jù)采用“Times New Roman”b.所有控件、描述信息盡量使用大小統(tǒng)一的字體屬性，除了特殊提示信息、加強(qiáng)顯示等例外情況2.文字表達(dá)提示信息、幫助文檔文字表達(dá)遵循以下準(zhǔn)則：a.口語化描述，用詞客氣多用您、請(qǐng)，不要用或少用專業(yè)術(shù)語，杜絕錯(cuò)別字b.標(biāo)點(diǎn)符號(hào)（斷句、逗號(hào)、句號(hào)、頓號(hào)、分號(hào)）的用法要統(tǒng)一， 提示信息比較多的話要進(jìn)行分段c.警告、信息、錯(cuò)誤 使用對(duì)應(yīng)的表示方法d.使用統(tǒng)一的語言描述，例如一個(gè)關(guān)閉功能按鈕，可以描述為退出、返回、關(guān)閉，則應(yīng)該統(tǒng)一規(guī)定e.根據(jù)用戶不同采用相應(yīng)的詞語語氣語調(diào)七、GUI聯(lián)機(jī)幫助的標(biāo)