青桔音乐redesign

让用户思考的设计一定不是好设计。—— Steve jobs


前段时间一个朋友给我展示了他们公司在运营的一款原创音乐APP,于是就随手下载体验了一把,呵呵,烂的有点过分了啊。。。

个人的一个疑问,青桔音乐到底是想做音乐还是社交,或者说是想主打音乐还是主打社交,目前给我的感觉就是产品决策者倾向于两者兼顾。

最近抽了时间希望能够对该产品进行简单的梳理和重设计。

首先这款APP在体验过程中主要出现有以下五个问题:

1、结构逻辑混乱,主次不分

2、交互方式单一,操作不流畅

3、视觉设计和展示体验不佳

4、操作流程复杂

5、不说人话

首张图是【青桔音乐的原版APP】的结构逻辑图,下图是我修改的【青桔音乐APP结构逻辑图】,在不改变主要内容的情况下,我只要修改了以下几个部分。

(青桔音乐APP原版结构逻辑图)
(青桔音乐redesign逻辑分析图)

治标先治本,调整逻辑,分清主次。

首先打开青桔音乐APP应用后首界面显示的并不是音乐,而是【动态】,就象我想听歌你却给我拉进了聊天室。。。那你干脆改为“青橘聊天室APP”不是更直接?想做内容社交,是需要内容有足够的粘性和湿度才会吸引用户围绕内容进行互动的,你生拉硬拽我进聊天室干嘛,难道有大保健?

动态就动态吧,我们硬着头皮继续呗。突然又懵逼了。。界面左上角有一个表示添加的icon,在“聊天室里添加好友”是很正常的,而且按照【动态】逻辑也是需要有一个添加关注的按钮,然而,这次我又错了。。(啪啪啪打脸啊。。)点击icon进去竟然是【搜索歌手】,我连歌都还没听着,你让我搜谁?

搜索。在原版APP中只有在动态中有一个貌似搜索的按钮(但事实上不是),因此在主界面个人认为需要常保持搜索按钮,并增加智能搜索类目。

点击【好友】头像竟然可以看到ta有多少金币,金币这个个人“财产”信息不应该只有自己才能看到么,另外你给我看这个信息是有什么用,谁多谁在炫富么,还有其他用途么,至今没有发现。

在【我】中最后一项竟然是【发现好友】,这个不应该是动态里的功能么,而且既然有意做社交,【发现好友】这么重要的功能怎么能隐藏在【我】的个人页面呢,想不通,可能想要考验下普通用户的智商。

另外打开大赛界面,不多说,毫无逻辑可言。。同时没有任何内容粘性,,完全没明白大赛存在的意义。。。

我想着这已经够烂了,呵呵,还有比这更烂的逻辑么。真TM有。。。动态上方烁然两个大字【全部】,我是用了好长一段时间才知道,原来点击【全部】,竟然会有下拉框。。。下拉框显示【全部】,【同城】,【同校】,【关注】,我要不是手贱误点了全部,还真不知道你还给我们准备了惊喜。只是这个惊喜真的是惊喜么。。如果你的交互要靠用户手贱才能知道,那交互设计狮完全可以早早下班陪老婆嘿咻去了…(怎么感觉像是码农同时干着设计师的活儿?)


左图:【动态】展示界面右图:【动态】部分功能截图

交互方式单一,操作不流畅。

青桔音乐还是挺坚持自己的原则的,什么原则,当然是“一点到底”,然而目前主流的几款APP已经趋向“能用划的,不用点的”了,这方面可以参考网易云音乐APP、虾米音乐APP等的交互方式啦。

点击某单曲播放按钮可以看到播放键变成了暂停键,这是常规操作,但是问题来了,播放界面要再点击才能进入,另一个问题就是。。。你如果粗心你会发现并没有播放栏,但事实上,青橘只是想测试一下用户的智商够不够高,因为在播放歌曲同时,它会在你完全无意识的在界面右上方悄悄跳出一个旋转的唱盘icon,这也是我玩了段时间才发现的。我也不知道这么做的好处在哪,但是我认为对用户习惯来说,必将是“顺我者昌,逆我者亡”,随意揣测和修改用户习惯必将被打脸。

大家注意右上角那个圆坨,不错就是那个播放按钮。。

视觉设计与展示体验不咋地。。。

视觉设计和用户体验也是息息相关的,这一点不可否认,而青桔音乐在这一方面明显脑子又抽了风。。。

(很想知道为什么有的状态有点赞按钮有的就没有呢?)
(或者点赞位蹦出来一朵新鲜的菊花。。。)
(为什么虚化背景四边颜色深浅不一,是有意为之么,但是总有种粗制滥造的感觉。。)

个人觉得播放界面虽然区别于其他大多数音乐播放界面,但是效果也并不太好,比如笔者想快进活倒退都比较难操作(因为我不擅于画圈圈。。)

类似这样的还有很多,感兴趣的同学们可以继续寻找更多刺激哦~~

话不多说,该产品部分用词同样让你“兴致勃勃”,“败兴”的兴。“站内分享”什么鬼,普通用户真的看得懂如何操作么

“复制链接”指向模糊。

最想吐槽的是第二页“说俩句”???说“俩”句,两——liang ,俩——lia,来跟我念。

接下来的界面redesign中主要针对应用首页,动态页以及相关跳转页,播放页以及相关跳转页等作出重设计,旨在理清青桔音乐目前逻辑问题以及整体界面设计优化等。

一、青桔音乐redesign界面中主要修改了以下几处:

1、将原应用底部导航中的“推荐”修改为“音乐”,区分出首导航栏和次导航栏内容差别。

2、设置全局搜索按钮。

3、播放提示按钮常在右上角。有歌曲播放时播放提示按钮旋转表示。

4、单曲信息设置较为详细的音乐人和来源,点击音乐人可进入该音乐人主页。

5、增加播放量提示。

6、在次级专题板块增加扩展按钮,点击可以跳转页面按时间顺序选择更多音乐。

7、将原应用导航栏中“动态”改为“发现”按钮。

8、整体更改该应用以往沉闷的黑色背景为青绿色主色调,使整体氛围轻松简洁。

下图中修改处有红线框标注。

二、首页设置页选择使用抽屉式布局,重新整合各信息功能,使使用更加整体方便。

首页设置页

三、“发现”界面重新整合信息‘

1、增加“全部”扩展角标,明确提示用户可以按照分类进行选择。

2、增加“关注”,“已关注”按钮。快速便捷关注好友动态。点击“已关注”可以选择取消关注。

3、“点赞”、“评论”增加数量提示,并且显示最近评论信息,点击“更多”可以显示全部评论。

4、评论增加点赞功能。

5、在“发现”主界面删除用户等级提示等次要信息,如需查看可以点击该用户头像进入详情页。

6、增加悬浮“编辑”按钮,突出该界面主要功能。

“发现”界面

四、个人主页

1、重新整理界面信息布局。

2、去除“金币”数量显示,保留“关注”、“粉丝”、“人气”数字提示。

3、按照时间流顺序布局动态内容。

4、增加详细时间以及评论次数、点赞数。

5、点击个人主页右侧更多按钮可以显示“推荐”界面(如图)

6、点击单曲右侧按钮可以显示分享等功能界面。

7、分享界面增加“更多”按钮。增加更多分享平台或链接。

个人主页以及附页

五、播放界面延续原界面设计风格,在以下几处做了完善和修改。

1、整体界面分为三部分,上部分为歌曲基本信息板块,中间部分是旋转播放和歌词显示主界面,下部分是音乐人基本信息界面。

2、鉴于与目前该产品运营情况相符合以及对其商业模式理解,在redesign播放界面时考虑增加“秀”功能,即后台可以自动完成图片与歌词结合形成完整图文内容的图片并可以分享到若干平台。

3、通过手势左右滑动可以显示“播放旋转界面”和“歌词界面”。

4、点解音乐人下拉键可以跳转到详细音乐人信息界面。

播放页以及附页

以上是部分redesign青桔音乐界面以及简要分析说明,纯原创内容希望大家多多支持和关注,新人入行,必定出现各种问题,也希望各位看官多多指教喽。

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,841评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,066评论 4 62
  • 昨日看了一篇报道,近日,英国一台ATM机发生故障,在一名顾客取款时竟然能吐出双倍金额,此消息不胫而走之后,英国那些...
    嗷小敖阅读 560评论 0 0
  • 感谢阅读!本文乃作者个人原创,未经允许谢绝转载,欢迎转发分享。 1 一个...
    醒来么么阅读 1,293评论 0 2
  • 14年毕业,不知不觉已经工作了两个年头了,原先并不觉得写技术文档会对自己或者别人有什么帮助,一方面是由于相对于自己...
    舞尐屮阅读 378评论 0 0