赞助商
立即赞助

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

产品经验3年前 (2021)发布 流光
2.7K 0 0

过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设计流程是怎样的

在注册界面当中,APP 会让用户选取最喜欢的运动方向,呈现方式是相应的运动员的图像。由于 Manuva Group 来非,所以基于用户的需求,选取了大量非裔运动员的图像。

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

为了让用户界面起来清晰而足够创,计还独为此计了一组定义矢量图标。图标风格简约美观,和整个导航系统搭配起来颇为不错。

新用户流程自定义插画

新用户引导流程是户别关注的一部。新用户引导流程中,用户通过系统提供的教程了解APP 的功能和基本的控件如何实用。这个环节中,通常包含简短清晰的引导和描述性的息,阐述APP 的优势,并尽量吸引用户用并留下来。

了让这些教程界面具娱乐性,客户设师一同讨论,并且终添加了一系列自义插画。这项任务交给了Tubik 的平面设师 Marina Solomennikova 。插画的风格扁平的,色彩整UI配色相互呼应,效果如下:

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

结语

无论存在多少同类应用,创新和不同的需求和市总会让新生的APP 有脱颖而出的机会。不过在创造性的计,用户体验计上,需要计投入更多的力,力图让UI更加令人愉悦。

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

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

@菜心设计铺 :图标——界面设计最重要的元素之一。 菜心经常写关于图标的教程和感悟,可见图标设计在我日常工作中占了很大比...
图标设计
之前我把交互设计师职业技能的第一部分——思维部分讲完了,之后我开始讲「眼界」这部分。老实说,我只是作为一个设计师在写些...
交互模型
@豁牙子的阿昕 :准备就要过年啦!在过去的一年,设计神器小分队分享了很多字体资源库。让我们在面对甲方爸爸变幻莫测的需求...
字体网站
编者按:完整的 UI 设计流程到底是怎样的?从需求到产品上线,要经历多少个阶段,每个阶段有哪些应该掌握的基础知识,本次优...
ui设计
前段时间一直在做运营类设计,banner 在其中占了较大比重,为此就想写一篇阶段性总结。其中部分观点参考了相关视频教程和文章...
Banner
猪年到来之际,我们品牌的卡通形象——小飞猪也完成了自己2.0版本的升级。或许有人会疑惑:飞猪的品牌logo 大家早已熟知,为什...
卡通形象
从16年刚到 ofo 的时候我心中就有一个巨大的疑惑,像 ofo 这样一个简单的出行类产品还能怎么设计呢?纵观周围很多出行类 App...
情感化设计
一次会议的演示文稿,通常是一个 .pptx 格式的文档,而日常来往的邮件附件里的文档则多是 .docx 和 .pdf 格式的文档。当然,...
交互文档