本文研究和分享各种食谱卡的内容和导航方法，希望能给你带来灵感和反思。

美食带来好心情—经过数百年的发展，这对大多数人来说是值得肯定的。饮食占人类大部分时间和活动，食物已成为技术进步的热门话题之一。

移动和网络可以解决各种与食品相关的问题：网络和餐馆应用程序，食谱应用程序和社交网络，食品订购和食品外卖应用程序。无论用于食品应用的UI设计的目标是什么，当它看起来不仅易于使用而且吸引美味时，它可以被认为是一种很酷的应用。

以前，我们在此主题上分享了很多关于界面设计的想法。今天让我们介绍一下新鲜食品应用设计案例研究的结果，这次重点介绍几种食谱卡的概念。在这个项目中，Tubik的设计师Anton Morozov，Ernest Asanov和Vlad Taran进行了这项实验和分析，以研究各种食谱卡的内容和导航方法。

项目

烹饪和食谱App UI设计

引言

一般来说，设计师有责任为喜欢烹饪的人设计食品应用。它包括一个不断更新的配方数据库。此外，该应用程序还有一个管理员。为了确保用户体验的可扩展性，它允许用户根据他们当前的家庭用品查找食谱，或创建购物清单以购买缺少的成分。

根据客户偏好的概况，配方应用程序设计必须包括以下功能：

所需功能

搜索栏

过滤按钮（关于结果数量和应用于过滤器的信息）

食谱卡（食谱图片+标题）可选想法

可选的想法

成分与所需配方总数的比率

烹饪时间

卡路里

隐藏配方按钮以显示更少的食谱

添加到购物清单按钮

喜欢/保存按钮

食谱作者和他/她的个人资料照片

评分

你喜欢的号码

主要成分

共享

直接链接以查看食谱来源

考虑配方饲料的哪种布局最适合，网格和单列。

问题

主屏幕上一次提供了大量信息和想法。设计人员需要对所有点进行分析和优先排序，因为存在屏幕过载的风险。基于研究和分析，创建用户场景以确定配方中哪些食物信息最重要。

解决方案探索：优点和缺点

设计人员有多种食谱卡演示选项可以在移动屏幕上的有限空间内有效显示核心数据。考虑到食谱卡是主要的互动元素，最终决定必须基于逻辑和情感，有效导航和审美满意度的平衡。在尝试不同的方向后，设计师根据显示的内容确定了三种布局。创意团队可以根据目标受众的期望选择合适的布局样式。这是选项。

a）列表中显示的配方

优点：可以在屏幕上显示更多内容。

缺点：照片内容看起来太小。

b）在卡片中显示食谱（如Pinterest）

优点：卡的动态高度允许放置任何长度的标题照片

缺点：音符和其他元素的列太窄。卡片操作，例如将食谱添加到购物清单，隐藏类似食谱，以及共享食谱到社交网络，网络导致长按/strong制触摸，这对用户来说不是最明显的解决方案。

c）大食谱卡

优点：照片内容吸引了最多的关注。

缺点：屏幕上只有一个配方，其他功能对用户来说仍然不明显。

最终解决方案

创意团队倾向于第三版，大咖啡片为情感和美学提供空间。对于市场而言，产品最终必须具有吸引力。这将有助于收集反馈和分析数据，这些数据可用作创意发现解决方案的下一阶段，也是增强用户体验的基础。在第一次互动期间，不显眼和优雅的效果将提示隐藏在卡片下方并向下滑动的附加功能。

其他细节：过滤器放置

过滤器面板允许用户组织配方列表。用户可以预设：例如，显示适用于当前成分的配方。此外，过滤器可由用户定制。面板放置在屏幕的底部，为应用程序的操作增加了更多便利。

底线

在Apple，他们说：“我们要问的第一个问题是我们希望用户感受到什么？”在每个人开始创建新的数字产品之前，并非所有人都认为这些问题与用户的感受和情绪有关。 。今天大多数设计师都在追求功能。然而，用户的感受和情绪是最重要的，并且产品可以具有用户喜欢的功能和细节。

UI设计案例研究

如果您有兴趣在UI/UX设计创作过程中查看更多有用的案例研究，请参阅以下集合。

浇水追踪器。家庭需求的UI。

家庭预算App。财务用户界面。

在柏林的夜晚。事件应用程序的UI。

大城市指南。着陆页设计。

温尼的面包店。电子商务的UI设计。

上层应用程序待办事项列表的UI设计。

医疗保健应用。医生用户界面。

婚礼策划师。 UI设计理念。

Toonie报警。移动应用UI设计。

SwiftyBeaver。适用于Mac应用程序的UX/UI设计。

原始链接：https://uxplanet.org/ui-experiments-recipe-cards-options-in-a-food-app-36dce82d7b01

本文由@Doria发布。未经许可，禁止复制。

该地图来自的，基于CC0协议