雅虎搜索结果翻页的UE设计

文章从用户角度分析使用需求,提出解决方案,在此基础上设计了功能控件。

搜索结果翻页

问题摘要

用户浏览的时候,需要适当排列搜索结果的设置,这个功能在单个页面里要大并且突出显示。

例如:

pagination-search

Yahoo搜索的分页控件

当用户:

  • 陈列搜索结果时;
  • 结果太多,超出一屏所能方便浏览的范围;

解决方案:

  • 在合适的位置断开这些信息,用页码的次序排列;
  • 可使用页码控件,分别浏览页面内容;

分页控件;

  • 陈列一排导航式的链接控件;
  • 按照下列次序呈现链接:’上一页’,页码链接,’下一页’;
  • 在上一页的后面放一个左箭头;
  • 在下一页的前面放一个右箭头;
  • 设计可点的链接箭头;
  • 页面链接最高容纳十个页码链接。如果结果页码偏少,就只显示可访问的页码;
  • 当页码从1到6,这个页面链接通常从1开始;
  • 任何6之后的页码,开始页码链接应该用当前页码减去5。比如,当前页是第7页,那么第一个页码就是2(7-5=2),最后一页将是11(依然显示10页);

图例说明:

  • 搜索结果的第一页不能显示’上一页’的标志或箭头;
  • 搜索结果的最后一页不能显示’下一页’的标志或箭头;
  • 页码链接中不要显示当前页码的超级链接;
  • 控件标签’结果页码’

    搜索结果页码

    基本原理:

    • 用箭头图形帮助区分链接和提供较大的点击对象;
    • 在这个背景里禁用控件没什么价值;
      • 这些链接常常在需要分页时出现;
      • 结果的第一页制造绝大数PV.列出一个禁用的’上一页’控件也不会增加什么价值。
    • 尽管第一个页码链接有价值,在随机访问链接里它要和功能展示竞争。
    • 在排列结果中,最后一个页码的链接也没什么价值。在搜索结果总数不为人知的情况下这也是一个疑问。

    亲和力

    • 允许每一个链接使用TAB键操作;
    • 当一个单独的链接设为键盘焦点时,敲下回车键将抵达这个链接的页面;

    李冰译自Yahoo! Developer Network