这是徐超胜的前端开发博客

描点链接元素的优化提升用户体验

      用一些大网站的时候,发现有一个很细节的共同点:点击链接元素的时候,链接元素会产生一个明显的边框,而且这个边框的颜色和#f27b04很接近,我觉得既然很多大网站都这么做,这其中肯定有一些用户体验方面的东西,也就是点击的时候,页面告诉用户:我已经知道你刚刚点击了我。我觉得这确实是一个我之前忽略了的体验:没有通过链接元素提升用户体验。于是模拟实验了一下,不难,但是以后都需要注意起来。以下是一些demo实践:

     

<a href="#">返回顶部</a>
  <a href="#">返回顶部</a>
  <a href="#">返回顶部</a>
复制代码
a{
      color:green;
      text-decoration:none;
      float:left;
      width:80px;
      height:30px;
      margin-left:30px;
      margin-top:20px;
      margin-right:10px;
      text-align:center;
      line-height:30px;
      border:3px solid #ccc;
      background:#fff;
   }
a:active{
      border:3px solid #f27b04;
   }
复制代码

这个demo在ie和谷歌下面有点差异:ie下,点击a元素之后只要你不点击其他元素,那个颜色框一直都在,而在谷歌下面,这个框只有点击的时候才存在,也就是瞬间展示。这个体验上的差异的影响说大也不大,而如果需要更加苛求一点的话可以用class和addClass来做。

 

posted @   荒村听雨_  阅读(286)  评论(0编辑  收藏  举报
编辑推荐:
· 为什么 .NET8线程池 容易引发线程饥饿
· golang自带的死锁检测并非银弹
· 如何做好软件架构师
· 记录一次线上服务OOM排查
· Linux实时系统Xenomai宕机问题的深度定位过程
阅读排行:
· 2025年广告第一单,试试这款永久免费的开源BI工具
· 为什么 .NET8线程池 容易引发线程饥饿
· 场景题:假设有40亿QQ号,但只有1G内存,如何实现去重?
· 在 .NET 中使用 Tesseract 识别图片文字
· BotSharp:又一个.Net重磅AI开源项目,.Net在AI领域开始崛起!
点击右上角即可分享
微信分享提示