欢迎光临散文网 会员登陆 & 注册

第2节 web页面设计规范之页面元素

2021-02-02 11:22 作者:游戏理想国  | 我要投稿
  1. 面板

我们常用的布局对象,一般由标题栏加内容区域以及状态栏组成。标题、内容区域中英文字符一般采用左对齐方式。

  1. 标签页

当有多个分类内容页要显示时使用,标签上显示的文字宜居中对齐

  1. 分页器

当我们显示内容行数过多时应采用分页控件降低单页的数据量,以提高系统性能。

当需要分页显示数据时,要求:

  • 当对查询结果进行分页时,分页的同时需要能够执行查询功能;

  • 当页数较多时,允许输入具体页数进行查询;

  • 分页按钮可以采用数字也可以采用文字,但当前页要与其他没有选中的页区分开来,如下图采用颜色来

  1. 面包屑

当系统存在复杂的层次结构时,提供用户导航作用,能引导用户快速跳转到相应的内容。每一层级内容不宜过长,最好能控制在4个字以内容,最长不要超过6个字;宜左对齐。

  1. 表单

表单元素主要使用来收集用户材料,子元素相对比较多应注选择统一对齐方法以及相应字体,保持简洁美观。以下是为示例:

 

  1. 表格

对于表格,其属性的设置同样在CSS中进行定义。

表格使用最多的情况是显示装在的数据,由于有很多表项需要在页面中完整显示,因此原则上对于表格各个单元格宽度的设置应采用百分比方式来进行,这样表格不仅能够将数据完整地显示,而且还能够适应不同分辨率的情况。但由于表格中存在不定长的内容,所以为了保证表格的宽度不被挤变形,对于不定长的内容,可固定显示宽度,当超出此显示宽度后,以……显示,光标停留后,详细内容再在浮动层显示。

其他要求:

  • 表头中的数据应水平/垂直居中对齐。

  • 表单中内容如为定长,则为居中显示;如为不固定的中英文内容,则为居左显示;如为数值形式,则为居右显示。

  • 表格的表头应采用不同于表格内容的背景颜色,并要求对比明显;

  • 表格表头的文字应采用加粗,或不同于表格内容的字体;

  • 表格中相邻行需要通过两种有一定对比差异的浅色作为背景色;

  • 各个页面的表格边框风格需要统一,建议设置细边框;

  • 表格中存在的链接文字需要采用不同于其他内容的颜色或字体显示;

  • 对于表格的嵌套尽量控制在三层以内,并且禁止使用表格来进行页面布局。

 

示例

 

  1. 提示框

  1.  

    1. 标记

 

  1. 标签

  1. 全局信息


第2节 web页面设计规范之页面元素的评论 (共 条)

分享到微博请遵守国家法律