基于用户体验的响应式网站的设计与实现

2018-12-25刘娜娜

电子技术与软件工程 2018年8期

文/刘娜娜

1 前言

网络技术在近些年迅速发展，其中移动电子政务作为数字图书馆的升级产品被广泛运用于各个方面。虽然现在移动电子政务的功能和一些性质都得到了很大的提高，但是还远远不足，很多方面无法满足用户的需求，因而用户体验和移动图书馆服务就成了人们关注的热点。文章在有关研究的基础上活用Web设计技术来设计基于用户体验的响应式移动图书馆网站。

2 响应式关键技术

2.1 流式布局

传统的布局已经远远不足以应付多种多样的终端登录的情形，响应式设计为了应对这种问题就采用了流式布局的设计方法。流式布局首先把固定布局中的px单位固定宽度改变成以百分比为单位的相对宽度，利用百分比来确定长宽高的问题，然后固定一边长度利用百分比确认其他长度。

2.2 媒体查询

媒体查询作为响应式设计的核心，是响应式设计之所以能够对不同大小的设备都进行响应的原因。一般来说媒体查询都是以@media作为开头，然后再输入表达式。同时创建媒体查询的过程中必须要把媒体类型作为第一个表达式。

2.3 图片的响应式设计

在设计网站的过程中一般图片都可以分为内容图片和背景图片，其中内容图片具有具体的意义，其中可能有一些文字来描述，对于这些图片的设计需要做到窗口宽度变小的同时图像随之百分比变小，因而不用占据太大的屏幕面积，在这一过程中可以把图片的宽度设置成百分比宽度，让图片的尺寸变的灵活起来。装饰性的图像作为背景图片，可以以突出重点为核心进行设计。

3 响应式设计的实现

3.1 移动优先

在响应式设计中，涉及界面应当优先为小屏幕的布局进行设计。当设计师倾心于为小屏幕进行设计的时候就会更多的把经历放在网站内容的净化上面。小屏幕是指视口宽度较小的屏幕，即屏幕上显示的网站的宽度大小。设计完小屏幕的设计布局之后再按照百分比进行放大，同时在放大的过程中会多出很多空间添加内容，进而进一步改变排版。如果按照桌面尺寸进行设计的话虽然在设计过程中设计师省力了不少，但是将其缩小之后就会出现很多内容拥挤在一块的小屏幕布局，不仅难以处理，更会给用户带来糟糕的使用体验。因而采用设计小屏幕转化为大屏幕的选择。

3.2 设置视口

视口是计算机或者移动终端浏览网页时候看到的区域，视口的宽度认为是屏幕的宽度。在访问没有viewport属性的页面的时候就会根据浏览器宽度来自行缩小以适应手机屏幕宽度，常常还需要经过自行缩放等来进一步调节，缩放的时候也会出现滚动条等，这就使得浏览过程十分的不方便。就响应式设计而言，就需要按照设备的屏幕大小来调节尺寸浏览网页，因此应当对界面进行设置，使浏览器不论屏幕尺寸多大都应当以全部尺寸进行访问，把视口宽度作为实际宽度。

3.3 导航变换

在一个完整的响应式设计的作品中，有多种多样的导航变换方法，其中切换式以及推出式的导航设计在默认条件下隐藏导航菜单，用户点击之后菜单再弹出，同时为了使菜单具有层次感，让导航展开后菜单经过一个过渡效果下拉，这样可以有效节省屏幕空间让用户看起来赏心悦目，获得更好的使用体验。在具体实施过程中先在页面添加一个切换钮，当点击切换钮的时候导航菜单跟随切换钮一同拉出就像抽屉被拉出的过程一样，为用户带来更多人性化的感觉。同时输入代码判断是否为移动设备，如果是移动设备而且导航隐藏的时候就采用绝对定位，若不是移动设备则使用相对定位。除此之外输入代码确定导航菜单下拉速度，主要是针对低版本的Firefox以及Chorome等浏览器进行处理，若不设置执行速度的话虽然可以正常运行网站，但是用户点击切换钮的时候一大页菜单突兀的出现会使人感到十分不适，因而加入对于执行速度的处理为用户带来更好的使用体验。

4 响应式移动图书馆中解决的重要问题

4.1 触摸屏问题

目前移动设备上网的情况比较多，在开发移动图书馆的时候需要充分考虑移动终端的性质。移动设备的主要使用方式是电容式触摸式以及手势，其中电容式触摸的工作原理是测量物体触及屏幕时候传导电荷的量来工作，而多点触摸是同时识别多个出点以使用户做出捏合和缩放等复杂交互，而手势包括轻划轻点和转动等等。为了提高移动用户使用的体验，响应式网站完全做成触摸网站是一个很大的工程，但是我们可以把人们通常会点的模块设计成触摸式，即点击热区，人们常用的地方用颜色标出不同然后设计成触摸模式，便于用户操作。在计算机上的悬停属性无法应用于触摸屏上，因而在触摸屏上取消此功能，把其对应的功能修改为其他触发方式。

4.2 浏览器兼容问题

大多数响应式设计都不需要用支持媒体查询的浏览器进行，不然响应式Web设计中的min-width等功能无法实现。然而对于很多老版本手机浏览器来说，支持这些工作并不现实。功能手机的话不必多做赘述，但是响应式的Web设计面向各类手机，其中小屏幕作为优先设计，其默认布局中并不包含媒体查询的功能，因此对于功能手机而言这些问题不足以影响手机性能。对于IE或者比他还早的浏览器来说，可以在HTML5当中额外加入注释，设置样式表，从而解决不能兼容的问题，为用户带来更良好的使用体验。

4.3 性能问题

性能是用户体验是否良好的一个重要影响成分，因为其影响重大，我们采取多种方式来提高网站性能。首先在设计网站时就考虑网站能够承受的最大基线并建立有关预算，用户如果要家在页面就要使该页面保存在预算中。其次对于网站进行简单优化，创建简化精灵并在必要时候使用压缩图像以减少加载时间。除此之外对于脚本文件确保其只在必要的时候加载，避免无效加载的情况。