网页设计论文

您当前的位置:学术堂 > 计算机论文 > 网页设计论文 >

学校校园响应式网页设计探析

来源:学术堂 作者:姚老师
发布于:2015-09-22 共1460字
摘要
  【论文来源】:谢日敏,郑佳芳。校园响应式网页设计应用研究[J].电脑知识与技术,2015,14:209-210.

  随着互联网的发展,移动版的网站得到广泛的青睐。用户希望能够开发一种兼容性强的web应用,即可以适应Iphone手机、Andriod手机、PC机及平板电脑等终端应用,又具有良好的用户体验。传统的web设计是针对不同的终端,依据用户需求开发不同终端页面效果。因此,对设计开发人员而言,将大量的精力放在了业务应用表现层的复杂设计上。Ethan Marcotte在2010 年提出响应式网页设计(Responsive Web Design),为不同终端用户提供了更友好的用户体验[1].

  1 响应式网页设计

  响应式网页设计针对不同的屏幕尺寸和系统平台,能够及时响应用户行为情景。当用户从便捷电脑转换到平板电脑时,页面的图片大小和脚本功能 能够自动适应用户体验。也就是,网站能够自适应用户的喜好,其主要消除了为适应新终端的业务应用,而重新进行页面设计的重复作业[2].

  响应式网页设计不只是屏幕分辨率可调和图像大小自动调整,而是一种全新网页设计思维方式。现有响应式设计技术主要包括以下特征[3-4]:

  1)移动优先(Mobile First)。移动优先是响应式网页设计中性能设计的重要组成部分。在响应式网页设计中,网页最主要的部分是设计为移动优先,使得敏感的设计是以桌面网站的方式或类似的隐藏技术来替换,从而提升用户体验感觉。

  2)层叠样式转换和媒体查询(CSS Transitions and MediaQueries)。使用层叠样式转换和媒体查询依据浏览器的宽度,实现自适应页面布局,从而查阅网站内容时,可以快速无缝的在不同页面风格之间进行跳转。

  3)响应式数据表(Responsive Data Tables)。传统数据表从PC端转换到移动端,往往由于缩小整个数据表,导致字体变化而不可阅读。响应式数据表就是要重新格式化表,使其具有更好的可读性。

  4)响应式导航菜单(Responsive Navigation Menus)。在终端屏幕缩小时,原有固定横向菜单的链接方式转换为一种下拉式菜单,替换原有的菜单项。

  5)流式布局(Fluid Layouts)。以往有四种不同的布局类型:固定宽度的布局,液态布局,弹性布局和混合布局,其各有优缺点。流式布局通过设置布局的百分比以及CSS 的浮动属性等技巧使得响应式网页设计更加灵活。

  6)响应式图像(Responsive Images)。响应式图像采用一种上下文感知图像尺寸方式,为不同分辨率下图像尺寸不同布局的情况,提供背景图像尺寸响应优化方法。由于响应式网页设计近几年才发展起来,各类技术还需不断的进行优化和改进,但随着类似Google企业也建议优先采用响应式设计,使得更多的团队加入到响应式网页设计研发当中,出现了不少基于响应式网页设计理念的前端框架。

  2 前端框架比较分析

  通过表1对主流响应式网页设计的前端框架进行比较分析,表明Bootstrap在国内外具有较高的支持度,而支持语义化的Semantic UI在国外具有较强的竞争优势[5].

  3 实际应用

  高校校园信息化建设过程中,主要平台包括信息门户、统一身份认证和数据中心。在这三大平台中信息门户平台的业务应用有信息发布系统、教务系统、网络课程平台、邮件系统和办公系统等。由于在信息门户平台业务实施过程,强调多业务应用的深度融合,而业务应用关于各类终端的自适应界面布局成为关键。本文采用Bootstrap对业务应用进行融合,使得师生可以在不同终端进行统一业务操作,如图1至图2.

  4 结束语

  校园响应式网页设计,必须从流行性、可持续发展、成熟的特点以及完善的文档支撑进行考量。在项目实践过程中,响应式网页设计必须与相关网站开发产品进行集成,解决各类终端界面自适应问题,增强网站的可持续性和可维护性。

相关内容推荐
相关标签:
返回:网页设计论文