美文网首页移动设计
Weekly Redesign#1 唱吧——手势设计

Weekly Redesign#1 唱吧——手势设计

作者: Baoling | 来源:发表于2016-03-25 11:57 被阅读341次

从本周起,本公众号将每周发布一份产品重设计文章,通过重设计来锻炼自己的设计能力。本周的重设计目标是:唱吧。

唱吧是一款类似于KTV的手机app,你可以在上面点歌、唱歌、录歌、上传到个人页面,也可以听别人唱歌。本次重设计唱吧版本为7.1版本,iOS平台。

在重设计前,我采访了一位两年前的唱吧用户,得知两年前的唱吧体验不爽的地方主要有:

1.录歌的时候一不小心录错一句就要整首歌重新录,要录好一首歌往往要反反复复好几次,浪费时间;

2.如果中途被什么事情打断,也要重新录整首歌;

3.点歌的时候没有自己收藏的歌;

4.榜单页不能搜索自己想听的歌;

经过两年的改进,如今的唱吧已经改进了其中的许多不足:

1.录歌可以重复录一段而不是整首歌,只需在录歌时将歌词拖回前面几句就可以从前面几句处重新录制;

2.录歌可以暂停,并且从暂停处开始录歌时音乐会从暂停处前几秒开始播放,给用户准备时间;

甚至该用户没提出的问题也得到了改进,即下图中右图左上角的“跳过前奏”,帮用户录歌时省了不少时间。

V7.1版本的录歌页

V7.1的录歌页已十分成熟,暂时找不到其他可改进的地方,本文主要对非录歌页进行重设计。针对该用户提出的第三点和第四点,唱吧还没有进行改进。本文将结合用户访谈的结果和本人对页面的体会来进行重设计。以下是原始设计和交互图。

原始设计和交互图

首先是app打开的第一页“精彩表演页”。如下图,左侧是原设计,其中缺少搜索框,不能进行搜索;并且顶部的许多按钮进去之后的页面大同小异,按钮存在的价值不大。

左:重设计前;中:重设计后;右:重设计后搜索页

本次重设计增加了搜索框,并将顶部按钮精简到“KTV, 榜单,单曲,合唱”四项,将其置于最顶部,通过点击或者左右滑动可进行切换。将搜索框置于第二层,是因为搜索框是非常常用的点击操作,置于第二层可以离手指近些,方便单手操作。而顶部的tab则可通过主页面的左右滑动进行切换而无需点击。在搜索页中,用户既可以搜到榜单排行,也可以直接演唱,缩短了原来“切换到点歌页-> 点击搜索框” 的搜歌路径。

其次是主页的设计。原设计顶部的三个tab其实没有存在的必要,好友作品在“全部”tab中也有,而“收藏”则可以直接放到个人资料页中。所以重设计后的页面去掉了那三个tab,并在左上角增加了添加好友按钮,方便用户关注更多人。

左:重设计前;右:重设计后;

在唱歌页中,顶部的设计和“精彩表演”中的类似。其次是在页面中部增加了“我的收藏”按钮,允许用户直接在自己收藏过的歌曲中点歌。

左:重设计前;右:重设计后;

在听歌页面,原设计点击底部的评论时会另起一页进行评论,完全挡住了正在观看的MV,十分影响体验。本次重设计将评论框直接放在底部,评论无需跳转页面。并且将歌手页、贵宾席、评论、听过这些内容改为四个tab放在页面中,减少页面滚动影响观看MV的体验。

左:重设计前;右:重设计后

左:重设计前;中、右:重设计后;

左:重设计前;中、右:重设计后;

中部的四个tab可以通过拖动拉长该区域,并且不完全挡住视频部分,再往下拖动可回到较短状态。

礼物页与评论页相同,原设计是另起一页,完全挡住MV,本重设计将其缩小到半页,在不影响观看体验的前提下进行送礼。

左:重设计前;中、右:重设计后;

对本次重设计有任何意见和建议都可以在下方评论告诉我,期待与你共同进步。如果觉得本文不错,也可以在下方赞赏哦,多谢支持~

欢迎关注和推荐本公众号"BaolingUX",产品设计类文章持续更新。

相关文章

  • Weekly Redesign#1 唱吧——手势设计

    从本周起,本公众号将每周发布一份产品重设计文章,通过重设计来锻炼自己的设计能力。本周的重设计目标是:唱吧。 唱吧是...

  • 唱吧唱吧

    一个人坐在小小的房间里,戴上耳机,拿起话筒,听见游戏币一颗一颗掉进箱子里,将自己喜欢的歌曲加入列表,自由的时刻到了...

  • 读懂「 唱吧KTVHTTPCache 」设计思想

    读懂「 唱吧 KTVHTTPCache 」设计思想 经过作者的指点,本文更新了日志原理说明,HttpServer ...

  • 0714

    ElemeUED Post#1 ElemeUED Weekly目录-知乎专栏 掌握这几条设计原则,迅速提升你的设计...

  • MONO的一些重新设计与思考

    Weekly redesign challenge Week 2 MONO的重设计 这周选择的redesign的A...

  • 唱 吧

    不要掩饰、也不要羁绊那一刻的激动情绪 在空寂无人的斑马线上 大街是你的舞台 放声歌唱吧、放声大哭吧 此刻、灯火阑珊...

  • 唱吧

    一世的情话 说到最后不过油盐酱醋 前生的回眸 也终能望断那红尘桃花 真正的爱 卑微到世俗的指爪下 世俗的小桥流水人...

  • 唱吧

    簡書是個大江湖啦啦啦啦啦啦啦啦在這裡鑽呵貝呵買呵賣呵送呵中獎了贊了踩了好了散了惱了更愛了寫了抄襲了罵了出名了絕交了...

  • 唱吧

    看到你也看了我的唱吧,我内心是很欢喜的,可想到我的歌声,又暗淡了。大叔,估计你都忘了我吧。好吧,好吧,这就是人生啊...

  • 唱吧

    产品细节优化: 1、注册环节:未输入出生日期时,登陆按钮状态提示不明显。优化建议:减弱登陆按钮置灰状态色值,未登陆...

网友评论

    本文标题:Weekly Redesign#1 唱吧——手势设计

    本文链接:https://www.haomeiwen.com/subject/tctdlttx.html