萧伯纳曾经说过，没有爱比对食物的热爱更真诚。这就是为什么食品和烹饪已成为用户体验设计师的重要灵感来源。 Tubik Sutdio今天的设计案例是移动应用APP Tasty Burger的互动和创意设计流程。

项目描述

汉堡订购APP UI和交互设计。

预处理部分

要设计一个订购汉堡的APP，最重要的是要清楚地思考每个步骤并提供足够清晰的导航，以确保用户可以在不同情况下快速制作和下订单。 Tubik UI设计师Anton Morozov在艺术总监Ernest Asanov和Vladyslav Taran的指导下设计了这个项目。他们的设计目标是使Tasty Burger APP的界面直观而美味。扩展功能主要由汉堡图标携带，可以自定义各种成分和相关选项。

接下来，您将看到用户界面的界面设计，其中包括特定汉堡菜单中的选项和自定义过程，以及用于提交订单的特定界面。

选择汉堡页面

在此菜单中，用户将看到当前餐馆或服务提供商的位置和特别优惠。特定食物的图片附有与食物成分和重量有关的基本数据。颜色突出显示价格和CTA条款允许用户快速访问关键信息。更重要的是，顶部过滤可帮助用户自定义过滤器并快速找到他们想要的内容。

在选择特定位置并跳转到特定产品页面后，用户将看到产品的高清图像，相关定价，重量，营养信息和其他关键数据，并将看到CTA按钮以添加购物车。这种视觉呈现更具情感表现力和吸引力，屏幕上的整体布局也很整洁。对于经常在此页面上下订单的用户而言，这样的设计似乎没有超载，他们会做出快速决策。

自定义汉堡页面

对于那些关心特定成分的人来说，他们需要定制汉堡中的特定成分。只需点击“成分”选项卡，他们就会看到汉堡包含的特定成分，哪些蔬菜，哪些肉类，哪种酱料等等。为了使成分列表看起来更具吸引力，界面将包含所有成分的图片。在交互的任何阶段，用户只需点击右上角的心形图标即可将这些成分添加到他们的收藏夹中。购物车图标也是UX优化的。当黄色上有小点时，表示它不是空的。

考虑到用户将仔细阅读成分的细节，观察并进行更深入的自定义交互，信息最好显示在浅色背景上，确保文本和背景之间的对比度，以提高可读性。当然，在设计时，它还支持高对比度的深色背景，因为它还具有足够的对比度，并且风格将更加时尚和优雅。此外，设计人员非常重视构建平衡且易于查看的可视化层次结构，以快速传达信息和交互。饥饿的用户并没有真正投入大量时间和精力来完成这个APP的特定功能。在饥饿之下，他们只会尽快下订单。

自定义订单的交互过程如下所示：

创建一个新的汉堡页面

餐馆和咖啡馆提供的汉堡通常具有典型特征。为了贯彻食品精神，用户应该能够根据不同的成分完全定制自己的全新汉堡类别。当然，这些成分应该由原料配料支持。添加新成分后，用户将看到价格变化。

以下是在APP中创建新汉堡的交互流程。

订购和交付页面

一旦确定了订单细节，用户就可以通过两种方式获得它：通过将食物送到特定位置，或者通过在餐馆拿起食物。 APP还可以支持不同的付款方式。

如果用户选择去餐厅，则APP还应提供地图服务并显示最佳路线。高色彩对比度和精心挑选的自升式确保了内容的可读性。

以下是订单交付的解决方案和交互流程。

微妙的动态使整个订购过程生动，美味。

着陆页

着陆页必须是一个有吸引力的动画：新鲜美味的汉堡应该能够呈现令人垂涎的效果，并且适合主题并且具有吸引力。

美味汉堡这个应用程序对Tubik团队来说非常具有挑战性。这是一个非常酷的尝试，以拓宽我们的视野，并在功能设计方面做出新的尝试。

« SEO新手不知道每天做什么。当你阅读它时，你知道 | SEO总是在变化，变得越来越难。你还能在SEO行业工作吗？ »