wordpress主题设计与访客体验(上)

Categories Mindmeters | 思考点滴

目前我博客采用的主题是由Simpla Theme修改而来。

Simpla Theme是基于CC Attribution-ShareAlike license发布的一款主题,原作者叫Phu Ly。很喜欢简约主义的作品,也很同意这种观点,不仅是因为简单的页面体积小,而是因为去除那些不必要的繁杂,很朴素的东西也是很舒服的。我修改这个主题的初衷也是。基于wabi -sabi的概念,去除所有过分表现的颜色,用意简洁。去繁就简,但不移除诗意。坚持干净利落,但也不至于贫瘠。保持残缺的优雅,当然,两栏主题本身还是看起来有些呆板。

在修改的过程中学习到了很多,记录下来,大家一起探讨:

1、主题修改

a、目前我修改的博客的主题在IE8、Firefox3.0.8、Google chrome、Safari4、Opera10 alpha等主流浏览器下显示效果较好。建议访客在1024×768或更高的分辨率下浏览,同时建议大家使用IE8及IE8以上版本浏览本博客。

b、原来主题比较适合英文博客显示,我在原来主题基础上修改了一些,使中文显示更舒服。

c、新增导航和文章分页。结构布局上,注意层次感、留白、一致性。

d、布局样式的修改,以最简为原则删除或者修改了很多原主题不必要的东西。

e、新增存档页面和留言本页面,并新增了对最新的wordpress版本的一些特性支持,添加了一些必须支持的插件。

2、访客体验

导航。顶部导航的背景颜色是白色,当鼠标移上去的时候呈现暗色。在分页导航中添加了翻页插件Pagebar。对访问的用户来讲,分页是个非常实用的功能,它通过页面间的导航简化了访客进入网页的操作,大多数情况下,页面之间只是“previous”和“next”的可读性太差,网页结构之间的有序的联系和低复杂性更利于良好的体验和信息整理,能更好地引导用户按照你的页面组织获得信息。

在分页的导航中采用了和网页顶部导航相同的导航方式,当用户鼠标滑到分页的时候,通过选用高对比度的背景会呈现两种颜色的较大的视觉反差,简洁而且直观,又能吸引访客注意力。另外,用户在浏览的当前页(this page)的导航,可以看到去除了边框,字号增大了。这样起到了强调的作用,很容易分辨。写到这里,如果仔细看的话你会发现这样的导航还是存在一个问题,如果页数过多的话,是不是应该再添加一个“skip to”的按钮呢,我想这是非常有必要的。

在页面的顶部和页面内容底部都添加分页导航,这样的设置可以解决用户在浏览像我的博客这样的两栏主题的内容过长的问题,在拉动滚动条在底部的时候可以方便地做页面的切换。同时在页面底部设置“↑Back to top”的按钮,方便用户回顾或者回到页面顶部。

文章内页(single.php)的导航稍有不同,在单篇文章的顶部和底部添加“上一篇文章名”和“下一篇文章名”的导航。
侧边栏。今天无意间温习了一下前几天长河教给我的知识,实现了侧边栏友情链接部分的双行显示,这样的显示缩短了侧边栏友情链接显示的长度,节省了侧边栏的面积,扩大了访客获取信息的可能性。在wordpress内置的函数中可以这样实现友情链接的输出

<?php get_links('-1', '<li>', '</li>', '', 0, 'name', 0, 0, -1, 0); ?>

,同时wordpress最新版本内置了随机输出友情链接,可以用以下代码实现

<?php get_links(-1, '<li>', '</li>',0,0, 'rand', 0, 0, 10, 0); ?>
<!-- 修改数字即可改变输出随机友情链接的个数 -->

写到这里我顺便赘言几句我对博客友情链接的看法,现在写博客的人很多,很多人因为友情链接过多而不得不写个声明出来,或者做了友情链接还必须约法三章之类,我觉得没必要搞得那么麻烦。为什么?既然你做了链接,这种链接肯定具有交流上的意义,不管是叫链接还是友情链接或者其他什么的。长河现在用了一个可以随机显示blogroll的插件叫“Hot Friends”,这个插件的原理是根据访客的评论数量自动加入blogroll,从而获得首页展示。想法很好,但是我想我侧边栏的友情链接还不至于长到长过文章内容的地步,所以我现在对blogroll的态度是所有的链接都在首页显示,我的原则是简单至上,很多看起来很cool的功能,实现之后你会觉得很别扭的。让用户一眼就能看明白的事实是最好不过的。
留言本及留言本的访客体验。wordpress本身没有留言本,给wordpress添加留言本的方法有很多,大致分两种方法实现,一种是插件实现,这个不多叙述了,搜索引擎上可以搜到很多留言本相关插件,插件是好的,但是用得多了也会影响博客的速度和使用的,所以这种方法不推荐。另一种方法是在主题中做一个留言本的模板,然后新建页面(page)选择留言本的模板。具体可以参考一下这篇文章:《简单5步,制作wordpress留言板》。

我在自己的博客的留言本的体验上做了以下两方面的修改,第一是利用jqury适当地隐藏输入框,提高WordPress访客评论时的用户体验,具体可以浏览下面这两篇文章:《提高wordpress访客评论时的用户体验》和《适当隐藏输入框,提高WordPress访客评论时的用户体验》。第二个是我把留言本的样式做了个调整,将留言框的主体部分放在了最上面。这个和上面的隐藏输入框的方法配合起来使用。把次要的信息放在次要的位置上会更好一点。

先写到这里了,其实还有很多东西想记下来,完了什么时候想起就什么时候再补充好了。这样的记录非常好,以后如果有疑惑的时候还可以回过头来再看看。《wordpress主题设计与访客体验(下)》我打算写一些网页布局的合理性、网页的宽度、字体的选择及字体的大小等等……

8 Comments

  • xiaorsz
    2009年4月12日

    这皮是挺不错的!!干净清爽!!

  • 长河
    2009年4月12日

    这个网站比较节省流量滴~

  • YoUng
    2009年4月13日

    很不错啊,学习了

  • llision
    2009年4月18日

    嗯,很不错~呵呵~我也正在研究WP主题哈~这个确实不错哟~简单就是美~

  • hysteria
    2009年4月22日

    这个皮在firefox似乎惨不忍睹…

  • 米拉之落
    2009年4月22日

    @hysteria 我觉得在FF下显示很简单 很好看啊

  • Firm
    2010年1月25日

    不知道为啥,俺的wordpress就是记不住访客

  • Danny
    2010年10月9日

    主题很漂亮,很多细节值得学习。我用的就是FF,这个皮肤一切正常啊

Leave a Reply