响应式移动端网站建设有什么好处,网页导航响应式设计

  • 响应式移动端网站建设有什么好处,网页导航响应式设计已关闭评论
  • A+

响应式移动端网站建设有什么好处,网页导航响应式设计 响应式移动端网站建设有什么好处,网页导航响应式设计响应式移动端网站建设有什么好处,网页导航响应式设计响应式移动端网站建设有什么好处,网页导航响应式设计响应式移动端网站建设有什么好处,网页导航响应式设计现在福州嘉艺网络燕狂徒给福州企业制作企业网站全部采用响应式网页设计或者自适应网站制作,因为这样的网站更利于seo优化的效果,在百度排名推广上会更容易。

移动端网页已影响到了人们生活的各个层面, 不论网上购物还是查找资料, 不通过PC端浏览器, 掏出手机就能做到。近几年, 响应式设计大行其道, 越来越多的移动端网站采用了响应式技术。“导航是网站的核心功能之一, 导航设计的成功与否, 直接关系到用户体验是否良好[1]。”用户获取网页信息高度依赖导航系统来实现, 在结构复杂的大型网站中, 如果用户无法及时地获取网站信息, 终将失望地离开。导航系统会贯穿用户浏览过程的始终, 除网站内容外, 留给用户印象最深的网页界面元素莫过于导航。因此导航系统的研究对于网页设计者具有重要意义。

1 响应式导航设计优势凸显

针对移动用户, 网页设计人员会在PC端网页之外单独建立一个适用于移动设备的独立站点, 被称为移动端网站。PC端导航和移动端导航属于非响应式的, 主要采用两种布局方式, PC端采用的是固定布局, 而移动端采用的是流动布局。响应式设计的普及使它与PC端网页和移动端网页在导航设计上暴露出巨大差异。

1.1 PC端导航无法在移动设备上使用

PC端网页发展得较为成熟, 然而大多数适用于PC端网页的导航形式并不适合移动端网页。PC端设备显示器分辨率较高, 有的分辨率可达4K。导航菜单项比较多的复杂导航往往采用了固定宽度的导航, 尤其是多级下拉导航, 它展开时占据大量空间。当然在PC上浏览这样的网站毫无大碍, 如果将这种导航照搬到移动端网页上, 网页导航使用体验就极为糟糕。例如, 使用手机浏览器打开此类PC端网页, 整个网页就会被等比例压缩, 所有图片或文字均被压缩到无法看清。用户必须通过手势放大网页才能看清局部内容, 这种导航加大了用户的使用难度。该现象表明传统的PC端网页, 虽然适用于大尺寸的设备, 但无法满足移动设备用户的需求。

1.2 移动端导航无法根据设备调整布局

移动端设备呈现多元化的趋势, 屏幕尺寸不等。移动端导航的设计因此没有固定的尺寸标准。移动设备屏幕尺寸的多样性要求移动端导航具有自适应性, 可在不同平台上呈现最佳布局, 根据设备尺寸自动改变导航的形式。传统的移动端导航基本上采用的是使用了相对单位的流动布局, 这种布局可以让导航随着移动端设备尺寸的变化进行调整, 但是它也有短板, 就是布局始终不变, 不能适应设备的变化, 对于屏幕空间的利用并不合理。

1.3 响应式导航可在多终端自适应

总体来说, 不论是基于固定布局的PC端导航还是基于流动布局的移动端导航, 都不能根据设备进行调整, 无法满足使用不同终端的用户的需求。而基于响应式技术的响应式导航彻底地解决了非响应式导航遗留下来的问题。响应式导航能够自动识别设备信息, 根据设备大小调节导航布局和形式, 从而在不同尺寸设备上展现最佳的使用效果, 这是传统导航不可企及之处。

2 适用于移动端网页的响应式导航

基于响应式技术, 移动端网页的导航形式可以根据设备屏幕尺寸不同而进行有效合理的调整。目前, 使用小尺寸移动设备的用户居多, 我们更有必要在响应式日渐流行的当下, 重新审视针对小屏幕环境的导航设计形式。移动端导航在视觉上既要足够突出, 又不占用过大空间干扰用户注意力, 同时能够使用户通过它快速高效地锁定目标信息, 减少重复操作。通过观察大量国内外响应式网站的导航设计, 笔者列出五种常见响应式导航设计形式:

2.1 使用原生选择菜单收纳导航项

将导航项收纳在一个没有定义样式的原生选择菜单控件内。它避免了导航占据大量屏幕空间。原生的选择菜单支持用户所使用设备的本地化操作, 让网页交互更接近用户所使用设备的原生交互体验。原生选择菜单的样式十分显眼, 让用户容易辨认出来。比起通过CSS样式表精心设计的导航菜单, 原生选择菜单仅需简单编写HTML结构即可轻松实现。但这种菜单也有短板, 原生选择菜单在不同移动设备上所呈现的样式是不同的, 例如IOS设备和安卓设备中的原生选择菜单的样式大相径庭。

2.2 水平滚动导航避免折行显示

水平滚动导航对于导航菜单项很多的网站, 是一种值得使用的导航形式, 不少移动端购物网站的导航设计采用该形式。由于很多网站导航菜单选项过多, 同时又必须对其所占据的空间进行一定的限制, 水平滚动导航因此应运而生。水平滚动导航可以让用户使用手指平行拖动导航条找到隐藏于移动设备显示范围之外的菜单选项, 让导航菜单项不用折行显示, 节省了大量屏幕空间。

2.3 侧滑导航

侧滑导航俗称抽屉导航, 最早应用于Facebook的网页界面中。侧滑导航模块隐藏在可视范围之外, 保留“汉堡包”状的图标按钮在屏幕边缘, 作为显示导航的触发元素, 用户点击该按钮后, 导航模块会像抽屉一样从屏幕边缘滑出。这种导航在用户不需要使用时会完全隐藏于屏幕可视范围之外, 是一种极其节省屏幕空间的导航形式。目前, 索尼公司官网采用的正是侧滑导航, 通过在页面顶部设置一个“汉堡包”按钮开启导航, 使整个网页界面看起来更简洁, 同时惊艳的滑动特效也为网页增色不少。但是, 与其他简单的导航设计形式相比, 它的兼容性比较差, 不同设备对侧滑动画的支持不一样。在低版本的安卓设备上, 打开侧滑菜单, 动画会有所卡顿。而IOS设备对动画的支持较好, 所以侧滑导航的滑出动画在IOS设备上更加流畅。因此, 使用侧滑导航可能会造成多终端浏览体验不一致的情况。侧滑导航滑出形式多样, 包括折叠展开, 翻转, 插入。

2.4 悬浮按钮导航

悬浮按钮导航是一种覆盖在页面上的小型导航, 无论用户处于网站的哪个页面, 它始终保持在页面最上层, 方便用户随时使用。悬浮按钮导航通常使用简洁的图标, 加上保持在特定的位置, 使得悬浮按钮导航同页面内容区别开来, 用户更容易判断它的功能。同时, 为了避免悬浮按钮导航遮挡页面内容和妨碍用户操作, 通常悬浮按钮导航都可以在屏幕边缘自由移动, 或者在适当的时候隐藏起来。当用户需要使用时, 触发屏幕便可使其再次显现, 所以此类导航设计形式在屏幕空间利用和交互上十分具有优势。

2.5 将导航设置于页面尾部

尾部导航, 顾名思义, 位于一个页面的尾部。这种导航的理念是内容优先、导航其次。尾部导航使用了锚点链接技术, 当用户使用导航时, 点击页面顶部指定图标按钮, 可视区域会滚动到底部导航区域, 这样才能使用导航。这种导航的优势在于它不占用页面顶部的位置, 当用户打开网页时, 可以直接从内容开始浏览。但是尾部导航所处的位置过于隐蔽, 难以被用户发现, 如果不通过锚点链接, 用户需要通过手指拖动将页面向下滚动至页面尾部, 会令用户感到疲倦, 十分不便。

3 结束语

中国互联网络信息中心第36次全国互联网发展统计报告显示“截至2017年6月, 我国手机网民规模达7.24亿, 较2016年底增加2830万人。”。中国人越来越多地使用手机浏览器获取信息。手机作为中国网民主要上网终端的趋势将进一步明显。本文重点分析移动端网页界面中的关键元素-导航, 对传统导航与响应式导航的设计形式进行对比, 笔者发现不论是基于固定布局的PC端导航还是基于流动布局的移动端导航, 都不能根据设备进行调整, 无法满足使用不同终端的用户的需求。而基于响应式技术的响应式导航能够自动识别设备信息, 根据设备屏幕尺寸调节导航布局和形式, 从而在不同尺寸设备上展现最佳的使用效果, 这是传统导航不可企及之处。

目前, 使用传统固定宽度设计的网站数量仍然相当庞大, 尤其是非营利性组织和政府机构网站, 其用户体验较差, 不适合通过手机浏览器使用, 亟需针对当前移动网络环境进行升级。响应式技术为网站升级改造提供了有效的解决方案, 本文中所提到的基于响应式技术的导航设计形式, 无疑值得众多网站设计者学习和借鉴。