網(wǎng)頁規(guī)范和標簽命名約定
  • 更新時間:2024-11-07 13:48:13
  • 網(wǎng)站建設(shè)
  • 發(fā)布時間:1年前
  • 200

頁面的規(guī)范性

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

頁面的規(guī)范性

要求:

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

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

菜單前面的圖標可以直觀的表示要完成的操作。

菜單的深度一般要求控制在最多三層以內(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>當選項特別多時,可以采用列表框,下拉式列表框;
  • 確保未經(jīng)授權(quán)或沒有意義的操作不能進行;
  • 對可能引起致命錯誤或系統(tǒng)出錯的輸入字符或動作要加限制或屏蔽;
  • 對可能發(fā)生嚴重后果的操作要有補救措施。通過補救措施用戶可以回到原來的正確狀態(tài);
  • 對一些特殊符號的輸入,與系統(tǒng)使用的符號相沖突的字符等進行判斷并阻止用戶輸入該字符,并提前給出輸入提示;
  • 對錯誤操作最好支持可逆性處理,如取消系列操作;
  • 在輸入有效性字符之前應該阻止用戶進行只有輸入之后才可進行的操作;
  • 對可能造成等待時間較長的操作應該提供取消功能;
  • 特殊字符常有;;'"><,`':"["{、|}]+=)-(_*&&^%$#@!~,.。?/還有空格;
  • 在讀入用戶所輸入的信息時,應根據(jù)需要選擇是否去掉前后空格,例如:有些讀入數(shù)據(jù)庫的字段不支持中間有空格,但用戶切實需要輸入中間空格,這時要在程序中加以處理;
  • 獨特性要求

    如果一味的遵循業(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)驗,每一個項目承諾做到滿意為止,多一次對比,一定讓您多一份收獲!

    本文章出于推來客官網(wǎng),轉(zhuǎn)載請表明原文地址:https://www.tlkjt.com/web/12108.html
    推薦文章

    在線客服

    掃碼聯(lián)系客服

    3985758

    回到頂部