界面設計規範

界面設計規範

     我在工作中總結了一些有關界面設計與測試的規範，與大家共享。 界面設計與測試規則界面是軟體與使用者互動的最直接的層，界面的好壞決定使用者對軟體的第一印象。而且設計良好的界面能夠引導使用者自己完成相應的操作，起到向導的作用。同時界面如同人的面孔，具有吸引使用者的直接優勢。設計合理的界面能給使用者帶來輕松愉悅的感受和成功的感覺，相反由于界面設計的失敗，讓使用者有挫敗感，再實用強大的功能都可能在使用者的畏懼與放棄中付諸東流。目前界面的設計引起軟體設計人員的重視的程度還遠遠不夠，直到最近網頁制作的興起，才受到專家的青睐。而且設計良好的界面由于需要具有藝術美的天賦而遭拒絕。

     目前流行的界面風格有三種方式：多窗體、單窗體以及資料總管風格，無論那種風格，以下規則是應該被重視的。

1：易用性：

按鈕名稱應該易懂，用詞準确，屏棄模楞兩可的字眼，要與同一界面上的其他按鈕易于區分，能望文知意最好。理想的情況是使用者不用查閱幫助就能知道該界面的功能并進行相關的正确操作。

易用性細則：

1):完成相同或相近功能的按鈕用Frame框起來，常用按鈕要支援快捷方式。

2):完成同一功能或任務的元素放在集中位置，減少滑鼠移動的距離。

3):按功能将界面劃分局域塊，用Frame框括起來,并要有功能說明或标題。

4):界面要支援鍵盤自動浏覽按鈕功能，即按Tab鍵的自動切換功能。

5):界面上首先應輸入的和重要資訊的控件在Tab順序中應當靠前,位置也應放在視窗上較醒目的位置。

6):同一界面上的控件數最好不要超過10個，多于10個時可以考慮使用分頁界面顯示。

7):分頁界面要支援在頁面間的快捷切換，常用組合快捷鍵Ctrl+Tab

8):預設按鈕要支援Enter及選操作，即按Enter後自動執行預設按鈕對應操作。

9):可寫控件檢測到非法輸入後應給出說明并能自動獲得焦點。

10):Tab鍵的順序與控件排列順序要一直，目前流行總體從上到下，同時行間從左到右的方式。

11):複選框和選項框按選擇幾率的高底而先後排列。

12):複選框和選項框要有預設選項，并支援Tab選擇。

13):選項數相同時多用選項框而不用下拉清單框。

14):界面空間較小時使用下拉框而不用選項框。

15):選項數叫少時使用選項框，相反使用下拉清單框。

16):專業性強的軟體要使用相關的專業術語，通用性界面則提倡使用通用性詞眼。

2： 規範性：

通常界面設計都按Windows界面的規範來設計，即包含“菜單條、工具欄、工具廂、狀态欄、滾動條、右鍵快捷菜單”的标準格式，可以說：界面遵循規範化的程度越高，則易用性相應的就越好。小型軟體一般不提供工具箱。

規範性細則：

1):常用菜單要有指令快捷方式。

2):完成相同或相近功能的菜單用橫線隔開放在同一位置。

3):菜單前的圖示能直覺的代表要完成的操作。

4):菜單深度一般要求最多控制在三層以内。

5):工具欄要求可以根據使用者的要求自己選擇定制。

6):相同或相近功能的工具欄放在一起。

7):工具欄中的每一個按鈕要有及時提示資訊。

8):一條工具欄的長度最長不能超出螢幕寬度。

9): 工具欄的圖示能直覺的代表要完成的操作。

10):系統常用的工具欄設定預設放置位置。

11):工具欄太多時可以考慮使用工具廂。

12):工具廂要具有可增減性，由使用者自己根據需求定制。

13):工具廂的預設總寬度不要超過螢幕寬度的1/5。

14): 狀态條要能顯示使用者切實需要的資訊，常用的有：

目前的操作、系統狀态、使用者位置、使用者資訊、提示資訊、錯誤資訊等，如果某一操作需要的時間較長，還應該顯示進度條和程序提示。

15)：滾動條的長度要根據顯示資訊的長度或寬度能及時變換，以利于使用者了解顯示資訊的位置和百分比。

16)：狀态條的高度以放置五号字為宜，滾動條的寬度比狀态條的略窄。

17)：菜單和工具條要有清楚的界限;菜單要求凸出顯示，這樣在移走工具條時仍有立體感。

18)：菜單和狀态條中通常使用5号字型。工具條一般比菜單要寬，但不要寬的太多，否則看起來很不協調。

19):右鍵快捷菜單采用與菜單相同的準則。

3：幫助設施：

系統應該提供詳盡而可靠的幫助文檔，在使用者使用産生迷惑時可以自己尋求解決方法。

幫助設施細則：

1)：幫助文檔中的性能介紹與說明要與系統性能配套一緻。(我們的系統幫助文檔都是系統的祖先時期的說明，讓人困惑)。

2)：打包新系統時，對作了修改的地方在幫助文檔中要做相應的修改。

3)：操作時要提供及時調用系統幫助的功能。常用F1。

4)：在界面上調用幫助時應該能夠及時定位到與該操作相對的幫助位置。也就是說幫助要有即時針對性。

5)：最好提供目前流行的聯機幫助格式或HTML幫助格式。

6)：使用者可以用關鍵詞在幫助索引中搜尋所要的幫助，當然也應該提供幫助主題詞。

7)：如果沒有提供書面的幫助文檔的話，最好有列印幫助的功能。

8 )：在幫助中應該提供我們的技術支援方式，一旦使用者難以自己解決可以友善的尋求新的幫助方式。

4：合理性：

螢幕對角線相交的位置是使用者直視的地方，正上方四分之一處為易吸引使用者注意力的位置，在放置窗體時要注意利用這兩個位置。

合理性細則：

1)：父窗體或主窗體的中心位置應該在對角線焦點附近。

2)：子窗體位置應該在主窗體的左上角或正中。

3)：多個子窗體彈出時應該依次向右下方偏移，以顯示窗體出标題為宜。

4)：重要的指令按鈕與使用較頻繁的按鈕要放在界面上注目的位置。

5)：錯誤使用容易引起界面退出或關閉的按鈕不應該放在易點位置。橫排開頭或最後與豎排最後為易點位置。

6)：與正在進行的操作無關的按鈕應該加以屏蔽(Windows中用灰色顯示，沒法使用該按鈕)。

7)：對可能造成資料無法恢複的操作必須提供确認資訊,給使用者放棄選擇的機會。

8)：非法的輸入或操作應有足夠的提示說明。

9): 對運作過程中出現問題而引起錯誤的地方要有提示，讓使用者明白錯誤出處，避免形成無限期的等待。

10):提示、警告、或錯誤說明應該清楚、明了、恰當。

5：美觀與協調性：

界面應該大小适合美學觀點，感覺協調舒适，能在有效的範圍内吸引使用者的注意力。

美觀與協調性細則：

1): 長寬接近黃金點比例，切忌長寬比例失調、或寬度超過長度。

2): 布局要合理,不宜過于密集，也不能過于空曠，合理的利用空間。

3): 按鈕大小基本相近，忌用太長的名稱，免得占用過多的界面位置。

4): 按鈕的大小要與界面的大小和空間要協調。

5): 避免空曠的界面上放置很大的按鈕。

6)：放置完控件後界面不應有很大的空缺位置。

7): 字型的大小要與界面的大小比例協調, 通常使用的字型中宋體9-12較為美觀，很少使用超過12号的字型。

8): 前景與背景色搭配合理協調，反差不宜太大，最好少用深色，如大紅、大綠等。常用色考慮使用Windows

界面色調。

9): 如果使用其他顔色，主色要柔和，具有親和力與磁力，堅決杜絕刺目的顔色。

10): 大型系統常用的主色有"#E1E1E1"、"#EFEFEF"、"#C0C0C0"等。

11): 界面風格要保持一緻，字的大小、顔色、字型要相同，除非是需要藝術處理或有特殊要求的地方。

12): 如果窗體支援最小化和最大化或放大時，窗體上的控件也要随着窗體而縮放；切忌隻放大窗體而忽略控

件的縮放。

13)：對于含有按鈕的界面一般不應該支援縮放，即右上角隻有關閉功能。

14): 通常父窗體支援縮放時，子窗體沒有必要縮放。

15)：如果能給使用者提供自定義界面風格則更好，由使用者自己選擇顔色、字型等。

6：菜機關置：

菜單是界面上最重要的元素，菜機關置按照按功能來組織。

菜單設測試細則：

1)：菜單通常采用“常用--主要--次要--工具--幫助”的位置排列，符合流行的Windows風格。

2):常用的有“檔案”、“編輯”，“檢視”等，幾乎每個系統都有這些選項，當然要根據不同的系統有所取舍。

3):下拉菜單要根據菜單選項的含義進行分組，并且按照一定的規則進行排列，用橫線隔開。

4): 一組菜單的使用有先後要求或有向導作用時，應該按先後次序排列。

5): 沒有順序要求的菜單項按使用頻率和重要性排列，常用的放在開頭，不常用的靠後放置；重要的放在開頭，次要的放在後邊。

6): 如果菜單選項較多，應該采用加長菜單的長度而減少深度的原則排列。

7): 菜單深度一般要求最多控制在三層以内。

8): 對常用的菜單要有快捷指令方式，組合原則見8。

9):對與進行的操作無關的菜單要用屏蔽的方式加以處理，如果采用動态加載方式——即隻有需要的菜單才顯示——最好。

10)：菜單前的圖示不宜太大，與字高保持一緻最好。

11):主菜單的寬度要接近，字數不應多于四個，每個菜單的字數能相同最好。

12)：主菜單數目不應太多，最好為單排布置。

7:獨特性：

如果一味的遵循業界的界面标準，則會喪失自己的個性.在架構符合以上規範的情況下，設計具有自己獨特風格的界面尤為重要。尤其在商業軟體流通中有着很好的遷移默化的廣告效用。

1):安裝界面上應有機關介紹或産品介紹，并有自己的圖示。

2):主界面，最好是大多數界面上要有公司圖示。

3):登入界面上要有本産品的标志，同時包含公司圖示。

4):幫助菜單的“關于”中應有版權和産品資訊。

5):公司的系列産品要保持一直的界面風格，如背景色、字型、菜單排列方式、圖示、安裝過程、按鈕用語等應該大體一緻。

8：快捷方式的組合

在菜單及按鈕中使用快捷鍵可以讓喜歡使用鍵盤的使用者操作得更快一些 在西文Windows及其應用軟體中快捷鍵的使用大多是一緻的。

菜單中：

1):面向事務的組合有:

Ctrl-D 删除 ；Ctrl-F 尋找 ；Ctrl –H替換；Ctrl-I 插入 ；Ctrl-N 新記錄 ；Ctrl-S 儲存 Ctrl-O 打開。

2)：清單:

Ctrl-R ，Ctrl-G定位；Ctrl-Tab下一分頁視窗或反序浏覽同一頁面控件；。

3):編輯:

作者：不老神仙

本文版權歸作者和共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接，否則保留追究法律責任的權利。