设计团队根据这三种方案分别设计了三版一级页进行对比，这里由于后续需要用到迭代中，所以设计稿请恕不能放出，设计团队设计了三个方案之后进行比对，发现前两个方案虽各有优势，但却都有各自的缺点。就第一种方案来看，视觉上是加强了唱吧的品牌，但是并没有使得整体页面更加多彩青春;第二种方案是满足了潮流炫酷，但是目前唱吧各年龄层都有大量用户，所以UI上风格不宜太过先锋，而且黑色超酷的界面虽然第一眼是给人比较酷的新潮感，但是久视之后相反容易疲劳。

　　最终，在三个方案中，我们秉持唱吧一惯突出内容的原则，配合多彩和时尚制定了唱吧青春时尚版设计方案，我们希望这个版本的UI能够紧跟设计趋势，兼具青春张扬和时尚精致的同时，保证各年龄层的用户使用体验：

　　除了风格定义以外，我们制定了关键词对应情绪版，尝试链接在设计元素和设计细节能够传达给用户的直观感受：

　　下面来看最终呈现的v 8.6新版本一级页和唱歌页，我们希望通过多彩的缓动渐变，能够带给用户全新的沉浸娱乐体验：

　　多彩的唱吧v8.6一级页

　　另外，我们期待建立一个可扩展的交互架构，所以设计了一个Z轴方案，模拟底部有一个背景，在承载内容的卡片上，以后可以有承载诸多扩展方案

　　一级页Z轴说明

　　2.新的UI组件与思考

　　a.榜单展示组件优化长久以来，唱吧一直在解决用户UGC头像导致的太过杂乱的问题：

　　设计的本质是解决问题。从唱吧7.0到8.6，我们队榜单页的展示组件做了上图两次优化，可能读者一看上面这个原型页会单纯的认为这不是优化，甚至于还导致展示效率变低了(之前能展示7个现在只能展示5个)，但是由于唱吧覆盖的年龄层比较广，很多时候用户UGC的图片质量无法控制，当用户UGC图片质量我们无法控制的时候，我们UED团队在设计展示组件的时候旨在通过两个大版本的优化，逐步的让间隔变大，弱化图片的同时不断强调歌曲和用户。使得再杂乱的用户图片也不至于太影响整体画面调性。

　　在这里大家可能会说，如下图所示，快手也是用户UGC内容不可控的啊，为什么人家就坚持展示效率，用的是全屏展示呢?

　　分析一下为什么同是UGC不可控，唱吧和快手用了两种不同UI框架的原因：其实如果了解之后，大家会发现，快手和唱吧两款产品的这个界面，各自承载的功能不同，快手的这个UI组件承载的其实是“让用户快速找到感兴趣的内容”，快手这款产品的短视频Feed中的每一个视频都可以从首页上看出它大概是什么内容，比如第一张图我可以看到是一个高尔夫游戏，第二张图是一个工人，下面有一个手机游戏，再下一张是一个传递正能量大概是让座……但是唱吧的榜单页就不一样，它主要承载的是“让用户选择歌曲收听”，这个UI组件中的图片不像快手一样是承载内容的，比如唱吧这个UI，能看出的就是第一张图是一个妹子，第二张图是一个妹子，第三张还是一个妹子……发现了么，唱吧榜单页UI组件中，承载内容的其实更多的是歌曲名。

　　虽然快手和唱吧这两个UI组件长得不同，但是都很好的达到了突出内容本身的目的。

　　b.动态Feed组件整体去线简洁化唱吧的动态Feed中，用户产生的Feeds按下图分类：

　　之前的8.0版本，Feed各组件中有些冗余的视觉层级，这一次改版主要采用组件嵌套的方法，把之前的很多线去掉，将每一个转发和发布行为变成独立的组件，组件间支持嵌套，三层嵌套的组件第三层采用反白突出;加大字距和行距，使页面信息更可读，整体感觉也更加清爽：

　　c.多彩时尚的设计为了营造青春时尚的氛围，突出唱吧娱乐属性，唱吧8.6采用了全新的多彩设计，在原先的唱吧红的HSB为原点，扩展出一批颜色，运用渐变和微投影等时尚设计元素进行点缀，在整体一级页的NavBar上采用一直缓动的渐变彩条，整体给用户多彩时尚的感觉：