A班练琴项目设计总结

135天前发布

原创文章 / UI / 观点
micu设计 原创,如需商业用途或转载请与micu设计联系,谢谢配合。

我们用365天,打造了一款AI练琴软件!

写在前面


设计师在设计过程中应该充分理解产品的功能,做为产品型的设计师不仅只是为了提高主观意识中好。更应该对对功能(内容)的层级进行思考,最终还原出最适合用户的视觉表现。设计的结果检验需要设立指标,可以通过关键性的指标用户留存和使用率来检测版本结果。如果初期没有数据统计时,可以通过一用户1对1满意度调查进行获取版本结果对比。在产品功能稳定的易用的情况下去再更好的提高用户愉悦性,也就是视觉表现层上的趣味性

 

 


项目背景


A班练琴是一款专为小学生们打造的线上练琴APP。可以智能根据孩子们的弹奏方式,进行制定教学方案,针对性的练琴,效率会更高,多种练琴方式。

 

 

从项目上线到现在,经历了几次大的改版,流程做过了很多次调整。从最初雏形到毛坯再到现在满足了用户的功能使用。产品设计从功能模块堆积,交互设计到现在达到可用性的标准。但是还不够好用让用户愉悦,所以这次改版针对易用性和趣味性,从视觉风格和品牌调性出发,对设计进行重塑。正对卡通角色化及元素互动动画来提高用户(孩子)在产品中的趣味性。

 

             


立牌坊



产品有基本的雏形后,就到了定产品名称设计LOGO。跟具市场的名称我们先做了调研,发现产品本身需要突出“练琴”这个词汇。原因也很简单,能根据用户搜索行为,更好的扑捉到用户。而 A班则是面对家长角色定义的,家长是选择我们产品的最初群体。 A班寓意了尖子班的意思,是家长的首选。
于是乎,产品名称确立为“A班练琴”
针对名称“A班练琴”设计上做了几个方向的尝试
1.直接将A角色化
2.将A进行图形话
3.将钢琴图形化


             

 

最后再对多个方案进行了重组筛选,提取出钢琴琴键的元素和A图形的结合简化后的图形

关于LOGO颜色上选择了黄色,黄色给孩子和家长带来的是积极活跃的感受,而明快的黄色背景与图形黑色白色的结合能更好的强化视觉对比关系

 

              

由于是APP软件的LOGO需要考虑到最小尺寸下是否清晰,这也是在前期简化元素的原因。最后是直接挂牌的效果。

 

             

 

形象一致性



最初我们是先做产品才有了品牌定位,第一个版本中尝试过多个精力形象来体现功能区别分,发现设计后的体验效果统一性不够,让用户较为混乱。另外和品牌LOGO的关联性不强。在这次改版中统一为一个形象来进行品牌传播,深入刻画形象的各种动作运用在产品中。
考虑到3个方面
1.形象与LOGO的联系
2.品牌主色的统一
3.减少多余形象绕乱


 

     

              

 

为了提高形象的记忆性,让孩子更理解从的操作。在各个环节都植入了形象角色,让孩子产生陪伴感。在所有的弹窗中都加入了卡通形象。

 

   

          

针对形象设计了一套完整的表情,欢迎大家去微信下载。

               

减少视觉的扰乱


最初版本上线经过用户使用的反馈发现视觉强过了本身音谱的内容,孩子视线容易被不重要的元素分散。大面积的黄色会让用户产生焦虑感,在改版后的设计中将黄色作为强调的颜色,背景元素则选择了冷色。这样也能更好的突出提示等元素。

在谱面弹奏上去除多余的元素,提高了谱子在页面中的使用率。这也是孩子在使用iPad弹奏的重要环节,谱子要足够大才能看清楚。为了画面显得不那么单调,背景运用了较弱的微动画来营造气氛。

 

                    

       

减少操作层级


在最初版本中交互上还是很不成熟的,比如我们在设计选曲这个页面中采用了外卖选商品的方式交互。以导致孩子选曲练习步骤非常的繁琐。在最的设计中减少不必要的操作,将操作的步骤都放到一个页面进行,运用了iPad左右分屏的交互方式

 

选曲交互

 

旧版

选择曲库-选曲-菜单-确认-选段-添加完成

 

              

 

新版

选择曲库-选曲-选段-添加完成

 

              

在新的设计方案中不仅减少了操作的步骤,也能让用户时时能看到自己选择的曲子,特别是在选择多个曲目的情况下变得更为实用。


强调反馈


为提高孩子在弹奏中的互动性,增加准确音符的反馈动画,提高趣味性。

 

              

 

根据弹奏给出不同的结果反馈,利用角色不同表情来表现不同的关键词。从而让孩子产生激励感。

       

undefined

       

     

undefined

       

                      

完成单次训练或完整的上完一节课会生成学习报告,目前功能上针对练习分数做了数据展示。

       

undefined

       

 

引导与提示


由于产品面对的用户是孩子,孩子对图像会更容易理解。所有的引导弹窗或说明文案尽可能视觉化,减少文字性的提示。让产品形象来引导孩子完成理解和操作。

 

       

undefined

       

 

弹奏错误提醒的级别,从第一错误到多次错误,从音符标红到键盘提醒到红款提醒

 

                             

       

       


网站宣传

 

网站的展示内容相对比较简单,内容主要以介绍产品为主线,设计上相对体现出产品的使用场景配上真实的孩子视频。网站主要面对的是家长,提高家长对产品的认同感是最大的关键,所以第一屏的内容以真实的使用视频为重点。文字说明和产品截图简洁明了即可。

 

        

 

感悟:对于一家创业公司,把产品设计从0到1推向上线,历时了半年多上线,非常幸运的是没有胎死腹中~在这个过程中,是一种修行作为一名设计师不仅需要快速理解产品被后的逻辑和功能,还需要考虑到开发难度、团队的优劣势。讨论并充分理解需求的的重要级别,从而将重要的需求优先化,达到快速落地~而设计是自我批评和自我调适过程,通过用户反馈产生质变!

 


 

 设计:王铎    动画:冯晨



9
- 位站酷推荐设计师推荐 -

声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。

    没有新消息