Archive for the ‘前端技术’ Category

表格也需要设计

发表时间:十二月 11th, 2009, 作者:lijin

  今天讨论一下表格设计,关于表格,表面看起来很简单,要做一个漂亮表格难度可不小,也很少有人对表格进行修饰和设计。表格功能主要是展示数据和记录数据,而过多的文字容易使眼睛疲劳,因此一个的舒适表格有助于用户静心阅读,也是网站注重细节的体现。
  首先说说表格的色彩,表格的功能以展示数据为主,因此表格本身的色彩不宜太过鲜艳,适当的柔和。为了能让表格在页面上有一定分量,为表格加了一个淡灰色的背景,然后再在背景里镶白底线框表格,上下左右边距为6px,这样中间内容显得格外明亮,立即突出表格,行与行之间白灰相间,这样防止阅读时出现错觉,方便用户阅读。
  关于表格文字颜色,一个表格里文字必须分轻重,如:下图是一个消费记录表格,金额为表格重点,因此用红色突出重点。切记,表格文字颜色不宜太多,多了会显得花,可以根据表格不同来确定重点的栏目数;链接用蓝色,这是用户习惯;其他内容用黑色,这也是表格文字的主要颜色,他不但是有效的数据,还能起到衬托重点的作用。表格的特殊数据展示(如下图),出现几率相对较低,但是视觉冲击一定要强,因此文字颜色用了一个和红色互为补色的绿色,很容易区分出和其他数据的不同。
  最后表格需要整洁、大气,因此表格文字的行高、字体大小、边距也必须按好好把握,根据以往的经验,内容距离边线框10px比较合适,当字体大小是12px时,内容行高为20px最合适,当字体大小是14px时,内容行高为22px最合适。
  以上是个人见解,仅供参考!