龙空技术网

【UI设计】Gmail设计改版,对比暴露国产B端通病

衍果视觉 2945

前言:

而今看官们对“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悬停变色