先看看googlelab推出的一款工具http://browsersize.googlelabs.com/,作用就是让我们知道用户在访问论坛的时候目光主要停留在哪些位置。
下图是说明了用户浏览的时候目光集中在网页的左上角。(横轴和纵轴的数字都是分辨率) 如果将这张图放在我们的论坛上,我们可以得到下面的图片,这时候就能感受到,“发帖时间”已经在很远的位置了,也就是说用户如果要看发帖时间就会花上一段时间的功夫,才能“找到”。 为什么用户要看发帖时间呢?
如果是一开始混论坛的,一般都不在乎发帖时间是什么时候的,只管发帖就好了。
可是之后就会看到一些很老的帖子(比如一年前的),这个时候就习惯性看看最后一个人的发帖时间,再决定是否回复这个帖子。
至少我有很多次把“加入时间”误当作了“发帖时间”的情况了。
一种建议的布局
关于布局我个人觉得可以简单的将“发帖时间”放到“作者”和“内容”这一行,并覆盖掉“作者”和“内容”这几个字。
(请大家多讨论讨论其他的布局) 如何实现建议的布局
我用Firebug编辑了一下论坛的HTML。尽量最小的改动。
添加新行“<tr class="row1">”用于显示“发帖时间”,但是class属性row1中的1应该为变量,
也就是说每一个帖子顶部都得新建一行,9楼就得使用“<tr class="row9">”。
代码: 全选
<table class="tablebg" cellspacing="1" width="100%">
<tbody>
<!--
==================================
// We dont need to show this information.
<tr>
<th>作者</th>
<th>内容</th>
</tr>
==================================
-->
<!--
==================================
// Add a new row. -->
<tr class="row1">
<th colspan="2">
<div style="float: left;"><a href="./viewtopic.php?p=1766470#p1766470"><img src="./styles/UbuntuCN/imageset/icon_post_target_unread.gif" alt="有新帖" title="有新帖" width="12" height="9"></a><b>发表于 :</b> 2010-03-18 9:58 </div>
</th>
</tr>
<!-- // End of new row.
==================================
-->
<tr class="row1">
<td align="left" valign="middle">
<a name="unread"></a><a name="p1766470"></a>
1 楼
<b class="postauthor">
<a href="#" onclick="insert_text('[b]ly58132762[/b], ', true, false); return false;"><span style="" class="username-coloured">ly58132762</span></a>
</b>
</td>
<td width="100%" height="25">
<table cellspacing="0" width="100%">
<tbody><tr>
<td class="gensmall" width="100%"><div style="float: left;"> <b>文章标题 :</b> 如何查看空洞文件的实际大小??</div>
<!--
==================================
// We change this div to a new row above this row.
<div style="float: right;"><a href="./viewtopic.php?p=1766470#p1766470"><img src="./styles/UbuntuCN/imageset/icon_post_target_unread.gif" alt="有新帖" title="有新帖" width="12" height="9"></a><b>发表于 :</b> 2010-03-18 9:58 </div>
==================================
-->
</td>
</tr>
</tbody></table>
</td>
</tr>
参考:
Google Browser Size的介绍 - http://www.biaodianfu.com/google-browser-size.html
Google Browser Size官网 - http://browsersize.googlelabs.com/