程序员在页面友好性上常犯的5种错误以及改正方法

 我是一个性情乖戾的Web用户,但我想这也帮助促使我成为了一名优秀的Web开发人员。当我看到一个网站上有让人不爽的设计时就会非常的恼怒,一些很简单的东西为什么做不好?下面是5种常见的可用性方面的错误,以及如何纠正这些问题的方法。给自己方便,也与人方便,确保自己不要犯这样的错误。

  使用表达submit事件,不要用click事件;请用表单标签form!

  我不知道遇到过多少次,当我使用回车键提交一个表单时(或手机上用箭头/输入键),却什么都没发生。我只好又用鼠标点击提交按钮,表单终于有了反应。这是我最痛恨的一个网页可用性上的问题,一看就是业余人员做的。用鼠标点击提交按钮,或在手机上关闭键盘然后滚动到页面底部找到提交按钮,这都是讨厌的多余的动作,完全不需要这样做。你只需要使用submit事件,网页就会变得友好很多:

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

  如果你在什么地方犯了这样的错误,请立即纠正。

  不要阻止当有 [CONTROL] 或 [META] 键按下时的点击事件

  我是一个非常喜欢在浏览器新标签页里打开网页的人,我最近在找一个新房子,我会同时打开很多网站页面,点击里面的图片观看,但不幸的是,打开的这些页面都进入了同一个标签页。很讨厌。在你对任何链接使用preventDefault方法前,请先检查用户是否按下了 [CONTROL] 或 [META] 键:

document.getElementById("myLink").addEventListener("click", function(e) {
    // e.preventDefault();  (不好)
    if(e.meta || e.ctrlKey) return; // 如果用户想新开一个窗口,请放行
    e.preventDefault();
});

  我在我的网站上就是这样做的,用户在打开新标签页时就不会遇到类似的问题。不要迫使你的用户在你的网站上不停的点击后退键!

  在设置text-overflow: ellipsis的时候,请在你的网页元素上添加title属性,

  有些新的CSS属性或属性值是非常的有用,例如text-overflow: ellipsis。程序员以前经常会使用什么方法来实现这种效果。我赞同使用text-overflow: ellipsis,但是,当我用鼠标悬停在这个元素上时,你最好用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>

  如果你不想把相同的内容输出两次,你可以使用Js动态的设置title。不管怎么实现,请为用户着想。

  不要忘了 :focus 和 :active

  很多人在给页面元素设计样式时忽略了它们的状态,只考虑了用户使用鼠标操作,忘记了用户也许是用键盘操作。请用 :focus 和 :active 标明它们的状态:

a:hover, a:active, a:focus { /* 改变它们的样式 */
    color: #900;
}

  给用户做一件好事吧:下次当你开发一个网站,请用tab键遍历页面上所有的元素;如果你按动tab不键后,页面没有任何聚焦点变化,请检查你的样式表,看看是否忘了给它们添加一些状态样式!

  请使用search/email文本框类型

  当在手机或平板等移动设备上填充表单信息时,我遇到了超级麻烦的问题,因为我必须切换键盘模式才能找到“@”字符。我希望Web开发人员都能成熟点,学会使用正确的文本框类型:

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

  稍微修改一下,就能给你的手机用户带来巨大的便捷。

  我们程序员常犯的错误有很多,以后我还会写更多这方面的文章,但可以肯定的是,大多数的这些错误都很容易纠正,只要你注意到了它们。如果你在使用某个网站或web应用时还遇到了其它友好性的问题,请告诉我,我会在下一篇文章里写出来,谢谢!

时间: 2024-10-23 12:48:04

程序员在页面友好性上常犯的5种错误以及改正方法的相关文章

职业经理人常犯的11种错误-余世维

★课程提纲 ——通过本课程,您能学到什么? 第一讲 拒绝承担个人责任 1. 引言 2.          有效的管理者,为事情的结果负责 3.          “努力的表现”与“不停的辩解” 4.          观察你自己,别光是观察市场/管区/办公室/人手 第二讲 未能启发工作人员 1.          引言 2.          离开办公室一天,不会引发混乱 3.          主管需要“少不了他们”的感觉 4.          未能自己训练员工,提升其绩效 5.     

C# 程序员最常犯的 10 个错误

关于C# C#是达成微软公共语言运行库(CLR)的少数语言中的一种.达成CLR的语言可以受益于其带来的特性,如跨语言集成.异常处理.安全性增强.部件组合的简易模型以及调试和分析服务.作为现代的CLR语言,C#是应用最为广泛的,其应用场景针对Windows桌面.移动手机以及服务器环境等复杂.专业的开发项目. C#是种面向对象的强类型语言.C#在编译和运行时都有的强类型检查,使在大多数典型的编程错误能够被尽早地发现,而且位置定位相当精准.相比于那些不拘泥类型,在违规操作很久后才报出可追踪到莫名其妙错

Java程序员常犯的10个错误

本文总结了Java程序员常犯的10个错误. #1. 把Array转化成ArrayList 把Array转化成ArrayList,程序员经常用以下方法: List<String> list = Arrays.asList(arr); Arrays.asList() 实际上返回一个ArrayList,但是这个ArrayList是Arrays的一个内部私有类,而不是java.util.ArrayList类.这个私有类java.util.Arrays.ArrayList有set(), get(), c

程序员生存定律-公司选择上的方法论

程序员生存定律这系列的目录在这里:程序员生存定律--目录 喜欢从头瞄的,可以移步. ------------------------------------------------------------------------------- 开篇前再补一句,这没考虑创业的情形,只是说最一般的情况. 在弄清楚公司的分类方法,以及某些类别公司的长处和短处后,就可以开始考虑如何去选择公司. 经常会看到这样一些问题,比如:是去大公司好呢,还是去小公司好呢?是去用ASP.net做ERP的公司好呢,还是去

Java程序员们最常犯的10个错误

1.将数组转化为列表 将数组转化为一个列表时,程序员们经常这样做: List list = Arrays.asList(arr); Arrays.asList()会返回一个ArrayList对象,ArrayList类是Arrays的一个私有静态类,而不是java.util.ArrayList类,java.util.Arrays.ArrayList类有set().get().contains()方法,但是没有增加元素的方法,所以它的大小是固定的,想要创建一个真正的ArrayList类,你应该这样做

黑马程序员_Java基础加强(上)

1.静态导入 静态导入是jdk1.5版本以后出现的新特性,一般是指导入静态方法,如:import static java.lang.System.out 是指导入系统输出的静态方法. 例: import static java.lang.System.out //导入java.lang包下的System类的静态方法out public class StaticImport { public static void main(String[] args) { int x=1; x++; out.p

[转]Java程序员们最常犯的10个错误

1.将数组转化为列表 将数组转化为一个列表时,程序员们经常这样做: List<String> list = Arrays.asList(arr); Arrays.asList()会返回一个ArrayList对象,ArrayList类是Arrays的一个私有静态类,而不是java.util.ArrayList类,java.util.Arrays.ArrayList类有set().get().contains()方法,但是没有增加元素的方法,所以它的大小是固定的,想要创建一个真正的ArrayLis

设计模式总结——程序员的武功秘籍(上)

万年前,人类用肢体力量来扩展地盘.获取食物,那时候比的是发育.后来人们学会了使用工具,开始利用石头.棍棒.再后来,人类有了文明,刀枪棍棒使得身体素质不是唯一决定强弱的唯一条件.再后来,一些聪明人根据人们的打斗习惯再加入哲学的思考,以攻守进退.运动疾徐.刚柔虚实为原则,发明了武术,即使一些身体素质不好的人,根据自己的情况学习相应的武术也能成为武术高手.这都要感谢发明武术秘籍的人,也要感谢社会的发展对武术人才的需求.到现在,人类发明了火枪,即使一个残疾人也能把一个壮汉打死,这在以前是不可想象的. 几

C#程序员学习Android开发系列之按钮事件的4种写法

经过前两篇blog的铺垫,我们今天热身一下,做个简单的例子. 目录结构还是引用上篇blog的截图. 具体实现代码: public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // 方法1.