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

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

唱吧是一款类似于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"，产品设计类文章持续更新。