自從讀了《網(wǎng)站重構(gòu)》這本書(shū)，現(xiàn)在對(duì)網(wǎng)站設(shè)計(jì)的思想有了根本性的改變。國(guó)內(nèi)越來(lái)越多的媒體也極度關(guān)注WEB標(biāo)準(zhǔn)的進(jìn)展情況，很多門(mén)戶(hù)網(wǎng)站也開(kāi)始使用符合標(biāo)準(zhǔn)的設(shè)計(jì)方法重新設(shè)計(jì)頁(yè)面，像網(wǎng)易等。
這段時(shí)間正好在制作一個(gè)訪(fǎng)談系統(tǒng)，采用了符合W3C標(biāo)準(zhǔn)的布局方法，分別在IE5.5、IE6.0、IE7.0、Firefox 2.0、Opera 9.0環(huán)境下進(jìn)行了測(cè)試，各不同廠(chǎng)商對(duì)CSS的理解也進(jìn)一步趨于完善，這對(duì)于前臺(tái)頁(yè)面的制作人員減少了一定的工作量。
好了，歸于正題，談?wù)勱P(guān)于圖片驗(yàn)證碼設(shè)計(jì)的問(wèn)題。
現(xiàn)在越來(lái)越多的網(wǎng)站的注冊(cè)、發(fā)布等頁(yè)面都采用了防止一些惡意程序的圖片驗(yàn)證碼選項(xiàng)，不知道大家有沒(méi)有碰到這樣的情況，一個(gè)注冊(cè)表單，填寫(xiě)了帳號(hào)信息、個(gè)人信息，最后一項(xiàng)的驗(yàn)證碼太模糊了竟然看不清，只能是重新刷新整個(gè)頁(yè)面來(lái)刷新圖片驗(yàn)證碼的內(nèi)容，這是一個(gè)不良好的交互設(shè)計(jì)。
參考了一些門(mén)戶(hù)網(wǎng)站的方法，我的改進(jìn)設(shè)計(jì)思路如下：

1. 把驗(yàn)證碼輸入項(xiàng)放在表單的第一行；
2. 客戶(hù)端可以在不刷新整個(gè)頁(yè)面的情況下更新圖片驗(yàn)證碼的內(nèi)容。

下面重點(diǎn)講講第2點(diǎn)的實(shí)現(xiàn)方法，以ASP為例吧(目前我只會(huì)ASP，^_^)。
我們一般要插入驗(yàn)證碼都是使用<img />標(biāo)簽，例如<img src="inc/code.asp" />，其中inc/code.asp是一個(gè)生成圖片的程序文件。為了能夠更新驗(yàn)證碼的內(nèi)容，可以在圖片旁邊加一個(gè)更新的鏈接，單擊觸發(fā)圖片重載事件，完成圖片驗(yàn)證碼的更換。具體代碼如下：
HTML:
<a href="javascript:reloadcode();" title="更換一張驗(yàn)證碼圖片"><img src="inc/code.asp" id="safecode" alt="看不清，請(qǐng)換一張" /></a> <a href="javascript:reloadcode();" title="更換一張驗(yàn)證碼圖片">看不清，請(qǐng)換一張</a>
JavaScript:
function reloadcode(){
document.getElementById('safecode').src = 'inc/code.asp?' + Math.random();
}

我的一個(gè)設(shè)計(jì)界面

注意，在reloadcode函數(shù)中，我們?cè)赾ode.asp后面加了一個(gè)隨機(jī)參數(shù)，這樣每次的鏈接地址都不一樣，從而達(dá)到更新的目的。
第一次寫(xiě)原創(chuàng)的文章，歡迎大家多多評(píng)論和指點(diǎn)。