恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
A班练琴设计总结
0.0°
2020-03-26 原创文章 经验/观点 举报 1449 6 1 0

我们用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左右分屏的交互方式

 

选曲交互

 

旧版

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

 

              

 

新版

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

 

              

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


强调反馈


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

 

              

 

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

              

            

                      


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

              

 

引导与提示


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

 

              

 

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

 

                       

             


网站宣传

 

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

 

 

              

 

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

 

最后~

 

欢迎大家用iPad下载【A班练琴】

也期望大家的宝贵意见,让我们变得更好。

 

 设计:王铎    动画:冯

产品:宋乐耘、刘权庆


Powered by Froala Editor

更新:2020-03-26

收藏

6人已收藏

  • 63

    作品

  • 6880

    粉丝

  • 0

    关注

  • 提UI设计的8个技巧
  • 这些3D素材生成器,让我果断放弃了C4D!
  • 8点了解栅格系统的应用
  • 大厂都在用的10个防呆设计法则!
相关标签

    猜你喜欢

      2020-03-26 原创文章 经验/观点 举报 1449 6 1 0

      A班练琴设计总结

      0.0°

      你确定要举报A班练琴设计总结

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2020年03月25日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      1
      6
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录