广州总部电话:020-85564311
广州总部电话:020-85564311
20年
互联网应用服务商
请输入搜索关键词
知识库 知识库

优网知识库

探索行业前沿,共享知识宝库

PC端偷懒不做悬停态?没事~但千万别漏掉这个

发布日期:2025-06-27 09:27:17 浏览次数: 814 来源:体验进阶
推荐语
光标虽小,却能大幅提升用户操作直觉!设计师常忽视的细节,却是提升体验的关键。

核心内容:
1. 光标设计在PC端产品中的重要性被普遍低估
2. 通过拖拽卡片案例展示光标对用户理解的直接影响
3. 提供现成的Mac光标资源包供设计师直接使用
小优 网站建设顾问
专业来源于二十年的积累,用心让我们做到更好!

我发现很多PC端设计系统把UI规范打磨得很细致,但却普遍忽略了光标这个东西。

不过,我也能理解为啥PC端设计师普遍不热衷这个。

试想一下,设计师去做项目汇报,领导问你这次改版的亮点是什么,设计师回答说:改了几处光标。

这不是产品经理也能做?这不是让前端写一行代码就行了吗?这也能算设计亮点?

选光标这件事,确实不太能凸显设计价值。尤其我刚工作的时候,每天面对一堆复杂的UI界面焦头烂额,哪里顾及得到光标?

直到发生了一件事,让我彻底改变了对光标的看法。

当时要设计一个拖拽卡片的交互,因为是B端产品太复杂,具体功能就不多说了。

总而言之,就是那种传统B端后台产品,一般人看了根本想不到居然能拖拽。但是我们产品升级,为了提高操作效率,就加了一个拖拽功能。

当时为了暗示这些卡片可以拖拽,我是想到了很多办法,例如:

拖拽目的地圈虚线框:一般拖拽都是往虚线框里拖。

卡片悬停态加阴影:暗示这个是可以浮动的。

卡片加上圆点阵列暗示这里是抓手。

卡片悬停时,目的地的虚线框高亮:暗示往那里拖。

拿去做用户测试,结果几乎没谁主动发现可以拖拽的。

气得我直接在上面加了一行字:“卡片可以拖动。”

然而因为页面上的信息太多,很多用户还是没看到那行字……

后面都快放弃了,我突然来了个灵感,把卡片悬停时的光标改成一个抓手。

再去做用户测试,几乎所有人都知道可以拖拽了。

然后我就反省,这么简单的一个解决方案,我之前为什么没想到?

于是我想起了一件事,那就是用户在使用PC端时,眼睛一直跟着光标跑。

就好像玩射击游戏一样,外人看是瞄准器在动,本人看是瞄准器一直居中,变动的是背景。


对于PC端用户来说,一旦找不到光标就会着急地快速晃动鼠标。为此,Mac 还提供了一个功能,在用户快速晃动鼠标时,放大光标方便用户寻找。

也就是说,UI上的变化再大,只要超出了用户视线范围就未必被看到。

而光标一旦发生变化,用户会非常敏感。

早期的很多PC端软件,喜欢用强烈的阴影来体现凹凸感,哪里可以点哪里不能点,看得比较清楚。

现在PC端软件和网站在视觉上都扁平化了,对光标也不重视,非常依赖悬停态来暗示用户哪里可以点。

可悬停态的问题是:

1、热区太多,很难全部做出悬停态,难免有遗漏的。

2、有些悬停态本身做得很弱,不太好理解。

所以对于扁平风格的PC端产品来说,完全放弃光标而完全依赖悬停态来暗示用户哪里可以点击,这么做的风险是比较高的。

更重要的是,光标能提供暗示不止于上述拖拽和点击。例如:

拖拽中松开暗示:

输入暗示:

禁用暗示:

缩放暗示:

单向拖拽暗示:

加载中暗示:

对于设计师来说,虽然光标不那么容易体现设计价值,但是对于用户体验和开发成本,都是很有价值的。有时用户很难get到的东西,说不定换个光标就理解了呢?

我这里整理了一套Atlassian提供的Mac光标svg矢量图免费送给大家。领取方式:点击左下角头像后回复光标



我以前在大厂做了很多年交互设计,又通过用户测试积累了很多实践心得。我近期开一个直播分享,感兴趣的可以关注一波:
Image
我们每个月的训练营,都会把视频和资料免费提供给学习社。不知不觉已经攒了上百个小时的课程内容了,很多上千元的课程不一定比这多。因此,我宣布,学习社7月份即将涨价15%!虽然涨价后依旧超值,但最最划算的价格,肯定是在7月之前。3日内不满意可以100%退款,你可以放心尝试:

优网科技,优秀企业首选的互联网供应服务商

优网科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!

优网科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用(手机站APP开发)、微信定制开发(微信官网、微信商城、企业微信)等一系列互联网应用服务。


我要投稿

姓名

文章链接

提交即表示你已阅读并同意《个人信息保护声明》

专属顾问 专属顾问
扫码咨询您的优网专属顾问!
专属顾问
马上咨询
扫一扫马上咨询
扫一扫马上咨询

扫一扫马上咨询