header_v0.7.32

复杂网站的响应式导航设计

4年前发布

翻译文章 / 平面 / 教程
申悦 翻译,如需商业用途或转载请与申悦联系,谢谢配合。

可靠的用户体验,专注于提供一个结构良好、导航简单的系统。在过去几个月里,我已经参与开发了两个大型企业网站,这两个网站都具有复杂的导航系统。随着内容需求的增长,以及导航层级的增加,我们越来越难以维持如此庞大网站的简洁性……

复杂网站的响应式导航

Responsive Navigation On Complex Websites

        可靠的用户体验,专注于提供一个结构良好、导航简单的系统。在过去几个月里,我已经参与开发了两个大型企业网站,这两个网站都具有复杂的导航系统。随着内容需求的增长,以及导航层级的增加,我们越来越难以维持如此庞大网站的简洁性,更不要说小屏幕带来的额外复杂度。

        为了说明“在大型网站实现响应式导航”涉及到的技术,我将提及我的两个真实客户。我将首先描述整个过程,以及我是如何通过调查和建模完成这一过程的,然后会给出一些使用过的实际代码。

Middlesex-London Health Unit

过程

        在每个项目,尤其是大型网站项目,成功的关键在于紧密和客户工作在一起,让他们尽可能持续参与到设计过程中来。在我们进入编码阶段,并从技术角度思考如何构建一个网站前,我们需要更多地了解项目。在ResIM,我们是从“受众调查”开始的,然后才会进行信息架构、绘制线框原型以及对原型进行可用性测试。

        在我们最近一个为公共健康组织——Middlesex-London Health Unit做的项目中,我们从“受众调查”开始,想要知道用户在健康网站上都在寻找什么样的信息。考虑到MLHU的网站有超过1300个页面,我们需要确定应该被关注的重点内容是什么。

        作为一个设计工作室,我们已尝试过各种不同形式的受众调查。我们的首选方法之一,就是让用户去使用原型网站,观察他花多长时间来完成各种任务,以及他花多长时间来找到网站的各版块,并将这一过程录下来。这种测试方法并不总是得到完美的结果,因为许多没有经验的用户在缺乏图像、颜色等元素的情况下没法搞清楚网站怎么用。尽管如此,对于网站内容是否好找这件事上,该方法仍旧提供了有价值的观察结果。

        这种方法适合于网站结构和导航定义好的情况,但我们还没到这一阶段,所以需要后退一步。MLHU有各种委员会和组织需要在网站上展示,并且我们需要确定大家能听到每个人的声音。

        为了明确网站的哪一部分最重要,我们首先和所有被派来参与网站工作的委员会成员开会。每个组都陈述了他们的信息需要在网站上着重显示的原因,在听取了这些之后,我们开始建立一个适当的层次结构。我们发现当前存在很多不同的版块和栏目,为了向用户解释清楚,并更快地引导他们,我们需要想办法将其分组,归入少数父类目录中。我们打算把许多相似的类别拼凑在一起,并对每一组都命名;这些会成为我们的四个主要的导航项。

        这是一项伟大的成就,但我们马上意识到我们需要注意那些不需要归入那四个(导航)版块的其他重要页面。我们创建了一个“支持”菜单,来提供这些非健康相关主题的访问入口。一旦我们建立了这个简化的导航系统,并将其做进我们的线框原型中,我们开始进入测试阶段,在这一阶段中,我们让用户访问网站的各个栏目,完成任务并找到相关信息。

        在观察用户使用简化导航时,我们注意到每个人都能快速发现他们正在寻找的网站版块,并且毫不费力地发现他们正在寻找的特定网页和信息。这些来自真实世界用户的调查结果巩固了我们在信息架构方面做出的决策。1

MLHU的站点地图

        从这儿开始,我们就能够进入界面设计阶段了。这一阶段包括对响应式移动视图建模。很多客户认为一个响应式移动网站的概念,实际上和他们在桌面上看到的网站一样,并不需要一个针对移动端的全新界面。在建模阶段,有时有必要少给这样的客户展示一些东西。

        因此,我们通常会在这一步略掉“平板视图”,来让我们能够控制网站如何从大的“桌面”视图,转换成小的“移动”视图。在MLHU的案例中,我意识到针对我们目标客户中的一些高龄人群,我们不能依赖传统的右上角“汉堡包样式”导航。

        当发现这种解决方案(汉堡包样式导航)对于特定用户的使用会变得更困难时,我选择了垂直导航方案。这种方案允许用户在做出选择前查看所有菜单选项,从而给予二级导航更好的布局。

2

MLHU的移动端网站

实现

        我们最开始对MLHU项目的考量在于是否能保持移动端导航结构和桌面版一致。一种有代表性的例子是:网站将导航隐藏在“汉堡包样式”的按钮中,这也是一种常用的设计模式。但是,我们的目标用户年龄范围很广,我们发现把所有导航文字都展示出来,用户体验会更好。

        如果我们保持导航内容相同,然后对一些CSS进行调整,将导航包裹在一个“盒子”里,并把导航垂直堆放,而不是水平排布,就能得到我们正在寻找的解决方案。

@media only screen and (max-width: 600px) {

        nav li {

                width: 100%;

                box-sizing: border-box;

        }

        nav a {

                background: rgba(0,0,0,0.5);

                padding: 10px 12px;

                text-align: left;

                margin: 0;

                box-sizing: border-box;

        }

}

3

MLHU的移动导航

        基于Javas cript的桌面版导航解决方案已经有了,它采用的是“hoverIntent plugin”插件,但我们需要对其进行调整,使其在移动端也能正常工作。我们的解决方案是添加一个检查屏幕尺寸的判断,并且,如果是小尺寸,就切换成“滑动开关”而不是“悬停渐隐/渐出”。对于网站而言,“滑动开关”给人一种更原始的感觉,使其适用于移动设备,并让人感觉更快,而渐隐/渐出效果会在和触摸屏的交互上让人感觉缓慢和反应迟钝。

function navIn() {

           [...]

           } else if($(window).width() < 600) {  /* Here’s where we check for the screen size and do a slide instead. */

                   $(this).children(‘ul’).slideDown();

                   $(this).addClass(‘hovering’);

           }

           [...]

}

Seneca College

过程

        我们讲解“过程“的第二个例子是针对Seneca College官网的设计和用户体验调查。由于该网站有着不同的内容需求和组织结构限制,我们不能像设计MHLU那样减少主导航。因为客户已经给我们提供了导航,我们无需遍历整个信息结构;所以,我们直接进入了原型设计和界面概念设计阶段。和MLHU类似,我们也构建了一个响应式移动视图,并寻找一种用有效格式展示导航信息的方法。

        考虑到该项目的目标用户更年轻,我坚持采用“汉堡包样式”将“流式导航”隐藏起来。由于“汉堡包样式”广泛使用于移动应用中,该图标已经变得很有名了,并且它还给网站头部的LOGO和搜索图标留出空间。许多子页面需要显示在Seneca College的网站中,而同时把它们展示在头部导航中会显得太多了。

        我的解决方案是将二级导航显示在每个子页面的头部。该二级导航允许用户无需滚动很长的菜单就能快速移动到网站的版块中。对于复杂的大型网站,让其在子页面展示主要内容前就能进行导航定位,有时是很必要的。

        如果你不确定选哪个方案,试着用移动原型做些额外的用户调研,并摸索出真实世界的用户对不同解决方案的感觉。4

Seneca的移动端网站

实现

        Seneca的导航系统更复杂,并且他们的移动端和桌面版比起MLHU而言差别更大。我们需要找到一种方法,使得一旦屏幕达到一定尺寸,就用汉堡包图标替换主导航。对于移动端导航,我们在头部创建了一个div,但我们不想在桌面视图显示这个div,所以我们用CSS隐藏了它。

<div id=”mobileNav”>

       <a id=”searchIcon” href=”#”> <img src=”http://media.smashingmagazine.com/images/searchIcon.png” width=”24px” height=”24px” alt=”" /></a>

       <a id=”mobileNavIcon” href=”#”>  <img src=”http://media.smashingmagazine.com/images/mobileNav.png” width=”38px” height=”20px” alt=”" /></a>

</div>

5

Seneca针对移动端导航的div

#mobileNav {
       display: none;
}

对于足够大的屏幕,我们使用“media queries”展示上述提及的隐藏div。

@media only screen and (max-width: 600px) {

#mobileNav {

       display:block;

}

}

        同时,我们重新为导航指定样式,并隐藏它。你可以随意创造移动端的导航样式。我想通过推动内容的其他部分滑下全宽导航,但你也可以绝对定位菜单来覆盖主内容,或者使用像“PageSlide”的效果那样,通过屏幕外的推动动作来完成该操作。能够使用许多不同的技术来实现,对于网站而言,可以根据你喜欢的,以及感觉更好的那个来进行实验。

@media only screen and (max-width: 600px) {

   nav {

           display: none;

           width: 100%;

           background: #000;

           margin-left: -20px;

           padding-right: 40px;

   }

   nav li {

           display: block;

           margin: 20px 0 20px 20px;

           width: 100%;

   }

   nav a {

           color: #FFF;

           margin: 0;

           width: 100%;

   }

}

        最后,完成我们的“滑动开关”只是简单地添加一些Javas cript代码的事情,和上面的例子类似。

$(‘#mobileNavIcon’).click(function () {

$(‘nav’).slideToggle();

return false;

});

6

Seneca的移动端导航展开

        我们有必要在考虑可用性测试结果、各用户群的感知能力、以及用户的一般特性后再进行设计决策,从而加强用户体验。就像上述例子所讲的那样,尽管“汉堡包样式”菜单按钮已经变成“工业标准”了,考虑到目标用户的年龄或者能力,它可能并不是最合适的方法。

其他技术

        我总是在寻找针对复杂导航问题的新的解决方案。下面是一些根据项目需求可能会有用的解决方案。

PAGESLIDE

        拉出侧边菜单是当前移动应用的一种趋势,跟随着这种趋势,我喜欢“PageSlide”这个插件。用户对于这种菜单以及该菜单的工作方式感到很舒服。它的优点在于:即使它的可滚动菜单很高,也不会把内容页推得太远。

RESPONSIVE MULTI-LEVEL MENU

        由于某些原因,RESPONSIVE MULTI-LEVEL MENU(响应式多级菜单)显得很伟大。它模仿了普通的鼠标悬停下拉导航,并将其在触摸屏有效地实现了出来。它也使用户无需强制打开新页面也能向下进行层级跳转。

结论

基于你的用户进行设计决策应该是最重要的。如果你没有在设计的初始阶段就参与进来,至少试着参与到项目的反馈阶段中来。基于用户对你预期使用系统方式的理解,以及他们获得内容的能力,你需要帮助确定项目的哪个方向最符合用户的兴趣。

        接着,明确什么样的代码需要从桌面端到移动端进行平滑过渡。需要一些Javas cript来实现漂亮动画么?需要把方向从水平换成垂直吗?如果要求对media queries进行更少的调整,你需要对初始的CSS进行什么样的动作来实现更平滑的过渡。

        最后,不要让复杂的导航系统或信息架构吓倒你。总有方法来简化其核心,并以一种不可怕且容易理解的方式把那些层次提供给用户,接收挑战,并享受它的乐趣!


10
    意见反馈
    没有新消息
    密码登录
    短信登录
    微信二维码登录

    提示文案

    提示文案

    提示失败
    提示成功