关键词：响应式网页；高校门户网站；设计要素
1、响应式网页设计概念
在提出响应式的网页设计概念之前，网站设计端的开发工作人员为了能够确保网站适应不同种类终端设备，经常会专门针对不同的终端设备完成相适配的版本的开发工作，也就是一个网站可以针对不同的终端设备开发出不同的前端版本，以此来满足对应的用户体验，但是，如果出现几十种甚至是上百中的型号不同的终端设备，独立开发的做法显然不太科学，会大大增加网站的开发成本以及后期的维修成本。因此，于2010年5月，网页设计师伊桑·马科特首次提出了响应式网页设计的概念，也就是给网站开发一个版本样式，以便能够自动适配并且兼容各种类型的终端设备，而且还能够满足相同的用户体验。也就是说，出现了响应式的网页设计之后，不仅使网站的开发成本下降，同时还解决了终端设备中的兼容性问题。各大搜索引擎也喜欢使用响应式的网页设计网站，这种网页目前已经成为了网站前端首要的设计选择。
2、设计院校响应式页面设计优化原则
2.1、页面设计兼具艺术性和体验感，避免页面冗杂
很多国内设计院校的网站版面风格基本上是一样的，网页中包含的内容相对较多，整个网站具有复杂性的特点，并且文字链接占到了首页的很大空间，从形式上而言，设计院校网站落后于网络内容自身以及网络技术的发展，缺乏对网站整体视觉形象的关注，特别是在设计方面缺乏艺术性。国外的设计院校网站则对网站主题的体现比较到位，在设计过程中能够明确网站的主题设计，优秀的网页设计需要服务于网站主题。不同的设计院校其性质以及目的也不同，网站所体现出的办学特色也有一定的差别，在进行网站设计工作的时候，首先需要明确院校的表达重点以及性质，通过不同方法体现网站设计的表达艺术性。
2.2、页面设计遵循内容优先于布局，重点展示信息突出
对于信息的接收，人们首先是借助首页的“形”来予以掌控的，在此过程中，页面布局发挥了非常关键的作用，页面需要遵循信息概括强、简洁而且容易导航的原则。使用响应式的页面布局能够改变以往的定式思维模式，从而实现对页面的创新设计。页面作为重要的信息内容展示区域，不是大篇幅的文字链接，国内大部分设计院校的网站普遍存在着同样的问题，信息内容的占比相对较大，而且还不注重设计效果。在实施网站设计工作之前，需要重点关注内容，不能先从布局着手，响应式网站设计工作的实施需要去除这种布局方法，并且还应该除去不必要的元素。
2.3、页面设计栏目适量归类避免层级过深
在设计院校的响应式网页设计工作中，需要避免出现层级链接太深的问题。因响应式的网站只是建立在一个站点之上，以此来完成多终端适配的，栏目的层级太深，就会导致页面无法加载或者加载时间太长。网页中的栏目也会出现很多一级栏目、二级栏目以及三级栏目等，对于栏目应该适当进行归纳，并且要重视用户的体验。栏目对于网站内容的整理与归纳，对首页内容的分类具有非常重要的意义，能够引导用户快速获取信息。因此，清晰的、合理的栏目结构设计对于网站而言非常关键。
期刊文章分类查询,尽在期刊图书馆
3、设计学院响应式网页设计探究
3.1、网站用户定位
学院网站中包含了学院的各种信息以及对外宣传的重任，并且体现了学院的对外影响力以及形象。门户网站的关键职能是给浏览者提供所需的服务、知识以及信息，不同的浏览者有着不同的需求，只有合理细分浏览者的身份，才能够确立网站中的信息模块。学院网站所面对的用户主要包含以下几个种类：（1）未来学生浏览网站。在很多的很多之间进行选择，在获取信息内容方面针对性比较强，更加注重学校简介、专业设置以及校园生活等方面的内容，这对 决策工作都会产生一定程度的影响。（2）学院学生浏览网站。掌握相关的公告与通知，并且还能够了解学院的最新动态，同时完成资料下载。（3）教职工浏览网站。获取工作方面的信息，同时掌握教学科研方面的信息。（4）考生家长浏览网站。找到与考生升学有关的信息，更加重视就业率以及专业设置，这是家长比较关心的问题，还有学院的建设设施以及地理位置等。（5）媒体工作者以及学者浏览网站。查阅学校的资料、视频、重大事件以及发展动态，积极向社会展开宣传。通过明确进行用户群体的分类，掌握浏览的动向，了解网站中主要的信息分布内容。
3.2、网页设计主体颜色应用及氛围的营造
不同类型的网站定位以及门户网站都会对网站颜色的选择产生影响，通常情况下，高校的网站应该以稳重、专业并且注重学术形象为目标进行呈现，因此，主色调上经常会用到常用的颜色，以此来满足多数人的品位。对于网站个性的展现以及主体形象的显示，主体颜色都发挥着非常关键的作用，特别是对设计院校而言，其在展现个性的基础上，网站颜色的选取应该尽可能降低颜色元素对内容带来的影响，在导航区域可以适当增加颜色，但是，在内容区域应该使用一些比较协调的颜色来起到辅助的作用。由于设计院校办学特色和传达内容的不同，会产生自身的独特形象，特别是对于教育型的网站来说，在长期的历史积淀下会形成独特的风格，因此，用户对学院也会明确进行识别，有利于网站形象的展示。
3.3、使用媒介查询，响应多终端设备
作为响应式网页设计工作的关键，媒体查询是一项核心技术，是建立在原生网站基础之上的。按照屏幕分辨率的不同以及屏幕的大小能够自动响应并且获取恰当的页面布局，从而在本质上将用户体验至上的感觉充分体现出来，而不是单一的进行信息加载。媒体查询检测所得的属性可以分为以下几个方面：色彩深度、屏幕分辨率以及视口的宽与高等。在特定的环境下对媒介查询进行检测，能够达到设备的属性值，并且运用CSS代码，以及询问浏览器，能够得到对应的表达式，从而对 “真”与“假”做出判断，以此来调整页面布局。
结束语
总而言之，在移动互联网不断发展的时代背景下，网站前端开发技术也逐渐被革新，其中，响应式的网页设计很好地解决了目前用户的痛点，但是也不能盲目追求新技术，使用响应式网页设计的主要目的是更好地满足用户体验。高校作为教育机构，在开设网站前端开发课程的基础之上，应该在高校网站建设方面提供更好的用户体验，以此来充分发挥出教育以及示范效果。
参考文献：
[1]张洁.设计院校响应式网页设计应用研究[D].内蒙古师范大学，2019.
[2]师晓丹.响应式网页设计教学应用研究——以茶叶企业电子商务网站建设为例[J].福建茶叶，2019，41(03):31-32.
[3]刘瑞冰.基于响应式技术的电子地图网页设计研究[J].现代信息科技，2019，3(02):69-71.
[4]叶潮流，马林山.基于HTML5+CSS3+jQuery的响应式布局网页设计[J].梧州学院学报，2018，28(03):22-35.
[5]楼丹.Bootstrap响应式设计在高校图书馆中的应用[J].电脑迷，2018(06):253-255.
论文作者:张莉莉
论文发表刊物:《科学与技术》2019年13期
论文发表时间:2019/12/5
标签：网站论文; 网页设计论文; 页面论文; 终端设备论文; 用户论文; 信息论文; 院校论文; 《科学与技术》2019年13期论文;