为公司网站设计了一个手机端导航菜单,我是这么做的

为我们网站,PlayStation,设计了这个导航菜单,在经过几次内部草稿和技术原型的变动、修改之后,终于通过了Nielsen Norman Group(诺曼集团)的可用性测试。

ee47571b3ab932f875a399d85724.jpg

△窗帘式导航菜单概念图

从PC端→手机端

作为一名数字设计师,我主要负责完善手机版网站导航菜单设计,以便提升用户体验。毫无疑问的是,采用下拉式导航菜单的用户界面在PC端网站的设计中占据了根深蒂固的地位。

2151571b3b7d32f875a399418be8.jpg

△PC端下拉式菜单

1,鼠标:鼠标的存在方便用户们在一个网页长时间徘徊、逗留,有时候,无需进行额外的点击,只是简单的上下翻滚就能看到自己想看的内容。

2,界面:PC端的界面内容是横向延伸的,而手机端的界面内容是纵向延伸的,这两者的效果可大不一样。

不幸的是,适用于PC电脑端的这两个因素,并不能同样适用于手机端:前者靠鼠标输入,后者靠触屏输入。所以,我们并不能简单的把PC端的横向模式简单、粗暴地转换成适用手机端界面的纵向模式就可以了。

考虑现有的手机端导航菜单模式

在研究其他的手机端导航菜单的时候,我注意到两种常见的多级导航菜单模式,简而言之,它们各有优劣。

1,折叠式导航菜单

这种模式的导航菜单,用户们打开之后首先看到的就是一组一级链接,从中选取任何一个,都可以“扩展”出一组二级链接。

然而,从下面的例子中我们也可以看到,如果某个菜单类别包含了许多链接,那么一旦用户选定了这个类别,扩展之后的内容就有可能把其它类别“挤出”屏幕。同样的,如果某个一级链接包含了许多二级链接,那么扩展之后的二级链接们也有可能把其它一级链接们“挤出”屏幕,这样并不方便用户在任意两个菜单类别或主链接之间随意切换。

37a0571b3c0f6ac72538123427be.jpg

△折叠式导航菜单

想法:要想改进,可以将菜单设置成(无论用户做出哪个选择)都一直保持菜单类别的可见性。

2,返回式导航菜单

想要展示多级链接,另一个常见的解决方式是使用“返回”键。在下面这个例子中,当用户选定某一个类别之后,我们可以看到数个原本被隐藏的一级链接,并且,用户们可以通过“返回”键返回上一级页面。

这个模式的问题在于,用户们需要进行更多的操作。没错,哪怕只有一步,那也是多了。

3472571b3c5d32f875a3998a4ac1.jpg△返回式导航菜单

想法:想要改进,可以将菜单设置成(用户)无需多余的操作,就可以在各个菜单类别之间自由切换。

考虑到这里,我内心已经有了一个大概的想法,就是基于这两点之上的进一步完善。

窗帘式导航菜单

对于手机端的多级导航菜单来说,这是一种与众不同的思路:通过滑动的方式(想象一下当你拉动窗帘时候的情景。)

有点和PC端的下拉式导航菜单相对应,不过,一个是下拉,一个是横滑。所有内容都被分为两个层次,其一是一组一级链接,每个一级链接下面都包含数个二级链接。而这两个层次的链接们可以同时显示在用户面前。

考虑到这是手机端导航菜单,不适用PC端导航菜单那种横向、水平的屏幕空间,所以链接的排列上采用了纵向堆叠而不是横向并肩模式。

e23b571b3d2032f875a399d5628c.jpg

当用户们点击菜单,“窗帘式菜单”从手机屏幕左侧滑入视线,展示出来的是一组一级链接。

两个层次的链接们同时可见

当用户选定某个一级链接,其包含的二级链接们会从屏幕右侧滑入用户视线,而与此同时,屏幕左侧仍然保留着其他所有一级链接,避免用户们使用“返回”键。具体动画效果如下图:

c2de571b3d3c32f875a399b953fd.jpg

屏幕左侧的图标相对较小,这样可以使得右侧滑出的二级链接们几乎占据了整个屏幕,进一步优化了可用屏幕空间,提升了用户使用体验。与此同时,左侧图标的存在也方便用户自由地在不同菜单类别之间完成迅速切换。

有时候,仅仅依靠图标并不能将你的目的清楚明确地表达给用户,这个时候,不妨给图标加一个解释的“标签”。

当用户们打开菜单,第一眼看到的就是纵向排列的图标及其所带的“标签”,这样有助于用户快速了解菜单所包含的内容。此外,当用户点击某个一级链接,进入其下二级链接所在,那么两个层次的链接所在页面会同时显示,避免用户使用“返回”键返回到最初的菜单类别。并且,二级链接所在页面左上角有一个小设置,方便用户查看菜单类别图标下的“标签”,具体信息一目了然。

c623571b3d5a6ac725381236cd60.jpg

一般来说,留给菜单类别的垂直空间往往是充裕的,无需任何翻滚和下拉(当然,这也不失为一种选择)。如果某个菜单类别包含了大量链接,那么用户可以通过上下滑动屏幕查阅更多内容。在屏幕底部,我设置了一个小的指示箭头,表示“这里还有更多内容”。

1 2 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部