搜索
您的当前位置:首页正文

这是灵魂的配方——关于“毒药”的交互及视觉改进方案

来源:二三娱乐

有一些毒药是必要的,有一些非常轻微的毒药组成了灵魂的配方。

「毒药」是一款扎根电影和书籍垂直领域,基于兴趣展开社交,鼓励用户从心对文艺作品进行评价和分享的移动互联网工具。不难看出,该产品的主要用户与豆瓣的目标用户有大量的重叠,即文艺青年。那么,为这个相对不好伺候的群体进行产品设计,功能美学和视觉效果首当其冲。

总之,爱莫能助是悲催的。原本就是豆瓣忠实粉丝的我在「毒药」发布之后立即下载并深度使用。作为正在学习交互设计的大学生,今天,我就来为“毒药”团队给出一些我在深度使用后的改进意见,若有遣词不当、略显偏颇之处还前辈们请谅解。

软件整体框架解读

作为一个垂直社区(工具),「毒药」的产品使用情景相对会简单得多,总结起来也就三点:浏览(影评、书摘等)并与之交互(如打赏)、创造内容(如将自己对某一文艺作品的感悟发布出来)、与拥有相同兴趣的用户进行更进一步的互动(发起聊天等)。

下面是我根据软件临摹的框架:

「毒药」产品框架

可以看出,软件总体的框架基本满足了用户的需求。为了方便分析,我将上述的框架图进行了整合,的出了下面更具描述性的框架图:

「毒药」产品框架(整合版本)

能发现,在该软件中优先级应该较高的「精彩推荐」模块却被藏到了「发现」(非默认首页)下,称为了一个二级入口。「发布」同作为高优先级的中心功能点,倒是被体现得比较明显,不仅在首页的右上角放置了发布的按钮,在 Tab 栏中也用了一个明显的图标以鼓励用户尽可能多地产出内容。

在个人进行分析后,我在不破环软件定位的情况下对软件框架进行了细微的调整如下:

「毒药」产品框架(个人优化版本)

交互细节优化建议——慢慢数落我心中的“怨念”

初次打开页面,背景的视频便吸引了我的目光,很是讨喜。美中不足的是,「毒药」作为新兴的产品,应当考虑将注册和通过其他账号登陆作为主要入口。一来方便了占绝大多数的新用户(毕竟用户也不会尝尝将自己的账户注销),又能通过相应的登陆协议获取更多用户数据(如用用户新浪微博的头像作为其在毒药的默认头像)。下面是我根据我的想法重新绘制的登录页:

登录页

重启软件时,首先展现的是一个带有 Logo 的闪屏,而不是苹果官方所推崇的没有内容的软件截图。由此,我们并不能不能感受到软件“秒开”的快感。个人猜想是由于产品团队未来深化品牌而做出了如此妥协。当然,我们也可以在其他很多细节上达到强调品牌的效果。如在下拉刷新的时候。

可以在下拉刷新处制造彩蛋

正如上文所述,软件将发布通过两个入口将其优先度进行了提升。但是,本身随着大屏手机的流行,屏幕顶端早已不是理想的操作区域,将发布按钮放置在屏幕顶端是否有一些不妥呢?更何况,Tab 栏中的按钮已经能很好地完成鼓励用户发布的使命了。

略显重复的控件

在这里,如果点击了顶部的发布按钮,接下来缓慢在屏幕下方滑出(动画速度过于慢了一点)的类目选择是不是离用户操作区域太远了呢?

触发点距离响应域过远

首页分为了大神和广场两大模块,用户可以通过左右滑动来进行切换。但是左右滑动切换并不是 IOS 常见的手势(在 Android 上更常见),在 IOS 中,左右滑动往往是调出相应选项(如删除)的手势。况且,在整个软件中,同样的控件下,只有这里支持左右滑动切换。另外,“大神”和“广场”这两个模块的区别并不被很多新用户所理解。着眼于大神创造的内容与普通用户的内容差别不大,个人两个板块合并,在扁平层级的同时,将普通人创造的精彩内容与大神的内容并肩,真正实现共同发声。

在首页打开扫描二维码的功能之后,虽然在导航栏有着返回的 icon,却不支持侧滑返回。不过软件在下方又提供了一个取消的按钮,让人不解。经过测试,几乎整个软件均不支持侧滑返回这个 IOS 让人爱不释手的手势,甚是遗憾。

扫描二维码的界面

下面我们进入影片详情页。该页面首先给我的感觉就是信息臃肿且杂乱。在顶部,该页面为用户细数了影片的评分、总票房、导演、类型、演员等信息。接下来又是「加入影单」、「我要评论」、「匿名吐槽」三大 call to action。而剧照、简介,甚至是大神点评也在没有滑动的情况下都有显示。参考豆瓣,后者在首屏展示了相对更少,但也是用户真正关心的相关信息。同时,还通过不同的字号、颜色以及留负空间为信息进行了较好的分隔,从而增强了内容的可读性,更是让界面显得简洁大方。对于移动设备用户来说,他们通常是不介意滑动屏幕来获取更多信息的,因为这个手势很自然且成本很低。因此,我建议毒药最好能够在将信息进行仔细的分组后,为其按照权重来编排,而不是所有信息一次性全部呈现给用户。

杂乱的展示方式 豆瓣的影评详情页

还是在影片详情页,毒药将评分分为了大神评分和普通评分,我想这是为了最高程度地将对作品最为中肯的评价展现出来的方式,但是,用户真的会为此买单吗?其次,总票房虽然可以在某种程度上衡量一部电影的水准,但是在绝大多数用户心中比国内并没有对一部电影票房的相对估计值,因此,只有在有多部电影票房同时呈现时,用户才能知道其处于什么个水准。另外,在向上滑动的时候,导航栏处并没有进行遮盖或者是使用 IOS 惯用的高斯模糊,导致两个层级的内容显示重叠。最后,点击评论按钮对用户的点评进行评论的时候会跳转到一个全新的页面中去,并且还要再次点一屏幕下方的评论按钮才可开始编辑。步骤“长达”两步的操作给了用户一种割裂感。这里建议参考 QQ 空间和微信的设计,即一步操作的情况下直接调用非模态的文本编辑控件,而不是进入一个次级界面,这样可以提升用户对自己所在层级的感知。

直接调出非模态的编辑器

再提一点,该页并不支持轻触状态栏回到最顶部。

接下再来观察图书详情页。其内容展现形式与电影详情页类似,故不再进行重复剖析。但是值得注意的是,图书详情页引入了「书摘」。经使用,我绘制了发布书摘的流程如下:

创建书摘的流程

而对于创建书摘中,用户期望的流程应该是:

用户期望的流程

由此可见,填写页码并不是绝大多数用户在创建书摘时的期望步骤。因此,我在这里将创建书摘这一操作的流程优化如下:

优化后的流程

之所以将填写页码这个步骤放置在拍书摘的后面,是因为用户往往在心中形成了自己期望的步骤后,看到还要填写页码可能会稍稍不情愿。通过这样的出来,用户会觉得既然之前已经为创建内容作出了一定的努力(拍照),多做一点拍页码的活想想还是值得的。总体上来说,虽然并没有真正地帮助用户减少工作量,但这也在一定程度上避免来用户一眼就看到多项工作而选择放弃的情况。

但是,这并不是一个最好的选择。我们从用户真正的出发点来看,一般情况下,吸引用户创建书摘的,往往并不是书籍的排版、纸张的细腻,而是书中的内容。因此,为何不将书摘干脆做成文字分享的形式呢?同时,为了减轻用户在移动设备上输入不便的痛处,我们还可以采用 ORC 的手段,在让用户拍下内容之要求不变的情况下,直接将内容文本化。反观音乐应用的翘楚——网易云音乐,其歌词分享正是探明了用户的出发点:一首歌打动人的,往往是那么几句歌词。

进一步地,将用户的书摘文本化之后,通过大数据我们还能直接抓取到用户截取的内容具体在那一本书的那一页、有哪些用户也摘取过这一部分的内容……制作好书摘之后,倘若能提供精美的配图或模版以进行分享,想必是极好的。

下面,是有关搜索的部分问题。在搜索中的话题下,点击「大家都在搜」的话题会直接跳转到该话题的详情页,而同在搜索中的影视、图书、影单和书单中,点击推荐的关键词则只是用该关键词进行搜索,并不是直接跳转到相应的页面。这造成了逻辑不统一。

同样是搜索,逻辑却不统一

点击用户的头像灰进入用户的详情页,我们在这里可以看到,该页面主要强化了用户的头像(包括认证情况)、影响力(粉丝和打赏)以及相片。我想,这可能是因为团队主要是想突出用户能在毒药这个平台上为自己带来成就感。但我想说的是,作为一个用户主要是资深文艺青年的产品,其更应该注重的是为用户的情怀构建一个优雅的空间,而不是类似于领客英的个人成就展示平台。在这里,建议产品团队真的应该好好想想该如何帮助用户创造「灵魂的配方」。

因此,我认为,我们应该在这里弱化粉丝数量、标枪等指标化社交属性,取而代之的是用户创造的内容来彰显用户的情怀所在。想想,我们在微信中添加了一位新的好友,想必第一件事便是查看他(她)在朋友圈发布的图片吧;从这些图片中,我们能很快地感知到他(她)地品味等信息。我们将用户给力五星好评的电影、做过书摘的书籍、热情参与讨论的话题用精致的排版一一罗列出来出来,就能够让想了解该用户的人更准确地拿捏准其兴趣范畴,而该用户也会为了展示出自己(或想让别人感受)到的自己而更加积极地在相应领域创造内容。要知道,未来让自己的社交符号更加地鲜明,很多用户是不会吝啬他们的时间的。

至于用户的打赏,我暂时还没有想到一个很好的方案来展示,希望看到更富有远见及洞察力的同好给出解读。

在文章的末尾我再提两个小小的问题。在设置中,部分开关按钮的底色及描边为绿色,而另一部分却是蓝色。另一点就是建议在点击进入意见反馈之后直接出发键盘,最大化地简化操作。

尽自己所能,为毒药团队提出了这些陋见,只希望它能为千千万万个像我一样热爱文艺的 90 后再造一个心灵的家。衷心希望「毒药」能够真正地达成自己初心的理想:

给好书、好电影写颁奖词,为差书烂片写墓志铭;不做沉默的大多数,从心来为情怀加分;有才华的人可以丰衣足食,真正的独立书评人和影评人将在这里创造出“灵魂的配方。

Top