响应式导航的设计模式.pdfVIP

响应式导航的设计模式 在大屏幕上 ，导航置顶或导航居左是两种典型的设计模式 ，然而 ，这两种模式在小屏幕上却遭 挑战。在响应式设计日渐流行的今天 （译者注 ：其实已经流行了好几年了 ），我们更有必要重新审 视针对小屏幕环境下的导航设计模式。这些通过移动设备访问的页面导航 ，必须既方便用户快速 访问 ，又不能过于突出。 以下 ，我列出了 7 种常见的响应式导航的设计模式 ，它们分别是 ： 1. 置顶 （或“放任自流” ） 2. 页脚锚点 3. 菜单选择 4 . 开关 5. 侧滑 6. 置底 7. 彻底隐藏 上述每种设计模式都各有利弊 ，大家在选择导航设计方案时 ，需要根据项目的实际情况作出判断。 置顶 （或“放任自流” ） ![置顶 （或“放任自流” ）的案例][3] 将导航置顶或让导航随布局任意流动 （放任自流 ）是一种最简单的导航实现方式。正是由于这种易 于实现的方式 ，它也成为了当下许多响应式网页的“标配”。 优点 易于实现 ：在大屏幕和小屏幕上的实现方式一致 不依赖 JavaScript ：这样就最大程度上保证了兼容性 无需打破原有 CSS 样式 无需打乱内容本来的顺序 ：这种方式保证了它是完完全全的流体布局 ，无需一丁点的人为干预 缺点 占用空间 ：高度问题在移动端是核心问题。Luke 在自己的书中表达的“内容优先 ，导航其次”是典 型的移动端网页体验。我们都期望用户能够以最快的速度获取内容 ，这久意味着我们需要移除导航 以确保用户关注的焦点始终保持在核心信息上。而当导航高度过大 ，导致屏幕内的核心信息无法展 示的时候 ，就会引起用户的疑惑。如下图 ，当我们打开一个页面时 ，整个屏幕都被导航占据 ，用户 无法获取有效信息。 ![置顶导航在小屏幕上自动折行显示][2] 扩展性差 ：当你的导航刚好在一行内展示时 ，若要再添加章节的时候会出现什么情况呢 ？如果客 户突然要求再增加一个名为“产品和服务”的导航类目呢 ？或者将导航标题翻译成其他语言后导致字 符长度的变化呢 ？这些情况都会破坏原有的设计方案。 粗手指 ：导航全挤在一起 ，粗手指心急如焚 ，怎么点也点不到自己想要访问的导航链 ，这样就增 加了误操作的几率 （不适合小屏幕上通过手指进行点击操作 ） 跨设备的问题 ：不同设备渲染的方式各异 ，在 iPho e 上很棒的页面或许在其它平台上表现得很 糟糕。 ![不同设备上渲染的差异][3] 案例 * [Yiibu][4] * [T re t Walt o ][5] * [T im Kadlec][6] * [Et ha Marcot t e][7] * Brad Frost Web 相关资料 Height Mat t ers by @a dmag Do ’t Let Yo ur Me u Take Over by @St uRo bso 页脚锚点 在页面头部只保留一个去底部的锚点 ，将导航放在页脚是一种讨巧的做法。它节省了头部宝贵的 空间 ，同时又满足了访问导航的需求。 优点 ： 容易实现 ：页眉锚点 ，导航置底 ，没有比这更简单的了 ！ – 不依赖 JavaScript ：这意味着更少的测试和更好的浏览器支持 CSS 改动小 ：由于采用了绝对或固定位置 ，将底部导航移到大屏幕的顶部简直太容易了 缺点 ： 用户迷惑 ：快速跳转至页脚这一动作容易让用户迷惑 缺乏优雅 ：这样说很奇怪 （译者也有 同感 ），但我 （作者 ）认为类似开关的交互方式更性感一些。这种采用锚点跳转的方式虽然实用 ， 但不优雅 ，相比那些经过精心设计的移动端应用的交互方式而言太过粗糙。 案例 Grey Goose Co t e t s Magaz i e Bagcheck (I k ow it ’s ot respo sive, but it ’s w here t he t ech ique was po pularized) 相关资料 A Simple, Respo sive, Mo bile First Navigat io Mo bile First Boo k 菜单选择 将导航收纳在一个选择菜单的控件当中是一个不错的方式。它避免了导航置顶所占用的屏幕空间。 优点 腾出了足够的空间 ：一个选择菜单无论是在横向或纵向上都特别省空间 符合用户习惯 ：相比置底的方式 ，用户更习惯导航被放置在页面头部 容易辨认 ：下拉菜单的控件样式十分显眼 ，及其容易发现 支持本地化的交互方式 ：由于采用标准 控件 ，使得操作