随着移动互联网的发展,市面上的移动终端种类越来越多,为了让学校的网页适应各种新媒体移动终端,加强网页信息化建设,论文研究Web UI(Website User Interface)相关技术,将其应用在我校数字图书馆等网站建设上,为我校信息化建设出力。Web UI又称网页产品页面设计,核心是通过给用户提供一个高分辨率自适应的响应式页面来提升网页的用户体验。早期,采用常见的显示终端各自配置一套网页样式的方式来实现响应式网页,这种方式不仅工作量巨大,而且适配能力有限。随着互联网技术的发展,Web UI的发展趋势越发的标准化、组件化,出现了各种响应式网页设计框架和开源的矢量图标库,使用它们能敏捷地开发出自适应各种移动终端的响应式的网页。本文选择当前流行的Bootstrap框架、开源字体矢量图标库Font Awesome并结合HTML5+CSS3+Javascript等技术,研究实现网页的响应式设计方案。将研究成果应用在学校数字图书馆网页的响应式网页设计上,使其能灵敏的适应不同屏幕的大小的移动终端,从而提升用户的浏览网页的观看体验。在Web UI的研究的实践中发现,现有的开源的矢量字体图标,仅支持单色图标且提供图标样式有限,无法满足个性化网页设计的需求。因此选择研究并实现自定义矢量图标库作为论文的创新要点,来弥补开源矢量图标库的不足。技术实现上,选择支持多色图的SVG矢量图标格式,通过研究把SVG矢量图标精简压缩且合并成SVG Sprite(SVG雪碧图)矢量图标库,在网页中使用SVG Sprite图标库,仅需一次载入,就能在HTML的任意位置重复使用,操作上十分方便简洁而且支持CSS修改图标样式。在此基础上,结合HTML5、CSS3、Javascript、Ajax和Node.js等技术实现一套便捷的自定义矢量图标库工具。主页包含以下功能:定制矢量图标库,图标编辑(增、删、改),图标选配压缩,配套生成图标导航和使用说明。使用个性化定制的的轻量级的矢量图标库不仅满足了个性化网页设计的需求,还提高了网页的开发效率和加载速度。研究表明使用响应式网页设计技术可以开发出更生动、更具交互性和适配性的网站,能灵敏的适应各种移动终端。而自定义矢量图标库弥补了现有开源图标库的不足,拥有良好的发展前景。将以上研究成果应用在我校的网页设计上,能加快学校信息化建设的步伐。