欢迎,感谢你能来...

找到回家的路:
首页 > 前端分享 > 页面友好性上常犯的5种错误以及改正方法
前端分享

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

作者:Fanda 发布日期:2016-05-30 围观人数:337人

简介

下面是5种常见的可用性方面的错误,以及如何纠正这些问题的方法。给自己方便,也与人方便,确保自己不要犯这样的错误。 一、使用表达submit事件,不要用click事件;请用表单标签form! 我不知道遇 […]

下面是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="" />

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


转自:https://davidwalsh.name/common-usability-mistakes
(完)留下美图

Tags:

转载 云中不知处博客欢迎分享,转载请说明文章出处“ 来源云中不知处博客 http://www.saymiss.com/archives/129 “。
很赞哦!( 0)

( 0 )个小伙伴在吐槽

访客评论


站点统计

  • 更新时间:2020-05-06 07:26
  • 文章总数:32
  • 评论总数:38
  • 标签总数:24
  • 运行时间: 511
我的微信
  • 网站赞助:阿里云、腾讯云、百度云、奇虎360、网易云音乐、音悦台、京东商城,哦以上这些都没有。
  • 网站制作:页面设计:Fanda;前端开发:Fanda;后台功能:Fanda;主题开发:Fanda;技术支持:Fanda。我就是天才...
免责声明
  • 1、本站个人博客模板,均为Fanda本人设计,可供个人学习和使用,未经许可不得用于任何商业目的。
  • 2、本站部分文章来自网络,请您放心,所有转载文章内容皆保留来源链接,如本站有著作权属于你的文章内容,而本站并未放上链接或有其他原因侵权,请E-mail: fzh2812@163.com,我会在48小时内删除相关内容,敬请谅解!
碎言碎语
  • 三生有幸遇见你,纵使悲凉也是情

    2020-05-07
  • 忍一时风平浪静,退一步越想越气

    2020-03-21
  • 最近996

    2019-11-09
  • 最近有点忙,996啊

    2019-07-29
  • 端午3天我就没下过楼,出过门

    2019-06-09
  • 今天不小心,谈成了一笔小生意

    2019-05-26
  • 今天为公司推荐一个java后台

    2019-05-24

©2019 云中不知处 Powered by WordPress 文章归档 免责声明 网站地图 百度统计