浅谈远程教育网页样式设计的特色应用

曹红英

【摘要】 不同的网站页面样式，具有不同 的特点，需要网站设计者根据网站设计要求灵活选择和运用。设置“角色浏览”、“Banner图示”和“适应网页设计”，是优秀远程教育网页样式的特色功能设计。

【关键词】 页面样式设计 角色浏览 Banner图示 适应网页设计

创建面向用户的远程教育门户网站是高校远程教育机构进行信息化建设和大学文化建设的重要内容。“远程教育网站”通常被称为远程教育的网上“门面”。它既是服务师生的平台，也是对外宣传或展示自己办学实力及服务能力的重要窗口，也是传递大学文化的有效载体。其中，网页样式设计起关键性作用。

一、综述

远程教育网站应该尽量做到门户结构清晰，页面精美，访问快捷、功能实用。主要包含：整体布局要求和网站整体设计风格统一；界面设计体现用户相互之间交流互动的特色；网络响应速度应该尽量快，更快的信息访问速度、更加省时和智能化的用户界面；更简便、智能化程度更高的浏览查询流程；后台管理功能强大、录入效率高；易于查看网民的建议和评论以及后台信息。一个网站门户的主页面通常由Logo、导航、Banner、内容、链接、版权这六部分元素组成。有研究认为，网页布局包括传统“T”型布局、上下对照式布局、“上中下”“三”字布局、左右对称型布局、“回”字形布局、“同”字形布局、“国”字型布局、“川”字型布局、氛围式布局、POP海报四、式布局、“杂物箱”布局、“人物风格化”布局、封面型布局、简约型布局、综合型布局、瀑布流式布局等，这是基于对网页结构“形式”的划分。每一类型的页面样式都具有统一的构成元素，但彼此间又有自己独特的布局特点，因而呈现出不同的网站视觉效果和网页设计风格。

二、页面样式的分类特征

1）“简约式”。“简约式”的特征是页面主体“一屏显示”、布局简洁。在主流显示分辨率下，网站浏览者不再需要上下、左右的拖动鼠标，即可实现页面主要内容的相对完整的浏览效果。2）“图片动画式”。“图片动画式”的特征是布局简洁明晰、页面图片感强烈。一个精彩的网页缺少不了图片，如图片按钮、翻转图片、滤镜、透明图、导航图等，图片往往在网页中起到画龙点睛的作用。图片传达信息的直观性与寓意性远远超过文字，大号图片的应用也是简洁设计的一种体现，可以明确的表达网站诉求。3）“完整式”。“完整式”的特征是布局规整秩序、信息直观、“多屏显示”、视觉感强。网站页面组成元素之间，既错落有致，又和谐统一，营造出的良好秩序感。一般按照分列样式布局设计，以字体的大小对标题文字与正文内容加以区分，区别于以往栏目图标的复杂显示效果，具有“扁平化”的设计特点。

三、页面样式的特色功能

1）“角色浏览”。“角色浏览”是指网站设计者主观上假定网站浏览者为在读学生、教职员工、考生、访客等不同角色，按照浏览需求对网站综合信息进行分类和聚合，满足不同的访问行为。。在实际应用中，网站设计者运用CSS样式，以达到利用CSS美化网页，统一网站内各个网页风格。CSS样式定义可以用代码编写，也可以借助样式生成器可视化生成，样式可以定义在当前网页，也可以导入外部样式表。优点在于一是简化了不同网页重复的格式设置工作，二是将来只要更新了CSS样式，所有引用该样式的对象都会更新，便于网站的更新和维护。2）“Banner图示”。“Banner图示”是Banner在高校门户网站中“广告”效果的实现和扩展。《设计的法则》中提到：要增加人们的辨识力，让人回想起重要信息，就可以利用“图片优势效应”。用图片加文字，确认强调的是同一信息，以便达到最佳效果。有鉴于此，网站设计者将“Banner”作为一个专题栏目，充分利用其“图示”功能，实现其突出视觉功能的同时，也发挥其强化信息传达效果的作用。网站浏览者进行点选后可阅读，Banner标签包含的图文内容，更新速率频繁，浏览者可以根据时间进行自主选择，又使它具有了“书签”功能的展示效果。3）“适应网页设计（Responsive Web Design）”。如何将日新月异的网络技术应用于高校门户网站，使网站浏览者在各类浏览器终端上，尽可能获得良好的用户体验，是网站设计者思考和努力的方向。网络使用环境复杂而多变，除去传统意义上的台式机和笔记本电脑，又有了智能手机、iPad、iTV等终端。鉴于智能手机和平板电脑等移动浏览器终端的普及，一些远程教育门户网站，利用先进网络技术，创新设计页面样式，来适应和满足各类移动终端的浏览需求。

四、结语

远程教育网站是信息技术和大学文化在网络媒介平台的融合与呈现，网站设计者要做到内容为主，用户至上，提高用户满意系数。设计者应对网站设计进行调研分析，对其页面样式进行规律探析，形成更多系统化、理论化的设计经验和技巧，以此指导网页样式设计实践活动。

参 考 文 献

[1]祝晓铭，王艳平.高校门户网站页面样式设计探析[J]. 电脑知识与技术，2015（VOL.11）第2期：199-200.

[2]华磊，许长安.浅谈网站设计分析与网页制作[J].无线互联科技，2014（08 ）.

[3]威廉·立德威尔，克里蒂娜·霍顿，吉尔·巴特勒.设计的法则[M].李婵，译.沈阳：辽宁科学技术出版社，2010：152.

[4]董海斌，王丽梅，孙浩章.网页界面设计中的平面视觉元素[J].包装工程，2010（4）：89-91.