大型醫療單位網站主頁的板塊設計

張琪　李晢

【摘 要】隨著網絡技術的發展和經濟發展的需要，國內的大中小醫院都開始逐步建立自己的企業網頁，網頁的開發不僅是適應社會生產開發的需要，在電子商務飛速發展的現代，網頁對于擴大市場，產品的展示宣傳，企業信息發布管理，員工管理等許多的方面都有十分重要的作用。本人瀏覽了許多的醫院網站，發現在設計過程發現這些網站雖然風格樣式雖然不同，但是結構布局上都是相似的，本文就國內醫院網頁的建設實例進行分析，總結出通用的網頁板塊布局設計思路。

【關鍵詞】網頁；實例分析；板塊布局；風格樣式

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）公告區：這部分的目的是為了單位發布信息公告，利于內部人員的交流。從利于用戶使用的方面考慮，新聞公告和醫院動態往往是最主要的展示信息，在旁邊我們一般都會加上視頻展示部分作為補充。從代碼上來說，設計人員可以按照每個版塊的不同把這個主干劃分出不同的