欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

设计实战!健身应用Mannva的UX/UI设计流程是怎样的

发布时间:2018:02:23 12:19:45 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1463个文字,预计阅读时间4分钟
导语
通过APP来构建面向用户的解决方案,是目前企业常见的思路。相比于移动端网站,APP有着功能更加强大的框架和针对性更强的特点。

  通过APP来构建面向用户的解决方案,是目前企业常见的思路。相比于移动端网站,APP有着功能更加强大的框架和针对性更强的特点。

  一款APP的性能如何,和它的UI和UX设计息息相关。人们对于移动端应用的期望每年都在增长。人们希望通过舒适的交互和令人愉悦的导航系统在APP中达成自己的目标,他们希望UI要富有吸引力还具有原创性,希望APP的功能和他们的兴趣足够贴合。在之前,我们曾经在《一个专业易用的健身APP,要如何规划它的功能和UI?》这篇文章当中提到了健身类应用要如何设计,今天的文章,则是在截然不同的需求之下,完整设计出一个贴合实际健身流程的专业健身服务应用。这个设计项目是由设计师 Tania Bashkatova 来负责的。

  

设计实战!健身应用Mannva的UX/UI设计流程是怎样的

 

  任务

  为健身房中使用的健身APP进行UI和UX设计

  预处理过程

  客户是来自南非的 Mannva Group 公司,他们希望设计出一款名为 Manuva 的新产品,适用于专业健身人事和健身房会员的移动端应用。这款应用的主要目的是帮助用户在健身房找到适合自己的私教,并且在不加入特定健身房的前提下预约到试听的课程。用户将可以通过应用内的地图或者列表发现最近的健身房、私教和课程,用户能够通过距离和时间排序来筛选最近可用的健身房、私教和课程。这款应用对于健身行业从业者而言,可以用来作为维护和运营客户的工具。对于用户而言,,这款工具主要帮助他们发现适合自己的健身服务。当敲定课程、健身和私教之后,这款名为Manuva 的应用还提供应用内的支付服务。

  Mannva Group 希望他们的应用被设计得充满活力且年轻化,并且为用户提供清晰明了的新用户引导教程。此外,他们还额外要求设计师关注导航的设计,确保用户能够毫不费力地找到他们想要的信息和内容。

  UX设计

  了解了所有的信息和需求之后,设计师完成构思,并且开始绘制线框图。通过线框图,设计师将APP的各屏的布局高度简化精炼地呈现出来,它可以将整个APP的信息架构快速而视觉化的勾勒出来,确保后续的开发和客户对于项目的结构有清晰的了解。此外,如果客户想要进行修改,线框图的修改成本也相对较低。

  这就是 Manuva 的APP 的线框图。设计师设计出了基本的布局,包括登录界面和主屏幕。

  

设计实战!健身应用Mannva的UX/UI设计流程是怎样的

 

  客户要求将一些原始的功能包含到登录界面当中,确保用户无需注册的状况下便可在 Manuva 中发现信息。这就是为什么设计师会在登录按钮下方加入一个“Desicover Manuva”的按钮,为用户提供一个额外的选择。此外,为了让用户的个人信息更加个性化,在登录过程中,用户还可以有针对性地选择他们的目标。

  

设计实战!健身应用Mannva的UX/UI设计流程是怎样的

 

  主界面包含两个部分,一个是健身教练列表,一个是地图。这帮助用户快速地找到他们需要的私教。此外,用户界面当中还包括一个标签栏,这种导航模式平易近人还足够清晰。

  总而言之,线框图将Manuva 的整个框架和信息结构清晰地呈现出来,并且将交互区域、元素都规划了出来。

  UI设计

  当线框图所呈现的结构和构思被接纳之后,设计师开始着手设计相应的UI界面。在设计过程中,最重要的任务之一是找到合适的配色方案。配色对于产品视觉极其重要,它直接关系到了用户对于产品的第一印象。不适当的配色可能会直接影响到产品的可用性、可读性以及用户的满意度。此外,设计师需要考虑的品牌本身的特点,目标受众的年龄、性别、文化背景以及喜好,在此基础上来构建配色。

  设计师为客户提供了多种配色的选择,也让客户可以从多个不同的角度来看待他们的APP。不同的配色方案覆盖面非常广,有黑色背景的也有白色背景的,有冷色调的也有暖色调的。接下来我们看看具体的设计:

  

设计实战!健身应用Mannva的UX/UI设计流程是怎样的

 

  

设计实战!健身应用Mannva的UX/UI设计流程是怎样的

 

  最终客户选择了白色背景下包含两种对比色的UI概念设计,这两种色彩是蓝色和粉红色。而蓝色本身也是 Manuva 的LOGO中的品牌色,这样的选取有利于提高品牌的认知度。以下是APP 最终的UI设计:

  

设计实战!健身应用Mannva的UX/UI设计流程是怎样的

 

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:让用户玩手机上瘾,高粘性 App 设计者有何秘诀?

下一篇:如何利用人工智能设计更好的用户体验?

  • 18893 文章总数
  • 2302716访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信