前言:
而今看官们对“button悬停变色”可能比较注意,咱们都想要了解一些“button悬停变色”的相关内容。那么小编同时在网络上搜集了一些关于“button悬停变色””的相关知识,希望朋友们能喜欢,同学们快快来学习一下吧!很多人觉得B端不用简洁好看,方便就行,功能堆砌也没关系。
但B端这个概念本来就是模糊的,尤其是遇到邮箱这种介于B和C之间的产品,简洁好看还是有用的。
去年底Gmail来了个设计改版,更向标准的 Material Design 3 靠拢了:
于是我顺便研究了一下他们的UI,并拿来和国内的邮箱对比。
不得不说,Google的设计还是很厉害的,一下子就把国内竞品比下去了。
当然,咱们也不能过于贬低国内大厂,毕竟这也是因为邮箱这东西在国内用的少,不是啥特别重要的产品。
但这个对比还是很有意义的,因为邮箱这种产品非常标准化,而且算是介于B端和C端之间。
所以邮箱产品能够很容易横向对比出设计上的差异,尤其对B端很有借鉴价值。
虽然海内外用户在习惯上有差异,但不得不说,在Google等海外大厂的B端经验还是明显领先于我们。
还没追上别人时,就多跟人学学,总好过闭门造车。
接下来我就直接讲讲,Gmail有哪些好的设计思路,是国产邮箱以及很多其它B端产品值得借鉴的——整理了6点。
P.S. 本次主要用网易、QQ和新浪邮箱作为对比,第一个我用的比较少,另外2个是有一直在用的。
1.层级简单
网易和新浪邮箱都有一个首页,用来展示数据和……毫不相关的东西。
但是QQ邮箱和Gmail都没有这个首页。
2.信息克制
相比Gmail,国产邮箱多出了不少信息,例如邮箱名称:
其次,是这些其它应用或付费功能的入口。这玩意儿其实Gmail也有,不过只有三四个图标。
批量操作也有一堆按钮,这些其实必须先勾选才能操作,否则就报错
Gmail默认不展示这些批量操作,勾选后才会出现:
国产邮箱特别喜欢展示数字信息,在各种地方告诉你有几封邮件,今天几封、昨天几封、多少未读……
相比之下,Gmail展示等数字就要少很多:
3.隐藏操作
Gmail功能绝对不比任何一款国产邮箱少,但因为设计师很会隐藏操作,所以显得比较简洁。
例如前面说过的批量操作,就是一个例子。
除此之外,还有不少。
其实Gmail左侧的导航项比国产邮箱还多,但是大部分被折叠了。
而国产邮箱很少用这种处理方式,一级菜单就一定要展示出来。
还有Gmail的邮箱列表悬停时,操作图标会遮住日期和部分文字,让右侧图标更加清晰:
而国产邮箱也基本没有这种处理方式,悬停后只会叠加操作,不会覆盖或替换:
4.重点明确
Gmail一眼看去,就知道主要操作有两个——写邮件和搜索:
而国产邮箱哪怕刻意要找哪里可以写邮件,也是不容易:
这只是一个非常简单的例子,其实整个界面上,Gmail的重点就是要更明确些。
为什么会有这样的差异,主要有2方面原因——色彩克制和尺寸差异。
尺寸上,Gmail刻意加大了写邮件按钮和搜索框的尺寸,使其明显有别于其它元素。
Gmail对颜色是非常克制的,除了选中态的高亮色外,整个界面的色彩并不多。
而国产邮箱的组件尺寸都相差不大,颜色又很多,而且很多色彩都不会用在重要信息上。
例如QQ邮箱,左导航一半以上的图标都是有颜色的,邮件列表每行的收件人头像和标记已读图标也有颜色,左下角还有一个广告卡片。
网易邮箱左导航有几个色彩图标和红点,邮件列表上也有一个标记已读的图标,但最干扰的还是开通会员的黄色按钮和广告banner:
新浪邮箱呢,最抢眼的是右上角的壁纸,以及邮件列表的分类标签,以及右下角的滚动广告:
5.轻量操作
国产邮箱点击写信,都会打开一整个邮件编辑页面。
Gmail老早以前是这样,现在早换成这种快捷小窗口了,能收起来,也能放大:
P.S.注意底部有个写信窗口最小化了。
还有就是邮件编辑页面,咱们现实点说,谁写邮件会搞一堆花里胡哨的样式的?一般就是普通文字,顶多加个标题、粗体和列表,也就差不多了。
而国产的邮件编辑页面,都喜欢在顶部整一大堆样式功能,看着心里发怵,感觉不编辑一下格式就该发邮件了:
而Gmail却把这些简化并放在底部:
6.反馈清晰
到这里,就是细节对决了。
Gmail几乎所有可操作区域都有悬停效果,而且效果还很清晰:
而国产邮箱很多图标悬停效果不明确,或者根本没有悬停效果:
关于这种悬停效果,其实是一种设计趋势,之前我发文讨论过:好多按钮悬停不变色了,这是大势所趋?
Gmail还有一个令我惊讶的细节:图标悬停后不是都有气泡说明吗?这个说明一般都会延迟一点出现,以免对不需要说明的用户产生干扰。
这个延迟是Gmail和国产邮箱都有的,但差别是,Gmail如果有一排图标放在一起,那么第一次出现气泡时会延迟,后面的都会改为立即出现。
仔细看上图,一个一个悬停时,气泡都延迟了。而一个接一个悬停时,只有第一个气泡会延迟,后面都立即出现。
而国产邮箱并没有这么一个判断机制,每个图标的说明气泡都要等待相同的时间。
这种层次的细节,必须要有系统性的设计规划才能做出,真是让人不得不佩服!
这些差异,确实是国内B端产品也常见的
B端产品摆脱不了功能太多的负担,这样对维护UX带来更大的挑战。
面对这种挑战,我们有两种选择:
一是以好用就行为原则,放任功能堆砌,美其名曰这都是客户需要的。
二是是尽力维持界面信息的有效简洁,功能越多,就越要了解其优先级和使用场景,这样才能进行合理取舍。
第一种肯定是最简单的,不需要啥水平都能做到。
第二种做好了很出彩,但要做好很难。水平不够硬要做的话,可能效果更糟,还不如摆烂。
哪种选择才是最优解?没有绝对答案,这肯定是因人而异的。
这就好比现代年轻人的困惑——内卷还是躺平?卷有卷的好处,躺也有躺的好处。
不同的境遇让我们做出不同的选择,最终导致不同的结局。
你想怎样选择呢?
标签: #button悬停变色