6-2 使用者体验 -- 扩大点击范围

1. 尝试体验一下费资定律

http://simonwallner.at/ext/fitts/

2. 扩大点击范围的益处：提高易用性（随着触控屏幕愈来愈普及，这一点会变得更加重要，没有人想点击那个讨厌的小按钮很多次）

3. 本小节的练习：扩大点击按钮的点击范围
   效果图：

扩大了点击范围的按钮

解释一下：
我们希望右边的按钮像左边的按钮一样有较大的点击范围（加上白色区域），但又不希望有白色区域来影响我们的布局和控件大小
----总之而言，最终效果=右边的大小+左边的点击范围

小测试

html

第一步
随意创建按钮，不一定要像以下例子一样
css

padding: 2em;
background:#58a url("cross.svg") no-repeat center;
background-size: 40%;
border-radius: 50%;
border: .1em solid rgba(0,0,0,.3) inset;

效果：

普通的按钮

第二步：

我们给按钮添加一个伪元素（扩充点击范围）
并运用上一小节的cursor改变一下游标样式

.button{
  padding: 2em;
  background:#58a url("cross.svg") no-repeat center;
  background-size: 40%;
  border-radius: 50%;
  border: .1em solid rgba(0,0,0,.3) inset;

  position: relative;
  cursor: pointer;  
}

.button::before{   
  position: absolute;
  left: -10px;
  right: -10px;
  top: -10px;
  bottom: -10px;
  content: '';
}

并不能截图到游标，所以就不扔图了，大家测试一下吧
（可以给我推荐几款截图软件么？，目前感觉最好用的还是QQ截图，真是尴尬）

简单两步，就能大大提高按钮的点击范围。
这些细节往往能给用户更好的体验！