响应式网站UI设计探讨

王旭 朱光

摘 要：随着互联网技术的发展，尤其是移动端的快速发展，互联网应用极大的方便了我们的生活。响应式UI给web前端开发人员带来了很多的便利，能够快速的满足PC端和移动端的网页构建需求。

关键词：HTML5;响应式;UI设计

中图分类号：TP393.092 文献标识码：A

随着越来越多的智能移动设备加入互联网中，移动互联网成为了互联网的重要组成部分。如何能够在不同的设备上有效的展示信息，应对不同的设备尺寸成为UI设计的重要内容。响应式UI设计的出现，使得网页页面自动适应不同的分辨率和页面尺寸，能够响应不同类型的用户操作，为移动设备提供了更好的体验。

1 使用响应式网站UI设计的原因

即使是相同PC平台，不同显示器的分辨率仍然是千差万别，页面的展示效果将不可预知，网页带给用户的显示体验也无法预知。手机、ipad、智能电视、智能可穿戴设备等智能设备正在不断增加，设备的尺寸、分辨率多种多样，没有办法设置一个统一的标准。同时用户的操作方式也在不断的丰富，鼠标、手写笔、键盘、手指等操作方式的革新也给设计者在设计交互方面带来了很大的难度。

响应式UI设计，能把不同类型的屏幕当成页面的容器，让页面像液体一样在容器中流动起来，屏幕的尺寸不同虽然影响页面的展示形态，但是不影响页面的美观度和内容的展示。页面中的每一个块、每一个图片、每一个元素都是灵活可变的，压面的排版将不受显示屏大小的限制。同时能够接受用户不同的交互方式并予以响应，使用户的交互体验统一。

2 实现响应式网站UI设计的关键技术

2.1 媒体查询

媒体查询技术在CSS2中就有所体现，如设计打印样式等，在 CSS3中媒体查询可以让我们根据设备类型和设备特性对不同的媒体配置不同的CSS样式，从而展示出不同的效果。媒体查询支持IE9以上的主流浏览器，如chrome、firefox等，同时兼容各种智能移动设备，实现PC端、手机端、平板端、智能设备等无障碍浏览。

2.2 Javascript前端语言

Javascript（简称“JS”）是一种具有函数优先的轻量级、解释型、即时编译型的高级编程语言。Javascript（JS）是一种古老的前端语言，随着互联网技术的发展，JS又焕发了青春，JS具有容易上手、跨平台的特性，使其在各种终端大行其道。同时基于JS的各种框架如JQUERY、VUE.JS等使JS 操作网页界面元素，响应事件等变的更加的简单。

3 响应式网站UI的设计原则

响应式UI设计首先要摒弃传统的固定宽度网页设计，要使网页能够自动适应各种设备的分辨率，同时能够响应不同的操作如手指拖动、缩放等。响应式UI设计应该遵循以下原则：

3.1 摒弃固定大小、宽度等设计

减少使用像素等固定大小宽度，使用百分比等来定义块状元素和图片的大小宽度，确保块状元素和图片等多媒体元素能够完整的显示，并可以根据屏幕的大小进行缩放。

3.2 内容块可伸缩和可自由流动

内容块在设计的一定规则上可以自动缩放，如在1 600*900的分辨率和1 024*768分辨率会根据屏幕的大小自动缩放宽度，如占屏幕宽度的100%等，在不影响整体显示的情况下，页面的宽度将变小，但整体的布局也相应的缩小展示。

当页面变的足够窄的情况，如屏幕宽度<768px时，通过缩放已经不能完美的展示内容，那么我们可以改变块的大小，如将一行显示4列转变为2行显示4列，在保证页面美观的情况下，通过下移两行让页面变长的方式来实现流动的效果。

3.3 网页元素能够根据页面隐藏或显示

网页元素的显示、隐藏可以根据屏幕分辨率自行调节，将有助有保证页面的整体美观性。如在屏幕宽度>1 200px的时候，一个内容块里面的内容将被详实的展示出来，当屏幕宽度逐步缩小到小于768px时，文章块的内容如果完全展示的话，会将该文字块无限拉长，影响系统美观。所以文章块的内容需要根据父级元素的大小确定将要显示的文字数量，对原有的文字进行截断或者完全隐藏，用户可以通过点击查看详情进而获得更详细的内容，从而保证页面的整体美观度。

3.4 菜单栏可以收缩和展开

菜单栏承载着网站的功能引导和页面重定向的功能，响应式UI设计的菜单栏同样也应具有响应式的特质。响应式菜单同样可以根据页面的分辨率进行自我调节，如当页面宽度大于768px时，菜单栏将以横向水平分布的形式展现，这样展示的直观、大方;当页面宽度小于768px时，菜单栏将收缩为一个按钮或一张小图片，用户通过点击按钮的形式展开下拉菜单栏浮动层，从而在不破坏移动端页面布局和结构的情况下完成菜单栏功能引导和页面重定向的功能。

4 响应式网站UI设计的优缺点分析

4.1 响应式网站UI设计的优点

首先，响应式UI设计最大的优点在于，服务商只需要开发一个网页就可以完成对多种设备访问的支持，避免了为多种移动设备开发客户端的形式来推广自己的服务。同时响应式网站UI设计可以做到多终端一后台，通过一个网站后台的维护和更新，即可完成对多个终端的更新和维护，从而有效的节约开发和维护的时间和成本。

其次，响应式UI设计有很多优秀的开源框架可供选择，开发时间和人力成本会得到有效的缩短和控制。目前流行的框架有Bootstrap、Frozen UI、Layui、Amaze UI、Pintuer等，用户可以通过简单的学习就可以通过开源框架的网格系统快速的搭建响应式UI设计的网站。

第三，响应式UI设计的网站SEO友好。响应式网站支持多种终端，用户访问关注的URL不断的积累，对搜索引擎更为友好。

4.2 响应式网站UI设计的缺点

首先，基于响应式UI设计的网页在不同设备上的体验效果较难统一。响应式UI设计在设计之初，需要对页面在不同设备上的展示效果进行细致的测试和评估，如何能够保障用户在不同的设备上获得相同的用户体验是响应式UI设计的难点，比如一副大图在不同设备上分别以什么的形式展现，文字的大小在不同设备上都要加以区别，哪些设备展示哪些元素，都是在设计的时候要考虑的内容。前端设计师需要花大量的时间对不同的设备进行测试、修改，对不同的设备订制相应的CSS和JS代码。

其次，响应式设计的网站加载速度相比没有优势。响应式网站需要借助CSS和JS实现响应式内容布局，在加载的时候势必要加载更多的JS 和CSS文件，从而导致加载速度减慢。

5 结论

响应式网站UI设计是一种全新网站设计理念，可以使用户以较少的成本获得多种设备的访问支持，同时响应性的网页设计仍然在不断变化，不断创新，值得我们持续关注。

参考文獻：

[1]余跃泓.基于弹性盒子的响应式网页布局[J].信息与电脑，2020，32（10）：181-183.

[2]张丽.以HTML 5+CSS3+jQuery为基础的响应式布局网页设计探讨[J].计算机产品与流通，2019，36（11）：195+198.

[3]吴永娜，杨春旭，许佳南.基于html5+css3的网页自适应布局设计[J].电脑知识与技术，2019，15（28）：242-244.

[4]陆郁.浅谈CSS3 Media Query的使用方法[J].科技资讯，2019，17（27）：22+24.

[5]赵彦杰，陆冕.栅格系统方法在网页界面设计中的应用研究[J].包装工程，2019，40（18）：95-100+107.