移动版本的电子商务网站:首页和导航设计(3)

导航

菜单栏

在手机上显示菜单栏的最好方式是纵向显示，并只在首页显示顶级目录。你将不得不决定（在用户已经选择展开一个顶级目录的情况下）是否在二级导航中显示该级的展开内容或二级的分类目录，或使用一个下拉式表达，像这样：

searsmenu

在选择并展开顶级目录后的部分：

sears2

其他的像Sephora和Moosejaw的老版本使用下拉式层级式的表现方式：

oldjaw1

momoose11

这两种方式都有它们的优势和劣势。展开菜单的方式不再需要读取和滚动条，而下拉方式需要在每次选择后有更多的页面读取。如果你是为使用数字键盘输入的手机进行设计，那么下拉式的菜单更容易管理，这意味着需要更少的对应数字按钮。

无论你选择了哪种方式，请确保对触摸屏来说链接是很明显的（不要像Moosejaw的旧版本或Target的，下图）。当链接和按钮太小或太靠近时，很容易误操作。通过数字键盘直接进行导航会很有帮助。

targethome

在页面的末尾使用“返回”或“回到首页”链接返回页面顶部是很方便的，特别是当表单项比较多时。

图片导航

我不推荐使用图片导航。这有可能混淆用户，因为图片通常不是非常像可点击的链接，除非它们是产品的缩略图或按钮。此外，图片增加了页面加载时间，且图片做的标签很难阅读。就像Ralph Lauren的“Shop”标签（找不到吧？）。而且小的图片无法带来增值，只可能是对视觉造成压力。

rlmobi

标签

清晰是对于交互操作、目录和链接的标签来说是最重要的。因为页面可能加载的很慢，所以要尽可能的减少链接通往何处的歧义。Ralph Lauren的“Entertainment”（上图）就是一个不太清晰的标签实例。

面包屑

记住一个古老的建议“让链接看上去像链接”。面包屑是链接，所以他们应该看上去像链接。我发现常见的错误是在头部隐藏面包屑，且太靠近logo和使用全大写并不带下划线。Sephora的面包屑很容易被忽视，并且很容易让人混淆“Mobile Reviews”是一个标语还是一个链接（显然不是一个链接）。

sephnav

Moosejaw的老版面包屑被棕色的背景栏所隐藏，并且全部大写不带下划线。这很容易被忽略，尤其是出现在页面中心时（见上面的截图）。

Tickets.com在这点上做的不错。面包屑在顶部，字体很大。在底部，“Back to Reggae,” “Back to Concerts” and “Home.”放置的也很清晰。

targetbackto

因为不是所有的移动设备都有回退键，所以移动网站没有多余的空间留给侧边栏导航。面包屑是非常重要的元素，尤其是当目录和字母来展开到2或3层时。请记住，要让面包屑看上去像面包屑（使用下划线并用>来分隔），并且要放在每个页面的顶部或底部。

喜欢这篇文章吗？敬请期待下一篇：搜索和目录页面。