Sougou面试题-QQ音乐和百度音乐App对比分析-朱超强

,QQ音乐和百度音乐App对比分析,作者：朱超强2013年3月29日,目录CONTENTS,产品背景介绍信息架构页面布局操作流程用户引导手势操作反馈设计细节设计产品改进设计,1.产品背景介绍,产品定位,2.信息架构,音乐类App对比分析By朱超强,信息架构,整体功能分布,4大部分,3大部分,弧形环代表分析方式,直线环形代表分析指示标志,图示统一标注说明,音乐类App对比分析By朱超强,信息架构,在线音乐,2,1,点击添加新分类,采取平铺方式，同时结合自由扩展，让播放类别多元化,3,4,5,音乐类App对比分析By朱超强,信息架构,在线音乐,独立提供搜索和分类查找服务，突出找歌服务,音乐类App对比分析By朱超强,信息架构,在线音乐,将音乐搜索和在线音乐整合减少操作成本,缺一张图,音乐类App对比分析By朱超强,信息架构,在线音乐,将单曲和专辑统一在一个新歌首发目录下更符合用户认知习惯，但如果空间足够，可以分开放置，可以减少二次操作，用户也容易学习,合并入口,独立入口,音乐类App对比分析By朱超强,信息架构,我的音乐,优：方便频繁操作缺：信息杂乱占据顶层页面空间.,将常用二级子功能至于顶层，减少操作成本歌曲分类概念模糊，不容易区别,强调iPod,区分云端和本地,音乐类App对比分析By朱超强,更多页面,页面信息层次鲜明,标签说明,信息组织,缺乏标签指示，内容过于多，导致信息混乱,信息组织,3.页面布局,总览,二级导航,一级导航,有时省去标题栏,标题栏,标题栏一直存在,统一返回箭头,返回名称不一样,内容区域,主题导航,无固定主题标题，单页标签内容设计更灵活，但违背一致性设计原则,主题导航,统一标题,主题导航,统一返回箭头,唯独播放界面是返回，其余都是特定主题文字,返回使用标题文案方便用户认知导航位置,主题导航,图案一直保留，方便立即切换播放模式,主题导航,有播放记录时会自动显示切换播放模式图标帮助用户识别状态但是降低了一致性,未曾播放,正在播放,暂停播放,信息设计,超出一页屏幕,在一页屏幕内,四个大图片设计过大，不方便执行未显示部分的操作,信息设计,下拉菜单增加操作成本,隐藏设计,滑动之后才会出现,一直存在，影响节目美观度,隐藏设计,单击操作，页面简洁,点击操作按钮，影响页面简洁,UI设计,内凹，风格不统一,保持很强的风格统一性,图标设计未反映内容,文案设计,文案不够直白,容易对本地音乐，iPod音乐，云音乐概念产生混淆,歌曲类别概念清晰,用户容易理解,4.操作流程,搜索音乐,搜索和分类查找，分类功能更弱,搜索音乐,点击后输入框消失,不同的取消方式,提示信息,语音搜索消失,包含更多可搜索内容,不同的清除历史方式,返回操作,搜索结果提示,搜索音乐,即时搜索结果,动画效果提示,还需要进一步搜索,1,2,3,4,1,2,3,4,录音时没有明显操作反馈提示,音乐播放,百度更合理利用空间，操作更方便,QQ为了保持界面整洁，牺牲了操作方便性,管理列表,默认名称,空白名称,本地列表2不是有意义的列表，对于偷懒用户合适，但是大部分用户还是需要重新删除后输入名字，增加操作成本,管理列表,点击名字重命名拖拽进行排序操作不容易识别,启用模态动作执行框操作直观，但做成类似标准控件比较合适,歌曲下载,操作两次，没有取消按钮,按钮没有区别,同步iPod,第一层级操作，减少操作成本,只能进入二级操作,设置操作,选择某一项后自动返回,开启后自动呈现选择时间，减少画面跳转和操作成本,5.用户引导,新手引导,双方都采用类似的新手引导页面QQ欢迎页面加载时间过长百度内容简短,用户概念学习,重要的概念需要特殊提醒,操作提醒,引导不突兀，在恰当时机让用户学习手势操作,6.反馈设计,异常提示,提供必要的提示信息，但又不阻碍正常操作,网络异常时的反馈提示,给出了解决办法,操作方法不够直观,异常提示,提供必要的提示信息，但又不阻碍正常操作,几秒钟内会自动消失,消息通知,2秒内自动消失,QQ音乐做的更好，不影响用户浏览视线,视觉反馈,调节音量进度条，显示音量大小图示,视觉反馈,保持静止,播放歌曲时会动态变化,设计利用了视觉反馈告知用户播放状态,视觉反馈,不影响浏览左侧内容，字幕动画切换效果流畅,对浏览左侧内容有一定的影响，字母切换效果生硬,警告框,1.需要用户授权的操作2.具有一定风险的操作，要弹出模态对话框3.希望用户执行的操作按钮，放置在右侧并加亮,7.手势操作,手势识别,长按某个图片，可以启动更换位置操作，点击某个图片会自动放大，并任意拖到位置,QQ音乐：这个手势操作没有任何提示信息，用户很难发现手势的存在,长按,选取,拖拽,手势识别,QQ音乐：此手势操作有用户引导提示,原始状态,点击,向左滑动,歌词状态下直接点击,手势识别,向上轻拂,该手势操作虽然没有提醒，但是用户很容易识别,8.细节设计,空白处理,图文结合，显得生动,提示可执行的操作,提示可执行的操作,只提示信息,空白处理,图文结合，显得生动,提示可执行的操作,提示可执行的操作,图形生动表达,信息设计,直观提示信息,信息设计,提示用户滑动操作,文案被截断一般,视觉认知,两种状态下图标按钮都一样，用户无法辨认可操作性,实际上，该状态下的OFF开关是不可操作的,状态区分,三种不同状态的设计,内容区分,输入操作,输入模式智能化,输入操作,相同问题，在没有输入前，完成按钮是高亮的,视觉反馈,更精致,隐喻设计,绘制合适的图标，生动解释图标按钮的含义,一致性设计,所有播放模式界面相同,百度电台界面和一般播放界面不同,不可用操作变灰色,省去不可执行操作,细节,一个Bug,9.产品改进设计百度音乐,热爱音乐的普通青年,生活离不开音乐,用户分析,耳机不离耳,爱淘音乐,爱分享,追赶时尚潮流,追求个性化,行为,价值观,让音乐净化心灵,享受生活,目标,用户说：”我想要一款音乐App，它能让我随时随地听音乐，没有WIFI时可以听本地音乐，有WIFI时可以连接在线音乐库，发现或查找自己想听的歌曲，遇到喜欢的歌曲可以提供下载或收藏，并且能同步其他设备上收藏的歌曲。”,需求分析,场景1：一个周末的早晨，小凡睡了个懒觉，起床打开手机，想听听音乐。她打开了百度音乐，想要看看有什么好听的音乐。转了一圈之后，发现没有满意的推荐歌曲，于是她又迅速打开了音乐电台，让歌曲来发现她。在听的时候觉得有几首很好听，于是小凡就把这些歌下载并收藏了起来。场景2：吃过午饭，小凡出门和朋友约会。在公交车上，闲的无聊，小凡又打开了百度音乐，这时候她想收听早晨自己收藏起来的歌。新歌听了几遍后，她又回顾了自己手机上的一些经典老歌，打开了自己建立的播放列表，开始“无限循环”。场景3：晚饭过后，小凡回到家，手机自动连上WIFI，这时候小凡想起来白天和朋友约会的时候，朋友向她推荐了一首歌，小凡记性不太好，只记得大致的歌词，她拿起手机，打开百度音乐，通过语音搜索，迅速找到了那首歌并收听了这首歌。,音乐爱好者，小凡的周末生活,使用场景,信息架构,页面布局,3.增加定制化功能，将三级导航内容挪到前面，方便用户操作,2.移走电台选项,1.语音搜索实时存在，方便用户文本/语音切换,“在线音乐”页面改进方案,4.修改导航名称，更符合用户心智模型,页面布局,4.调整个人信息位置,2.提取出iPod音乐,3.保留同步按钮,1.占空间,3.浪费空间,2.本地音乐概念混乱,1.修改名称,“我的音乐”页面改进方案,页面布局,2.修改添加音乐人方式,增加“随便听听”导航,1.滑动提示改为用户引导提示,滑动试试,页面布局,引入我喜欢功能，并将播放列表从我的音乐中移出，方便用户频繁操作,添加“个人收藏”导航,页面布局,1.增加喜欢功能,“播放”界面修改,2.呈现所有功能，方便一次操作，不能使用的用灰色显示，保持一致性，方便用户学习,3.重新设计分享动作弹出框，使之更贴近标准控件风格,4.查看专辑和歌手操作变为手势操作，保持界面简洁,手势操作,2.向上滑动，显示播放音量和执行操作，更符合用户操作心里预期,3.向左滑动调出歌词，向右滑动移出歌词，让操作更流畅,1.长按专辑封面，转至歌手专辑页面，更符合用户心里认知模型,引入多种手势操作,细节改进,将播放按钮一