web cs 界面设计规范

《web cs 界面设计规范》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、交互界面设计规范作者：deaya2011.06.27一、界面约定Ø窗体l窗体的大小不能超过800*600。l次窗体的大小不能大于500*400。l给每个窗口提供一个标签，必须用标签来标明其用途。图列：给窗口提供标签Ø菜单l尽量用词语做菜单标题l不要再字体间可以留空隙l避免占多行菜单l保持菜单稳定l合理安排菜单项的顺序l将无效菜单视为不可代替报错l不要使用多列的下拉菜单l不要使用右对齐菜单标题图例：Ø消息框l确保消息按钮与文本一致[例如绝对不要用“是”和“否”来作为非提问消息的响应]l避免不必要的消息框[采用“是”和“否”，“确认”和“取消”

2、很少同时应用在消息框中。]l选择默认按钮[将最安全的或最常用的选项作为默认按钮。]图例：Ø对话框l不要使用可滚动的对话框。l不要在作为二级窗口的对话框中使用菜单栏。l确保模式对话框的模式，使其具有父窗口的模式对话框，提供正确父窗口句柄，而不是提供空句柄[特别注意：对话模式下，父窗口不能拖动。]l二级对话框页面布局和间距与父窗口保持一致。图例：Ø组合框l总给组合框提供一个标签，必须用标签来表明组合框的用途。l避免组合框少于四行，考虑用单选按钮代替，保持与其他组合框一致。图例：Ø编辑框l总给编辑框提供一个标签，必须用标签来标明编辑框的用途。如

3、果标签在左边，将标签文字与编辑框文本垂直对齐。l避免有输入限制的编辑框将编辑框用于用户对任何文本的输入或数字编辑框用于数字的编辑。对于输入受限的情况，使用其他的控件，如组合框、列表、滑块和微调框。对于日期和时间，使用日期和时间拾取控件。l总采用数字编辑框用于数字输入*当用户在数字字段中输入非数字文本时，不应该有任何出错消息。图例：Ø列表框l总给列表框提供一个标签，必须用标签来标明列表框的用途。l对多个选择考虑采用复选框复选框列表可以突出其多个选择的能力。如果不能接受复选框列表，那么可以采用多选列表，并用静态文本表示选项个数，清楚指明可

4、进行多项选择。l对多选列表考虑提供"全部选中"和"全部取消选中"命令由于希望全部选中或全部取消使常见的事情，所以这两个命令方便了用户进行多项选择。图例：Ø分组框l利用分组框分组相关控件尽管分组框通常是用于单选按钮的分组，但也可用于任何控件的分组。避免使用只有一个控件的分组框，除非是为了保持与同一对话框中其他分组框一致。l考虑采用静态线或文本标签来代替分组框分组框多时要占去许多空间。如果空间紧张的话，一个替代分组控件的好办法是同时采用静态文本标签和静态线。图例：Ø布局与间距l窗体控件布局和间距尽量保持与Windows标准一致。l控件与窗

5、体的上、下、左、右边距为7象素。l右下角主命令按钮之间的间距为6象素，如果主命令按钮在右上角，之间的间距则为4象素。l主命令按钮一般情况为75×21象素，如果按钮的文本很长，应该适当加宽按钮的宽度。图例：Ø对话框内的命令按钮l将主命令按钮与对话框主体分开，主命令按钮包括像"确定"、"取消"、"关闭"、"帮助"、"停止"、"隐藏"，以及其他相关按钮的等命令按钮。这种分开使主命令按钮更易于查找和识别。l相似的方向。这将使对话框的外观看起来更加舒服，并且更易于在屏幕上进行定位。如果按钮具有不同的大小，那么可以将它们放在对话框菜单底部。l将排列在底

6、部的主命令按钮右对齐右对齐主命令按钮适合从左到右的阅读习惯。Ø列表视图l总给列表视图提供一个标签，必须用标签来标明列表视图的用途。l使列表视图至少5行长少于5行的列表视图没有滑块，不便于滚动。如果列表视图没有滚动条，那么使用一个更短的列表视图也是可以接受的。l仅在列表可排序时采用可单击的表头[可单击的表头只应用于排序。首次单击时应按正序对列表进行排序，而第二次单击时按反序进行排列。]l对列项大约超过30的列表视图总使其可进行排序[用户能够对列表进行排序方便了对信息的查找。]Ø控件l尽量采用标准按钮。l将无效的控件置为不可用[将不适用于当

7、前程序状态的控件置为不可用。]l取消不必要的滚动条[尽量使控件的尺寸足够大，避免使用滚动条。]Ø命令按钮l采用最小的宽度和标准的高度[尽量将不同大小的带文字命令按钮的个数控制在两个以内。]l尽管不限制命令按钮的最大宽度[Width:160px]l将无效按钮置为不可用，以取消报错，绝对不要使可用的按钮仅产生一条出错信息。l总采用省略号来表示需要更多信息，命令中的省略号表示执行命令时需要更多信息，而不是简单的确认。省略号并不表示一定会出现对话框。l绝对不要指定双击行为[用户意料不到命令按钮会响应双击，因此不可能发现这样的行为。]l命令按钮大小

8、使用Window标准75x21象素。Ø复选框l用复选框开关选项，用单选按钮改变模式。[例如，可用一个复选框来表示是否显示工具栏，但若用复选框来切换打印机的横向模式和纵向模式就会使