淺談人才招聘網站的設計與實現

(成都師范學院計算機科學學院　四川　成都　611130)

一、研究的實現方式

(一)網頁布局的實現。目前網絡上存在著很多的人才招聘網站。根據調查顯示，人們對于這些招聘網站的滿意度很差。在功能方面上，雖然功能實現的很完善，但是網頁布局雜亂，廣告鋪滿整個網頁，影響用戶對于自身需求信息的獲取。這樣的網站對于用戶體驗并不友好。下文中，我們將以此展開介紹。

1.網頁布局的實現。本研究網頁布局設計所用的技術主要是上文提及的HTML5和CSS3。下文中，將挑選部分網站功能作為解析。

在網頁的整體布局中，一個簡潔明了的導航欄，往往能夠讓用戶快速的定位到自己需要的功能。通過HTML5可以實現一個導航欄的架構。接下來我們將用部門代碼為大家展示實現過程。代碼如圖1。

圖1　導航條代碼示例

導航條最簡潔的實現方式是在一個div下面放一個圖片作為網站logo，再加上一個ul列表，用于實現頁面的導航。本研究的導航用a標簽作為網站的跳轉連接。ul列表標簽默認樣式是垂直排列，我們通過CSS3的浮動(float)使整個導航欄橫向排列。再加上CSS3中的樣式設計，加上背景色，文字顏色等效果，一個簡潔明了的人才招聘網站導航條就完成了。效果圖如圖2。

圖2　人才招聘網站導航條效果圖

人才招聘網站最重要的功能是職位搜索功能。這個功能需要放在最為顯眼的地方，一般我們會將搜索框放在整個網站最為顯眼的地方。也就是導航條的下方。頁面布局實現代碼如圖3：

圖3　搜索框代碼示例

通過HTML5的新表單元素，我們可以實現一個最簡單的搜索輸入框。元素的placeholder屬性，能夠給這個搜索框添加提示功能，讓用戶知道這個搜索框能夠搜索到什么信息。效果圖實現如圖4。表單元素放了一個span標簽，標簽里面添加一個搜索圖標的圖片元素，用戶在輸入信息以后可以點擊搜索。點擊事件的實現與用戶的交互功能，我們將在下文中詳解。

圖4　人才招聘網站搜索功能效果圖

(二)網頁的用戶交互實現

1.網頁用戶交互實現原理。網頁用戶交互指的是，瀏覽者在點擊網頁的欄目、超鏈接、以及鼠標的劃入劃出時，網站會根據瀏覽者的行為，做出相應的變化。通過HTML5和CSS3的新特性可以實現部分簡單用戶交互，但是，較為復雜的交互處理以及邏輯關系處理，還是需要使用JavaScript腳本語言，以及基于JavaScript的框架JQuery。下文將為大家介紹人才招聘網站的用戶交互實現。

2.網頁用戶交互的實現技術。在此次研究中，我們實現用戶交互優化的技術主要分為兩個方面。

一是使用JavaScript和JQuery來實現用戶交互。通過JavaScript的事件，配合函數，實現用戶的點擊，輪播的實現等交互功能。部分代碼如圖5。

圖5　選項卡代碼示例

通過上述jQuery代碼，我們能夠實現一個選項卡交互效果。該效果主要原理是，當用戶鼠標移動到li標簽上時，顯示用戶移動到的選項具體內容，隱藏其它li標簽下面的內容。通過這些交互功能，很大程度的提升了用戶的體驗，以及網頁布局設計的優化。讓網頁不僅僅局限于所有信息垂直排列，讓網頁的布局更加優化。

二是使用CSS層疊樣式表，通過CSS的hover偽類，我們能夠實現鼠標移到某些DOM上面的效果，能夠突出表現信息。比如說用在在關鍵詞上，當鼠標移上去時，使字體顏色變為紅色，更加醒目。CSS還有其他能夠實現用戶交互的屬性，比如說陰影效果(box-shadow)，鼠標移上去的手型效果(cursor)等。

二、總結與展望

(一)全文總結。本文以人才招聘網站的設計與實現，以用戶體驗為實現目標，構建了一個符合用戶審美和用戶體驗高的人才招聘網站。在構建網站之前，需要對用戶喜好進行調研和分析。通過這些調研和統計分析，對網站的整體架構進行設計與實現。在前期設計網站原型圖時，利用所調查到的數據，進行設計網站的整體風格和頁面效果，以及用戶功能需求。在參考了一些當前用戶常用的大型招聘網站的優劣以后，完成了原型圖的設計，所以本次研究針對用戶需求，借用了某些招聘網站的優勢所在，比如功能界面豐富等。再添加了一些常見招聘網站不具備的功能，簡化了網站的整體界面，讓用戶能夠快速的搜尋到自己所需要的信息。

(二)后續工作展望。隨著網絡的發展，新技術的層出不窮，用戶需求的不斷變化，招聘網站必將還會有更近一步的發展。所以，對于招聘網站的設計與實現依舊是一個很熱門的話題。對于人才招聘，還需要我們不斷地進行探索新需求，發展新技術，是的人才招聘的功能更加完善，信息更加豐富，信息處理更加方便快捷，信息的真實性更加準確，信息傳遞更加迅速。隨著技術的發展，在人才招聘方面，還有嶄新的天地等著我們去開拓。