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

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

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

我的一個設計界面

注意，在reloadcode函數(shù)中，我們在code.asp后面加了一個隨機參數(shù)，這樣每次的鏈接地址都不一樣，從而達到更新的目的。
第一次寫原創(chuàng)的文章，歡迎大家多多評論和指點。