如果我来设计酷狗7.4

前言


事情的发生有时候也是很单纯的,比如说工作,或者爱情。

  • 背景

在体验酷狗7.4.0的时候,吐槽的片刻,忍不住模拟自己如果去设计这样一款产品会是什么样子呢?

  • 动机

想用自己设计的产品来证明自己之前的吐槽

  • 过程

考虑到酷狗产品背景以及整体的功能考虑。除了少数鸡肋功能,重构的设计作品保留酷狗大部分功能。使用mindmanger和手绘的方式,来阐述自己对产品框架以及产品设计的想法。

产品框架


一般来说需要提供信息架构和功能架构,这里只是设计APP的产品,所以只架构了功能框架。

  • 功能框架

不多说,先上图,看看我的一次设计的功能架构

个人设计 v1.0

  在酷狗音乐APP 7.4架构设计中,“乐库”与“本地”、“我的歌单”合并在一起。因此,酷狗音乐APP采取卡片式设计,这样设计出来的界面使得“乐库”层级太深。为了避免如此,我所设计的V1.0版本在保留酷狗音乐的整体产品框架的前提下,抽离出“本地音乐”、“我的歌单”等功能模块合并为一个“我的”大模块。这样子更好地突出“听、看、唱”的模块特征。
  此外,合并不同模块的侧边栏功能为“账号”模块,其模块功能主要为登录所用。这样设计一方面利于界面设计(可以弹出侧边栏,也可以弹出新页面),另一方面能便于用户理解操作。
  按照上面设计,在手绘的过程中,碰到了个人觉得比较麻烦的一个大问题。如果刚才的架构去设计,就会出现一个大模块一个搜索框情况,而搜索在音乐APP又是极高的优先级。为了不影响用户体验操作,我选择了牺牲视觉设计,因为个人认为音乐APP要么不需要任何搜索,要么就要加强搜索的重要性。在下图能看出,V2.0版本的架构突出了搜索的优先级,降低了“我的”频道。

个人设计 v2.0

在重构的功能框架中,还没有去掉原酷狗APP的任一功能。如果可以的话,我认为可以把原酷狗中“唱歌”的社交因素去掉以及多余的”应用推荐”、“传歌”。其实这些看起来酷炫但平时却是少用的功能。

产品设计


产品的设计包括界面和交互设计,我试图将个人设计的功能框架的主要界面实现一下。

  • 主界面

整体架构看似没有变化,但由于搜索功能的突出,界面肯定会有所变化。

酷狗7.4 **主界面**

个人设计 **主界面**

  从酷狗自身的业务及用户群体考虑,一级导航没有变化,只是大大地突出了搜索功能,将搜索按钮放在一级导航位置。除了一级导航之外,变化最大的就是整个界面的风格。个人设计理念就是一级界面必须一目了然,功能入口平面化,减少优先级低的按钮。在个人设计中,特意强调了“本地音乐”和“我的歌单”,因为用户在离线场景下,经常会点击这两块。另外而且不尽量采用卡片的形式,会使整体界面看起来不那么规矩。
  在交互方面,个人不太欣赏酷狗的点击导航标签切换,更喜欢手滑+点击式切换。比如在“我的”页面,左滑可以切换到“推荐”页面,当然也可以点击切换。

滑动切换1

另外,当切换到最左端或最右端,就可以切换大的模块,比如在”电台“页面,左滑就切换至”看“的模块页面;在”我的“页面,左滑就可以切换到”侧边栏“模块。这种滑动切换很自然减少用户去伸长手指去点击导航的时间,也加强了用户的体验。


滑动切换2
滑动切换3
  • “看”模块

在“看”模块,酷狗遵循了产品风格整体一致的原则,继续采用卡片放置的方式,利用标题式导航入口。

酷狗7.4 **“看”主界面**

同样,为了减少这种标题式入口,我进行了功能的优先级排列。酷狗的“直播间”是盈利来源之一,也是APP的重要功能,将其排在第一位。在原酷狗设计中,对于页面”MV“标题式入口,用户需要看+思考+点击,是一种理性思维
我需要将这种理性转化为感性,用户通过滑动就能轻松切换直播间和MV频道,页面使用大幅画面来冲击视觉,继而产生点击的欲望。这是一种”不小心手滑+看+产生点击冲动“的过程。另外,当用户从”听“切换到”看“的模块时候,播放栏minibar自动收缩,并且弹出一个”偶遇“的按钮,产生一种很炫酷的感觉。(ps:其实这个部分参考了百度音乐的设计

个人设计 **“看”**

其实“MV库”的页面,如果可以的话,也要重新设计,这种界面产生点击的欲望太低了,除非是经常使用。

酷狗7.4 **MV库**
  • “唱”模块

对于唱的模块,酷狗依然如此如此,这般这般。本来我也想延续上个tab导航设计,但是在”K歌“模块中,功能不是同等的。如”mv“与“直播间”是同等的,但“附近在唱”和“我要K歌”不是同等的,所以我重新设计了“唱“的主界面风格。

酷狗7.4 “唱”主界面

界面的设计依旧是“滚动主题+功能入口+卡片式图片”,仍然是要延续简洁的风格,比如“大家都在唱”酷狗7.4设计是不断下拉不断伸长,但是大家想回页面顶部又缺少一个“置顶”的按钮。这里的设计就是限制数量,只显示最热门的几个。

个人设计 **“唱”**

点击上图中的“我要K歌“,跳转至下图的页面。下图所要设计的是,将酷狗7.4中的”已点伴奏“、”本地录音“以及主页中的“我的作品”集成到一个页面。这样设计的原因,是可以让用户了解要做什么。其实我的设计还想要添加一个步骤,就是到第一次使用之前,应该弹出相关页面进行指导,比如第一步”搜索“,第二步“演唱”,第三步“保存”、“上传”。

个人设计 **我要K歌**

  • 搜索

对于酷狗7.4,个人感觉使用过的人都会吐槽,并不是说搜索结果,而是搜索过程的体验,它的热门搜索不是随着搜索页面(下图左)而产生的,而是你搜索结束了,然后蹦出一个热门搜索页面(下图右)

酷狗7.4 **搜索界面**

对于这种体验不那么友好的交互,坚决说No。因此我参考了其他音乐APP,设计了比较符合大众的搜索页面。

个人设计 **搜索**

对于搜索结果页面,我进行了优化。酷狗音乐APP7.4中很严格的分开歌曲名、mv名等。

酷狗7.4 **搜索结果**

对用户来说,更欣赏网易云音乐那样子模糊查询,然后给出合理的推荐。人性化的查询就是根据查询进行合理的推荐、匹配。

个人设计 **搜索结果**
  • 个人主页

酷狗7.4设计的侧边栏其实挺有意思的,三个模块具有不同的布局,以及图标设计都花了不少心思。虽然不能说这样不好,但确实不够体贴人情,这体现在
1、搜索竟然跑到侧边栏
2、三个侧边栏三个账号
3、”仅wifi联网”这一个按钮小得可怜,怎么会注意到!

酷狗7.4 **侧边栏**

其实我的设计要在三个账号想方设法凑成一个账号,这样侧边栏才能集成各个模块的主要功能。具体的实现需要酷狗的工程师,努力加油!

个人设计 **侧边栏**

总结


总体的设计基本就是这样,在移动端我比较喜欢简洁界面,操作顺畅的APP。如果一款非必需的APP功能很强大,但界面堆砌太多控件,需要脑袋瓜就要去思考,增加操作时间,这无形中给APP打低分。
其他还有一些页面比如歌曲分类、歌单页面等,其实也是细节设计方面,改进视觉和操作。此外,我还要做一件事情,就是增加一个“播放器“页面设计,这是很重要的地方。说实话,对比过酷狗音乐APP与其他APP的播放器的用户,都会感觉酷狗音乐7.4很有一些地方需要优化,不是功能哦,是细节。

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,263评论 25 707
  • 前言 任何事件发生都有背景、动机和过程。 背景 正在学习产品分析的学生党,使用过酷我音乐、QQ音乐、云音乐。本来想...
    onedove阅读 13,150评论 1 17
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,982评论 4 60
  • 恬静的午后,坐在窗前,沏一杯暖茶,静静地浏览网页,或是倾听敲击键盘的那种轻脆的声音。然后累了,就赏一赏窗外的风景,...
    刘洲豪阅读 295评论 0 0
  • 今天去故宫了,第一次因为去王府井瞧一瞧让我死心了,转道去天安门,由于是晚上,所以闭馆了,便回去。 隔天去,到了午门...
    沐府墓主阅读 273评论 0 0