我发现很多PC端设计系统把UI规范打磨得很细致,但却普遍忽略了光标这个东西。
不过,我也能理解为啥PC端设计师普遍不热衷这个。
试想一下,设计师去做项目汇报,领导问你这次改版的亮点是什么,设计师回答说:改了几处光标。
这不是产品经理也能做?这不是让前端写一行代码就行了吗?这也能算设计亮点?
选光标这件事,确实不太能凸显设计价值。尤其我刚工作的时候,每天面对一堆复杂的UI界面焦头烂额,哪里顾及得到光标?
直到发生了一件事,让我彻底改变了对光标的看法。
当时要设计一个拖拽卡片的交互,因为是B端产品太复杂,具体功能就不多说了。
总而言之,就是那种传统B端后台产品,一般人看了根本想不到居然能拖拽。但是我们产品升级,为了提高操作效率,就加了一个拖拽功能。
当时为了暗示这些卡片可以拖拽,我是想到了很多办法,例如:
拖拽目的地圈虚线框:一般拖拽都是往虚线框里拖。
卡片悬停态加阴影:暗示这个是可以浮动的。
卡片加上圆点阵列:暗示这里是抓手。
卡片悬停时,目的地的虚线框高亮:暗示往那里拖。
拿去做用户测试,结果几乎没谁主动发现可以拖拽的。
气得我直接在上面加了一行字:“卡片可以拖动。”
然而因为页面上的信息太多,很多用户还是没看到那行字……
后面都快放弃了,我突然来了个灵感,把卡片悬停时的光标改成一个抓手。
再去做用户测试,几乎所有人都知道可以拖拽了。
然后我就反省,这么简单的一个解决方案,我之前为什么没想到?
于是我想起了一件事,那就是用户在使用PC端时,眼睛一直跟着光标跑。
就好像玩射击游戏一样,外人看是瞄准器在动,本人看是瞄准器一直居中,变动的是背景。
对于PC端用户来说,一旦找不到光标就会着急地快速晃动鼠标。为此,Mac 还提供了一个功能,在用户快速晃动鼠标时,放大光标方便用户寻找。
也就是说,UI上的变化再大,只要超出了用户视线范围就未必被看到。
而光标一旦发生变化,用户会非常敏感。
早期的很多PC端软件,喜欢用强烈的阴影来体现凹凸感,哪里可以点哪里不能点,看得比较清楚。
现在PC端软件和网站在视觉上都扁平化了,对光标也不重视,非常依赖悬停态来暗示用户哪里可以点。
可悬停态的问题是:
1、热区太多,很难全部做出悬停态,难免有遗漏的。
2、有些悬停态本身做得很弱,不太好理解。
所以对于扁平风格的PC端产品来说,完全放弃光标而完全依赖悬停态来暗示用户哪里可以点击,这么做的风险是比较高的。
更重要的是,光标能提供暗示不止于上述拖拽和点击。例如:
拖拽中松开暗示:
输入暗示:
禁用暗示:
缩放暗示:
单向拖拽暗示:
加载中暗示:
对于设计师来说,虽然光标不那么容易体现设计价值,但是对于用户体验和开发成本,都是很有价值的。有时用户很难get到的东西,说不定换个光标就理解了呢?
我这里整理了一套Atlassian提供的Mac光标svg矢量图免费送给大家。领取方式:点击左下角头像后回复光标。

优网科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!
优网科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用(手机站、APP开发)、微信定制开发(微信官网、微信商城、企业微信)等一系列互联网应用服务。