信息组织架构（拓展） 信息组织架构（拓展） 响应式导航设计模式.docx

几种常见的响应式导航设计模式优劣分析 大屏幕上有两个典型的区域适合放置导航：顶部和左侧，但在缺少屏幕空间的手机屏幕上却是一个有趣的挑战。随着响应式设计越来越流行，在小尺寸屏幕上处理导航的各种方法越来越值得我们关注。而手机网站导航必须在快速获取一个网站的信息和不可见性之间取得平衡。 下面是一些处理响应式导航比较流行的技巧，由于下述几种导航方式还没有约定俗成的叫法，所以大家可以结合案例网站来理解他的实际用法： 顶部导航 页脚锚 选择菜单 切换 左侧导航弹出 只有页脚 隐藏导航 当然每一种方法都有优点和缺点，在为你的项目选择适合的方法时需要注意。 1.顶部导航或者说“什么也不做”的方法 导航最容易实施的解决方案之一是保持它在顶部。由于这种方法容易实现，所以你可以在许多（甚至大部分）响应式网站中找到它。 【优点】 容易实现——你几乎可以保持你大屏幕网站的原样。 无需依赖Javascript——确保最大的兼容性。 无需辛苦的重写CSS样式。 没有绊倒你的代码顺序——无需赴汤蹈火的把导航列表在代码里来回转移。他按原始顺序排列。 【缺点】 高度问题——移动端的高度问题。正如《卢克的书》所说，内容第一，导航第二是首选的移动网页体验。你想要使用户尽可能快地获得重要的内容。这意味着要让导航移出用户的视线，使他们能够专注于页面上的核心信息。当所有的核心内容被切断，它会被混淆： 注释：该网站首屏由LOGO和导航构成，点击导航页面切换，而导航一直保持在顶部，页面之间的跳转看起来并不差异，也没有快速地揭开核心内容。 ?不易扩充——当你想要添加一个新的部分到你的网站，会发生什么？此刻导航整齐的排列在一行，当你的客户说你需要把“产品和服务”添加到导航，会发生什么？或者当你需要把菜单翻译成德文时呢？ 不易点击——填鸭式的链接太紧密地结合在一起，很容易导致不必要的的间接点击。 跨设备的问题——在iPhone上文字可能看起来很棒，由于不同的设备呈现文字的方式不同，在其他平台上看起来可能是分散的： 注释：在小屏幕上响应导航被截断成多行 【外部参考案例】 Trent?Walton个人站 ? Ethan Marcotte个人站 ? 2.页脚锚 这种聪明的解决方案，保持网站的导航列表在底部，而头部包含一个简单的锚链接指向页脚导航。这种方法为其核心内容清除出了很多的空间，同时仍然能够快速获取导航。 【优点】 易于实现——简单的顶部锚点。导航列表在底部。这是相当容易实现的。 无需依赖Javascript——这意味着更少的测试和更好的支持。 按比例放大需要很少的CSS工作——由于有绝对或固定定位，对于移动页脚导航到顶部变成小菜一碟。 单独按钮在头部——?一个简单的菜单图标或链接只占用很小的头部空间，这样可以为核心内容释放大量的空间。 【缺点】 锚点跳转让人迷失方向——快速跳转到该网站的页脚可能有点让人迷失方向。 不优雅——这样说似乎很奇怪，但一个不和谐的跳转，虽然非常实用，但不是优雅的交互使用。 【外部参考案例】 内容杂志?网站（点击顶部右侧菜单锚点，页面跳转到底部导航） ? ?3.选择菜单 对于小屏幕来说，驯服脱缰野马的导航的一种方法是将一个链接列表，转化为一个选择菜单。这就避免了顶部导航方法提出的问题，并且这是一个节省地方的聪明方式。 【优点】 释放了大量的空间——?一个选择菜单绝对比水平或垂直列表，占用少得多的空间。 保持在头部交互——而不是页脚导航。选择菜单保持了头部导航功能，这符合用户的预览习惯。 容易辨认——选择菜单贴有明确的标签，显示“导航”或“菜单”，这非常容易辨认。 使用本地控件——每个移动浏览器将会用各自的方式处理选择菜单。触摸设备将会提升导航列表的触摸友好度。 【缺点】 难以控制设计风格——选择菜单是设计风格的眼中钉。每个浏览器处理他们都有各自的方式，通常都是笨拙的方法。它使得网站跨浏览器风格看起来只有一半是一致的。因此，选择菜单处境尴尬，并且确实玷污了一个原本看着不错的设计。 可能令人混淆——用户习惯于选择菜单在下拉表单中，但我不知道他们是否会脱离上下文去理解一个表单元素。这只是一种直觉，所以这将是有趣的试验。 处理子导航项——通过选择菜单来处理嵌套列表可能看起来很怪异。子类别通常用破折号缩进处理，虽然这可能会让人容易理解，但是却也容易混淆，甚至有点难看。 依赖Javascript——对Javascript有依赖性。 【外部参考案例】 Viljami Salminen?网站 ? 4.切换 切换类似于页脚锚方法，但是没有跳转到页面底部的锚，而是设定一个菜单图标在头部的右侧，点击滑动打开或收缩菜单。这是一个好看的方法，也比较容易实现。 【优点】 固定位置——切换菜单的位置固定，不像页脚锚突然跳转，不会让用户失去方向感。 优雅——这绝对是优雅的方法之一。没有尴