网易云音乐Win10 Beta版设计思考
新系统，新开始
Win 10系统是微软继win 7之后的筹码，无论是技术层面还是UI层面，都有发光点。依托于win10系统的UWP通用应用，采用了响应式技术和扁平化设计风格，实现一个应用可以在不同设备上运行，无论PC、平板、WP还是Surface，让人眼前一亮。
这是一个全新的系统，没有完善的交互设计规范、也没有足够多的成熟的设计案例可供参考，一个横跨PC、平板和手机的应用，原本在各个平台的细分体验应该如何平衡和取舍呢？
探索合适的导航框架
在导航设计上，UWP应用就给我们出了道难题。不同于一般的信息展示类应用，云音乐功能模块多且逻辑层级复杂，并且在大小屏幕上都早已探索出了一套适合各自平台的、截然不同的导航结构，无法单纯的用响应式设计去解决，或多或少得牺牲掉现有各自平台的一些交互习惯。
最终，我们决定在PC和平板上采用类似PC端的结构，充分发挥大屏幕的优势，侧边栏承载了应用的主要功能模块，使信息最大程度的扁平化。同时融入win10的设计语言，比如能自动或手动控制收起的汉堡菜单，使用户获得更佳的沉浸式体验。
在灵活的鼠标和笨拙的手指之间徘徊
在Win10设计过程中，我们争议最大的地方莫过于，同一个应用程序，既可以用鼠标、又可以用手指作为输入媒介。如何更好地设计交互，以致在使用这两种截然不同的工具时都能获得较好的操作体验？
1、最频繁使用的歌曲列表
对于音乐软件中出镜率最高的歌曲列表，如果你是用鼠标的PC用户，会习惯性的双击播放；如果你是用相对不够灵巧的手指操作的平板或手机用户，则会觉得单击一下就应该播放了吧！那UWP应用该如何处理是好？
参考了win10系统自带的Groove音乐应用，我们引入单击歌曲呈选中状态，出现播放icon，点击icon开始播放音乐，同时为PC用户适配了双击播放。至此舍弃了触屏界面的单击播放交互，心里是相当纠结的。
又比如列表中的歌手名和专辑名，是否应该响应点击事件？可以看到在PC布局下，歌手名和专辑名都有足够大的展示空间和热区，显然是可以点击直接去查看更方便啊。
但一旦响应式到了手机布局下，这时候如果歌手和专辑再能响应点击的话，就会大大增加误操作的几率。
2、动态列表，请给我点反应
动态列表中的一条动态，在触屏界面应该可以响应整个背景区域的点击进入动态详情页；但在鼠标操作界面又觉得不应该有如此大面积的热区，而是响应某个局部区域点击进入动态详情页（不然的话鼠标在动态页面上移动就始终处于hover状态）。
无处安放的帐号消息和设置
自win10顶部把标题栏改成极窄的一条，高度也不能自定义以后，原本在PC上不假思索会安置在右上角的帐号消息和设置变得无家可归了。我们能发现win10的一些官方应用通常将这些入口设计在汉堡菜单底部。
但运用到云音乐上并不是很合适。因为底部紧挨着播放控制条，左下角操作过于密集，看上去也不是很美观。
对于这些交互细节，微软官方也并未给出明确的处理方式，或者一举两得的系统控件。因此对于Win10通用平台体验和交互的解读，设计过程中我们内部也经常存在争论。是优先PC体验、还是并重手机体验？是每一处都为各个平台做交互细分处理，还是考虑到开发简洁性而舍弃部分平台的交互体验？
之所以叫Beta版，是因为我们也在摸索。我们希望做出一个在各个平台都有着流畅体验，同时具备Win10特征的网易云音乐。
未来的Win10云音乐
云音乐Win10 Beta版上线后，压倒性的五星好评给了我们极大的鼓励，尽管还存在众多的不完善之处，但我们看到了用户的热情、理解和期待！未来，我们将持续优化Win10设计细节，如更好的响应式设计，同时不断完善功能。敬请期待！网易云音乐产品分析和改进建议_图文_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
网易云音乐产品分析和改进建议
人人都是产品经理社区（）是...|
总评分0.0|
阅读已结束，下载文档到电脑
想免费下载更多文档？
定制HR最喜欢的简历
下载文档到电脑，方便使用
还剩17页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢受不了各大音乐播放app纷繁复杂的首页推荐，我给网易云音乐设计了情绪模式5 months ago赞赏还没有人赞赏，快来当第一个赞赏的人吧！3收藏分享举报文章被以下专栏收录关于互联网和交互设计的学习推荐阅读{&debug&:false,&apiRoot&:&&,&paySDK&:&https:\u002F\\u002Fapi\u002Fjs&,&wechatConfigAPI&:&\u002Fapi\u002Fwechat\u002Fjssdkconfig&,&name&:&production&,&instance&:&column&,&tokens&:{&X-XSRF-TOKEN&:null,&X-UDID&:null,&Authorization&:&oauth c3cef7c66aa9e6a1e3160e20&}}{&database&:{&Post&:{&&:{&isPending&:false,&contributes&:[{&sourceColumn&:{&lastUpdated&:,&description&:&&,&permission&:&COLUMN_PUBLIC&,&memberId&:,&contributePermission&:&COLUMN_PUBLIC&,&translatedCommentPermission&:&all&,&canManage&:true,&intro&:&关于互联网和交互设计的学习&,&urlToken&:&chaos-jason&,&id&:43524,&imagePath&:&4b70deef7.jpg&,&slug&:&chaos-jason&,&applyReason&:&0&,&name&:&卡俄斯_Chaos?&,&title&:&卡俄斯_Chaos?&,&url&:&https:\u002F\\u002Fchaos-jason&,&commentPermission&:&COLUMN_ALL_CAN_COMMENT&,&canPost&:true,&created&:,&state&:&COLUMN_NORMAL&,&followers&:6,&avatar&:{&id&:&4b70deef7&,&template&:&https:\u002F\\u002F{id}_{size}.jpg&},&activateAuthorRequested&:false,&following&:false,&imageUrl&:&https:\u002F\\u002F4b70deef7_l.jpg&,&articlesCount&:11},&state&:&accepted&,&targetPost&:{&titleImage&:&https:\u002F\\u002Fv2-f6b96e3bb0cbc8cbd246cb48_r.jpg&,&lastUpdated&:,&imagePath&:&v2-f6b96e3bb0cbc8cbd246cb48.jpg&,&permission&:&ARTICLE_PUBLIC&,&topics&:[,3005],&summary&:&在开始设计之前我想弄清楚问题到底是什么： \u003Cb\u003E为什么App Store上主流音乐播放App的首页推荐都如此复杂？\u003C\u002Fb\u003E\u003Cb\u003E1.产品的目标。\u003C\u002Fb\u003E首先，从音乐播放器的发展来看，自传统纯粹的PC端音乐播放器发展到现在，产品人对于移动端的音乐播放器已经不是纯粹的播放器，而是集线上…&,&copyPermission&:&ARTICLE_COPYABLE&,&translatedCommentPermission&:&all&,&likes&:0,&origAuthorId&:0,&publishedTime&:&T01:05:18+08:00&,&sourceUrl&:&&,&urlToken&:,&id&:3258499,&withContent&:false,&slug&:,&bigTitleImage&:true,&title&:&受不了各大音乐播放app纷繁复杂的首页推荐，我给网易云音乐设计了情绪模式&,&url&:&\u002Fp\u002F&,&commentPermission&:&ARTICLE_ALL_CAN_COMMENT&,&snapshotUrl&:&&,&created&:,&comments&:0,&columnId&:0,&content&:&&,&parentId&:0,&state&:&ARTICLE_PUBLISHED&,&imageUrl&:&https:\u002F\\u002Fv2-f6b96e3bb0cbc8cbd246cb48_r.jpg&,&author&:{&bio&:&城市规划；泛设计爱好者；游戏爱好者；经济学心理学尝鲜者&,&isFollowing&:false,&hash&:&1ff9f5bdad9cbf3c2fdf902&,&uid&:497100,&isOrg&:false,&slug&:&shuai-qi-85&,&isFollowed&:false,&description&:&挑水的时候想着劈柴&,&name&:&upjasonchen&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fshuai-qi-85&,&avatar&:{&id&:&v2-f77d07d3bdf34e511ffbead&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&memberId&:,&excerptTitle&:&&,&voteType&:&ARTICLE_VOTE_CLEAR&},&id&:712069}],&title&:&受不了各大音乐播放app纷繁复杂的首页推荐，我给网易云音乐设计了情绪模式&,&author&:&shuai-qi-85&,&content&:&\u003Cp\u003E在开始设计之前我想弄清楚问题到底是什么：\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Ch2\u003E\u003Cb\u003E为什么App Store上主流音乐播放App的首页推荐都如此复杂？\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003E\u003Cb\u003E1.产品的目标。\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E首先，从音乐播放器的发展来看，自传统纯粹的PC端音乐播放器发展到现在，产品人对于移动端的音乐播放器已经不是纯粹的播放器，而是集线上听歌、评论、分享、电台、社群组织运营、线下演唱会和私人音乐服务为一体的综合平台。其次，每一款app都是商业目标和用户目标的平衡，诚然用户似乎更喜欢用完就走的“工具”，但是好的产品不能仅仅是“工具”。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003E2.满足更多样的用户。\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E首页上有“推荐MV”、“推荐专栏”、“精选专栏”、“推荐歌单”、“独家放送”、“最新音乐”、“主播电台”等栏目。多样的栏目设置理论上能够提供足够的内容来“消费”。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003E3.页面组织。\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E会不会不是信息的量出了问题，而是信息的组织方式呢？不同栏目都采取类似的图文结合方式，彼此之间区分度不大，用户凭借文字来区分不同的栏目。这是我想到的可能问题。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg data-rawwidth=\&3360\& data-rawheight=\&1334\& src=\&https:\u002F\\u002Fv2-d0d3c6df4a19e1ef65a2ca_b.jpg\& class=\&origin_image zh-lightbox-thumb\& width=\&3360\& data-original=\&https:\u002F\\u002Fv2-d0d3c6df4a19e1ef65a2ca_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg data-rawwidth=\&3360\& data-rawheight=\&1334\& src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='3360'%20height='1334'&&\u002Fsvg&\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&3360\& data-original=\&https:\u002F\\u002Fv2-d0d3c6df4a19e1ef65a2ca_r.jpg\& data-actualsrc=\&https:\u002F\\u002Fv2-d0d3c6df4a19e1ef65a2ca_b.jpg\&\u003E\u003C\u002Ffigure\u003E&网易云音乐的首页截图&\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Ch2\u003E\u003Cb\u003E目前的做法有什么问题？\u003C\u002Fb\u003E\u003Cbr\u003E\u003C\u002Fh2\u003E\u003Cp\u003E\u003Cb\u003E1. \u003C\u002Fb\u003E把大量的内容集合到一起就能满足大量的用户吗？这是否充分考虑到了用户的使用场景？什么时候哪些用户会使用有这么多推荐内容的首页？能不能分类考虑不同用户使用首页的场景？\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003E2. \u003C\u002Fb\u003E假设仍需要这么多的内容（如业务需要），有没有别的信息组织方式来简化用户的行为路径。\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Ch2\u003E\u003Cb\u003E用户的任务流程\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003E假设大多数用户使用音乐播放App的目标是听到一首心仪的歌曲。那么大多数用户可以分为有明确目标的用户和无明确目标的用户，针对有明确目标的用户，其行为逻辑是根据歌曲的名称、歌词、歌手、旋律等相关线索查找歌曲；而针对无明确目标的用户，他需要通过浏览一些选项来寻找，这是首页推荐存在的一部分意义，但是寻找的过程是有一定逻辑的，很多App会基于场景来让用户选择可能适合的歌曲，我相当赞同这样的逻辑，\u003Cb\u003E但是场景的筛选是否还有更深层次的逻辑呢？\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg data-rawwidth=\&1093\& data-rawheight=\&1339\& src=\&https:\u002F\\u002Fv2-cd8669781bfc6e566d5ec8cf386f59e4_b.jpg\& class=\&origin_image zh-lightbox-thumb\& width=\&1093\& data-original=\&https:\u002F\\u002Fv2-cd8669781bfc6e566d5ec8cf386f59e4_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg data-rawwidth=\&1093\& data-rawheight=\&1339\& src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1093'%20height='1339'&&\u002Fsvg&\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1093\& data-original=\&https:\u002F\\u002Fv2-cd8669781bfc6e566d5ec8cf386f59e4_r.jpg\& data-actualsrc=\&https:\u002F\\u002Fv2-cd8669781bfc6e566d5ec8cf386f59e4_b.jpg\&\u003E\u003C\u002Ffigure\u003E&用户使用时的任务流程&\u003Cbr\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003E为什么要做情绪模式？\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003E从前文的分析来看，我认为首页对于用户的价值在于提供给无目标用户以选择。但是如何引导用户的选择？如何让用户更“自然”的选择是我的一个设计出发点。\u003C\u002Fp\u003E\u003Cp\u003E因而，\u003Cb\u003E我开始思考关于音乐为什么存在？\u003C\u002Fb\u003E从音乐的发展来看，在人类还没有产生语言时，就已经知道利用声音的高低、强弱等来表达自己的意思和感情。而最原始的音乐雏形是，随着人类劳动的发展，逐渐产生的统一劳动节奏的号子和相互间传递信息的呼喊，以及当人们庆贺收获和分享劳动成果时，往往敲打石器、木器以表达喜悦、欢乐之情。而至今，我们在听一首歌曲或音乐会时，\u003Cb\u003E我们想要获得的难道不也是情感上的共鸣吗？无论是放大我们的一种情绪还是缓和一种情绪。因而，在想清楚人们听一首歌的预期后，打算以情绪作为我分类歌曲的标准，方便无目标的用户寻找符合此刻心情的歌曲。\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Ch2\u003E\u003Cb\u003E什么样的情绪模式？\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003E\u003Cb\u003E1.情绪模式只是针对网易云音乐的一个备选模式。\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E因为该模式针对的使用人群仅仅是一小部分人群，即以获取情感共鸣为目的的无明确目标人群（好拗口23333）。具体的任务流程见下图：\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg data-rawwidth=\&883\& data-rawheight=\&655\& src=\&https:\u002F\\u002Fv2-4facd6ef2bae5_b.png\& class=\&origin_image zh-lightbox-thumb\& width=\&883\& data-original=\&https:\u002F\\u002Fv2-4facd6ef2bae5_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg data-rawwidth=\&883\& data-rawheight=\&655\& src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='883'%20height='655'&&\u002Fsvg&\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&883\& data-original=\&https:\u002F\\u002Fv2-4facd6ef2bae5_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-4facd6ef2bae5_b.png\&\u003E\u003C\u002Ffigure\u003E\u003Cbr\u003E\u003Cp\u003E\u003Cb\u003E2.长按“听歌识曲”按钮切换\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E理由是目前该按钮的使用率不高，但是确实是相当重要的一个功能，将切换入口预知合理的结合，可以充分利用这一个按钮，需要注意的是最初的操作需要合理的用户引导。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg data-rawheight=\&300\& src=\&https:\u002F\\u002Fv2-dffccea4d507_b.gif\& data-rawwidth=\&400\& data-thumbnail=\&https:\u002F\\u002Fv2-dffccea4d507_b.jpg\& class=\&content_image\& width=\&400\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg data-rawheight=\&300\& src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='400'%20height='300'&&\u002Fsvg&\& data-rawwidth=\&400\& data-thumbnail=\&https:\u002F\\u002Fv2-dffccea4d507_b.jpg\& class=\&content_image lazy\& width=\&400\& data-actualsrc=\&https:\u002F\\u002Fv2-dffccea4d507_b.gif\&\u003E\u003C\u002Ffigure\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003E\u003Cb\u003E3.界面设计的思考\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E最新的心理学研究表明人类的基本情绪只有快乐、悲伤、恐惧和愤怒四种（英国格拉斯哥大学，2014年），基于这四种情绪，分别\u003Cb\u003E用红、蓝、紫、黄四种颜色对这四种情绪进行表征\u003C\u002Fb\u003E（因为从认知心理学的角度而言，色彩对于视觉的影响先于形状）。并采用这四种颜色对歌单和单曲进行图片处理，以表达出歌曲的情绪。\u003C\u002Fp\u003E\u003Cp\u003E导航栏仍保留搜索栏、播放器按钮、新增返回按钮；上部分采用头图的形式推荐编辑精选的歌单；下部分是可选单曲；底部为工具栏，提供筛选工具和查看播放列表的按钮。（借鉴了Apple Music强化专辑封面图的组织方式）\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg data-rawwidth=\&375\& data-rawheight=\&667\& src=\&https:\u002F\\u002Fv2-c916dc482be3e002a641b09c_b.png\& class=\&content_image\& width=\&375\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg data-rawwidth=\&375\& data-rawheight=\&667\& src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='375'%20height='667'&&\u002Fsvg&\& class=\&content_image lazy\& width=\&375\& data-actualsrc=\&https:\u002F\\u002Fv2-c916dc482be3e002a641b09c_b.png\&\u003E\u003C\u002Ffigure\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg data-rawwidth=\&3237\& data-rawheight=\&2266\& src=\&https:\u002F\\u002Fv2-4affd73ea10b58aab310de26ce7ca508_b.jpg\& class=\&origin_image zh-lightbox-thumb\& width=\&3237\& data-original=\&https:\u002F\\u002Fv2-4affd73ea10b58aab310de26ce7ca508_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg data-rawwidth=\&3237\& data-rawheight=\&2266\& src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='3237'%20height='2266'&&\u002Fsvg&\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&3237\& data-original=\&https:\u002F\\u002Fv2-4affd73ea10b58aab310de26ce7ca508_r.jpg\& data-actualsrc=\&https:\u002F\\u002Fv2-4affd73ea10b58aab310de26ce7ca508_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cb\u003E4. 搜索功能\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E利用网易云音乐强大的用户评论，通过\u003Cb\u003E描述你此刻的心情\u003C\u002Fb\u003E，可以“搜一搜有多少人和你一样难过”，点击查看别人的故事，听听他正在听的歌，会不会感觉你的悲伤并不孤单呢？\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg data-rawheight=\&300\& src=\&https:\u002F\\u002Fv2-37b762d5dbc004ad6f2109f_b.gif\& data-rawwidth=\&400\& data-thumbnail=\&https:\u002F\\u002Fv2-37b762d5dbc004ad6f2109f_b.jpg\& class=\&content_image\& width=\&400\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg data-rawheight=\&300\& src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='400'%20height='300'&&\u002Fsvg&\& data-rawwidth=\&400\& data-thumbnail=\&https:\u002F\\u002Fv2-37b762d5dbc004ad6f2109f_b.jpg\& class=\&content_image lazy\& width=\&400\& data-actualsrc=\&https:\u002F\\u002Fv2-37b762d5dbc004ad6f2109f_b.gif\&\u003E\u003C\u002Ffigure\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003E\u003Cb\u003E5.左右滑动查看歌单\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E头图的位置上提供编辑精选的情绪歌单，左右滑动可查看，提供给用户更简单的选择方式。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg data-rawheight=\&300\& src=\&https:\u002F\\u002Fv2-7fa81c414e_b.gif\& data-rawwidth=\&400\& data-thumbnail=\&https:\u002F\\u002Fv2-7fa81c414e_b.jpg\& class=\&content_image\& width=\&400\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg data-rawheight=\&300\& src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='400'%20height='300'&&\u002Fsvg&\& data-rawwidth=\&400\& data-thumbnail=\&https:\u002F\\u002Fv2-7fa81c414e_b.jpg\& class=\&content_image lazy\& width=\&400\& data-actualsrc=\&https:\u002F\\u002Fv2-7fa81c414e_b.gif\&\u003E\u003C\u002Ffigure\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003E\u003Cb\u003E6.15s单曲试听\u003C\u002Fb\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E用户在选择歌曲的过程中不期望被打断，以往的试听都是点击后至播放器中播放，如不满意还得返回上一页面，增加了用户的“挑选成本”。采用长按15s试听的方式，觉得满意后再添加至播放列表，使得用户的筛选过程更加简单顺畅。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg data-rawheight=\&300\& src=\&https:\u002F\\u002Fv2-dd6c77550efca92d2ec921abb75018f5_b.gif\& data-rawwidth=\&400\& data-thumbnail=\&https:\u002F\\u002Fv2-dd6c77550efca92d2ec921abb75018f5_b.jpg\& class=\&content_image\& width=\&400\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg data-rawheight=\&300\& src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='400'%20height='300'&&\u002Fsvg&\& data-rawwidth=\&400\& data-thumbnail=\&https:\u002F\\u002Fv2-dd6c77550efca92d2ec921abb75018f5_b.jpg\& class=\&content_image lazy\& width=\&400\& data-actualsrc=\&https:\u002F\\u002Fv2-dd6c77550efca92d2ec921abb75018f5_b.gif\&\u003E\u003C\u002Ffigure\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003E\u003Cb\u003E7.筛选工具\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E采用色彩滑块的方式，可以迅速筛选符合自己情绪的单曲，方便用户快速选择，同时方便用户定制多元的情绪歌单。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg data-rawheight=\&300\& src=\&https:\u002F\\u002Fv2-c4ba44c3ae4cf045c4397_b.gif\& data-rawwidth=\&400\& data-thumbnail=\&https:\u002F\\u002Fv2-c4ba44c3ae4cf045c4397_b.jpg\& class=\&content_image\& width=\&400\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg data-rawheight=\&300\& src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='400'%20height='300'&&\u002Fsvg&\& data-rawwidth=\&400\& data-thumbnail=\&https:\u002F\\u002Fv2-c4ba44c3ae4cf045c4397_b.jpg\& class=\&content_image lazy\& width=\&400\& data-actualsrc=\&https:\u002F\\u002Fv2-c4ba44c3ae4cf045c4397_b.gif\&\u003E\u003C\u002Ffigure\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003E\u003Cb\u003Eps.\u003C\u002Fb\u003E本身对于网易云音乐还是很满意的，只是想尝试下更多的可能性。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003Epps.\u003C\u002Fb\u003E知乎的GIF大了之后各种糊掉，只能牺牲清晰度了，不知道表达清楚没。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003Epps.\u003C\u002Fb\u003E感谢您读到最后，您的宝贵意见将会是我的进步动力～\u003C\u002Fp\u003E&,&updated&:new Date(&T17:05:18.000Z&),&canComment&:false,&commentPermission&:&anyone&,&commentCount&:6,&collapsedCount&:0,&likeCount&:3,&state&:&published&,&isLiked&:false,&slug&:&&,&lastestTipjarors&:[],&isTitleImageFullScreen&:true,&rating&:&none&,&titleImage&:&https:\u002F\\u002Fv2-f6b96e3bb0cbc8cbd246cb48_r.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&reviewers&:[],&topics&:[{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&交互设计&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&网易云音乐&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&用户界面设计&}],&adminClosedComment&:false,&titleImageSize&:{&width&:1527,&height&:1080},&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&tipjarState&:&activated&,&tipjarTagLine&:&真诚赞赏，手留余香&,&sourceUrl&:&&,&pageCommentsCount&:6,&tipjarorCount&:0,&annotationAction&:[],&hasPublishingDraft&:false,&snapshotUrl&:&&,&publishedTime&:&T01:05:18+08:00&,&url&:&\u002Fp\u002F&,&lastestLikers&:[{&bio&:&规划师&,&isFollowing&:false,&hash&:&eddbd52a89d51e00ad378bcfda77647b&,&uid&:340400,&isOrg&:false,&slug&:&ng-heng-36-42&,&isFollowed&:false,&description&:&&,&name&:&嗯哼&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fng-heng-36-42&,&avatar&:{&id&:&da8e974dc&,&template&:&https:\u002F\\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&如果我有500万？&,&isFollowing&:false,&hash&:&e3c027ee63ade6fcaf2ab&,&uid&:08,&isOrg&:false,&slug&:&zhang-bo-82-1&,&isFollowed&:false,&description&:&&,&name&:&张博&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fzhang-bo-82-1&,&avatar&:{&id&:&1a694c052&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&射鸡师&,&isFollowing&:false,&hash&:&9a15c5d01c9dd5ccedfd6e1ec60ee956&,&uid&:209500,&isOrg&:false,&slug&:&qi-qi-93-15-11&,&isFollowed&:false,&description&:&&,&name&:&七七&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fqi-qi-93-15-11&,&avatar&:{&id&:&v2-19de9a58f3ff35fc3dee1914&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false}],&summary&:&\u003Cimg data-rawwidth=\&883\& data-rawheight=\&655\& src=\&http:\u002F\\u002Fv2-4facd6ef2bae5_200x112.png\& class=\&origin_image inline-img zh-lightbox-thumb\& data-original=\&http:\u002F\\u002Fv2-4facd6ef2bae5_r.png\&\u003E在开始设计之前我想弄清楚问题到底是什么： \u003Cb\u003E为什么App Store上主流音乐播放App的首页推荐都如此复杂？\u003C\u002Fb\u003E\u003Cb\u003E1.产品的目标。\u003C\u002Fb\u003E首先，从音乐播放器的发展来看，自传统纯粹的PC端音乐播放器发展到现在，产品人对于移动端的音乐播放器已经不是纯粹的播放器，而是集线上…&,&reviewingCommentsCount&:0,&meta&:{&previous&:null,&next&:null},&annotationDetail&:null,&commentsCount&:6,&likesCount&:3,&FULLINFO&:true}},&User&:{&shuai-qi-85&:{&isFollowed&:false,&name&:&upjasonchen&,&headline&:&挑水的时候想着劈柴&,&avatarUrl&:&https:\u002F\\u002F50\u002Fv2-f77d07d3bdf34e511ffbead_s.jpg&,&isFollowing&:false,&type&:&people&,&slug&:&shuai-qi-85&,&bio&:&城市规划；泛设计爱好者；游戏爱好者；经济学心理学尝鲜者&,&hash&:&1ff9f5bdad9cbf3c2fdf902&,&uid&:497100,&isOrg&:false,&description&:&挑水的时候想着劈柴&,&badge&:{&identity&:null,&bestAnswerer&:null},&profileUrl&:&https:\u002F\\u002Fpeople\u002Fshuai-qi-85&,&avatar&:{&id&:&v2-f77d07d3bdf34e511ffbead&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false}},&Comment&:{},&favlists&:{}},&me&:{},&global&:{&experimentFeatures&:{&ge3&:&ge3_9&,&ge2&:&ge2_1&,&nwebStickySidebar&:&sticky&,&androidPassThroughPush&:&all&,&newMore&:&new&,&liveReviewBuyBar&:&live_review_buy_bar_2&,&liveStore&:&ls_a2_b2_c1_f2&,&qawebThumbnailAbtest&:&new&,&searchHybridTabs&:&without-tabs&,&iOSEnableFeedModuleWWANAritclePreRender&:&iOS_FeedModule_WWAN_PreRender_Enable&,&isOffice&:&false&,&liveDetailWechatBanner&:&Live_detail_wechat_banner_1&,&newLiveFeedMediacard&:&old&,&homeUi2&:&default&,&showVideoUploadAttention&:&false&,&recommendationAbtest&:&new&,&marketTab&:&market_tab_old&,&qrcodeLogin&:&qrcode&,&isShowUnicomFreeEntry&:&unicom_free_entry_off&,&newMobileColumnAppheader&:&new_header&,&androidDbRecommendAction&:&open&,&zcmLighting&:&zcm&,&favAct&:&default&,&appStoreRateDialog&:&close&,&mobileQaPageProxyHeifetz&:&m_qa_page_nweb&,&default&:&None&,&wechatShareModal&:&wechat_share_modal_show&,&nwebRelatedAdvert&:&default&,&qaStickySidebar&:&sticky_sidebar&,&androidProfilePanel&:&panel_b&,&nwebWriteAnswer&:&experiment&}},&columns&:{&next&:{}},&columnPosts&:{},&columnSettings&:{&colomnAuthor&:[],&uploadAvatarDetails&:&&,&contributeRequests&:[],&contributeRequestsTotalCount&:0,&inviteAuthor&:&&},&postComments&:{},&postReviewComments&:{&comments&:[],&newComments&:[],&hasMore&:true},&favlistsByUser&:{},&favlistRelations&:{},&promotions&:{},&switches&:{&couldSetPoster&:false},&draft&:{&titleImage&:&&,&titleImageSize&:{},&isTitleImageFullScreen&:false,&canTitleImageFullScreen&:false,&title&:&&,&titleImageUploading&:false,&error&:&&,&content&:&&,&draftLoading&:false,&globalLoading&:false,&pendingVideo&:{&resource&:null,&error&:null}},&drafts&:{&draftsList&:[],&next&:{}},&config&:{&userNotBindPhoneTipString&:{}},&recommendPosts&:{&articleRecommendations&:[],&columnRecommendations&:[]},&env&:{&edition&:{&baidu&:false,&yidianzixun&:false,&qqnews&:false},&isAppView&:false,&appViewConfig&:{&content_padding_top&:128,&content_padding_bottom&:56,&content_padding_left&:16,&content_padding_right&:16,&title_font_size&:22,&body_font_size&:16,&is_dark_theme&:false,&can_auto_load_image&:true,&app_info&:&OS=iOS&},&isApp&:false,&userAgent&:{&ua&:&Mozilla\u002F5.0 (compatible, MSIE 11, Windows NT 6.3; Trident\u002F7.0; rv:11.0) like Gecko&,&browser&:{&name&:&IE&,&version&:&11&,&major&:&11&},&engine&:{&version&:&7.0&,&name&:&Trident&},&os&:{&name&:&Windows&,&version&:&8.1&},&device&:{},&cpu&:{}}},&message&:{&newCount&:0},&pushNotification&:{&newCount&:0}}