网站设计之页面的规范性和标签的命名规范

页面的规范性

通常网站设计都按Windows界面的规范来设计，即包含“菜单条、工具栏、工具厢、状态栏、滚动条、右键快捷菜单”的标准格式，可以说：界面遵循规范化的程度越高，则易用性相应的就越好。小型软件一般不提供工具厢。
 
规范要求：

• 常用菜单要有命令快捷方式。
• 完成相同或相近功能的菜单用横线隔开放在同一位置。
• 菜单前的图标能直观的代表要完成的操作。
• 菜单深度一般要求最多控制在三层以内。
• 工具栏要求可以根据用户的要求自己选择定制。
• 相同或相近功能的工具栏放在一起。
• 工具栏中的每一个按钮要有及时提示信息。
• 一条工具栏的长度最长不能超出屏幕宽度。
• 工具栏的图标能直观的代表要完成的操作。
• 系统常用的工具栏设置默认放置位置。
• 工具栏太多时可以考虑使用工具厢。
• 工具厢要具有可增减性，由用户自己根据需求定制。
• 工具厢的默认总宽度不要超过屏幕宽度的1/5。
• 状态条要能显示用户切实需要的信息，常用的有：
• 目前的操作、系统状态、用户位置、用户信息、提示信息、错误信息等，如果某一操作需要的时间较长，还应该显示进度条和进程提示。
• 滚动条的长度要根据显示信息的长度或宽度能及时变换，以利于用户了解显示信息的位置和百分比。
• 状态条的高度以放置五好字为宜，滚动条的宽度比状态条的略窄。
• 菜单和工具条要有清楚的界限;菜单要求凸出显示，这样在移走工具条时仍有立体感。
• 菜单和状态条中通常使用5号字体。工具条一般比菜单要宽，但不要宽的太多，否则看起来很不协调。
• 右键快捷菜单采用与菜单相同的准则。

系统易用性

易用性是指页面上的功能遵从惯例，例如：按钮名称易懂，用词准确，并与同一界面上的其他按钮易于区分，能望文知意。这样，使得用户不用查阅帮助就能知道该页面上的功能并进行相关的正确操作。

要求：

• 打开一个新界面，光标默认停留在第一个待输入的文本框中；
• 完成相同或相近功能的按钮放置在一起，，减少鼠标移动的距离，常用按钮要支持快捷方式；
• 按功能将界面划分局域块，用Frame框括起来，并要有功能说明或标题；
• 界面要支持键盘自动浏览按钮功能，即按Tab键的自动切换功能；
• 界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前，位置也应放在窗口上较醒目的位置；
• 同一界面上的控件数最好不要超过10个，多于10个时可以考虑使用分页界面显示；
• 分页界面要支持在页面间的快捷切换，常用组合快捷键Ctrl+Tab；
• 默认按钮要支持Enter操作，即按Enter后自动执行默认按钮对应操作；
• 可写控件检测到非法输入后应给出说明并能自动获得焦点；
• 按钮键的顺序与控件排列顺序要一直，目前流行总体从上到下，同时行间从左到右的方式；
• 复选框和选项框按选择几率的高底而先后排列；
• 复选框和选项框要有默认选项，并支持Tab选择；
• 选项数相同时多用选项框而不用下拉列表框；
• 界面空间较小时使用下拉框而不用选项框；
• 选项数较少时使用选项框，相反使用下拉列表框；
• 专业性强的软件要使用相关的专业术语，通用性界面则提倡使用通用性词眼；

输入安全性要求

在界面上需要建立一些规则来控制输入的出错几率，会大大减少系统因用户人为的错误引起的破坏，开发者应当尽量周全地考虑到各种可能发生的问题，使出错的可能降至最小，例如：当程序出现保护性错误而退出系统，会使用户对软件失去信心，因为这意味着用户要中断思路，并费时费力地重新登录，而且已进行的操作也会因没有存盘而全部丢失。因此需要在页面设计时应对输入按照规则进行校验。

要求：

• 排除可能会使程序非正常中止的错误；
• 应当检查用户录入无效的数据；
• 采用相关控件限制用户输入值的种类；
• 当用户面临的选择是两个或多个选一时，请采用单选框，而当选择的可能再多一些时，可以采用复选框；
• 当选项特别多时，可以采用列表框，下拉式列表框；
• 确保未经授权或没有意义的操作不能进行；
• 对可能引起致命错误或系统出错的输入字符或动作要加限制或屏蔽；
• 对可能发生严重后果的操作要有补救措施。通过补救措施用户可以回到原来的正确状态；
• 对一些特殊符号的输入，与系统使用的符号相冲突的字符等进行判断并阻止用户输入该字符，并提前给出输入提示；
• 对错误操作最好支持可逆性处理，如取消系列操作；
• 在输入有效性字符之前应该阻止用户进行只有输入之后才可进行的操作；
• 对可能造成等待时间较长的操作应该提供取消功能；
• 特殊字符常有；;'"><，｀'："［"｛、|｝］+=)-(_*&&^%$#@!~，.。?/还有空格；
• 在读入用户所输入的信息时，应根据需要选择是否去掉前后空格，例如：有些读入数据库的字段不支持中间有空格，但用户切实需要输入中间空格，这时要在程序中加以处理；

独特性要求

如果一味的遵循业界的界面标准，则会丧失自己的个性.在框架符合以上规范的情况下，设计具有自己独特风格的界面尤为重要。尤其在商业软件流通中有着很好的迁移默化的广告效用

要求：

• 安装界面上应有单位介绍或产品介绍，并有自己的图标；
• 主界面，最好是大多数界面上要有公司图标；
• 登录界面上要有本产品的标志，同时包含公司图标；
• 帮助菜单的"关于"中应有版权和产品信息；
• 公司的系列产品要保持一致的界面风格，如背景色、字体、菜单排列方式、图标、安装过程、按钮用语等应该大体一致；

多窗口的应用与系统资源

设计良好的软件不仅要有完备的功能，而且要尽可能的占用最低限度的资源，因此在出现多窗口的情况下需要避免下述一些情况。

要求：

• 在多窗口系统中，有些界面要求必须保持在最顶层，避免用户在打开多个窗口时，不停的切换甚至最小化其他窗口来显示该窗口；
• 在主界面载入完毕后自动卸出内存，让出所占用的WINDOWS系统资源；
• 关闭所有窗体，系统退出后要释放所占的所有系统资源 ，除非是需要后台运行的系统；
• 尽量防止对系统的独占使用；

页面元素命名
在使用javaScript来进行页面动态控制编程时，需要对程序中的页面元素和功能操作的名称引用进行约定：
页 头： header
外 套： wrap
页 脚： foot

内 容： content
页面主体： main
容 器： container
标 题： title
当前的： current

主导航： mainnav
顶导航： topnav
子导航： subnav
边导航： sidebar
左导航： leftsidebar
右导航： rightsidebar
栏目： column
面包屑： breadcrumb (即页面所处位置导航提示）

菜 单： menu
子菜单： submenu
菜单内容： menucontent
菜单容量： menucontainer
按 钮： button
表 单： form
页 签： tab
文章列表： list
滚 动： scroll
提示信息： msg
摘 要： summary
标 签： tag
标签文字： tagTitle
标签内容： tagContent
当前标签： tagCurrent/currentTag
搜索范围： range
图 标： icon
当前位置： currentPath
列 定 义： column1of3 (三列中的第一列)
column2of3 (三列中的第二列)
column3of3 (三列中的第三列)

商 标： label
旗 志： logo
标 语： banner
注 释： note
搜 索： search
搜索关键字：keyword
登 陆： Login
注 册： regsiter
热 点： hot
新 闻： news
下 载： download
打 印： print
版 权： copyright
服 务： service
友情链接： friendlink
版 权： copyright
小技巧： tips
栏目标题： title
加 入： joinus
指 南： guild
服 务： service
状 态： status
投 票： vote
合作伙伴： partner

其它相关注意事项

1.一律小写;
2.尽量用英文;
3.不加中杠和下划线;
4.尽量不缩写，除非一看就明白的单词

DHTMLx控件

控件的命名
控件的外观属性
控件使用规则

Flex控件

控件的命名
控件的外观属性
控件使用规则