程序員在頁面友好性上常犯的5種錯誤以及改正方法

　　英文原文：5 Common Usability Mistakes and Solutions For Avoiding Them

　　我是一個性情乖戾的Web用戶，但我想這也幫助促使我成為了一名優(yōu)秀的Web開發(fā)人員。當(dāng)我看到一個網(wǎng)站上有讓人不爽的設(shè)計時就會非常的惱怒，一些很簡單的東西為什么做不好？下面是5種常見的可用性方面的錯誤，以及如何糾正這些問題的方法。給自己方便，也與人方便，確保自己不要犯這樣的錯誤。

　　使用表達submit事件，不要用click事件；請用表單標簽form!

　　我不知道遇到過多少次，當(dāng)我使用回車鍵提交一個表單時(或手機上用箭頭/輸入鍵)，卻什么都沒發(fā)生。我只好又用鼠標點擊提交按鈕，表單終于有了反應(yīng)。這是我最痛恨的一個網(wǎng)頁可用性上的問題，一看就是業(yè)余人員做的。用鼠標點擊提交按鈕，或在手機上關(guān)閉鍵盤然后滾動到頁面底部找到提交按鈕，這都是討厭的多余的動作，完全不需要這樣做。你只需要使用submit事件，網(wǎng)頁就會變得友好很多：

document.getElementById("myForm").addEventListener("submit", function(e) {
    e.preventDefault();
    // ... Do processing here.  Yay for "enter" key submission!
    return false;
});

　　如果你在什么地方犯了這樣的錯誤，請立即糾正。

　　不要阻止當(dāng)有 [CONTROL] 或 [META] 鍵按下時的點擊事件

　　我是一個非常喜歡在瀏覽器新標簽頁里打開網(wǎng)頁的人，我最近在找一個新房子，我會同時打開很多網(wǎng)站頁面，點擊里面的圖片觀看，但不幸的是，打開的這些頁面都進入了同一個標簽頁。很討厭。在你對任何鏈接使用preventDefault方法前，請先檢查用戶是否按下了 [CONTROL] 或 [META] 鍵：

document.getElementById("myLink").addEventListener("click", function(e) {
    // e.preventDefault();  (不好)
    if(e.meta || e.ctrlKey) return; // 如果用戶想新開一個窗口，請放行
    e.preventDefault();
});

　　我在我的網(wǎng)站上就是這樣做的，用戶在打開新標簽頁時就不會遇到類似的問題。不要迫使你的用戶在你的網(wǎng)站上不停的點擊后退鍵！

　　在設(shè)置text-overflow: ellipsis的時候，請在你的網(wǎng)頁元素上添加title屬性，

　　有些新的CSS屬性或?qū)傩灾凳欠浅５挠杏?，例?code>text-overflow: ellipsis。程序員以前經(jīng)常會使用什么方法來實現(xiàn)這種效果。我贊同使用text-overflow: ellipsis，但是，當(dāng)我用鼠標懸停在這個元素上時，你最好用title屬性顯示出完整的信息：

<div class="ellipsizeMe lazy " title="I am some really, really long text that's going to be ellipsized">
I am some really, really long text that's going to be ellipsized
</div>

　　如果你不想把相同的內(nèi)容輸出兩次，你可以使用Js動態(tài)的設(shè)置title。不管怎么實現(xiàn)，請為用戶著想。

　　不要忘了 :focus 和 :active！

　　很多人在給頁面元素設(shè)計樣式時忽略了它們的狀態(tài)，只考慮了用戶使用鼠標操作，忘記了用戶也許是用鍵盤操作。請用 :focus 和 :active 標明它們的狀態(tài)：

a:hover, a:active, a:focus { /* 改變它們的樣式 */
    color: #900;
}

　　給用戶做一件好事吧：下次當(dāng)你開發(fā)一個網(wǎng)站，請用tab鍵遍歷頁面上所有的元素；如果你按動tab不鍵后，頁面沒有任何聚焦點變化，請檢查你的樣式表，看看是否忘了給它們添加一些狀態(tài)樣式！

　　請使用search/email文本框類型

　　當(dāng)在手機或平板等移動設(shè)備上填充表單信息時，我遇到了超級麻煩的問題，因為我必須切換鍵盤模式才能找到“@”字符。我希望Web開發(fā)人員都能成熟點，學(xué)會使用正確的文本框類型：

<input type="search" value="" />
<input type="email" value="" />

　　稍微修改一下，就能給你的手機用戶帶來巨大的便捷。

　　我們程序員常犯的錯誤有很多，以后我還會寫更多這方面的文章，但可以肯定的是，大多數(shù)的這些錯誤都很容易糾正，只要你注意到了它們。如果你在使用某個網(wǎng)站或web應(yīng)用時還遇到了其它友好性的問題，請告訴我，我會在下一篇文章里寫出來，謝謝！

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機掃描二維碼進行捐贈