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",产品设计类文章持续更新。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,001评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,210评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,874评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,001评论 1 291
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,022评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,005评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,929评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,742评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,193评论 1 309
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,427评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,583评论 1 346
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,305评论 5 342
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,911评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,564评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,731评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,581评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,478评论 2 352

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,052评论 25 707
  • 最近由于工作需要,调研学习各类产品的搜索功能,于是准备做个笔记和大家分享,也督促自己总结抽象。 首先思考一个问题,...
    兔子的产品实验田阅读 7,471评论 11 70
  • 曾经,所有刻意的熟络,都会让我觉得累,熟络后的渐行渐远又让我难过,可能吧,可能这份工作让我无所谓刻意的熟络,也习惯...
    谜_阅读 231评论 0 0
  • 去过哈尔滨,不过是夏天去的,有机会冬天再去一趟;去过河北霸州没什么感觉;路过天津,车站让我想起了武汉站;去过普陀山...
    sapphiremulan阅读 134评论 0 0