web cs 界面设计规范.doc

交互界面设计规范 作者：deaya 2011.06.27 一、 界面约定 窗体 l 窗体的大小不能超过800*600 。l 次窗体的大小不能大于500*400 。l 给每个窗口提供一个标签，必须用标签来标明其用途 。图列：给窗口提供标签 菜单l 尽量用词语做菜单标题l 不要再字体间可以留空隙l 避免占多行菜单l 保持菜单稳定 l 合理安排菜单项的顺序l 将无效菜单视为不可代替报错l 不要使用多列的下拉菜单l 不要使用右对齐菜单标题图例： 消息框l 确保消息按钮与文本一致 例如绝对不要用“是”和“否”来作为非提问消息的响应l 避免不必要的消息框 采用“是”和“否”，“确认”和“取消”很少同时应用在消息框中。l 选择默认按钮将最安全的或最常用的选项作为默认按钮。图例： 对话框l 不要使用可滚动的对话框。l 不要在作为二级窗口的对话框中使用菜单栏。l 确保模式对话框的模式，使其具有父窗口的模式对话框 ，提供正确父窗口句柄，而不是提供空句柄 特别注意：对话模式下，父窗口不能拖动。l 二级对话框页面布局和间距与父窗口保持一致。 图例： 组合框l 总给组合框提供一个标签，必须用标签来表明组合框的用途。l 避免组合框少于四行，考虑用单选按钮代替，保持与其他组合框一致。图例： 编辑框l 总给编辑框提供一个标签，必须用标签来标明编辑框的用途。如果标签在左边，将标签文字与编辑框文本垂直对齐。l 避免有输入限制的编辑框将编辑框用于用户对任何文本的输入或数字编辑框用于数字的编辑。对于输入受限的情况，使用其他的控件，如组合框、列表、滑块和微调框。对于日期和时间，使用日期和时间拾取控件。l 总采用数字编辑框用于数字输入*当用户在数字字段中输入非数字文本时，不应该有任何出错消息。图例： 列表框l 总给列表框提供一个标签，必须用标签来标明列表框的用途。l 对多个选择考虑采用复选框复选框列表可以突出其多个选择的能力。如果不能接受复选框列表，那么可以采用多选列表，并用静态文本表示选项个数，清楚指明可进行多项选择。l 对多选列表考虑提供全部选中和全部取消选中命令由于希望全部选中或全部取消使常见的事情，所以这两个命令方便了用户进行多项选择。图例： 分组框l 利用分组框分组相关控件尽管分组框通常是用于单选按钮的分组，但也可用于任何控件的分组。避免使用只有一个控件的分组框，除非是为了保持与同一对话框中其他分组框一致。l 考虑采用静态线或文本标签来代替分组框分组框多时要占去许多空间。如果空间紧张的话，一个替代分组控件的好办法是同时采用静态文本标签和静态线。图例： 布局与间距l 窗体控件布局和间距尽量保持与Windows标准一致。l 控件与窗体的上、下、左、右边距为7象素。l 右下角主命令按钮之间的间距为6象素，如果主命令按钮在右上角，之间的间距则为4象素。l 主命令按钮一般情况为7521象素，如果按钮的文本很长，应该适当加宽按钮的宽度。图例： 对话框内的命令按钮l 将主命令按钮与对话框主体分开，主命令按钮包括像确定、取消、关闭、帮助、停止、隐藏，以及其他相关按钮的等命令按钮。这种分开使主命令按钮更易于查找和识别。l 相似的方向。这将使对话框的外观看起来更加舒服，并且更易于在屏幕上进行定位。如果按钮具有不同的大小，那么可以将它们放在对话框菜单底部。l 将排列在底部的主命令按钮右对齐右对齐主命令按钮适合从左到右的阅读习惯。 列表视图l 总给列表视图提供一个标签，必须用标签来标明列表视图的用途。l 使列表视图至少5行长少于5行的列表视图没有滑块，不便于滚动。如果列表视图没有滚动条，那么使用一个更短的列表视图也是可以接受的。l 仅在列表可排序时采用可单击的表头 可单击的表头只应用于排序。首次单击时应按正序对列表进行排序，而第二次单击时按反序进行排列。l 对列项大约超过30的列表视图总使其可进行排序 用户能够对列表进行排序方便了对信息的查找。 控件l 尽量采用标准按钮。l 将无效的控件置为不可用 将不适用于当前程序状态的控件置为不可用。l 取消不必要的滚动条 尽量使控件的尺寸足够大，避免使用滚动条。 命令按钮l 采用最小的宽度和标准的高度尽量将不同大小的带文字命令按钮的个数控制在两个以内。l 尽管不限制命令按钮的最大宽度Width:160px l 将无效按钮置为不可用，以取消报错，绝对不要使可用的按钮仅产生一条出错信息。l 总采用省略号来表示需要更多信息，命令中的省略号表示执行命令时需要更多信息，而不是简单的确认。省略号并不表示一定会出现对话框。l 绝对不要指定双击行为用户意料不到命令按钮会响应双击，因此不可能发现这样的行为。l 命令按钮大小使用Window标准75x21象素。 复选框l 用复选框开关选项，用单选按钮改变模式。例如，可用一个复选框来表示是否显示工具栏，但若用复选框来切换打印机的横向模式和纵向模式就会使人糊涂，对横向和纵向模式应该用一组单选按钮代替。l 避免一组复选框中选项个数超过8个应该考虑用复选框列表代替，它占用的空间更少，但复选框列表需要滚动时使用就稍稍麻烦了。尽管控件足够或保持与同一窗口中其他复选框一致时，采用复选框时可取的，但大于8个左右的复选框就未免太多了。 l 最好使用竖向对其，这样便于浏览 单选按钮l 避免一组单选按钮中的选项个数超过8个 考虑用列表或组合框代替，它们占用的空间更少，但要记住控件使用更麻烦些。尽管控件足够或保持与同一窗口中其他单选按钮一致时，采用单选按钮是可取的，但多于8个的单选按钮未免太多了。l 总将单选按钮置于一个分组框中 由于单选按钮是一组相互排斥的选项，所以分组框使选择更为明确。l 竖向对齐 这种对齐方式更易于浏览 静态文本l 左对齐静态文本标签左对齐使得标签外观更有条理，且易于浏览。l 将静态文本标签置于相关控件的左边 长控件是例外情况，如列表视图、树形视图（Tree）和多行编辑框。 滚动条l 滚动条仅用于滚动 使用滑块或微调框来设置数值。 l 使滚动条足够长，保证有可用的滑块。没有滑块的滚动条不便于使用。二、 其他具体细节约定 字体l 字体统一使用以下设置： Charset = GB2312_CHARSET Name = 宋体 Size = 9 Color = clWindowText 颜色l 使用系统颜色l 根据内容而不是外观来选择系统颜色一般文字较多文本，使用白色背景（Background=White），黑色字体（Color=black）l 不要用颜色作为传递消息的唯一方式*不依赖于对颜色的区分可以增强程序对色盲用户的可访问性，并且使程序可运行在单色显示器上。 文本l 避免不