大型医疗单位网站主页的板块设计
2016-04-01张琪李晢
张琪 李晢
【摘 要】随着网络技术的发展和经济发展的需要，国内的大中小医院都开始逐步建立自己的企业网页，网页的开发不仅是适应社会生产开发的需要，在电子商务飞速发展的现代，网页对于扩大市场，产品的展示宣传，企业信息发布管理，员工管理等许多的方面都有十分重要的作用。本人浏览了许多的医院网站，发现在设计过程发现这些网站虽然风格样式虽然不同，但是结构布局上都是相似的，本文就国内医院网页的建设实例进行分析，总结出通用的网页板块布局设计思路。
【关键词】网页；实例分析；板块布局；风格样式
0 前言
由于互联网技术的飞跃发展，web前端设计成为了一个十分热门的技术，我们都知道网站的建设对医疗企业的重要性，但是在实际的建站过程中由于疏忽导致了许多的网站产生了一些缺漏，由此导致使用产生许多的不便。我希望能在众多款式风格多样的医疗企业网站中完成一个调查汇总，以此对相关设计人员在完成设计项目时候提供设计资料。
1 网站建设的必要性和目的
在这个互联网飞速发展的时代，一个单位要是想做大做强，没有互联网技术的支持和宣传是不行的，网站作为代表企业单位的宣传门面，对企业的重要性不言而喻。利用网站不仅可以更好的展示医疗单位的形象，介绍单位提供的产品和服务，还可以提高单位认知度和品牌知名度，发布内容新闻、服务动态、最新的医疗信息，接受在线挂号，拓展信息渠道，接受在线咨询，完善售后服务进行网上招聘，吸引更多人才。但是在设计上如果不按照一定的设计逻辑来建立网站，设计出来的网站往往不能满足客户的需求，或者给用户带来不便。为了完善单位的网络信息，设计一个独有的单位网站就被提到了他们的计划中来。
2 网页板块布局样式
2.1 主页的版块风格
我们平时在上网时经常浏览过各种各样的网站，由于网页设计目的不尽相同，所以我们看到的风格也是大不一样，在浏览一些以电子商务类的网站时，比如淘宝网、天猫商城、亚马逊网上书店，由于它们的目标就是以网络销售，我们看到的网页往往充满了大量的展示类信息，这些网页的风格在这些销售类网站上往往充满回力，鲜艳跳跃。从用户心理上来说，跳跃性的色彩和活跃的网站风格往往可以调动用户的兴奋情绪，加上网页中许多的动画特效，往往让消费者被灌输一种不自觉的购买欲望。
企业的网站除了这类销售类网站还有一部分网页是为大型企业而建造，这些网站的主要目的是为了发布内部信息和对外的信息交流及其员工管理。大型医院的网页就是一个典型的代表。医院的网页主页设计风格往往以清新干净，安全舒适的感觉设计，在色彩风格上往往是以绿色，蓝色或者白色作为底色，这三个色彩往往是医院的常用色，而且色彩也是象征着纯净健康。我们平时所见到的大型医院网站基本很少见到那些烦人的漂浮广告，每一条网页信息都是那么的清楚明了，在字体设计上，很少带有花哨的艺术字，采用往往都是易于识别的宋体。[1]
2.2 网页的table布局和div/css样式表在主页设计上的使用
说起网页的布局，就不得不说起table和div布局，在很久以前，设计师都是采用table进行网页设计，由于html文件中的table标签的浏览速度较慢，所以，使用嵌套表格的方法来布局网页框架会使网页浏览的速度变慢。因为table是中的内容是自适应的，为了自适应，它要计算嵌套最深的节点以满足自适应，所以有可能会有一断时间出现空白才显示。所以是会有问题的。
正是由于这些缺点，后来人们开始采用div布局，div布局可以通过css样式给框架进行功能强大的属性设置以及给网页的局部进行任意的定位，制作出来的页面浏览速度较快，同时页面的风格可以通过修改单独的css文件进行随意的修改和更新；但是每个div容器都需要定义css样式来控制，制作过程相比table方式要复杂。现在的网页越来越倾向于使用DIV的方法来布局网页了。在医院主页网页的开发上，现在往往都是采用div进行网页布局，但是在一些界面，有时也需要表格完成一些数据的展示。[2]
2.3 企业文化的结合和logo在网页上的应用
我们都知道企业文化对任何一个单位都是十分的重要，医院网页的主页作为宣传的门面，对于那些未曾到过医院的网页浏览用户，主页头部往往会代表着这些医院的企业形象。在实际的医院主页中，顶部或者左上部分，就是医院的logo和医院名称，实际的代码操作过程中，有的网站主页是把这一部分放入页面的背景图片中，还有的是单独作出div。
主页的的上部，即用户打开页面看到的无需滚动条下拉的那一部分是首页展示的关键，医院的动态图片展示就放在这一部分，动态展示的照片往往包括医院风景，新闻信息，内部活动等，良好的展示信息往往可以体现出医院过硬的医疗水平和和谐的环境氛围。
3 医院主页的布局版块设计
3.1 头部导航栏，搜索栏，页脚
导航栏是一个网站的地图，访客可以通过导航纵观整个网站的概况，并且方便他们快速到达想要了解的地方。从尺寸上来说，导航栏的的宽度往往是在800左右，它的宽度往往代表了整个网站网页的宽度，导航栏的位置往往是在网站首页logo下或者搜索栏下，上下的高度不宜太高，和设计的字体大小匹配就可以，医院主页导航栏包含的内容条目往往包含很多，经过我的分析主要包含以下项目：医院概况，新闻动态，科室导航，医师介绍，科研教学，服务指南，人才招聘，党风建设等。导航栏的色彩风格也是遵循简单清晰的原则进行设计，还有一点需要注意的是导航栏的色彩必须要和背景的色彩相互搭配，每个文字链接在点击后不应该发生变色，不应该出现下划线。[3]
搜索栏在医院网站的任务主要是查询整个网站的信息，不仅包括医师信息，新闻信息，还包括通知公告等。搜索栏的使用从用户的角度考虑应该设计在导航栏的上面或者下面，这样的安排利于用户配合导航栏的信息进行检索，完成信息目标的查找，同时在设计检索按钮的时候，按钮的色彩风格也应该保持整个页面的风格。
页脚的功能是为了表明网页的许可信息及其医院的联系方式，虽然导航栏已经有了链接，但是为了设计规则的需要，大多数的医院主页网页都是在页脚标明相关联系信息。主要包括的信息如下：地址，邮编，电话，传真，E-mail，许可证号。页脚还可能含有微信二维码，新浪微博等官方博客信息。
3.2 主页主干版块的构建
我们在导航栏之后往往就是主页的主干信息部分了，在这里包含的内容很多，但是这众多版块却是主页导航栏的提炼[4]，他们一个个展示的都是最近更新的信息或者展示的是最重要的信息。接下来我们把主页的信息区域分为以下三个部分。
（1）公告区：这部分的目的是为了单位发布信息公告，利于内部人员的交流。从利于用户使用的方面考虑，新闻公告和医院动态往往是最主要的展示信息，在旁边我们一般都会加上视频展示部分作为补充。从代码上来说，设计人员可以按照每个版块的不同把这个主干划分出不同的
（2）简介区：在下面往往排版的都是科室介绍，专家医师介绍和服务指南这三个小版块。这里主要是为了病患用户及其相关人员设计，用户在这里可以对医院的就诊范围，医师能力，及其一些院内服务提供信息。在科室简介的版块了，我们可以使用鼠标悬停动作制作出下拉列表的方式完成这种树状结构的科室分类。这样可以大幅的简化页面并且减少了子页面的制作工序。
（3）其他：这里包括的必须内容就是院内的科研教学信息，员工管理系统，和健康教育，兄弟单位链接等，还可以根据医院的需要，夹杂一些问卷调查之类的信息。
4 结束语
在互联网技术飞速发展的21世纪，网站建设对每一个大型单位都变得十分的重要，而主页作为网站的门面，代表的不仅仅是这个单位的形象，而且对于日常的业务宣传，行业交流等都有很大的帮助。我认为主页的设计对整个单位网站的设计起引领作用，良好的主页对于网站的使用和信息管理可以带来很大的方便。
【参考文献】
[1]严加琼.浅谈网页设计中的页面布局[J].电脑学习，2010（01）：26-28.
[2]周鑫.浅谈DIV+CSS技术在网页设计中的应用[J].科技信息，2011（17）：16，19.
[3][美]McNeil，P. 网页设计创意书[M].图灵编辑部，译.北京：人民邮电出版社，2010.
[4][日]se编辑部.网页设计：10位日本资深设计师的185条经验法则[M].孙劼，译.北京：人民邮电出版社，2014.
[责任编辑：汤静]
