从微小处入手,做让人更愉悦的用户体验设计

写在前面:用户体验是个较为主观的东西,每个人的看法都会有不同。有些东西我认为这么设计好,而你可能会认为不好,这是正常的,一款产品的确很难满足所有用户的潜在需要以及使用习惯。但是我相信,大部分人的潜在需要以及使用习惯存在趋同性。因此本文中的内容皆是建立在我的使用体验以及个人的主观感受下的。

相比UI设计,用户体验是个更让人难以捉摸的东西。与UI设计以视觉的方式展现出来不同,用户体验需要人去真正的使用它摸索它,然后去评判一款产品在使用的时候是否能够给人带来简单快捷以及愉悦性。

相比枯燥的阐述理论化的用户体验设计的原理。我将根据日常使用中接触到的一些优秀的以及不是很满意的产品中的用户体验来进行针对性的讲解。

自动为用户准备好

Instagram想必大家都知道,这是个世界上使用量最大的摄影社交类的App,尽管出于某些原因我们使用它会有些困难,但是它的名声还是会让很多人趋之若鹜的。

在Instagram中有很多微小的细节设计让用户在日常的使用中能够变得简单方便,让人感到非常体贴。相比文字,读图是非常轻松的。用户在使用Instagram浏览图片的时候往往会快速的上下滑动,一张图片也许只需要两三秒就浏览完毕,然后滑动至下一张。

在这个过程中,如果你被某一张图片吸引,在图片上的停留时间较长,明显超过了在其他的图片上停留的时间,Instagram就会认为你对这张图片感兴趣,并且想对作者说些什么。如果我们真的要这么做,从操作上就需要先点击评论的图标,然后进入评论的页面,这时你不仅可以留下自己想说的话,还能够看到其它人说了什么。但是这样的操作略有繁琐。

而Instagram很好的进行了简化,当你停留的时间较长,App会自动在下方弹出评论的输入框,在这里你就可以直接留下你想说的内容。这种方式简洁优雅,非常的人性化。也许你在图片上停留的时间较长只是被其它的事情分心了,并不是真正的想说些什么,所以弹出的评论输出框只占据了较小的一块区域,并不会对界面上的布局产生较大的改动,用户仍然能够继续舒服的滑动浏览。

当你在一张图片上停留时间较长,Instagram认为你想要说点什么,并在下方自动弹出评论框

猜测用户潜在可能的行为,然后给出一个快捷的操作方式,但是在界面上并不会造成明显的干扰,同时也保留了普通的操作方式。Instagram在细节之处做的很贴心。

另外一个很棒的例子是手机上的Photoshop Express。看名字就知道这个与桌面版的Photoshop有千丝万缕的关联,的确手机上的Photoshop Express主要功能是用户照片的后期处理。

Photoshop Express功能强大,能够实现很多功能,包括给照片锐化。如果你了解摄影的话,你肯定知道,摄影师在对图片进行锐化操作的时候需要将图片放大到100%的显示比例,在这样的场景下才能观察到真实的锐化效果。

当你在手机上使用Photoshop Express对图片进行锐化操作,你点击了锐化功能的按钮后,App会立刻自动将图片放大至100%的显示比例,当你完成锐化操作后App又会自动将图片缩放到适应屏幕大小。这其实是个非常简单的功能,实现起来几乎毫无难度。但是问题的关键就在于你有没有站在摄影师的角度想到这个问题。在手机上通常并不会提供显示比例,所以即使我们使用双指将图片放大,也无从知晓当前的显示比例到底是多少。

当进入锐化功能时,Photoshop Express会自动放大到100%的显示比例

这种自动放大的功能的确很方便很省心。在其它热门的图片处理工具诸如VSCO和Snapseed中我并没有看到这种贴心的设计,我也并没有使用过国内的相似的App不知道有没有提供类似的功能。当大多数App都存在同质化时,这种细微之处的设计更能获得用户的好感度。

直接给用户想要的东西

词典软件应该是每个人的手机里必装的。世面上有很多不同的词典App可选,每个人可能都会安装不止一个,我也一样,安装了4个不同的词典App,包括身世显赫的Google翻译。

但是根据我日常使用下来的体验来看,给我的体验感觉最好的是一款叫做【欧陆词典】的App。在App Store中搜到它之前我都不知道还有这个词典。思考一下,用户安装词典App使用最频繁的一定就是查词的功能,然后才会是一些背单词,看例句等功能。而欧陆词典用起来最舒服的一点就是,当你启动它之后,App会自动帮你把键盘弹出来,光标已经自动定位在了查词的输入界面了。这非常的方便,启动软件之后你只需要在键盘上输入就好。

点击进入欧陆词典之后,App会自动将焦点定位到搜索框并弹出键盘

相比之下,我所安装的其它的词典App,包括在国内大名鼎鼎的有道词典以及海词词典,都没有做到如此贴心的设计。欧陆词典很好的实现了直接给用户想要的东西,省去了过多操作的麻烦。

也许你会认为这一点可以被划在上面“自动为用户准备好”章节里,的确这样的体验设计也可以归类在那里。但是我认为驱动App如此设计的逻辑还是有所不同,其它的词典也许更希望把自己打造成全面的形象,因此在启动之后的首页就堆积了很多功能。而欧陆词典则大胆的撇去了这些使用频率较少的功能,将查词直接展现给用户。

因为查词非常的方便,我在日常的使用中首选欧陆词典。尽管它的功能相比其它的词典单薄了点,但是良好的用户体验却能收获更多用户的芳心,还有什么比获得更多的活跃用户更好的事吗。

另一个例子,我想说的是国民级的应用,微信。微信朋友圈可以分享一段视频,可是在朋友圈上下滑动,看到一段视频的时候微信仅仅是展示一个视频的缩略图,上面放着一个表示播放的三角形按钮。我觉得微信的团队显然没有花心思去好好考虑这里的交互设计,至少连看家本领抄都没花心思去抄。

在主流的社交App中,当你在Facebook,Twitter,Tumblr中滑动时间轴,出现了一段视频时,App会自动加载并播放,但是视频并不会发出声音,因为视频出现在时间轴中未必是用户主观意愿想去观看的。而相反,微信朋友圈中的视频并不会自动播放,需要手动去点击,视频中的声音也会被播放出来,而在一些场合我们并不希望有声音的打扰。

当滑动到一段视频,Facebook会自动播放

不知道这么简单的一个功能为什么腾讯都没有去抄。能够想到的可能是出于流量的考虑,可以腾讯的实力这点自动播放带来的服务器流量成本并不会有多少。如果说是为了用户的流量考虑,那么添加一个在WiFi状态下才自动播放的设置即可。所以在这方面,微信显然做的不够好。

恢复上一次的状态

Instagram有一些非常好的用户体验设计,正如上文中说的自动弹出评论框是为一例。可惜Instagram中也有一些为人诟病的用户体验设计。

相信每一个在Instagram中浏览图片的人都会遇到的一个经历就是:当你正在浏览,然后需要处理其它事情,比如回复一条微信,然后再切换回Instagram中的时候,你会发现时间轴被App自动返回到最顶部了,你刚刚正在浏览的位置找不到了,也许你原本已经滑动了很长的距离,如果你还想接着刚才的地方继续浏览,那么就需要包括新加载的内容一起再次往下滑动。这很让人崩溃。

一开始我以为这是苹果iOS严格的后台清理机制造成的,只要是切换到其它的App一会或者屏幕熄灭一会,再次进入Instagram都会自动返回到顶部。后来发现切出去同样长的时间其它的App的进程并没有被系统自动清理掉。当我从Instagram中切换出去迅速地切换回来之后也没有被自动返回到顶部。也许这有个临界值,超过某个时长就会触发。

至于Instagram为什么会如此执着的把时间轴返回到顶部的原因并不清楚,如果说是技术上的问题,其它的App并没有这个现象,比如Twitter就能记住上一次的位置,所以技术上实现起来不是问题,何况Instagram那么强大的团队不可能留下这个bug。那么就有可能是PM故意而为之了,可实在不理解这样有什么好。

Instagram是个很典型的反例,而Lightroom则是做的很好的正面典型。Lightroom是Adobe专门为摄影师准备的后期处理工具,在Lightroom中对图片进行处理,完成的结果是不需要像Photoshop那样保存的,软件会自动为你记录,只有当你需要导出处理好的图片时才需要额外的操作。

Lightroom一个很好的体验就是当你不论在什么状态下将软件关闭,下一次启动的时候都能恢复到关闭前的状态,不论是在图片管理的界面,还是正在处理图片,还是在给图片添加GPS地理坐标。这对于用户使用来说非常方便,启动了软件就直接能还原到上一次的工作状态。

符合直觉的操作

在App用的交互方式需要符合用户的直觉。用户的直觉来自于日常生活中的经验积累以及使用科技产品积累下的使用习惯。

有些交互设计的初衷是好的,但是在实现并不是很完美,与用户的直觉并不符合,造成了用起来就显得很别扭。在淘宝App中有一处的交互设计是如此,使用起来给我的感受就是很累。

当我在淘宝上看中一款商品,点进产品详情的页面,然后去选择产品的规格,比如大小、颜色等等。点击这个选择规格的按钮就是弹出一个几乎占满整个屏幕的弹框。有些卖家的产品有很多规格可选,自然弹框一屏是显示不完整的,何况弹框的上方还有产品图片和价格等信息,因此在弹框中就需要上下滑动。

当我看到了想选择的规格但是处于下方并不好点击的时候,我想把列表网上滑动一些距离,根据我日常使用手机积累下的使用习惯,滑动一段短短的距离就足够点击到了。那么问题就来了,在界面滑动了我需要的距离已经很方便点击之后,App会“很贴心”认为我想多看些内容,并且把产品图片缩小价格也网上挪动,腾出了额外的空间,于是在我挪动了刚好需要的距离之后,App又挪动了一些距离,原本我的手指已经放在预定的位置准备点击,结果却被App“好心”地又移出去了。

淘宝的选择功能会来回滑动,选择起来并不舒服

好吧,既然移过头了我就再移回来,可是当我不小心滑动距离大了一点,触发了App重新排版的临界值之后,他妈的图片又自动放大,价格又回到原先的位置。我第二次把手指放在预计的位置上可等来的又是跑偏的按钮。

问题在于,用户根据视觉看到的效果,准备滑动一定的距离,比方说50px,但是当超过40px之后App就做了重新排版,于是最早就会造成想要点击的按钮却移动了80px。这相当的令人抓狂,我想淘宝负责这个功能的PM肯定是在京东购物的。

这是一个典型的好心办坏事,甚至我怀疑这么设计未必是好心,只是为了显示我们在交互上做了些东西出来,至于是好用还是难用就管不着了。解决的方法很简单,把PM开了,换成传统的简单的滑动就可以了。

给予明显的反馈

好吧,又要把Instagram拖出来再来几鞭子了。谁让我平时用的多所以关注的也多呢。

App中的交互操作需要给予用户一定的反馈,并且反馈要明显,能够让用户清晰的获知并且不会让人错过。交互中的反馈有多种方式,视觉上的,听觉上的,或者是触觉上的,比如震动。通常来说采用视觉上的反馈是最多的一种方式,毕竟人类信息80%都是从视觉获取的。

在Instagram中最常用的几个交互操作是图片下方的点赞,评论,收藏等若干功能。其中,收藏功能的反馈我觉得是有很大问题的。Instagram中的收藏按钮可以触发两种不同的功能。

当你轻点收藏按钮,App自动为你把图片添加到收藏列表中,不论你收藏了一张美女图片,还是收藏了一张壮丽的风光摄影,所有收藏的图片都在这个列表里。当你通过轻点的方式收藏了一张图片之后,Instagram会在图片内容下方弹出一个条幅提示收藏成功,这个反馈较为明显,并且位置处于视觉焦点所在的区域,很难会错过这条通知,除非你望着美女图片已经浮想联翩心不在焉了。

因为我们可能会把各种不同的图片都收藏起来,以至于列表内的图片又多又乱,所以Instagram给收藏添加了分类的功能。当你在收藏按钮上长按,App会在底部弹出一系列收藏列表中的分类,你也可以创建新的分类。当选择了一个具体的分类成功添加之后,Instagram会在App界面的顶部弹出一个通知,给予用户反馈告知添加成功。

Instagram的收藏成功提示位于顶部,并不明显

由于这个顶部的收藏成功的通知背景是白色的,App原本头部也是白色的,即使通知内包含了图片缩略图与文字,但是从视觉重量上来说也非常的不够明显。另外一个问题就在于反馈的位置,选择在App头部这个离视觉焦点最远的位置进行反馈,很容易让人错过。

作为对比Pinterest在反馈上的设计就要比Instagram好非常多。Pinterest整个App的设计风格有一种极简主义并带有一些粗犷的风格在里面。这也体现在了Pinterest给予用户反馈的设计上。

Pinterest的通知就很清晰明了

在Pinterest中添加一个图片到自己的Board上,App会在界面底部以非常明显的方式弹出成功添加的反馈。通知使用了大尺寸半透明的深灰色为背景,然后使用了白色粗体的文字进行描述。很难说我们会错过这么明显的一条反馈。倘若网络不好添加不成功,App则会将通知的背景色换成更为明显的橙色,相当的醒目。

让用户使用得舒服

时间回到2007年,iPhone首先扔掉了实体键盘,在正面换上了一个大尺寸的触摸屏,所有的操作包括文字输入在内都通过在屏幕上触摸进行。第一代的iPhone使用了一块3.5英寸的屏幕,现在来看只能用迷你两个字来形容,但是在当时可以称得上是巨屏。

随着iPhone的流行并带动了智能手机的发展,以及Android的崛起,智能手机屏幕越来越大。从最初的3.5英寸,到现在的5.5英寸为主流,甚至还有很多屏幕更大的机型。短短十年间,手机屏幕尺寸有巨大的增长,而在漫长的生物进化的过程中我的手掌几乎没有变化。

最初的3.5英寸的屏幕虽然感官上很大,因为当时人们普遍还在使用着仅仅2.4寸大小的手机,但是3.5寸相比人手掌的大小,还在能够单手掌控的范围内的,在屏幕内各个位置的按钮也能较为轻松的触摸到。可是当手机屏幕普遍增长到5寸以上甚至6寸的时候,屏幕上的并不是每一块区域都能触摸到了。在这时,在设计用户界面的时候就需要考虑常用功能摆放在什么位置才能用起来方便快捷了。

当我们将手机握在手里的时候,屏幕下方距离手指的距离最近,也是最容易触摸到的地方,而屏幕上方则比较困难。屏幕上与手指呈对角线的位置是最难触摸到的,当你右手握持的时候左上角距离最远,左手握持的时候右上角距离最远,除非你习惯双手握持。

在iOS版的Twitter中,用户最常用的撰写推文按钮被放置在了右上角,这个距离已经远地难以触摸。当我们好不容易开始撰写之后,Twitter的发送按钮也被放置在了右上角。不得不觉得这个按钮的布局相当的反人类。其实原先版本中的发送按钮是位于右下角这个最舒适的位置,只是因为新版增加了多条连续推文的功能,将发送按钮挤到了屏幕顶上。而多条推文的功能自然没有发送按钮使用的频繁,这么设计无疑是本末倒置。想想会最为频繁用到这个功能的人应该会是网红总统特朗普吧。

Twitter的发送按钮被放在了不方便触摸到的右上角

在社交类的App中撰写内容的按钮在行业已经有了惯用的方式,那就是将按钮独立出来,在整个界面右下角保持浮动在内容的上层。在Android版的Twitter中就是如此设计的,这样使用起来会更为方便。

此外还有一种实现方式是将撰写按钮放置在底部功能栏的中间,同样能保证这个最常用的按钮点击起来最方便。这也正是Instagram和iOS版本的Tumblr正在使用的设计方式。

Tumblr把撰写按钮直接放在底部的位置方便点击

大屏幕的确给我们带来了更好的视觉体验,但是大屏幕也造成了使用上的不便。也正因为如此,一些输入法也提供了单手模式,把键盘缩小到更靠近习惯用手的一边,让我们更好的操作,这点小小的改进对于使用体验却有很大的帮助,让文字输入更舒适。

保留最后一点节操

用户体验人人都在谈,几乎每个与互联网一丝联系的公司都会强调我们重视用户体验,可从实际的产品来看,往往嘴上喊着用户体验,身体上却在不断强奸用户。

在智能手机还没有普及之前,Splash早已在PC上普及开来。设计Splash的初衷是因为软件启动需要加载一段时间,越是庞大的软件花费的时间也就越长,在这个过程中展示Splash,甚至在Splash上告知用户的加载进度可以避免让用户不那么无聊。

而智能手机普及之后,Splash也被运用了进来。但相比PC上的软件启动速度,手机上要快了很多。不论是苹果还是Google都不建议使用Splash,这从原生的App就能看得出来。在主流的App中,Facebook与Twitter虽然有Splash,但是非常精简,而且App以最快的速度加载,尽量避免让用户等待太长时间。而Instagram,Google地图,Tumblr等App是没有Splash的,取而代之的是直接呈现背景。

相比国际主流App良好的节操,国内的App吃相就先当难看了。我先后供职的几家公司需求方不仅强烈要求添加Splash,并且还往Splash中添加很多内容。为了避免Splash呈现的时间太短,还强制限制了Splash的呈现时间不得少于3秒钟,至于是哪家公司我就不点名了。

启动页面已经遭到了滥用

这两年,国产App的Splash从原先的花哨内容转而变成了一个广告位,网易新闻还会给你播一段视频,甚至他妈的还有声音。很多App的广告还有了呈现的时间,从3秒到5秒不等,当然你可以点击跳过,但是这实在很烦人。这就是典型的强奸用户的体现。

诚然把Splash做成广告位确实可以赚钱。但是一家公司产品是最核心的东西,产品不用心做好,无视产品中会给用户带来麻烦的东西,那么最终这样的产品也是无法做大做强的。国产App经常有各种后台偷跑,要求非常多的权限等令人诟病的地方,现在连界面设计最后一点节操也不顾了。

给予快捷的操作

在产品的设计中,给予一些快速的操作方式是很有必要的,这样就能节省时间,快速的完成那些常用的功能。有些快捷的操作需要一套单独的设计,而有些则不需要。

说起索尼手机,这应该算是比较边缘的品牌了。尽管傍着索尼这颗大树,而且时不时还放出一些黑科技,但是一直不温不火,可光是索尼这个牌子,就能吸引一批粉丝,我也是。但是索尼手机在使用当中确实有很糟心的地方。

索尼手机的相机App给人的使用感受就不如iPhone里的那么简单直观。在索尼手机的相机App中,屏幕最上方的中间位置布置了模式切换按钮。索尼给相机准备了手动模式,自动模式,视频模式,以及第三方拍摄App。但是在模式切换的时候使用起来就很不快速。

我习惯使用手动模式,这样拍摄的时候可以调节一些参数,尽管也非常有限。而如果当我想要切换到拍摄视频的模式,我可以在屏幕上向左滑动,可是问题的关键在于这个滑动有很大的限制。当我从手动模式滑动到拍摄视频的模式,中间要经过自动模式,相机会在自动模式停下,然后需要再次滑动。哪怕是快速的滑动也还是会停下。

如果当我点击顶部的视频模式按钮,相机仍然会在自动模式停下,并不会直接跳至视频拍摄模式。这种操作相当的麻烦。相比之下iPhone中的模式切换就很简单,你可以直接点击某个模式,相机会直接跳过去。当你快速滑动,相机会直接跳过中间穿越的模式直接停在所需要的模式上。iPhone的操作快捷迅速。

索尼的相机App切换模无法快速切换

尽管索尼手机中的这种拍摄模式的切换用起来很慢,但也算完成了产品需求,可是给人的使用体验却还有很大的提升空间。当做完一个App之后,不仅仅要检验需求有没有都完成,还要考虑到在使用的过程中能够快速的实现。显然索尼在这方面做的很不好。

另一方面,有一些App原本就可以提供快捷的操作方式,可是总要画蛇添足,给用户的操作带来麻烦,额外增添一些不必要的操作。其中最为典型的就是国产App最为热衷的新功能介绍。在我看来这就是厚着脸皮刷存在感的东西。

诸如版本更新的内容实在让人烦不胜烦

有时候出于网络条件的关系,也会使用iPhone上的国产App(之所以在iPhone上使用,因为ios系统上App无法做后台偷跑等操作,相对很老实,无法像Android上那样耍流氓)。在使用诸如地图应用的时候,如果App刚刚更新过,那么总会弹出新功能的介绍页面,而且往往还有很多屏,滑到最后才能跳过。有些App稍微好点,在一开始会提供一个不太明显的跳过按钮。

这些App,尤其是工具类的App,用户启动的时候通常都需要立即使用的。可是这些功能介绍总会给人带来额外的操作,徒增焦急的情绪,对于手机性能不太好的用户就尤为明显。

我认为新功能的介绍要尽量少用,避免给用户带来麻烦,尽量让用户能够快速使用。对于用户来说,当App发展成熟之后,一些新功能未必是用户一定会用得上的。不妨自信一点,直接放在App中,配合一些优雅的设计,让用户自己去发现。

归类

说过了各种App中用户体验好与不好的。现在该说一说系统级的用户体验设计了。下面将要说的可能会有很多人持不同的看法,我表达下自己的看法。

在iOS系统中自带了大约十几二十个原厂App。如果用户之前习惯Windows系统或者Android系统的套路,那么想要在App调节首选项设置的话就会很不适应,因为iOS把这些设置功能都搬到了系统设置中。

App的首选项不是经常会调节的,一旦我们按照自己的使用习惯完成设置之后就很少改动了,这么看把设置放在系统设置中无可厚非。但是我认为还是有一些弊端的。

我们很少会突然想到我就调整某个设置,于是直接进入系统设置中去调节。往往是在实际使用某个App的时候,发现App的默认设置有些用着不习惯,因此才会想起来调整,那么把首选项放在系统设置中就意味着要从App中跳出去,在系统设置中找到正在使用的App再去调整,这很麻烦,也不直观。

要调整内置应用的设置,就必须去系统设置中,这很麻烦

举个例子。今年下了场大雪,对于一个一年最多下一两场小雪的南方城市来说不容易,我很兴奋,特意跑出去拍摄雪景。在iPhone中慢速摄影的功能,这样可以拍摄雪花落下的慢速画面。系统中默认的是以720p240fps的参数拍摄的。当我拍摄了一个片段之后觉得720p的分辨率有点低,于是想要换成1080p120fps的参数来拍摄,就必须从相机退出,去系统设置中找到相机,再进去调整。拍了一会又觉得120fps的速度有点慢,又想切换回720p 240fps,于是就又要退出去再去系统设置中调整一下。这样来来回回非常折腾。

其实除了iOS自带的应用,其它的App并不将首选项调整放在系统设置中。我不是开发者,不清楚是苹果把这种功能仅提供给自家的应用,还是第三方不愿意这么做。反正众多的App是将首选项设置放在了App内,这更直观,因为只有当我们正在使用的时候才会想到去调整参数设置,此外在App内调整比跳出App调整也更方便。

所以在我看来,苹果选择把一些App的首选项设置放在系统设置中是个挺反人类的设计。希望在未来的iOS系统中能够更换这个设计,让参数调节更好用吧。

总结

以上这些细节之处的交互与用户体验设计有些是不太容易想到的,比如Instagram自动弹出评论框;有些是不经意间给用户操作增加麻烦,比如索尼手机相机App的模式切换;还有的则是明知与良好的用户体验背道而驰却仍然要为之,比如Splash中的广告。不过需要承认的是,经过多年的发展,整体的用户体验相比多年以前的确有较大的提升。

相比UI设计,用户体验更难琢磨,往往没有实体,并且包含一系列连贯操作,设计人员在设计的时候很难考虑周全。但是在产品原型完成之后,我们可以去把自己当作用户去亲身体验一下使用起来的体验如何,还有没有什么可以提升的地方。我认为事情的关键就是有没有让自己跳出工作中的视野,以局外人的角度去审视,这样才有可能发现一些容易被忽略的问题。

推荐阅读更多精彩内容