close

資料來源:藍色理想 http://bbs.blueidea.com/thread-789211-1-1.html

 

介面是軟體與用戶交互的最直接的層,介面的好壞決定用戶對軟體的第一印象。而且設計良好的介面能夠引導用戶自己完成相應的操作,起到嚮導的作用。同時介面如同人的面孔,具有吸引用戶的直接優勢。設計合理的介面能給用戶帶來輕鬆愉悅的感受和成功的感覺,相反由於介面設計的失敗,讓用戶有挫敗感,再實用強大的功能都可能在用戶的畏懼與放棄中付諸東流。目前介面的設計引起軟體設計人員的重視的程度還遠遠不夠,直到最近網頁製作的興起,才受到專家的青睞。而且設計良好的介面由於需要具有藝術美的天賦而遭拒絕。

 

目前流行的介面風格有三種方式:多表單、單表單以及資源管理器風格,無論那種風格,以下規則是應該被重視的。

 

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. 對常用的功能表要有快捷命令方式,組合原則。
  9. 對與進行的操作無關的功能表要用遮罩的方式加以處理,如果採用動態載入方式——即只有需要的功能表才顯示——最好。
  10. 功能表前的圖示不宜太大,與字高保持一直最好。
  11. 主菜單的寬度要接近,字數不應多於四個,每個功能表的字數能相同最好。
  12. 主功能表數目不應太多,最好為單排佈置。

 

 

7:獨特性:

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

  1. 安裝介面上應有單位介紹或產品介紹,並有自己的圖示。
  2. 主介面,最好是大多數界
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 fredevangigi 的頭像
    fredevangigi

    設計筆記本

    fredevangigi 發表在 痞客邦 留言(0) 人氣()