打开文本图片集

摘要：本文以安徽师范大学历史学院、美术学院、音乐学院3个建设于不同时期、不同类型的网站升级项目实践为例，探讨当下高等教育教学网站的升级为适应新的时代高等教育理念及模式的改造策略。科技的进步使移动互联网成为人们生活、工作中不可缺少的工具，移动网络的普及，网上消费的盛行，人们对移动终端的依赖已经达到“离开移动终端，就寸步难行”的程度。在该种背景下，为在市场上脱颖而出，取得较高的经济效益，诸多电子厂商将目光放置在移动终端网站建设上。基于此，本文探讨了移动终端网页设计的优化。

关键词：网站升级改造;响应式页面设计;用户体验

引言

随着互联网的发展，移动版的网站得到广泛的青睐。安徽师范大学各学院希望能够开发一种兼容性强的web应用网站，即可以适应Iphone手机、Andriod手机、PC机及平板电脑等终端应用，又具有良好的用户体验。传统的web设计是针对不同的终端，依据用户需求开发不同终端页面效果。因此，对设计开发人员而言，将大量的精力放在了业务应用表现层的复杂设计上。Ethan Marcotte在2010年提出响应式网页设计，为不同终端用户提供了更友好的用户体验。高校校园信息化建设过程中，主要平台包括信息门户、统一身份认证和数据中心。在这三大平台中信息门户平台的业务应用有信息发布系统、教务系统、网络课程平台、邮件系统和办公系统等。由于在信息门户平台业务实施过程，强调多业务应用的深度融合，而业务应用关于各类终端的自适应界面布局成为关键。

1音乐学院：抓住特性 界面和谐统一

目前，我国移动终端设备大多引进了触屏设计，尤其是平板电脑、智能手机等，同样，人们对触屏的灵敏性布局上提出更高要求。因此，触屏设计中，设计人员应重视这一点，优化触屏的灵敏性。另外，因触屏网页与依靠鼠标的网页不同，触屏网页设计中，应使其结构扁平化，翻页、连接的响应区域较大，突出编辑区域等，便于用户触屏操作。改造前的安徽师范大学音乐学院（图1）外观老旧、没有现在时尚感;布局不合理，板块内容重复极容易造成浏览不清晰;交互设置不科学，没法适应现代社会人群的需求，缺少现代主流互动的应用;规划杂乱无章，不利于浏览者进行顺畅浏览;版式设计过于传统，缺乏个性化设计;只是形式化的开通网站，设计缺乏学院内涵与风格，过于陈旧缺乏视觉冲击力。经过同类型学院网页对比调研，改造过后做到网站主题鲜明，整体设计独具音乐学院的内涵与风格;满足现代新媒体大环境下用户的人性化、视觉化、交互性的需求;版面设计得整齐、干净，具有稳定的结构，使网页各部分分区明确，使阅读流畅，信息鲜明、突出（图2）。在音乐学院移动终端网页设计中，其页面布局方式主要有以下几种：拍扁式、手风琴式、棋盘式。其中，拍扁式主要是将主流页面分为三栏布局，布局比例为1∶2∶1，导航栏在页面的顶端，排列顺序以区块重要性进行排列，文章以标题形 式显示，页尾处有返回顶端的设计。手风琴式，该种页面布局下，人们在打开移动终端浏览器时，仅能看到一个简单摘要，后续内容可层层展开，便于用户观看更多、更详细的信息。棋盘式网页，在打开网页时，用户能够对页面全局有整体了解，并且，用户还可利用局部缩放功能，便于用户观看浏览器的细节布置。其缺点在于，若移动终端屏幕较小，当用户收缩页面时，难以看清屏幕文字。

2历史学院：尊重历史 延续传统

在历史学院的网站改造升级中使用较为沉稳的配色，页面简洁凝练，能在短时间内抓住浏览者的视线，有效快捷地传达信息。页面合理布局，板块分类合理，逻辑架构清晰。独具创意、个性化的品质，扁平化的风格，具有现代设计气息（图3）。在页面图标设计中采用中国印章、梅兰竹菊等元素，与整体色调及历史学院整体气质相适应。随着移动终端的普及，得益于其便利性与快捷性，网上冲浪的用户不断增多，人们对移动终端的依赖性不断增强。在移动终端普及的几年间，可以发现，移动终端已经改变人们的生活，为门户带来诸多好处，“一部手机，行走天下”已经不是梦。用户使用各种品牌和版本的手机、各种分辨率的电脑还是iPad打开网页时，网页的界面都能够展示合适的布局、图片尺寸、显示内容等，提供最优化的显示效果。这种能够自适应各种屏幕分辨率，自动转换网页界面布局和内容呈现的网页叫做响应式网页。同终端设备上都能提供良好的用户体验和视觉效果，充分发挥移动互联网渠道广泛、覆盖率高、使用便捷等优势。移动优先策略能够避免移动终端加载过多的资源，无需将PC端样式重新绘制，PC端表现效果也不会受到影响。响应式设计为实现网站移动化提供了一种新的设计策略和选择，随着响应式设计技术的不断发展与完善，其受到关注与应用也将会越来越多。

3美术学院：推陈出新——新徽派

在网页设计中，设计者应加强用户信息采集模块设计。因为，用户采集系统能够将用户浏览信息记录，并通过分析，判断用户感兴趣的内容，并为用户显示类似内容，提高网页的服务性能，吸引用户进入网页浏览。安徽师范大学美术学院原网站在布局上信息功能分区混乱，无法突出重点找到关键信息;在信息层级上，页面信息块分布平均，信息重复;在画面的色彩搭配上，页面色彩与信息混乱;颜色较为平淡，阅读者视觉容易引起疲劳。整体显得过时，不符合当下新时代的审美（图4）。新网站界面采用新徽派简约风格，界面多运用徽派马头墙、徽窗、徽瓦等元素（见图5），通过对复杂徽派建筑的简化，达到简化界面的效果。界面采用响应式图像采用一种上下文感知图像尺寸方式，为不同分辨率下图像尺寸不同布局的情况，提供背景图像尺寸响应优化方法。由于响应式网页设计近几年才发展起来，各类技术还需要不断的进行优化和改进，但随着类似Google企业也建议优先采用响应式设计，使得更多的团队加入到响应式网页设计研发当中，出现了不少基于响应式网页设计理念的前端框架。美术学院网站将采用最新响应式优化方案。

4结语

高等教育网站改造升级，必须从流行性、可持续发展、成熟的特点以及完善的文档后台支撑进行考量。在项目实践过程中，响应式网页设计必须与相关网站开发元素进行集成，解决各类终端界面自适应问题，增强网站的可持续性和可维护性。网站建设优化要不断提高民航网络安全防范水平，要不断发展软件、硬件的革新技术，要不断根据安全实例完善我们的管理制度，要不断加强人才管理建设，打铁还需要自身硬，人才是基础，只有拥有了高素质的人才队伍，才能在新时代下面对各种挑战能应对自如，才能更好地保障网站安全。

参考文献：

[1]赵怡姗，范明钰.基于HTML5与CSS3的网页设计技术研究[J].成都信息工程大学学报，2021，36（06）：641-642021.06.010.

[2]刘亚茹，宋晓昭.基于Bootstrap4的响应式页面设计的应用研究[J].电脑编程技巧与维护，2022，（04）：153-156+175.

[3]黑子微.探究响应式网页设计在不同设备上的实现方式与原理[J].电子测试，2020，（22）：137-138+116.

作者简介：汪丹丹（1998.09.10-），女，汉族，安徽芜湖人，硕士，安徽师范大学，数字媒体艺术。