响应式网站设计

发布：2022-02-09 12:38:42 浏览：2313

1. 导航栏

导航栏可以算是网页中最重要的交互元素。我认为导航栏应该像用户的好朋友一样:愿意在需要时提供帮助，体贴入微但又为对方保留私人空间，又不需要对方持续给予关注。
响应式导航栏设计已经有不少方法可供选择，我们从中选取比较普及的几种详细介绍一下。

1. 顶端导航栏

只需把包含几个链接的导航栏放在页面顶端即可。这样的导航栏很容易实现，但要保证可缩放性，以免占用宝贵空间。导航栏要让用户能够轻松访问到，但也不能挤占核心内容空间。

2. 锚链接页脚导航栏

把导航栏放在页脚，然后在页面上方留一个锚链接，供用户跳转到导航栏。这种方法很巧妙也很容易实现，既保留了空间，使用起来也很便捷。但这种突兀的跳转方式可能会使部分用户感到迷惑。

3. 选单式导航栏

在小屏幕上把导航栏转换成选单也是不错的选择，可以节省不少空间。但独立使用表单元素可能会让用户感到莫名其妙，而且无法实现多级导航栏的功能。

4. 触发式导航栏

触发式导航栏相比之前几种显得精致不少，在小屏幕中会浓缩成一个按钮(三横线图标或者“菜单”锚点)，点击便展开成完整样式。节省空间的同时保证了便捷性。需要注意的是，很多用户的浏览器对JavaScript的支持不够好。可以借鉴Aaron Gustfason在“轻松打造智能手机导航栏”一文提及的方法:使用CSS的伪选择器触发导航栏。

5. 侧滑式导航栏

侧滑式导航栏是之前提及的精简式页面布局的重要组件。侧滑式导航栏并不显示在核心内容的上方或下方，而是隐藏在屏幕一侧，滑动屏幕方可显示。侧滑式的效果很漂亮，但大量的可移动部件需要在尽可能多的环境中进行测试，才能确保能正常显示。可以参考Stephanie Rieger在‘渐进式优化刻不容缓”中提及的案例。

6. 优先级式导航栏

这种导航栏是由Michael Scharnagl创造的，只显示重要条目，把次要内容隐藏到“更多”链接里。优先级式导航栏适用于同层级链接较多的导航栏，但设置过程中需要站在用户的角度考虑优先级，万一感同身受不够深刻，就得面临用户流失的结局。

7. 取消导航栏

  这种模式(或者应该叫做反模式? )为小屏幕用户取消了导航栏。确实节省了空间，但也精简了用户体验。小屏幕和大屏幕用户的诉求并无区别，不要根据设备不同区别对待，这一点需要牢记。

8. 复杂导航栏

电脑屏幕可以给导航栏留出充裕的空间，鼠标悬停可以触发下拉菜单的子菜单。但是换到移动端，屏幕空间有限，无法悬停操作，给复杂导航栏的实现带来了巨大挑战。
把数以千计的内容页精简成手机屏幕上三个小小的链接确实不太现实，因此大型机构、电子商务网站、大学和大型网站需要复杂的多级导航栏。很多设计师直面挑战，提出了很棒的响应式网页设计中复杂导航栏的实现方法。

1. 触发式多级导航栏

   给触发式导航栏增加折叠功能，就能实现多级导航的目的。用户可以通过单击父类别展开子类别。如果屏幕尺寸够大，导航栏会自动转换成普通的下拉式菜单。
在触发模式下，父类别一目了然，用户可以轻松定位所需的子类别，是层级较多的导航栏进行响应式设计的优秀解决方案。

10. 滑动式导航栏

   与触发式多级导航栏在父类别之下显示子类别不同，滑动式导航栏从精简式页面布局中获取灵感，把下一级导航菜单移到了屏幕右侧。
滑动式导航栏可以实现多级导航，自右向左的滑动动画符合用户的传统菜单使用体验。但这种导航栏实现相对复杂，需要在不同平台进行大量测试。需要注意的是，在不同设备上(尤其是手机)显示的动画效果差异可能会很大。

11. 取消子导航栏

子导航的链接通常也存在于父类别的页面上，这种情况下便可以取消子导航，直接将用户导向中转页面。用户不必再翻看子导航，但载入中转页面降低了这种导航方式的效率。

2. 条件加载

运行环境不同，优势和障碍也不尽相同。设计师必须明白响应式网页设计并不是为所有用户提供相同的浏览体验，更不是单纯改变页面布局。把桌面端的功能和设计完整地移植到移动端带来的用户体验不会太好，但却是当下的主流做法。相应的，把手机.上的页面照搬到27英寸屏幕的电脑上，既没利用好空间又浪费了强大的处理器。就没有合适的折中方案吗?
试试条件加载吧，这个功能并非响应式设计三大核心要素之一，但却是大幅优化响应式网站的利器。条件加载会首先读取页面的核心内容，同时提供附加内容(相关文章、产品或内容、评论版块、分享、地图以及其他第三方内容)的链接，按需读取。下边我们介绍一下具体做法。

1. 创建条件加载内容

(1)创建HTML 主页面和只包含附加内容的分页面。
(2) 将分页面链接到主页面，确保不支持JavaScript的终端也能顺利访问。
(3)使用JavaScript检 测用户动作或屏幕空间，当用户点击对应内容时，进行对应附加内容的载入。
(4)通过AJAX载入对 应内容。