您或许需要扩充可点击区域的范围!
您是否曾经尝试单击或点击某个元素(例如,按钮,链接),并且意识到只有单击该元素的特定区域,它才会响应?
发生这种情况是因为可点击区域未应用于整个元素。为了更加清楚,请参见下图。我举例说明了可点击区域应该和不应该如何。
对于本文,我将介绍很多我注意到的示例,并展示如何正确解决它们。
用户体验注意事项
WCAG准则
根据 WCAG 2.1,触摸或鼠标的最小目标尺寸应为 44×44 像素。大小不是固定的,可能会根据使用情况而改变。但是,44×44 像素是一个很好的起点。
菲茨定律
UX设计中要遵循的重要定律。简而言之,触摸或点击目标越大,越接近,则需要用户与其进行交互的时间越短。
在下图中,我为主按钮模拟了两种不同的情况。在左侧,按钮更小,更远,这需要用户花费更多时间与之交互。在右侧,按钮的大小更大且更接近其同级输入元素,这将使其更容易,更快地进行交互。
让我们来看一些实际的例子,并牢记 WCAG 2.5.5 目标大小和 Fitts 定律。
按钮
<button>
在需要时使用实际值非常重要。下面的示例来自我使用的在线银行系统:
<div class="navig next" onclick="validateLogin()">Next</div>
这是上述按钮的 HTML 的 GIF 图片。我将鼠标悬停在按钮上,并且光标仍然是指针,这很好。但是,我也可以选择文本,并且在悬停时还有一个文本光标!如果使用正确的元素,则不会发生这种情况。
使用HTML <button>
元素时,您将免费获得以下内容:
可通过鼠标,键盘或触摸访问
可以通过键盘选择(表单元素都可以)
Javascript 事件(聚焦,失去焦点)、CSS 表单伪类
一旦使用了正确的元素,出于两个原因,您需要添加足够的填充:
让按钮看起来可以点击(cursor: pointer)!
使其变大,这样很容易被注意到(菲茨定律)。
链接
我过去曾犯过这个错误。当有导航菜单时,应为<a>
元素而不是<li>
元素提供填充。
<nav><ul><li class="nav-item"><a href="#">Home</a></li><li class="nav-item"><nav href="#">Products</nav></li><li class="nav-item"><a href="#">Store</a></li><li class="nav-item"><a href="#">Team</a></li></ul>
</nav>
.nav-item {padding: 12px 16px;
}
根据上述 HTML 和 CSS,可点击区域将仅为文本。检查下图:
正确的方法是在链接本身上添加填充。请注意,顶部和底部填充默认为行内元素,因此默认情况下不起作用。无论是哪种情况,它都可以是block
或inline-element
或flex
。
.nav-item a {display: block;padding: 12px 16px;
}
结果,整个链接现在是可单击/可点击的。这是显示差异的图:
汉堡菜单
还是烤肉串菜单?随便你怎么说,重要的是增加它们的可点击区域,因为它们大多数将用在触摸设备上。
假设可点击区域如下:
这不是很好,并且将很难使鼠标或手指指向屏幕上如此小的目标。在下图中,它更大并且更易于交互。
以下是效果演示:
复选框和单选按钮
当存在复选框或单选按钮元素时,我希望可以单击它或关联的标签来激活/禁用它。
在下图中,可单击区域仅与复选框或单选元素绑定。换句话说,您不能单击标签来激活/禁用它。
从用户体验的角度来看,这是无法访问的并且是不好的。在 HTML 中,您可以使用for
属性将标签与输入绑定。
<input type="checkbox" id="option1">
<label for="option1">Option 1</label>
或者您可以将输入内容放置在标签内:
<label for="option1">Option 1<input type="checkbox" id="option1">
</label>
然后,您将需要在<label>
元素上添加填充,以使可点击区域变大。这样,问题得以解决,整个复选框或单选按钮都是可单击的,如下图所示:
侧边栏
对于带有类别的页面,有时我会注意到列表链接没有扩展到其父级的整个宽度。也就是说,可点击区域仅在文本上。
下图显示:
解决方法是:
从
<li>
元素上删除填充,而是将其移动到<a>
元素上(在链接点中进行了讨论)。通过添加使链接采用其父级的完整宽度
display: block
。
.nav-item a {/*Other styles*/padding: 12px 16px;display: block;
}
很好奇,看看上面添加了少量 CSS 后的外观如何?
您也可以在<li>
元素固定宽高,然后<a>
元素宽高设置为 100%。
现实生活中的例子
在最近的 Twitter 更新中,导航设计在可点击区域大小方面存在问题。最初,它仅与文本相关,如下面的屏幕截图所示,但他们在收到反馈后将其修复。
节头
在某些情况下,需要在标题的右端添加“查看更多”按钮或箭头。在下面的示例中,我将箭头放置在一个“圆”中,以便可以正确地使箭头居中。
通常,箭头的间距可以在 CSS 中使用填充或宽度和高度来完成。无论哪种情况,您都可以使用。
使用伪元素增加可点击区域
仅通过更改元素的宽度和高度或使用填充,并不一定总是可以增大可点击区域。好吧,伪元素可以解救!
这个怎么运作?
伪元素属于其父元素,因此当我们创建具有特定宽度和高度的伪元素时,它将充当其父元素的单击/触摸/悬停区域。
在下图中,我向:after
菜单按钮添加了一个伪元素。这是使用的 CSS:
.menu-2:after {content: "";position: absolute;left: 55px;top: 0;width: 50px;height: 50px;background: #e83474;/*Other styles*/
}
请注意,55px
出于说明目的,我有意将正方形放在其父级的左侧。当该正方形位于其父对象的中心时,它将增加触摸目标。达成目标!!
以下是效果演示:
本文已结束,感谢您看到最后
一
推荐阅读
- 客户端过滤数据:比较CSS、jQuery和React
- 关于带有"显示更多"按钮的多行文本截断思考
- 关于"异步加载CSS"的相关思考,以及最简单的实现方式
- 利用"交叉观察者"这个小宝贝儿,轻松实现懒加载、吸顶、触底
您或许需要扩充可点击区域的范围!相关推荐
- 【WPF】右键菜单ContextMenu可点击区域太小的问题
[WPF]右键菜单ContextMenu可点击区域太小的问题 原文:[WPF]右键菜单ContextMenu可点击区域太小的问题 问题描述 正常使用右键菜单ContextMenu时,如果菜单项是不变的 ...
- 【自己给自己题目做】之一:椭圆可点击区域
[题一] 请实现以下需求,要做一个活动页面,页面上有一张图片(假设是800x600),图片正中心有一个椭圆形的可点击区域,假设椭圆长轴为200px(横向),短轴160px(纵向),请实现点击这个椭圆区 ...
- 通过path绘制点击区域
通过path绘制点击区域 效果 源码 https://github.com/YouXianMing/Animations // // TapDrawImageView.h // TapDrawImag ...
- [html] 如何扩大CheckBox点击区域
[html] 如何扩大CheckBox点击区域 用 label 包裹,扩大 label 尺寸 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 ...
- [html] 怎样在页面上实现一个圆形的可点击区域?
[html] 怎样在页面上实现一个圆形的可点击区域? 1.用canvas画布,弧线画圆,在canvas上监听点击事件 2.用一个div,给div添加圆角属性50,在div上添加点击事件 3.butto ...
- CocosCreator实现不规则的点击区域监听
CocosCreator实现不规则的点击区域监听 开发一个农场小游戏,用常规的点击区域,会产生点击区域重叠问题.(展示的图片是已经调整为cc.PolygonCollider方法之后) 查询网上的方法, ...
- Android——扩大ImageButton的点击区域
遭遇问题:在布局文件xml中定义了一个ImageButton,因为图标尺寸很小导致很难有效点击. 具体代码如下所示: <ImageButton android:id="@+id/ima ...
- 扩大文字a链接的可点击区域
我这边扩大可点击区域和网络上的这篇并不一样http://rmingwang.com/a-text-link-to-expand-the-clickable-area.html 很多时候是a和div的套 ...
- 【转】触屏手机点击区域的小秘密
本文章转自:触屏手机点击区域的小秘密 http://www.apkbus.com/android-23885-1-1.html 做触屏手机产品设计,要注意所有的可点击元素都有足够的点击区域,但是这并不 ...
最新文章
- “智源论坛Live”报名 | 清华大学岂凡超:义原知识库的应用和扩充
- 每日一皮:实习生将他的代码交给高级开发人员,高级开发反手一个...
- jenkins 配置slave
- 磁盘管理之逻辑卷管理(Logical Volume Manager)
- pythonjson构建二维数组_python后台获取ajax传递的二维数组,保持原有数据结构不变...
- Spring 使用Cache(转)
- MySQL中的datetime对应Java类型
- 贝叶斯集锦:贝叶斯派和频率派的一个例子
- 天正lisp文件夹_CAD使用一个LISP文件,实现自动加载菜单和程序集
- excel VBA 编程,数据处理,并画图,详细代码,加解释
- Android Gradle学习(五) Extension详解
- Flutter 开源社交电商项目Flutter_Mycommunity_App
- 纬度,经度和坐标系网格
- Lee滤波和Refine-Lee滤波
- 曲苑杂坛--即时文件初始化特性
- 闪电侠第四季/全集The Flash迅雷下载
- 信号完整性 SI(Signal Integrity)
- 备赛全国阳光健身健美大赛训练记录(粗略)
- 【懒懒的Python学习笔记三】
- MySql数据库中查看资源使用情况
热门文章
- excel截取单元格中部分内容
- 薄膜热电化学电池性能测试中的半导体制冷片高精度度温度控制解决方案
- 设计模式——从 LOL 中学习代理模式
- ag-grid 学习笔记三:ag-grid设置(定义列、选择行、复选框、设置行高列宽、置顶合计行、底部合计行、行组、客户端排序)
- linux io多路复用详解,Linux系统中IO多路复用
- 15 行代码在 wangEditor v5 使用数学公式
- MATLAB信号处理---学习小案例(8)---Z变换概述
- 数据库: Microsoft SQL Server Tools 18 安装问题和使用
- 蓝桥杯 15决赛 B4 穿越雷区(bfs)
- XILINX FPGA VAVADO设计要点