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

一、研究的實現(xiàn)方式

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

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

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

圖1　導(dǎo)航條代碼示例

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

圖2　人才招聘網(wǎng)站導(dǎo)航條效果圖

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

圖3　搜索框代碼示例

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

圖4　人才招聘網(wǎng)站搜索功能效果圖

(二)網(wǎng)頁的用戶交互實現(xiàn)

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

2.網(wǎng)頁用戶交互的實現(xiàn)技術(shù)。在此次研究中，我們實現(xiàn)用戶交互優(yōu)化的技術(shù)主要分為兩個方面。

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

圖5　選項卡代碼示例

通過上述jQuery代碼，我們能夠?qū)崿F(xiàn)一個選項卡交互效果。該效果主要原理是，當(dāng)用戶鼠標(biāo)移動到li標(biāo)簽上時，顯示用戶移動到的選項具體內(nèi)容，隱藏其它li標(biāo)簽下面的內(nèi)容。通過這些交互功能，很大程度的提升了用戶的體驗，以及網(wǎng)頁布局設(shè)計的優(yōu)化。讓網(wǎng)頁不僅僅局限于所有信息垂直排列，讓網(wǎng)頁的布局更加優(yōu)化。

二是使用CSS層疊樣式表，通過CSS的hover偽類，我們能夠?qū)崿F(xiàn)鼠標(biāo)移到某些DOM上面的效果，能夠突出表現(xiàn)信息。比如說用在在關(guān)鍵詞上，當(dāng)鼠標(biāo)移上去時，使字體顏色變?yōu)榧t色，更加醒目。CSS還有其他能夠?qū)崿F(xiàn)用戶交互的屬性，比如說陰影效果(box-shadow)，鼠標(biāo)移上去的手型效果(cursor)等。

二、總結(jié)與展望

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

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