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

優(yōu)網(wǎng)科技秉承"專業(yè)團隊、品質(zhì)服務(wù)" 的經(jīng)營理念,誠信務(wù)實的服務(wù)了近萬家客戶,成為眾多世界500強、集團和上市公司的長期合作伙伴!
優(yōu)網(wǎng)科技成立于2001年,擅長網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合,致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)(品牌展示型、官方門戶型、營銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開發(fā)、移動端應(yīng)用(手機站、APP開發(fā))、微信定制開發(fā)(微信官網(wǎng)、微信商城、企業(yè)微信)等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。