大型醫(yī)療單位網(wǎng)站主頁(yè)的板塊設(shè)計(jì)

張琪　李晢

【摘 要】隨著網(wǎng)絡(luò)技術(shù)的發(fā)展和經(jīng)濟(jì)發(fā)展的需要，國(guó)內(nèi)的大中小醫(yī)院都開(kāi)始逐步建立自己的企業(yè)網(wǎng)頁(yè)，網(wǎng)頁(yè)的開(kāi)發(fā)不僅是適應(yīng)社會(huì)生產(chǎn)開(kāi)發(fā)的需要，在電子商務(wù)飛速發(fā)展的現(xiàn)代，網(wǎng)頁(yè)對(duì)于擴(kuò)大市場(chǎng)，產(chǎn)品的展示宣傳，企業(yè)信息發(fā)布管理，員工管理等許多的方面都有十分重要的作用。本人瀏覽了許多的醫(yī)院網(wǎng)站，發(fā)現(xiàn)在設(shè)計(jì)過(guò)程發(fā)現(xiàn)這些網(wǎng)站雖然風(fēng)格樣式雖然不同，但是結(jié)構(gòu)布局上都是相似的，本文就國(guó)內(nèi)醫(yī)院網(wǎng)頁(yè)的建設(shè)實(shí)例進(jìn)行分析，總結(jié)出通用的網(wǎng)頁(yè)板塊布局設(shè)計(jì)思路。

【關(guān)鍵詞】網(wǎng)頁(yè)；實(shí)例分析；板塊布局；風(fēng)格樣式

0 前言

由于互聯(lián)網(wǎng)技術(shù)的飛躍發(fā)展，web前端設(shè)計(jì)成為了一個(gè)十分熱門(mén)的技術(shù)，我們都知道網(wǎng)站的建設(shè)對(duì)醫(yī)療企業(yè)的重要性，但是在實(shí)際的建站過(guò)程中由于疏忽導(dǎo)致了許多的網(wǎng)站產(chǎn)生了一些缺漏，由此導(dǎo)致使用產(chǎn)生許多的不便。我希望能在眾多款式風(fēng)格多樣的醫(yī)療企業(yè)網(wǎng)站中完成一個(gè)調(diào)查匯總，以此對(duì)相關(guān)設(shè)計(jì)人員在完成設(shè)計(jì)項(xiàng)目時(shí)候提供設(shè)計(jì)資料。

1 網(wǎng)站建設(shè)的必要性和目的

在這個(gè)互聯(lián)網(wǎng)飛速發(fā)展的時(shí)代，一個(gè)單位要是想做大做強(qiáng)，沒(méi)有互聯(lián)網(wǎng)技術(shù)的支持和宣傳是不行的，網(wǎng)站作為代表企業(yè)單位的宣傳門(mén)面，對(duì)企業(yè)的重要性不言而喻。利用網(wǎng)站不僅可以更好的展示醫(yī)療單位的形象，介紹單位提供的產(chǎn)品和服務(wù)，還可以提高單位認(rèn)知度和品牌知名度，發(fā)布內(nèi)容新聞、服務(wù)動(dòng)態(tài)、最新的醫(yī)療信息，接受在線掛號(hào)，拓展信息渠道，接受在線咨詢(xún)，完善售后服務(wù)進(jìn)行網(wǎng)上招聘，吸引更多人才。但是在設(shè)計(jì)上如果不按照一定的設(shè)計(jì)邏輯來(lái)建立網(wǎng)站，設(shè)計(jì)出來(lái)的網(wǎng)站往往不能滿(mǎn)足客戶(hù)的需求，或者給用戶(hù)帶來(lái)不便。為了完善單位的網(wǎng)絡(luò)信息，設(shè)計(jì)一個(gè)獨(dú)有的單位網(wǎng)站就被提到了他們的計(jì)劃中來(lái)。

2 網(wǎng)頁(yè)板塊布局樣式

2.1 主頁(yè)的版塊風(fēng)格

我們平時(shí)在上網(wǎng)時(shí)經(jīng)常瀏覽過(guò)各種各樣的網(wǎng)站，由于網(wǎng)頁(yè)設(shè)計(jì)目的不盡相同，所以我們看到的風(fēng)格也是大不一樣，在瀏覽一些以電子商務(wù)類(lèi)的網(wǎng)站時(shí)，比如淘寶網(wǎng)、天貓商城、亞馬遜網(wǎng)上書(shū)店，由于它們的目標(biāo)就是以網(wǎng)絡(luò)銷(xiāo)售，我們看到的網(wǎng)頁(yè)往往充滿(mǎn)了大量的展示類(lèi)信息，這些網(wǎng)頁(yè)的風(fēng)格在這些銷(xiāo)售類(lèi)網(wǎng)站上往往充滿(mǎn)回力，鮮艷跳躍。從用戶(hù)心理上來(lái)說(shuō)，跳躍性的色彩和活躍的網(wǎng)站風(fēng)格往往可以調(diào)動(dòng)用戶(hù)的興奮情緒，加上網(wǎng)頁(yè)中許多的動(dòng)畫(huà)特效，往往讓消費(fèi)者被灌輸一種不自覺(jué)的購(gòu)買(mǎi)欲望。

企業(yè)的網(wǎng)站除了這類(lèi)銷(xiāo)售類(lèi)網(wǎng)站還有一部分網(wǎng)頁(yè)是為大型企業(yè)而建造，這些網(wǎng)站的主要目的是為了發(fā)布內(nèi)部信息和對(duì)外的信息交流及其員工管理。大型醫(yī)院的網(wǎng)頁(yè)就是一個(gè)典型的代表。醫(yī)院的網(wǎng)頁(yè)主頁(yè)設(shè)計(jì)風(fēng)格往往以清新干凈，安全舒適的感覺(jué)設(shè)計(jì)，在色彩風(fēng)格上往往是以綠色，藍(lán)色或者白色作為底色，這三個(gè)色彩往往是醫(yī)院的常用色，而且色彩也是象征著純凈健康。我們平時(shí)所見(jiàn)到的大型醫(yī)院網(wǎng)站基本很少見(jiàn)到那些煩人的漂浮廣告，每一條網(wǎng)頁(yè)信息都是那么的清楚明了，在字體設(shè)計(jì)上，很少帶有花哨的藝術(shù)字，采用往往都是易于識(shí)別的宋體。[1]

2.2 網(wǎng)頁(yè)的table布局和div/css樣式表在主頁(yè)設(shè)計(jì)上的使用

說(shuō)起網(wǎng)頁(yè)的布局，就不得不說(shuō)起table和div布局，在很久以前，設(shè)計(jì)師都是采用table進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)，由于html文件中的table標(biāo)簽的瀏覽速度較慢，所以，使用嵌套表格的方法來(lái)布局網(wǎng)頁(yè)框架會(huì)使網(wǎng)頁(yè)瀏覽的速度變慢。因?yàn)閠able是中的內(nèi)容是自適應(yīng)的，為了自適應(yīng)，它要計(jì)算嵌套最深的節(jié)點(diǎn)以滿(mǎn)足自適應(yīng)，所以有可能會(huì)有一斷時(shí)間出現(xiàn)空白才顯示。所以是會(huì)有問(wèn)題的。

正是由于這些缺點(diǎn)，后來(lái)人們開(kāi)始采用div布局，div布局可以通過(guò)css樣式給框架進(jìn)行功能強(qiáng)大的屬性設(shè)置以及給網(wǎng)頁(yè)的局部進(jìn)行任意的定位，制作出來(lái)的頁(yè)面瀏覽速度較快，同時(shí)頁(yè)面的風(fēng)格可以通過(guò)修改單獨(dú)的css文件進(jìn)行隨意的修改和更新；但是每個(gè)div容器都需要定義css樣式來(lái)控制，制作過(guò)程相比table方式要復(fù)雜。現(xiàn)在的網(wǎng)頁(yè)越來(lái)越傾向于使用DIV的方法來(lái)布局網(wǎng)頁(yè)了。在醫(yī)院主頁(yè)網(wǎng)頁(yè)的開(kāi)發(fā)上，現(xiàn)在往往都是采用div進(jìn)行網(wǎng)頁(yè)布局，但是在一些界面，有時(shí)也需要表格完成一些數(shù)據(jù)的展示。[2]

2.3 企業(yè)文化的結(jié)合和logo在網(wǎng)頁(yè)上的應(yīng)用

我們都知道企業(yè)文化對(duì)任何一個(gè)單位都是十分的重要，醫(yī)院網(wǎng)頁(yè)的主頁(yè)作為宣傳的門(mén)面，對(duì)于那些未曾到過(guò)醫(yī)院的網(wǎng)頁(yè)瀏覽用戶(hù)，主頁(yè)頭部往往會(huì)代表著這些醫(yī)院的企業(yè)形象。在實(shí)際的醫(yī)院主頁(yè)中，頂部或者左上部分，就是醫(yī)院的logo和醫(yī)院名稱(chēng)，實(shí)際的代碼操作過(guò)程中，有的網(wǎng)站主頁(yè)是把這一部分放入頁(yè)面的背景圖片中，還有的是單獨(dú)作出div。

主頁(yè)的的上部，即用戶(hù)打開(kāi)頁(yè)面看到的無(wú)需滾動(dòng)條下拉的那一部分是首頁(yè)展示的關(guān)鍵，醫(yī)院的動(dòng)態(tài)圖片展示就放在這一部分，動(dòng)態(tài)展示的照片往往包括醫(yī)院風(fēng)景，新聞信息，內(nèi)部活動(dòng)等，良好的展示信息往往可以體現(xiàn)出醫(yī)院過(guò)硬的醫(yī)療水平和和諧的環(huán)境氛圍。

3 醫(yī)院主頁(yè)的布局版塊設(shè)計(jì)

3.1 頭部導(dǎo)航欄，搜索欄，頁(yè)腳

導(dǎo)航欄是一個(gè)網(wǎng)站的地圖，訪客可以通過(guò)導(dǎo)航縱觀整個(gè)網(wǎng)站的概況，并且方便他們快速到達(dá)想要了解的地方。從尺寸上來(lái)說(shuō)，導(dǎo)航欄的的寬度往往是在800左右，它的寬度往往代表了整個(gè)網(wǎng)站網(wǎng)頁(yè)的寬度，導(dǎo)航欄的位置往往是在網(wǎng)站首頁(yè)logo下或者搜索欄下，上下的高度不宜太高，和設(shè)計(jì)的字體大小匹配就可以，醫(yī)院主頁(yè)導(dǎo)航欄包含的內(nèi)容條目往往包含很多，經(jīng)過(guò)我的分析主要包含以下項(xiàng)目：醫(yī)院概況，新聞動(dòng)態(tài)，科室導(dǎo)航，醫(yī)師介紹，科研教學(xué)，服務(wù)指南，人才招聘，黨風(fēng)建設(shè)等。導(dǎo)航欄的色彩風(fēng)格也是遵循簡(jiǎn)單清晰的原則進(jìn)行設(shè)計(jì)，還有一點(diǎn)需要注意的是導(dǎo)航欄的色彩必須要和背景的色彩相互搭配，每個(gè)文字鏈接在點(diǎn)擊后不應(yīng)該發(fā)生變色，不應(yīng)該出現(xiàn)下劃線。[3]

搜索欄在醫(yī)院網(wǎng)站的任務(wù)主要是查詢(xún)整個(gè)網(wǎng)站的信息，不僅包括醫(yī)師信息，新聞信息，還包括通知公告等。搜索欄的使用從用戶(hù)的角度考慮應(yīng)該設(shè)計(jì)在導(dǎo)航欄的上面或者下面，這樣的安排利于用戶(hù)配合導(dǎo)航欄的信息進(jìn)行檢索，完成信息目標(biāo)的查找，同時(shí)在設(shè)計(jì)檢索按鈕的時(shí)候，按鈕的色彩風(fēng)格也應(yīng)該保持整個(gè)頁(yè)面的風(fēng)格。

頁(yè)腳的功能是為了表明網(wǎng)頁(yè)的許可信息及其醫(yī)院的聯(lián)系方式，雖然導(dǎo)航欄已經(jīng)有了鏈接，但是為了設(shè)計(jì)規(guī)則的需要，大多數(shù)的醫(yī)院主頁(yè)網(wǎng)頁(yè)都是在頁(yè)腳標(biāo)明相關(guān)聯(lián)系信息。主要包括的信息如下：地址，郵編，電話(huà)，傳真，E-mail，許可證號(hào)。頁(yè)腳還可能含有微信二維碼，新浪微博等官方博客信息。

3.2 主頁(yè)主干版塊的構(gòu)建

我們?cè)趯?dǎo)航欄之后往往就是主頁(yè)的主干信息部分了，在這里包含的內(nèi)容很多，但是這眾多版塊卻是主頁(yè)導(dǎo)航欄的提煉[4]，他們一個(gè)個(gè)展示的都是最近更新的信息或者展示的是最重要的信息。接下來(lái)我們把主頁(yè)的信息區(qū)域分為以下三個(gè)部分。

（1）公告區(qū)：這部分的目的是為了單位發(fā)布信息公告，利于內(nèi)部人員的交流。從利于用戶(hù)使用的方面考慮，新聞公告和醫(yī)院動(dòng)態(tài)往往是最主要的展示信息，在旁邊我們一般都會(huì)加上視頻展示部分作為補(bǔ)充。從代碼上來(lái)說(shuō)，設(shè)計(jì)人員可以按照每個(gè)版塊的不同把這個(gè)主干劃分出不同的