您好,歡迎來到一站式眾包服務平臺-威客牛網!
當前位置:威客牛首頁 > 知識百科 > IT軟件 > UI設計 > 網頁界面設計規(guī)范

網頁界面設計規(guī)范

2022-12-04作者:網友投稿
界面是軟件與用戶交互的最直接的層,界面的好壞決定用戶對軟件的第一印象。而且設計良好的界面能夠引導用戶自己完成相應的操作,起到向導的作用。同時界面如同人的面孔,具有吸引用戶的直接優(yōu)勢。設計合理的界面能給用戶帶來輕松愉悅的感受和成功的感覺,相反由于界面設計的失敗,讓用戶有挫敗感,再實用強大的功能都可能在用戶的畏懼與放棄中付諸東流。目前界面的設計引起軟件設計人員的重視的程度還遠遠不夠,直到最近網頁制作的興起,才受到專家的青睞。而且設計良好的界面由于需要具有藝術美的天賦而遭拒絕。以下是贏在威客網小編整理的網頁界面設計規(guī)范。

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

一、易用性:

按鈕名稱應該易懂,用詞準確,摒棄模棱兩可的字眼,要與同一界面上的其他按鈕易于區(qū)分,能望文知意最好。理想的情況是用戶不用查閱幫助就能知道該界面的功能并進行相關的正確操作。

易用性細則:

1、完成相同或相近功能的按鈕用Frame框起來,常用按鈕要支持快捷方式。

2、完成同一功能或任務的元素放在集中位置,減少鼠標移動的距離。

3、按功能將界面劃分局域塊,用Frame框括起來,并要有功能說明或標題。

4、界面要支持鍵盤自動瀏覽按鈕功能,即按Tab鍵的自動切換功能。

5、界面上首先應輸入的和重要信息的控件在Tab順序中應當靠前,位置也應放在窗口上較醒目的位置。

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

7、分頁界面要支持在頁面間的快捷切換,常用組合快捷鍵Ctrl+Tab。

8、默認按鈕要支持Enter及選操作,即按Enter后自動執(zhí)行默認按鈕對應操作。

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

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

11、復選框和選項框按選擇機率的高底而先后排列。

12、復選框和選項框要有默認選項,并支持Tab選擇。

13、選項數相同時多用選項框而不用下拉列表框。

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

15、選項數較少時使用選項框,相反使用下拉列表框。

16、專業(yè)性強的軟件要使用相關的專業(yè)術語,通用性界面則提倡使用通用性詞眼。

二、規(guī)范性:


通常界面設計都按Windows界面的規(guī)范來設計,即包含"菜單條、工具欄、工具廂、狀態(tài)欄、滾動條、右鍵快捷菜單"的標準格式,可以說:界面遵循規(guī)范化的程度越高,則易用性相應的就越好。小型軟件一般不提供工具廂。

規(guī)范性細則:

1、常用菜單要有命令快捷方式。

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

3、菜單前的圖標要盡量能直觀的代表要完成的操作。

4、菜單深度一般要求最多控制在三層以內。

5、工具欄要求可以根據用戶的要求自己選擇定制。

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

7、工具欄中的每一個按鈕要有及時提示信息。

8、一條工具欄的長度最長不能超出屏幕寬度。

9、工具欄的圖標能直觀的代表要完成的操作。

10、系統(tǒng)常用的工具欄設置默認放置位置。

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

12、工具廂要具有可增減性,由用戶自己根據需求定制。

13、工具廂的默認總寬度不要超過屏幕寬度的1/5。

14、狀態(tài)條要能顯示用戶切實需要的信息,常用的有:目前的操作者、系統(tǒng)狀態(tài)、用戶位置、用戶信息、提示信息、錯誤信息等,如果某一操作需要的時間較長,還應該顯示進度條和進程提示。

15、滾動條的長度要根據顯示信息的長度或寬度能及時變換,以利于用戶了解顯示信息的位置和百分比。

16、狀態(tài)條的高度以放置5號字為宜,滾動條的寬度比狀態(tài)條的略窄。

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

18、菜單和狀態(tài)條中通常使用5號字體。工具條一般比菜單要寬,但不要寬的太多,否則看起來很不協(xié)調。

19、右鍵快捷菜單采用與菜單相同的準則。
免費查詢商標注冊