PIZn

      “如果在网站上找不到方向，人们不会使用你的网站。”——《Don’t make me think》

      在设计violet主题之前，我边学习边在其他已经完成的网站项目上实践了一些简单的用户体验设计，例如更加友好的导航设计，面包屑设计等。这几天抽抽挤挤在violet主题上实现了设计稿中的导航和面包屑（和“你在这里”、“当前位置”指示器一样，告诉你当前的位置）的功能。

violet主题导航设计：

     

      倘若你在今天之前就访问过我的网站，细心的你可能会发现，menu上面并没有高亮显示(在《“.Wordpress主题设计：Violet 1.0、》文章插图可见)。其实呢，我在发布之前已经实现了这个功能，只是还没用css来实现。如果你想了解如何实现菜单高亮功能的话，WordPress官网上有这么一个教程Dynamic Menu Highlighting，具体我就不多说了。

为什么要高亮显示?

      导航菜单有着这样的功能：

      1，给我们一些固定的感觉。

      2，告诉我们当前的位置。

      3，告诉我们如何使用该网站。

      4，给了我们对网站建设者的信心。

     人们访问网站的目的之一，就是要找寻想要的信息，取得解答问题的答案。而这个过程的行径也许不确定，所以他们希望知道自己在那个位置。如果找不到问题，浏览者或许希望迅速回到主页。设计得当的导航菜单，能够给人这样的感觉：它总是在这里，而且清楚地告诉我在现在在哪里。

     因而导航菜单一致，当前位置指示明显是非常重要的。

     在violet主题的导航菜单设计上，我利用css的样式变化来突出当前位置，希望给予访问者更好的用户体验感受。

violet主题面包屑设计：

     

      这个部分需要您在文章页面才能看到。因为在显示文章页面的时候，菜单默认是首页的。为什么称之为面包屑，是因为它们让人想起Hansel扔在森林里的面包屑踪迹，因为这样他和Gretel能找到回家的路（在原故事里的，有兴趣的google一下）。

      实现面包屑的功能相对来说比较简单。我是这样来实现的：

      1，在single.php里面文章页面里头部加入下面的语句

      <div id=”postpath”>

      <a title=”<?php _e(‘Goto homepage’,'violet’);?>” href=”<?php echo get_settings(‘home’);?>”/><?php _e(‘Home’,'violet’);?></a>&nbsp;&gt;&nbsp;<?php the_category(‘,’);?>&nbsp;&gt;&nbsp;<?php the_title();?>

      </div> 

     其中，the_category()函数用来显示文章分类的目录和链接；the_title()函数用来显示当前文章的标题。

     2，对id=”postpath”进行样式化，具体如何设计个人爱好咯~

好的面包屑：

      面包屑的功能跟导航菜单差不多，帮助用户明确自己的位置，提高网站用户体验。然而好的面包屑需要注意一下几点：

     1，把它们放在最顶端，已经成为了web面包屑风格了。

     2，使用”>”对层级进行分隔，或者更加其他容易分隔的。

     3，使用小字体，避免喧宾夺主。

     4，使用了文字“你在这里”或者“当前位置”。

     5，最后一个元素最后比较不同，加粗、改变颜色或者有无下划线等。

     6，不要将其作为页面的名称。