豌豆荚设计奖分享会:贝壳单词「让不背单词的人背个单词 」

大家好,我是贝壳单词的开发者和设计师许晓锋。刚才听到四位前辈分享了很多关于产品设计的思路和经验,我本身也是学习到很多,我自己在做产品设计的时间并不长,我今天更多是从细微处来谈一谈我们贝壳单词的初衷,以及我对于产品设计的一些细微理解。

我今天演讲的标题是「让不背单词的人背个单词」。大家一开始看到这个标题可能不太理解是什么意思。其实,我们这个应用一开始叫做贝壳单词的原因,这个单词读起来非常像「背个单词」,虽然是背单词应用,但是它和很多的传统的背单词的应用很不一样。我们就是为了让不想背单词的人每天背个单词。说到贝壳单词,首先得从我自己说起,当我还在上大学的时候,我就非常不喜欢上学校的英语课,每次也是坐最后一排。可是无论如何我还是得面对期末的英语考试,因此背单词成为了我唯一的一个能够应对考试的方式。当时我就想要是有这样一种应用,让我们这些不考研、不出国的,本身对英语也没有什么好的感觉的用户来用,我在应用商店里找到一些应用程序帮助我来背单词,但是用了一段时间以后,我发现这些背单词应用用起来还是太困难了。这些传统的背单词应用都存在共同的问题,就是当用户在使用的时候需要付出巨大的精力和坚持,用户每天打开需要复习七天前或者十五天前的内容,人的习性是对于过去的内容比较不喜欢刻意的去复习,同时当很多的用户只能说坚持几天或者几周,只有少数人才能够一直坚持下去。而一旦停止使用这个应用的话,用户就很可能把它打入冷宫,再也不会打开了。

基于这些问题,我自己背单词的方式就是面对几百个单词,会重复多次的去背。通过多次重复,每一遍都不要求记住,最后在每一遍都不是很有压力的情况下把这几百个单词快速的背下来。于是结合我这样的体验之后,我就做了贝壳单词这个应用。这是一个从用户的角度出发的非传统背单词的应用程序。一开始我们的创意点是通过通知栏这个地方承载一个单词,每一天看或者不看,我们给你固定一个单词在你高浏览率的地方,用户重复看到这个单词,在无压力的情况下就记忆下来。我们设计了让单词主动找你的方式,叫做“吐司单词”,因为特别像吐司面包机在烘烤面包的时候,当面包烤好之后会从面包机当中弹跳出来,我们的“吐司单词”也特别像这种,当你使用Android系统或者在玩游戏、聊天等过程当中,会按照你设定的间隔时间自动浮现出来,并且会自动消失,不会干扰到你,非常有效率。

为了给用户非常好的英语应用场景,我们设计了一个纯英文的社区,叫做“英语角”。用户在这个英语角当中交流只能是英文,并且能够点击“不懂的单词”和“不懂的内容”加入收藏,也能够用一个灵感灯泡把自己的语言翻译成英文在里面交流。

Snip20150602_35.png

我们贝壳单词更多的是美观、易用和人性化,也特别感谢 Google 在去年颁布的 Material Design 应用设计语言,我们很有幸成为国内乃至全球最早一批完全 Material Design 的应用。但是其实不管Material Design 还是其他什么,我觉得好的设计都是一样的,都是追求舒适、优美而恰到好处,这其中最困难的就是恰到好处,对于恰到好处的理解,我个人的理解是需要比用户想得多一点,同时又不能过多的设计,有一些设计很美,但是在使用的时候也需要斟酌。总的来说就是不多不少。说到比用户想得多一点,首先跟大家分享的是在我们贝壳单词当中有这样一个场景,这是一个输入框,边上有一个发送按钮,不管是 iOS 还是 Android 都随处可见,比如说 iPhone 手机上的短信应用,这个产品一直是隐含一个问题,当用户在编辑这个内容的时候,会经常需要移动光标去修改部分内容,之后再把光标移到一行的行末或者文章内容的末尾,这时候经常由于发送按钮贴得很近,所以会误触到发送按钮,从而把未完成编辑的内容发送出去。我们也意识到这个问题,于是我们尝试解决的方面是移动发送的按钮到别的地方,或者是给这个发送按钮增加一个二级的确认对话框。但是如果移动发送按钮到别的位置可能会导致视图平衡的失调,同时也会带来手指不必要的跨度增加,如果我们给发送按钮增加一个二级确认对话框的话,并不能从根本上去解决这个误触的问题,并且也会给真正要发送的时候带来不必要的麻烦。但是,我觉得这两种方式都不太完美。

之后我想到了一个更好的方式,是增加这个输入框的右边距,隐去这个输入框的边线。效果就是类似这样。从右面的截图当中会看出这边多出了一小段的距离,就是这么一小段的距离就解决了误触的问题,并且也不需要移动发送按钮,也不需要给它增加二级的确认对话框。我个人是非常喜欢这个小细节的,因为它真的是很实用,并且我们这么做了之后,用户更多使用是感知不到我们做的事情,但是我想有时好的设计,就是这样润物细无声的。

Snip20150602_36.png

说到不过度的设计,有时候我们要做一些简化。Material Design 规定当用户点击了一个按钮之后,应该带来波纹扩散的效果,就像页面当中我点击了启动按钮,会带来一个水波纹扩散的情况,并且页面会消失。但是这里会带来一个问题,当波纹扩散的效果与这个页面消失同时进行的时候,导致 Android 系统在处理的时候会有卡桢的现象,我们意识到个问题之后,尝试给这两个动画安排一个先后的顺序。但是这样做了以后发现从用户视觉的感官上来看,会发现这个应用有一点延迟,本身 Android 系统就不像 iOS 这么流畅,所以我们考虑到流畅性的问题,还是在一些产生页面切换的地方去掉了水波纹效果,虽然这个效果很美,但是我们更多的时候会考虑一些流畅的问题,就得做一些取舍。

Snip20150602_37.png

同样对于 Material Design 的侧滑菜单做了一个简化。原本像 Google 这样一个的侧滑菜单的话,在使用的过程中,用户点击某一项内容之后,这个侧滑菜单比如说速度太快导致右面的区域有一个快速的明暗变化,用户在使用的过程中,视觉上会感到不适,有一点闪眼。由于这个页面和水波纹效果一样的问题,侧滑菜单回缩的动画与一个新页面加载和消失动画同时发生的时候,会导致有卡帧的现象。所以,像这个问题就算是 Google 也是本身存在的,我们也意识到这个问题,之后尝试了很多次的代码修改或者调整侧滑菜单的回缩速度都不是很理想,最终的解决方案是把侧滑菜单去掉回缩效果。就是右边这样的结果。发现这样做了以后一切都变得温和了许多,切换也变得很温和。

Snip20150602_38.png

这就是我今天和大家分享的一些小细节、小设计,其实我非常热衷于在这些细节上不断地去调整,和对于美观、易用和人性化不懈的追求。我特别喜欢锤子手机的一句话,叫做所有的细节将决定成败。

谢谢。

豌豆荚设计奖分享会:贝壳单词「让不背单词的人背个单词 」》上有 6 条评论

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>