頁面的規(guī)范性

通常網(wǎng)站設(shè)計(jì)都是按照Windows界面的標(biāo)準(zhǔn)設(shè)計(jì)的，包括“菜單欄、工具欄、工具箱、狀態(tài)欄、滾動(dòng)條、右鍵快捷菜單”等標(biāo)準(zhǔn)格式?？梢哉f，接口的標(biāo)準(zhǔn)化程度越高，Ease of use 也相應(yīng)越好。小軟件一般不提供工具箱。

要求：

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

完成相同或相似功能的菜單用水平線分隔并放置在相同的位置。

菜單前面的圖標(biāo)可以直觀的表示要完成的操作。

菜單的深度一般要求控制在最多三層以內(nèi)。

工具欄要求可根據(jù)用戶要求定制。

具有相同或相似功能的工具欄組合在一起。

工具欄中的每個(gè)按鈕都應(yīng)該有及時(shí)的提示信息。

工具欄的最大長度不能超過屏幕寬度。

工具欄中的圖標(biāo)可以直觀地表示要完成的操作。

設(shè)置系統(tǒng)常用工具欄的默認(rèn)位置。

當(dāng)您的工具欄太多時(shí)，請(qǐng)考慮使用工具箱。

工具箱應(yīng)可增減，用戶可根據(jù)需要定制。

工具箱的默認(rèn)總寬度不應(yīng)超過屏幕寬度的1/5。

狀態(tài)欄應(yīng)該能夠顯示用戶實(shí)際需要的信息。常用的有：

當(dāng)前操作、系統(tǒng)狀態(tài)、用戶位置、用戶信息、提示信息、錯(cuò)誤信息等。如果某項(xiàng)操作耗時(shí)較長，還應(yīng)顯示進(jìn)度條和進(jìn)程提示。

滾動(dòng)條的長度應(yīng)根據(jù)顯示信息的長度或?qū)挾燃皶r(shí)變化，以便用戶了解顯示信息的位置和百分比。

狀態(tài)欄的高度適合放五個(gè)好字，滾動(dòng)條的寬度比狀態(tài)欄略窄。

菜單和工具欄之間應(yīng)該有明確的界限；菜單應(yīng)該突出顯示，以便在刪除工具欄時(shí)它仍然具有三維效果。

字體大小5 通常用于菜單和狀態(tài)欄。工具欄一般比菜單寬，但也不能太寬，否則會(huì)顯得不協(xié)調(diào)。

右鍵單擊上下文菜單遵循與菜單相同的準(zhǔn)則。

系統(tǒng)易用性

易用性是指頁面上的功能遵循約定俗成，例如：按鈕的名稱易于理解，用詞準(zhǔn)確，易于與同一界面上的其他按鈕區(qū)分開來，可以理解為文本。這樣用戶就可以在不查閱幫助的情況下了解頁面的功能并進(jìn)行相關(guān)的正確操作。

要求：

打開新界面，光標(biāo)默認(rèn)停留在第一個(gè)要輸入的文本框；

將執(zhí)行相同或相似功能的按鈕放在一起以減少鼠標(biāo)移動(dòng)的距離，常用按鈕必須支持快捷鍵；

將界面按功能劃分為局部塊，用Frame框圍起來，并有功能說明或標(biāo)題；

界面應(yīng)支持鍵盤自動(dòng)瀏覽按鈕功能，即按Tab鍵自動(dòng)切換功能；

界面上應(yīng)該先進(jìn)入的控件和重要信息應(yīng)該放在Tab順序的前面，位置也應(yīng)該放在窗口上比較醒目的位置；

同一界面的控件數(shù)量不要超過10個(gè)，超過10個(gè)可以考慮使用分頁界面顯示；

分頁界面應(yīng)支持頁面間快速切換，常用組合快捷鍵Ctrl+Tab；

默認(rèn)按鈕必須支持回車操作，即回車后會(huì)自動(dòng)執(zhí)行默認(rèn)按鈕對(duì)應(yīng)的操作；

可寫控件檢測(cè)到非法輸入后，應(yīng)給出解釋并自動(dòng)獲得焦點(diǎn)；

按鈕和控件的順序必須相同。目前大勢(shì)是從上到下，同時(shí)線與線之間的方式是從左到右；

復(fù)選框和選項(xiàng)框按照選擇概率的高低依次排列；

復(fù)選框和選項(xiàng)框必須有默認(rèn)選項(xiàng)，并支持Tab選擇；

When the number of options is the same, use the option box instead of the drop-down list box;

當(dāng)界面空間較小時(shí)，使用下拉框代替選項(xiàng)框；

選項(xiàng)數(shù)量少時(shí)使用選項(xiàng)框，改用下拉列表框；

專業(yè)軟件應(yīng)使用相關(guān)術(shù)語，通用界面提倡使用通用術(shù)語；

輸入安全性要求

有必要在界面上建立一些規(guī)則來控制輸入錯(cuò)誤的概率，這將大大減少用戶錯(cuò)誤對(duì)系統(tǒng)造成的損害。開發(fā)者應(yīng)盡量考慮各種可能出現(xiàn)的問題，將出錯(cuò)的可能性降到最低。例如，當(dāng)程序出現(xiàn)保護(hù)錯(cuò)誤而退出系統(tǒng)時(shí)，用戶就會(huì)對(duì)軟件失去信心，因?yàn)檫@意味著用戶不得不打斷思路，花時(shí)間和精力重新登錄，而所有的已執(zhí)行的操作將丟失，因?yàn)樗鼈兾幢４?。因此，在頁面設(shè)計(jì)時(shí)需要根據(jù)規(guī)則對(duì)輸入進(jìn)行校驗(yàn)。

要求：

排除可能導(dǎo)致程序異常終止的錯(cuò)誤；

應(yīng)檢查用戶輸入的無效數(shù)據(jù)；

使用相關(guān)控件限制用戶輸入值的類型；

當(dāng)用戶面臨兩個(gè)或多個(gè)選擇時(shí)，請(qǐng)使用單選按鈕，當(dāng)可能有更多選擇時(shí)，可以使用復(fù)選框；

i>當(dāng)選項(xiàng)特別多時(shí)，可以采用列表框，下拉式列表框；

確保未經(jīng)授權(quán)或沒有意義的操作不能進(jìn)行；

對(duì)可能引起致命錯(cuò)誤或系統(tǒng)出錯(cuò)的輸入字符或動(dòng)作要加限制或屏蔽；

對(duì)可能發(fā)生嚴(yán)重后果的操作要有補(bǔ)救措施。通過補(bǔ)救措施用戶可以回到原來的正確狀態(tài)；

對(duì)一些特殊符號(hào)的輸入，與系統(tǒng)使用的符號(hào)相沖突的字符等進(jìn)行判斷并阻止用戶輸入該字符，并提前給出輸入提示；

對(duì)錯(cuò)誤操作最好支持可逆性處理，如取消系列操作；

在輸入有效性字符之前應(yīng)該阻止用戶進(jìn)行只有輸入之后才可進(jìn)行的操作；

對(duì)可能造成等待時(shí)間較長的操作應(yīng)該提供取消功能；

特殊字符常有；;'"><，｀'："［"｛、|｝］+=)-(_*&&^%$#@!~，.。?/還有空格；

在讀入用戶所輸入的信息時(shí)，應(yīng)根據(jù)需要選擇是否去掉前后空格，例如：有些讀入數(shù)據(jù)庫的字段不支持中間有空格，但用戶切實(shí)需要輸入中間空格，這時(shí)要在程序中加以處理；

獨(dú)特性要求

如果一味的遵循業(yè)界的界面標(biāo)準(zhǔn)，則會(huì)喪失自己的個(gè)性.在框架符合以上規(guī)范的情況下，設(shè)計(jì)具有自己獨(dú)特風(fēng)格的界面尤為重要。尤其在商業(yè)軟件流通中有著很好的遷移默化的廣告效用

要求：

• 安裝界面上應(yīng)有單位介紹或產(chǎn)品介紹，并有自己的圖標(biāo)；
• 主界面，最好是大多數(shù)界面上要有公司圖標(biāo)；
• 登錄界面上要有本產(chǎn)品的標(biāo)志，同時(shí)包含公司圖標(biāo)；
• 幫助菜單的"關(guān)于"中應(yīng)有版權(quán)和產(chǎn)品信息；
• 公司的系列產(chǎn)品要保持一致的界面風(fēng)格，如背景色、字體、菜單排列方式、圖標(biāo)、安裝過程、按鈕用語等應(yīng)該大體一致；

多窗口的應(yīng)用與系統(tǒng)資源

設(shè)計(jì)良好的軟件不僅要有完備的功能，而且要盡可能的占用最低限度的資源，因此在出現(xiàn)多窗口的情況下需要避免下述一些情況。

要求：

• 在多窗口系統(tǒng)中，有些界面要求必須保持在最頂層，避免用戶在打開多個(gè)窗口時(shí)，不停的切換甚至最小化其他窗口來顯示該窗口；
• 在主界面載入完畢后自動(dòng)卸出內(nèi)存，讓出所占用的WINDOWS系統(tǒng)資源；
• 關(guān)閉所有窗體，系統(tǒng)退出后要釋放所占的所有系統(tǒng)資源 ，除非是需要后臺(tái)運(yùn)行的系統(tǒng)；
• 盡量防止對(duì)系統(tǒng)的獨(dú)占使用；

頁面元素命名
在使用javaScript來進(jìn)行頁面動(dòng)態(tài)控制編程時(shí)，需要對(duì)程序中的頁面元素和功能操作的名稱引用進(jìn)行約定：
頁 頭： header
外 套： wrap
頁 腳： foot

內(nèi) 容： content
頁面主體： main
容 器： container
標(biāo) 題： title
當(dāng)前的： current

主導(dǎo)航： mainnav
頂導(dǎo)航： topnav
子導(dǎo)航： subnav
邊導(dǎo)航： sidebar
左導(dǎo)航： leftsidebar
右導(dǎo)航： rightsidebar
欄目： column
面包屑： breadcrumb (即頁面所處位置導(dǎo)航提示）

菜 單： menu
子菜單： submenu
菜單內(nèi)容： menucontent
菜單容量： menucontainer
按 鈕： button
表 單： form
頁 簽： tab
文章列表： list
滾 動(dòng)： scroll
提示信息： msg
摘 要： summary
標(biāo) 簽： tag
標(biāo)簽文字： tagTitle
標(biāo)簽內(nèi)容： tagContent
當(dāng)前標(biāo)簽: tagCurrent/currentTag
搜索范圍： range
圖 標(biāo)： icon
當(dāng)前位置： currentPath
列 定 義： column1of3 (三列中的第一列)
column2of3 (三列中的第二列)
column3of3 (三列中的第三列)

商 標(biāo)： label
旗 志： logo
標(biāo) 語： banner
注 釋： note
搜 索： search
搜索關(guān)鍵字：keyword
登 陸： Login
注 冊(cè)： regsiter
熱 點(diǎn)： hot
新 聞： news
下 載： download
打 印： print
版 權(quán)： copyright
服 務(wù)： service
友情鏈接： friendlink
版 權(quán)： copyright
小技巧： tips
欄目標(biāo)題： title
加 入： joinus
指 南： guild
服 務(wù)： service
狀 態(tài)： status
投 票： vote
合作伙伴： partner

其它相關(guān)注意事項(xiàng)

1.一律小寫;
2.盡量用英文;
3.不加中杠和下劃線;
4.盡量不縮寫，除非一看就明白的單詞

DHTMLx控件

控件的命名
控件的外觀屬性
控件使用規(guī)則

Flex控件

控件的命名
控件的外觀屬性
控件使用規(guī)則

我們專注高端建站，小程序開發(fā)、軟件系統(tǒng)定制開發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開發(fā)、各類API接口對(duì)接開發(fā)等。十余年開發(fā)經(jīng)驗(yàn)，每一個(gè)項(xiàng)目承諾做到滿意為止，多一次對(duì)比，一定讓您多一份收獲！