唱吧APP v8.6设计总结

　　同窗，唱吧8.6，一键建音理解下?

唱吧去到了2018年，曾经积聚了年夜量的各年齿层的用户。设想团队正在之前的版本设想言语连结中性，以展现内容战功用为主。做为一款唱歌、听歌、交际文娱为一体的产物，2018年，设想团队期望正在接下去的新版本UI中，正在凸起内容战功用的根底上，等待能够给用户愈加年青生动的设想的感触感染。

　　一：前期用户调研 —— 单人访道取核心小组

　　设想团队为了做好此次改版，我们UED团队调研了身旁的伴侣利用唱吧的感触感染战对UI的倡议，同时也正在公司内部停止了一轮核心小组战用户访道，固然样本有限，可是调研成果却遍及分歧。

　　1.单人访道

　　唱吧UED团队做的所谓单人访道普通是没有占用事情工夫的，以是详细表示情势也其实不像传统的书籍中那样枷锁正在条框里。普通是团队成员经由过程战伴侣闲谈的历程中无意识的停止提问，发明用户利用历程中的迷惑战成绩，那样的益处正在于战伴侣的一般谈天中表露出的成绩会比力实在有用，然后团队成员会把成绩反应到团队并集合收拾整顿到“用户体验需供池”停止评价战处理。那部门内容触及到微疑访道截图，不免表露用户隐公，以是临时略过，可是那个办法正在洞悉产物成绩的历程中出格好用，正在各人战伴侣微疑闲谈的时分无妨无意识的约请伴侣们停止自产业品的利用体验，并无意识的对本人卖力的产物停止提问，出准会得到不测欣喜。

　　2.核心小组

　　比拟于单人访道，偶然候研讨会需求多人同时访道，“核心小组”那个洋气的词实在有一个各人皆传闻过的替代词：“去，伴侣们，我们开个座道会吧。”核心小组实在素质上便是一场座道会，中心功用是散焦正在一个变乱大概一个主题上，用构造化的方法提醒目的用户的经历、感触感染、立场、希望，而且勤奋客不雅的显现其背后的来由。

　　“核心小组的目标没有是揣度而是了解;次要没有是输出一个结论，而是肯定一个范畴;没有是陈说，而是对人们怎样认知供给不雅面。”——《核心小组》理查德·A·克鲁格

　　既然曾经肯定要停止UI改版，那末正在本次核心小组中，我们针对：您对唱吧App第一印象是甚么? 您等待唱吧该当是甚么样的?两个UI相干的成绩倡议会商并停止齐程灌音，然后抽离出一切访道者叙说内容内里的枢纽词，再按将获得的枢纽词按差别维度停止分类收拾整顿，从中获得今朝唱吧UI中没有满意用户等待的成绩战用户等待的枢纽定语：

　　果为是核心小组的目标是奔着寻觅成绩范畴那一目标停止的，以是当会见到缺陷的时分，我们愈加等待访道工具心没有择行，以至等待可以听到对产物的存心吐槽，我们收拾整顿了访道中的槽面，最初回纳为以下四个维度， 果为之前的设想言语战团体UI的组件战框架皆保持中性，以是访道战预期分歧，用户会表达道没有精美战比力陈腐：

　　总而行之，今朝唱吧UI中设想团队取用户可以告竣共鸣的成绩有：a.今朝唱吧的东西属性不敷凸起b.今朝UI中存正在许多冗余区隔(线、里等)形成视觉压力较年夜c.今朝设想言语过于中性，不敷精美，缺少芳华战文娱颜色。

　　而核心小组访道时期，我们便用户形貌本人心目中的唱吧形象的灌音停止收拾整顿，笼统出了一些共性的枢纽词，我们把枢纽词根据差别维度停止分类，从而找到了此次改版的标的目的：

　　自此，我们获得了那个版本的UI改版思绪战目的：便是从UI战交互上要挨制一个简约、精美、新潮、时髦且本性化的唱歌东西仄台。那是是我们设想团队此次8.6改版和后绝几个版本迭代的中心目的。

　　2、UI气势派头界说取组件考虑

　　1.UI气势派头界说

　　8.6改版历程中，设想团队为理解决上述的差别成绩，设想了三个标的目的上计划的考虑:此中第一个思绪是强化唱吧品牌，正在凸起品牌色的根底上渗透寡多唱吧元素、增强仄台辨认度。第两个思绪是测验考试回回实在的KTV战演唱会场景、提拔气氛代进感、从唱歌场景中提炼炫酷新潮的元素，第三是以芳华时髦的基调为主，简化UI层级，来失落UI中简单形成视觉冗余的元素。

　　设想团队按照那三种计划别离设想了三版一级页停止比照，那里因为后绝需求用到迭代中，以是设想稿请恕不克不及放出，设想团队设想了三个计划以后停止比对，发明前两个计划虽各有劣势，但却皆有各自的缺陷。便第一种计划去看，视觉上是增强了唱吧的品牌，可是并出有使得团体页里愈加多彩芳华;第两种计划是满意了潮水炫酷，可是今朝唱吧各年齿层皆有年夜量用户，以是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上接纳不断缓动的突变彩条，团体给用户多彩时髦的觉得：

　　d.沉醉沉俭的演唱气氛：正在8.6版本，主推的是我们自力研收了一年多的“一键建音”那样强势的功用，为了更好的启载那个功用，我们从头设想了唱歌页里的UI款式，让色彩更暗、底部微小霓光正在时辰缓动却无妨碍演唱止为，团体从视觉上增强了唱歌的气氛感战沉醉性：

　　3.中心功用强化

　　闭于中心功用强化那件工作，实在唱吧团队也考虑过好久。世里上的支流产物的tabbar上假如中心有一个中心操纵按钮，面击以后进进的新页里必然底部tabbar会被躲藏，那样实在是隔绝五个模块切换体验的。以我们的好伴侣转转app为例给各人注释一下好了，转转app中心营业是让用户收忙置，以是它的tabbar设想是中心一个年夜年夜的“+”，面击以后实在是跳转一个主线性营业场景;而唱吧的面击“演唱”则没有是一个线性的营业场景，以是我们期望正在凸起演唱的时分，经由过程面击后的弹性形变反应的方法，保留住tabbar，低落用户切换交互的本钱：

　　4.可复用的UI Kit战Sketch Library

　　正在唱吧8.6的设想历程中，同步造定UI Kit组件战设想标准，造定Sketch Library设想团队组件复用：

　　3、新奇风趣的交互方法

　　1.齐局的滑动式交互

　　segment control组件是唱吧8.0的中心UI组件，正在8.6组件界说时，我们再次放年夜了那个组件正在唱吧UI中的使用范畴，从头界说了Segment组件通用划定规矩，增加了一个齐新的滑动时唆使器的弹动结果，而且正在8.6战以后的一两次迭代中，使得iOS战Andriod中segment组件同一：

　　2.mini播放器的展现取支起

　　唱吧今朝听歌页里返回时，歌直默许正在背景播放，果为声音借正在，用户许多时分出有较着感知到被支起到mini播放器，以是为此设想了一个唱歌页下推支起到mini播放器的脚势战动效，等待能让用户对mini播放器的支起态有较着感知：

　　3.删减可玩性战兴趣性为了删加交互可玩性战兴趣性，我们设想了一级系列的小交互：

banner滑动结果

五个一级页切换结果

　　Loading突变加快跑结果(没有要问我为何那个辣么年夜，果为只要那个是AE做的)

　　别的为了满意情形需求，我们以唱吧不祥物小唱为本型画造了一系列心爱的小动绘：

　　建音小唱

听歌小唱

唱歌小唱

　　4、结语

　　唱吧UED团队不断深信设想的力气战代价，正在将来的唱吧版本中，我们将更多的里背唱歌，听歌战交际场景，劣化用户体验历程，并参加更多的感情化的设想欣喜。

　　唱吧UED团队2018需求资深/初级UI、创意视觉专家、资深品牌设想、创意视觉设想(电商标的目的)，坐标北京太阳宫。假如有念要参加我们的也能够公疑留行大概收简历到：songshunning@changba.comyitongchuan@changba.com让我们一同正在将来缔造更多的美妙...

　　---------文章做者：ChangbaUED_Seany