基于响应式的移动端网页界面设计与实现策略

刘春芝

（广州市交通高级技工学校，广东 广州 510000）

1.引言

网页界面设计是当今网络信息时代中的一项关键技术。尤其是在响应式技术应用以来，以此为基础的移动端网页界面设计及其实现更是受到了人们的广泛关注。本文主要对以响应式技术为基础的移动端网页界面设计及其实现进行了全面分析，主要包括网页界面的原型设计、基本HTML页面的构建以及通过CSS进行的响应式布局构建。

2.界面原型设计

2.1 设计构思与草图创建

在对网页界面进行设计的初期，主要的内容是构思和探索。通过草图创建的形式，可以将抽象的设计理念转为具体的图像形式，这样不仅可以帮助设计者理清自己的设计思路，又可以使其进一步明确哪些想法可行、哪些想法不可行，并通过情景法来验证各种构思是否正确。所以在通过响应式技术进行网页设计的开始阶段，设计者不仅要反复构思，更要将自己的构思以草图的形式呈现出来。

而草图的良好呈现基础就是构思，在此过程中，设计者可以独立进行构思，也可以与设计团队一起进行构思，并积极分享各自的想法，做到取长补短。网页界面设计中，构思的方法有很多，比如画出心智图、应用草图板、头脑书写、头脑风暴等。具体构思中可根据自己的喜好、习惯等来合理选择。

2.2 通过线框图呈现自己的想法

在对网页界面设计进行构思的过程中，设计者可以借助于线框图的方式将自己的想法呈现出来，并对其做进一步的验证。在这个线框图内，主要呈现的内容可以包括网页的LOGO、内容以及导航系统等。线框图不仅仅是将网站以视觉形式单纯地模拟和呈现出来，同时也可以进一步呈现出网页内各个基本结构以及各个页面之间所具有的相互关联特征。比如，用户可以通过这个界面看到什么，可以用这个界面做什么，每一个按钮对应的页面是什么，等等，同时也可以让用户明确怎样的操作会呈现出怎样的效果，使其明确通过怎样的操作来达成自己的目标。在以响应式技术为基础的移动端网页界面设计中，可通过很多的线框图对各个尺寸设备的具体布局形式及其交互行为进行展示。相比较草图而言，线框图所呈现的是网站具体的工作方式，这种呈现更加直观，可以为设计者以及用户之间的良好交流提供足够便利。

2.3 原型制作

线框图仅仅是一种静态形式的设计稿，用户并不能在这一阶段中对网页具体的工作方式以及各个细节做到全面了解，基于此，在线框图完成之后，便可对网页的界面原型进行制作，以此来对其交互效果做出全面模拟，帮助用户体验网页界面的具体工作过程。比如在点击某一链接之后，网页会跳转到相应的界面，在点击某一导航按钮之后，导航会通过怎样的方式出现等。相比较实际的网页界面而言，通过原型设计的形式，可以帮助设计人员对后续的网页界面设计进行评估和进一步的修改完善。而相比较局部内容展示形式的线框图而言，原型设计可以帮助用户对网格性特性及其交互做到更加清楚的认知，并帮助设计人员对各个环节做到良好把握。在进行网页原型的制作过程中，传统的方法是通过纸张来制作，这种方法虽然价格低廉且速度比较快，但是在网页还原度方面有所不足，因此，在当今的原型制作中，各种原型工具开始得到了广泛应用，比如Omni Graffle、Balsamiq Mockup以及Axure等，通过这些数字化原型的制作，可以让网页获得真实的还原使用效果，设计者可以将这些数字形式的网页界面原型展示给用户，使其明确具体的网页界面结构、交互以及视觉设计等多方面内容。

3.基本HTML页面的构建分析

3.1 HTML结构化语言概述

HTML是超文本标记形式语言的简称，这种结构语言的主要功能是对网页进行描述，其储存形式为纯文本，对文档组织结构的定义为标签，该语言诞生于1993年，是以互联网技术为基础发展而来的一种结构语言形式。目前，HTML5是最为广泛应用的一种HTML语言形式，相比较传统的Flash以及Javascripi而言，它引入了很多的新特征，比如图形中canvas元素的创建、视频播放中vidio元素的创建以及音频播放中audio元素的创建等，同时也引入了很多新的语义化标签，比如 section、nav、header、footer以及 article等。同时，HTML也具备着非常好的兼容性，可以在Windows、IOS、Android以及OSX等各种主流平台中实现跨平台操作。

3.2 以响应式技术为基础的HTML文档构建

在响应式移动端网页设计中，HTML文档在结构方面和PC端存在一定的差异性，此类文档需要应用到Viewport（视口）标签，将其设置在HTML中的head标签内：

具体设计时，可以将device-width 应用到width这一声明中，这样就可以让屏幕上的视口布局和设备屏幕的实际尺寸保持一致，以此来实现网页布局和屏幕尺寸的良好匹配。

4.通过CSS进行响应式布局的合理构建

4.1 CSS网页样式文件概述

CSS是层叠样式表的简称，这种计算机语言的主要功能是在HTML等结构化文档中进行样式添加。通过CSS的应用，可以让文档样式在文档内容中得以分离，比如字体、颜色和布局等，这样的分离可以让文档内容的可理解程度得到进一步提升，同时也让网页更加灵活。与HTML相同，CSS也经历了很多次的升级与改进，在当今，CSS3是最常用的一个版本，它有着良好的图形渲染能力，可以为匹配元素的选择提供足够便利，同时也可以更加便捷地进行颜色以及透明度设置，并支持多背景和文字阴影等的设置。随着CSS的发展，越来越多的新模块开始被应用进来，比如文字特效、边框、背景、高级动画以及盒子模型等，通过该技术的应用，可以实现设计者工作效率的显著提升，并进一步提升网页界面设计的美观性。

4.2 移动端网页基础样式的设计

在以响应式技术为基础来进行移动端网页界面设计的过程中，需要先从最底层开始，逐渐朝着最上层进行设计，对于更大尺寸的移动设备，应该通过媒体查询的方法来做好布局调整。为实现代码重复率的进一步提升，实现网页载入速度的加快，可以采用模块化设计法来进行CSS页面基础样式的构建。借助于模块化形式的CSS，可实现CSS文件大小的显著缩减，进而让网页加载速度得以有效提升。如果根据职能对网页中的CSS进行划分，我们可以将其分为三类，其一是基础层，其二是公共层，其三是页面层。通常情况下，每一个页面的头部都会有着三种样式的列表存在，且通过这三种样式来共同表现出最终的网页界面效果。以下是这三种CSS样式的具体特征：

4.3 通过媒介对向上设计进行查询

在以响应式技术为基础的移动端网页界面设计中，一个最基本的方法就是对CSS媒介查询功能的应用，在进行媒介查询的过程中，可以按照可用形式的设备信息来进行不同CSS样式的应用，比如方向、分辨率以及屏幕宽度等的信息，这样就可以让网页界面布局达到最佳效果。因为移动端的设备十分多样化，且其尺寸也存在很大差异，所以具体设计中，不可以简单地将移动端理解成手机端，而是将所有手机、平板以及其他形式的移动设备都考虑进来，在对最小尺寸设备进行了移动端网页基本样式设计之后，再将样式和布局进行适当调整，使其适用于更大的屏幕尺寸。在此过程中，可通过以下代码来进行媒介查询规则的合理应用：

（1）@media all and (max-with:480px){...}：这一代码在媒介查询中属于基本规则，它所表示的是水平宽度最大是480像素的所有屏幕都可以对以下CSS规则（省略号所在位置）加以应用。在这一规则中，媒介具体类型用@media all表示，代表这一CSS样式适用于全部的媒介类型。带有媒介查询形式的表达式用(max-width:480px)表示，若浏览器宽度最大值是480像素，则浏览器就会对这个代码加以应用；若浏览器宽度最大值更大，比如平板电脑等，就需要进行更加适当的样式以及布局设计。

（2）@media all and (max-with:768px){...}：在这样的情况下，如果设备宽度在480-768像素之间，就会通过该代码来实现样式和布局的良好呈现。其他形式的宽度尺寸以此类推。

5.结语

综上所述，在将响应式技术为基础进行移动端网页界面设计与实现的过程中，设计者可以通过合理的原型制作、HTML的应用以及CSS的应用来达到预期的设计效果，并以更加科学合理的布局形式将网页界面呈现给用户，以此来为用户的移动端网页访问提供足够便利。这对于网页设计与制作技术的发展和用户需求的满足都有着十分深远的意义。