光标Cursor
视觉效果与操作状态用鼠标指针形状提示可以怎样操作
光标可以提示当前位置能够点击、输入、拖拽还是暂不可用。它只是辅助信号,控件本身仍要有清楚的文字和视觉状态;触屏设备也不能依赖鼠标指针。
↖default
👆pointer
Itext
✋grab
⊘not-allowed
⏳wait
什么时候用
- 让自定义可点击区域出现 pointer,并同时提供悬停、聚焦反馈可点的卡片标题👆
- 输入区域使用文本光标,提示这里可以输入输入点什么…悬停变工字 I:这里可以输入
- 拖拽排序用 grab / grabbing:抓起前张开手,抓起后握紧⋮⋮ 任务卡片✋
- 禁用状态配 not-allowed:比单纯置灰更明确地点不动提交⊘
什么时候不用
- 自定义可点击区域没有对应光标,用户较难发现点我展开详情↖
- 禁用只置灰不配 not-allowed:用户以为卡了,还在狂点删除项目只置灰,用户还在狂点
- 乱用自定义光标图片:热点对不准、挡内容,可用性直线下降🌟自定义图片光标,热点对不准还挡内容
- 普通文字也挂满小手:到处都是信号等于没有信号一段普通介绍文字还是普通文字👆
组成结构 · Anatomy
悬停在这个区域上👆正在输入
1悬停区域Hover Area指针进入这个范围,cursor 就生效
2指针形状Cursor Shape由 cursor 的值决定,例如小手、工字或张手形
3热点Hotspot指针上真正生效的那个点,点击以它为准
4文本光标Caret输入框里闪烁的竖线,颜色用 caret-color 改
常见变体 · Variants
小手Pointer
👆pointer
一切可点的元素都用它
工字Text
Itext
输入框、文本域等可输入处
张手形Grab
✋grab
可拖拽排序的卡片与看板
禁止NotAllowed
⊘not-allowed
禁用的按钮上,直说点不动
典型使用场景
按钮与链接的悬停
账号设置
修改资料后记得保存,查看隐私协议
👆
输入框悬停
昵称
2–20 个字符,支持中文、英文和数字
I
拖拽排序的看板卡片
进行中 · 2
改版落地页首屏
待处理 · 3
修复登录按钮错位
补充空状态插画
写发布公告
✋
禁用的操作按钮
项目所有权
仅管理员可操作
⊘