虾米音乐APP重设计

背景

虾米音乐移动端今年3月改版后,整体采用大网格,使呼吸感更强,采用大标题突出核心功能,相比前版本,整体来说更轻量简洁,极大提高了用户易用性,但是仍存在:网格之间的间距过大或不统一,使视觉上各板块排版混乱粗糙、交互上不符合用户认知和功能重复等问题。

重设计原则

以自己作为用户的使用体验为基础,从用户角度出发,以以下几点为设计原则,优化APP以达到更简洁易用的目的。

简单高效

清晰一致

专注沉浸

响应

重设计页面

用思维导图整理了一下虾米的主要功能,橙色字为本次重设计页面~

虾米功能概览

搜索中重设计的页面太多,故单独作为一个设计版块,同时基于 查看他人主页 和 编辑个人信息 均为个人主页相关,将其合并为一个版块,即所有重设计版块如下图:

重设计板块概览


一、发现页

发现页详细的功能划分如下

发现页

1.乐库

乐库原界面如下:

乐库原界面

问题分析

正如开头提到的,官方改版后的虾米采用了大网格设计,使APP整体变得轻量,但网格过大(如风格流派、场景心情、艺人三个板块都有的大”banner“)、间距过宽、字号过大、图片上文字的显示样式等也使整个界面显得粗糙混乱,容易给人一种设计师没有走心的感觉。

解决方案

根据清晰一致的设计原则:

重新调整乐库界面下网格间距、字体间距,

缩小各板块的“banner”高度,

采用透明和渐变的底板,使图片上的文字更清晰美观,

将版块 风格大赏 移至最下方,使风格流派、场景心情、艺人的排序,与乐库开头风格流派、场景心情、艺人的数量描述排序一致。

优化后的效果图如下

乐库优化后

2.推荐

发现页-推荐原界面如下:(超长图预警~~)

推荐原界面

问题分析

界面中内容多,且网格样式不一,每个版块中的banner时大时小;看点头条、趴间一起听两个版块,跟发现页的另两个界面看点、趴间重复;有的歌单封面为圆角矩形,有的又是轻拟物;整个界面繁杂混乱,即使用户刚开始尝试屡清思绪往下滑动,也会很快感到迷惑烦躁,失去耐心。

解决方案

为了使用和在滑动此类长界面时,必须保证信息清晰简洁,和谐统一,以确保用户不会轻易迷失,沉浸其中。因此我做了一下调整:

去除看点头条、趴间一起听两个版块,减少用户认知负担;

必听歌单、新歌新碟、原创寻光三个版块统一采取圆角正方形的封面样式,热门MV采用圆角长方形样式;

采用透明的底板,使图片上的文字更清晰美观;

调整界面下网格间距、字体间距、字号。

优化后的效果图如下

推荐优化后


二、搜索页

搜索页的功能详细划分如下:

1.听歌识曲

搜索栏和听歌识曲原来样式:

听歌识曲原界面

问题分析

听歌识曲作为搜索的一种,放在搜索栏右端符合定位,但图标过小识别性不强,且位于搜索栏内易感扰用户认知。

解决方案

可将听歌识曲按钮移到搜索栏外置于其右方并调整大小加强其可见性。

优化后的效果图如下

听歌识曲优化后

2.热门和历史

热门搜索和搜索历史的原界面如下:

热门和搜索原界面

问题分析

垃圾箱图标为删除全部搜索历史,长按词条可删除每条搜索历史,但没有明确的操作指引。

解决方案

搜索历史改为列表式排版,为每条历史提供明确的删除按钮;

将更为内容排版更为简短的热门搜索置于上方,提高界面易用性

取消热门搜索线框内的填充色,和不必要的更多按钮使界面更干脆利落;

调整字体样式和间距使APP风格统一化;

优化后的效果图如下

热门和搜索优化后

3.键入不完整词条时(如“陈奕”)

当搜索栏内键入不完整词条时,APP将自动加载用户可能需要的词条:

键入不完整词条时原界面


自动加载用户可能需要的词条,此时较大的行距和字号能使信息清晰易见,但也会让页面显得粗糙。因此对界面进行了适当字号和行距缩小,用分隔线将每条信息隔开,使加载信息美观有条理。

优化后的效果图如下

键入不完整词条时优化后

4.键入完整词条时(如”陈奕迅“)

与键入不完整词条时一样,虾米将会自动加载用户可能需要的词条,如果没有用户需要的内容,用户需手动点击搜索,才能进入全部搜索结果,再根据分类找到目标词条。

键入完整词条时原界面

一般来说,更多的用户需要从全部搜索结果中才能找到目标词条,因此在用户输入完整词条时,自动跳转至全部搜索结果,此时用户可以直接根据分类选到目标词条,同时每个类别中将用户最可能需要的条目置于最上方,如此减少了操作步骤和过滤了不必要信息,更符合用户期待。

同时在视觉上对全部搜索结果界面做了适当调整:

缩小搜素栏下方banner的大小,适当留白,使界面更轻量;

取消不必要的专辑封面在搜索结果中的显示,使信息更清晰;

歌曲类目每个词条的信息排布次序:歌名+音质,歌手名-专辑名,电影/电视等剧名;

用分隔线将词条隔开,调整字体样式等使加载信息更美观有条理。

优化后的效果图如下

搜索完整词条时优化后


三、个人主页

重设计的功能详细划分如下:

个人主页

1.查看他人主页-音乐

原界面如下:

他人的主页-音乐原界面

问题分析

图标意义不明:关注按钮易被误以为是添加好友请求,降低了用户的点击欲望和操作时的安全感;

操作繁琐:右上方更多按钮只有举办功能;共同喜好用户需要点击两次才可真正查看,不符合用户期待,且增加了操作成本;

风格不统一:共同爱好、最近常听、最近收藏的封面图为高纯度高明度的渐变,与APP的简洁轻量风有所违背;

界面混乱:与其它界面一样,此界面也存在不同版块的间距、版块与子类别的间距不一致等使整体略显混乱的问题。

解决方案

将关注图标中原来的+号改成了星号,更符合用户理解;

举报按钮替代更多按钮;共同爱好的类别在主页即可查看,点击类别查看详细内容,减少用户操作;

采用半透明的橙色系封面图,使APP风格更统一

对页面的布局排版、字体大小和间距、个人资料封面高度和透明度等做了调整,使画面更和谐统一、具有层次感。

优化后的效果图如下

他人主页-音乐优化后

2.查看他人主页-动态

原界面如下

他人主页-动态原界面

问题分析

除了网格间距过宽、图标大小不一致等使界面略粗糙等,还存在功能重复的问题:关注图标3次重复(界面右上方、每条动态右上方和更多按钮内)、分享图标重复(每条动态更多按钮内和右下方)。

解决方案

去掉更多按钮和更多按钮内的关注分享功能,仅保留举报;

每条动态右下角的点赞头像取消,以昵称的形式列举点赞的关注者和关注者中点赞的人数;

将点赞和评论、分享数移至各自按钮下方显示,使信息显示更简洁高效;

对布局、字体排版作调整,使界面统一明了。

优化后的效果图如下

他人主页-动态优化后

3.编辑个人信息

原界面如下

编辑个人信息原界面

问题分析

在交互上,界面中的返回即保存,用户修改个人资料后,想要保存,却找不到明确的保存按钮,并且信息一经修改则不能撤销,容易感到迷惑烦躁,不符合用户逻辑。

解决方案

根据响应和专注沉浸的设计原则,需要添加保存按钮;若用户未保存就点击返回,弹出对话框询问“保存还是取消修改”;

另在视觉上,使昵称与其它项的字体大小颜色等保持一致,并重新调整各项填写内容的位置/对齐方式/字号/颜色等,使信息更简单明了,用户看起来更舒适。

优化后的效果图如下

编辑个人信息优化后


总结与反思

也许说得不够专业,但作为一个音乐APP重度使用者,我觉得曲库的多少和用户体验的好坏缺一不可。用户体验好但歌单里的歌灰了一半,总让人想咆哮“Are you kidding me?”~~如果曲库足够的情况下,APP的沉浸式体验是留住用户,并宣传自己品牌的最好时机和方法,而界面的风格统一、及时的操作响应、信息的清晰有条理都是为了使用户可以更专注地沉浸在APP和音乐的世界里,忘记功能辨别和操作等诸如此类的事。希望这次自己有做到,也衷心期待虾米能越做越好~

本来还有一个”我的音乐“的再设计的,但意外地已经花了不少时间,还要赶着做自己的作品集,只能留到下次了~(本人对创建的歌单中最新添加的歌曲排在最下方这个默认设置感到非常酸爽T~T)

本次重设计均为个人观点,若有觉得违和的地方,欢迎留意~~

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

推荐阅读更多精彩内容

  • 目的:UI设计的目的是为了更好服务用户;能让用户快速完成自己的目标; UI设计的发展趋势:全链路和复合化的设计人才...
    quantre阅读 10,968评论 9 83
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,255评论 25 707
  • 天灰蒙蒙的 如同我灰色的心情 一个人踽踽独行 你次第亮了 那灿烂的光 瞬间溢满心头 可是 有谁曾知 这灿烂的背后 ...
    秦小简阅读 191评论 0 3
  • 左岸江湖,开宗明义。 以何言道,方得精要; 以何成长,顺其自然; 以何助行,不急不慢; 以何为师,引入正途; 以何...
    潘志峰阅读 349评论 0 2
  • 和室友聊天 说牛逼的人在二十岁的时候都已经在搞事情了 再一看,自己已经虚岁二十了。 -副画画下来觉得辣眼睛 一下午...
    路昆阅读 512评论 0 0