頁面的規(guī)范性
通常網(wǎng)站設(shè)計都是按照Windows界面的標準設(shè)計的,包括“菜單欄、工具欄、工具箱、狀態(tài)欄、滾動條、右鍵快捷菜單”等標準格式??梢哉f,接口的標準化程度越高,Ease of use 也相應越好。小軟件一般不提供工具箱。
要求:
常用菜單有命令快捷方式。
完成相同或相似功能的菜單用水平線分隔并放置在相同的位置。
菜單前面的圖標可以直觀的表示要完成的操作。
菜單的深度一般要求控制在最多三層以內(nèi)。
工具欄要求可根據(jù)用戶要求定制。
具有相同或相似功能的工具欄組合在一起。
工具欄中的每個按鈕都應該有及時的提示信息。
工具欄的最大長度不能超過屏幕寬度。
工具欄中的圖標可以直觀地表示要完成的操作。
設(shè)置系統(tǒng)常用工具欄的默認位置。
當您的工具欄太多時,請考慮使用工具箱。
工具箱應可增減,用戶可根據(jù)需要定制。
工具箱的默認總寬度不應超過屏幕寬度的1/5。
狀態(tài)欄應該能夠顯示用戶實際需要的信息。常用的有:
當前操作、系統(tǒng)狀態(tài)、用戶位置、用戶信息、提示信息、錯誤信息等。如果某項操作耗時較長,還應顯示進度條和進程提示。
滾動條的長度應根據(jù)顯示信息的長度或?qū)挾燃皶r變化,以便用戶了解顯示信息的位置和百分比。
狀態(tài)欄的高度適合放五個好字,滾動條的寬度比狀態(tài)欄略窄。
菜單和工具欄之間應該有明確的界限;菜單應該突出顯示,以便在刪除工具欄時它仍然具有三維效果。
字體大小5 通常用于菜單和狀態(tài)欄。工具欄一般比菜單寬,但也不能太寬,否則會顯得不協(xié)調(diào)。
右鍵單擊上下文菜單遵循與菜單相同的準則。
系統(tǒng)易用性
易用性是指頁面上的功能遵循約定俗成,例如:按鈕的名稱易于理解,用詞準確,易于與同一界面上的其他按鈕區(qū)分開來,可以理解為文本。這樣用戶就可以在不查閱幫助的情況下了解頁面的功能并進行相關(guān)的正確操作。
要求:
打開新界面,光標默認停留在第一個要輸入的文本框;
將執(zhí)行相同或相似功能的按鈕放在一起以減少鼠標移動的距離,常用按鈕必須支持快捷鍵;
將界面按功能劃分為局部塊,用Frame框圍起來,并有功能說明或標題;
界面應支持鍵盤自動瀏覽按鈕功能,即按Tab鍵自動切換功能;
界面上應該先進入的控件和重要信息應該放在Tab順序的前面,位置也應該放在窗口上比較醒目的位置;
同一界面的控件數(shù)量不要超過10個,超過10個可以考慮使用分頁界面顯示;
分頁界面應支持頁面間快速切換,常用組合快捷鍵Ctrl+Tab;
默認按鈕必須支持回車操作,即回車后會自動執(zhí)行默認按鈕對應的操作;
可寫控件檢測到非法輸入后,應給出解釋并自動獲得焦點;
按鈕和控件的順序必須相同。目前大勢是從上到下,同時線與線之間的方式是從左到右;
復選框和選項框按照選擇概率的高低依次排列;
復選框和選項框必須有默認選項,并支持Tab選擇;
When the number of options is the same, use the option box instead of the drop-down list box;
當界面空間較小時,使用下拉框代替選項框;
選項數(shù)量少時使用選項框,改用下拉列表框;
專業(yè)軟件應使用相關(guān)術(shù)語,通用界面提倡使用通用術(shù)語;
輸入安全性要求
有必要在界面上建立一些規(guī)則來控制輸入錯誤的概率,這將大大減少用戶錯誤對系統(tǒng)造成的損害。開發(fā)者應盡量考慮各種可能出現(xiàn)的問題,將出錯的可能性降到最低。例如,當程序出現(xiàn)保護錯誤而退出系統(tǒng)時,用戶就會對軟件失去信心,因為這意味著用戶不得不打斷思路,花時間和精力重新登錄,而所有的已執(zhí)行的操作將丟失,因為它們未保存。因此,在頁面設(shè)計時需要根據(jù)規(guī)則對輸入進行校驗。
要求:
排除可能導致程序異常終止的錯誤;
應檢查用戶輸入的無效數(shù)據(jù);
使用相關(guān)控件限制用戶輸入值的類型;
當用戶面臨兩個或多個選擇時,請使用單選按鈕,當可能有更多選擇時,可以使用復選框;
i>當選項特別多時,可以采用列表框,下拉式列表框;如果一味的遵循業(yè)界的界面標準,則會喪失自己的個性.在框架符合以上規(guī)范的情況下,設(shè)計具有自己獨特風格的界面尤為重要。尤其在商業(yè)軟件流通中有著很好的遷移默化的廣告效用
要求:
- 安裝界面上應有單位介紹或產(chǎn)品介紹,并有自己的圖標;
- 主界面,最好是大多數(shù)界面上要有公司圖標;
- 登錄界面上要有本產(chǎn)品的標志,同時包含公司圖標;
- 幫助菜單的"關(guān)于"中應有版權(quán)和產(chǎn)品信息;
- 公司的系列產(chǎn)品要保持一致的界面風格,如背景色、字體、菜單排列方式、圖標、安裝過程、按鈕用語等應該大體一致;
多窗口的應用與系統(tǒng)資源
設(shè)計良好的軟件不僅要有完備的功能,而且要盡可能的占用最低限度的資源,因此在出現(xiàn)多窗口的情況下需要避免下述一些情況。
要求:
- 在多窗口系統(tǒng)中,有些界面要求必須保持在最頂層,避免用戶在打開多個窗口時,不停的切換甚至最小化其他窗口來顯示該窗口;
- 在主界面載入完畢后自動卸出內(nèi)存,讓出所占用的WINDOWS系統(tǒng)資源;
- 關(guān)閉所有窗體,系統(tǒng)退出后要釋放所占的所有系統(tǒng)資源 ,除非是需要后臺運行的系統(tǒng);
- 盡量防止對系統(tǒng)的獨占使用;
在使用javaScript來進行頁面動態(tài)控制編程時,需要對程序中的頁面元素和功能操作的名稱引用進行約定:
頁 頭: header
外 套: wrap
頁 腳: foot
內(nèi) 容: content
頁面主體: main
容 器: container
標 題: title
當前的: current
主導航: mainnav
頂導航: topnav
子導航: subnav
邊導航: sidebar
左導航: leftsidebar
右導航: rightsidebar
欄目: column
面包屑: breadcrumb (即頁面所處位置導航提示)
菜 單: menu
子菜單: submenu
菜單內(nèi)容: menucontent
菜單容量: menucontainer
按 鈕: button
表 單: form
頁 簽: tab
文章列表: list
滾 動: scroll
提示信息: msg
摘 要: summary
標 簽: tag
標簽文字: tagTitle
標簽內(nèi)容: tagContent
當前標簽: tagCurrent/currentTag
搜索范圍: range
圖 標: icon
當前位置: currentPath
列 定 義: column1of3 (三列中的第一列)
column2of3 (三列中的第二列)
column3of3 (三列中的第三列)
商 標: label
旗 志: logo
標 語: banner
注 釋: note
搜 索: search
搜索關(guān)鍵字:keyword
登 陸: Login
注 冊: regsiter
熱 點: hot
新 聞: news
下 載: download
打 印: print
版 權(quán): copyright
服 務(wù): service
友情鏈接: friendlink
版 權(quán): copyright
小技巧: tips
欄目標題: title
加 入: joinus
指 南: guild
服 務(wù): service
狀 態(tài): status
投 票: vote
合作伙伴: partner
其它相關(guān)注意事項
1.一律小寫;
2.盡量用英文;
3.不加中杠和下劃線;
4.盡量不縮寫,除非一看就明白的單詞
DHTMLx控件
控件的命名
控件的外觀屬性
控件使用規(guī)則
Flex控件
控件的命名
控件的外觀屬性
控件使用規(guī)則
我們專注高端建站,小程序開發(fā)、軟件系統(tǒng)定制開發(fā)、BUG修復、物聯(lián)網(wǎng)開發(fā)、各類API接口對接開發(fā)等。十余年開發(fā)經(jīng)驗,每一個項目承諾做到滿意為止,多一次對比,一定讓您多一份收獲!