淺談人才招聘網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)

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

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

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

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

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

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

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

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

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

圖3　搜索框代碼示例

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

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

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

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

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

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

圖5　選項(xiàng)卡代碼示例

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

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

二、總結(jié)與展望

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

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