响应式在网页设计中的应用原则

发布时间:2019-07-30 11:28:53 阅读:38

  互联网技术发展到今天,为了更好地适应社会发展的需要,人们关注移动互联网技术的发展。 但是,大多数Web开发都基于原始的PC端设计模式。 页面布局类似于PC的页面布局,但它按比例减少。 但是,这种网页布局在小屏幕设备上的表现并不理想,显示分辨率低,系统平台不稳定,为不同的系统和分辨率定制图书馆网页显然是不切实际的,但这个概念 响应式网页设计,问题有一个新的解决方案,可以在不同的设备终端前为用户带来良好的用户体验。 对于大多数学院和大学来说,他们的校园门户很早就开发了。 如果没有定期维护和更新,便携式移动终端(如移动电话)的访问体验并不理想。 当手机访问时,手机无法识别,仍然显示计算机界面的页面布局,可用性很低,大大降低了学生使用的愿望和频率。 毕竟,学生随时随地都可以使用计算机访问学校图书馆网站是不现实的,但几乎每个大学生都有智能手机。 移动电话已经成为大学生最依赖的工具和头号互联网接入设备。 因此,基于响应式思维设计的大学图书馆网页可以更加方便大学生在手机和平??板电脑上访问,为大学生带来更好的移动体验。

  一,概念解释与设计原则

  响应性是设计网页布局的一种新方式。 这个概念最初由Ethan Marcot于2010年提出,旨在为不同终端之前的用户带来更好的移动阅读和使用体验。 这种设计方法的想法是关注页面的布局和图像的大小,同时考虑到用户可能使用的设备的特性,例如分辨率,系统变化,屏幕宽高比等。 根据终端的特点,页面布局方法的智能选择呈现出优秀的页面布局效果。 当然,网页的设计是基于移动设备的高优先级原则,主要体现在以下两个方面:第一个是更加关注移动设备本身的特性,在视图中 不同移动设备的多样性和多样性。 ,需要优先考虑这些设备的显示效果,有针对性的优先级设计。 二是在设计中遵循渐进式设计理念,根据设备的显示尺寸,逐步优化显示效果,如优先考虑较小设备上的主要内容,忽略次要信息的显示,视大小而定 设备增加,可以相应地添加一些信息显示。 另外,在网页设计过程中,需要根据浏览器的特点设计不同版本的浏览器。 例如,高级浏览器可以相应地增加页面效果,并带来更好的用户体验。 一般来说,无论是针对面向PC的用户还是面向移动的用户,在网页设计中,您都需要考虑图像大小的自由切换,分辨率的自动调整等,以便达到不同设备的目的 。 这是一种耗时且经济高效的方式来进行良好的网页设计,而无需为任何设备进行单独的网页设计。 这是响应式网页设计的优势。

  二,是网页设计的核心技术

  到目前为止,已经提出了响应式网页设计概念。 经过几年的发展,这套设计理念已相对成熟,大部分主流网页都得到了跟进,实现了自己网站的更新。 目前,人们已就其核心技术达成共识,并设计了如下所示的三个内容。

  (1)页面布局设计

  首先,由于移动设备用于网页浏览的开发时间短,页面的渲染效果,大部分网页布局直接移植到PC的显示布局,这对于移动设备来说是非常不友好的, 不仅在操作中不方便,而且在显示效果方面也很差。 观众难以适应。 随着时间的推移,读者在移动设备方面的体验并不理想。 响应式网页设计采用流畅的布局方法来避免此类问题。 流程布局不同于一般的固定布局。 两者之间的区别如下。 顾名思义,所谓的固定布局具有固定的页面显示左右宽度,其宽度为px。 流式布局不同。 页面的左右宽度不受固定长度的限制。 它是相对页面宽度。 单位是百分比。 这里的百分比是指页面宽度与元素的比率。 总之,与传统的固定页面布局相比,流媒体布局的网页布局布局灵活,自适应,网页布局的宽度根据屏幕大小自动改变,确保没有 页面溢出,这极大地增强了页面元素在网页中的适应性。

  (2)对不同设备的响应

  响应式网页设计的核心技术之一是在不同设备中进行相应的差分响应。 基于响应式设计的网页可自动检测设备屏幕的宽度。 基于检测到的屏幕宽度数据,加载预设的CSS文件。 加载响应CSS文件将使其调用相应的Web页面布局。 通常,对于CSS文件加载,它可以通过HTML标记加载,也可以由现有的CSS加载。 可根据要求选择。 应该注意的是,即使在相同的CSS文件中,也存在不同的CSS规则。 将根据设备的不同分辨率选择不同的规则。 这些规则将改变网页的渲染模式和渲染效果,例如网页的背景颜色。 由于移动设备的尺寸,分辨率和纵横比比计算机更丰富,如果网页可以很好地识别每个设备的特征,则所需的网页布局的样式也更多。 然后调用相应的文件进行匹配,以便在PC上对相应屏幕上的内容呈现效果尽可能好。

  (3)图像处理

  对于一个网站,它不能仅限于简单的文字内容,而且通常包含各种图片。 在传统的PC上,由于它是早期唯一的优化对象,设计师认为传统的界面可以满足观众的需求,但随着移动互联网的发展,移动阅读设备出现,小屏幕尺寸属性使 网页显示效果大大降低。 为了尽可能地将大屏幕图像的显示区域缩小到小屏幕设备,一些网站通常会相应地减小图像的大小,甚至直接将CSS文件的属性设置为空以实现 隐藏图像。 从表面层分析,它已经达到了预期的效果,并且深入探索发现,虽然图像被缩小甚至隐藏,但处理后的图像在加载过程中不会收缩或消失,仍然遵循原始文件。 大小下载不会节省时间,也不会节省流量。 目前,还没有就此问题形成最佳解决方案。 一般的做法是首先加载页面,但是根据加载的页面布局确定图像加载的具体布局,例如哪个图像可以加载,哪一边不需要加载,当然,鉴于 事实上,在页面加载期间可能形成断点,通常可以在断点的位置加载图像。 但是,视频处理与图像处理方式不同。 在小屏幕上播放视频的体验并不好。 它通常只在小屏幕上提供视频链接,因此不会对页面加载施加压力。 它可以在大屏幕上缩放。

  三,网页设计过程中的障碍和困难

  响应式网页设计在很大程度上解决了移动设备上传统网页设计的显示兼容性问题。 由于响应式设计概念,现在可以在移动电话上轻松实现只能在计算机上实现的许多功能和有效的交互。 事实表明,许多大学图书馆在网页设计中使用响应式网页设计,反馈非常好。 可以看出,响应式设计网页将是最好的长期。 网页设计方法。 即便如此,响应式网页设计也暴露了实际开发过程中的一些问题,这在一定程度上阻碍了它的发展。 如何更好地解决这些问题非常重要,它将决定其未来的发展。 以下是一些常见问题。

  (1)增加时间成本投资

  传统的网页设计,因为它专门用于大屏幕电脑设备,可以很好地显示内容,网页设计的主要内容直接呈现在页面上,系统内部没有隐形设计,但响应式网页设计不同, 它解决了多设备兼容性问题,分辨率,小屏幕优化问题,因此设计工作量非常大,往往需要设计各种布局格式的界面,以便在实际应用中可以随设备改变做出相应的 介绍。 尽管并非所有设备都在一台设备上使用,但它必须在网站内设计和存储,而这种看似额外的设计将不可避免地增加项目的初始投资时间。 据统计,在响应式网页设计项目中,初始成本超过总成本的10%-20%。 对于高校图书馆而言,由于其自??身的学术特点,为了尽可能地建立最先进的技术基础,往往需要更多的努力来实现目标,所有这些都将增加成本和时间投入,并延长开发周期 和维护困难。

  (2)需要针对移动触摸屏设备进行优化

  在开发一些移动端网站时,尤其是在为移动电话或平板电脑等小屏幕设备开发网页时,您需要考虑方便性。 传统的鼠标和键盘操作可以轻松实现。 这些小屏幕设备只能通过其触摸屏功能来实现,但是触摸屏可以提供的交互非常有限。 依靠鼠标和键盘可以容易地实现的操作在触摸屏上变得复杂和低效。 触摸屏甚至可能无法实现某些特殊功能。 例如,计算机端的悬停功能不能暂时在触摸屏上。 实现。 为了实现相同的功能,更多的注意力花在触摸屏设备上来设计和实现。 所谓的响应式网页设计,更多的工作或设计重点实际上是针对小屏幕触摸设备进行优化的,如果其网页可以在移动设备上具有交互式体验,则可以看出网页设计非常成功。

  (3)浏览器的版本兼容性存在问题。

  在实际使用中,我们逐渐发现传统浏览器对基于响应式设计的网页不友好。 在IE8生成之前的浏览器中,不支持打开响应式设计网站。 原因是响应式网页所需的媒体查询是由CSS3实现的,但在IE8之前,不支持此功能。 要实现此功能,只需要进行系统升级。 当然,它也可以通过加载一些特殊文件来解决。 事实上,我们经常发现使用当前的浏览器登录到高校的某些页面,存在或多或少的兼容性问题,例如无法输入内容,无法显示内容,无法触发功能按钮 等等,需要一系列复杂的设置方式是在当前浏览器中正常使用学院网站。 即便如此,许多大学仍然没有意识到如何更新自己的网站,而是通过调整浏览器的一些不可见设置来实现与大学门户网站的兼容性。


我们在微信上24小时期待你的声音
解答:网站优化,网站建设,搜索引擎优化,APP 开发,小程序开发

非常感谢您有耐心的读完这篇文章:"响应式在网页设计中的应用原则",此文章仅为提供更多信息供用户参考使用或为学习交流的方便。如果对您有帮助,请收藏我们的网址:https://www.91webs.cn


18617670560