中国人经常说人们吃这种食物非常重要。美食往往带来好心情。人们一日三餐是能量驱动人们每天做各种事情的能量来源。食物的质量与情绪，情绪，状态甚至一天的工作和生活直接相关。难怪食物永远是一个热门话题。我们经常使用手机和互联网来选择更好的餐馆，更好的外卖或找到更健康的食谱。食品和技术也紧密相连。无论这个与食品相关的APP UI背后的设计目标是什么，它不仅可以帮助用户实现他们的目标，而且由于添加了食物，它也具有不同的吸引力。

之前，我们就此主题分享了很多关于UI设计的想法。我们今天要探索的设计实践是一个关于新鲜食品设计的案例研究。这个APP的核心概念是食谱卡。在这个项目中，主要设计师是Anton Morozov，Ernest Asanov和Vlad Taran，他们将分析和探索以找到最合理的内容和导航设计。

项目目标

用于烹饪和食谱的移动应用程序的UI设计。

引言

一般来说，设计师需要为喜欢烹饪的人设计一个食品辅助应用程序。它应该有一个不断更新的配方数据库。它还应具有食品管理功能，允许用户使用家中可用的成分。生成相应的菜单，并为缺少的成分生成相应的购物清单。

根据客户偏好，此应用程序应包括以下功能：

所需功能

搜索栏

过滤按钮（包含相关结果的数量和相应的过滤信息）

食谱卡（食谱图片+标题）

可选功能

各种成分的具体配方，剂量和比例

烹饪时间

卡路里

X按钮关闭和隐藏食谱

按钮将成分添加到购物清单

喜欢/保存按钮

提供食谱的用户信息

食谱评分

喜欢这个食谱的用户数

主要成分

分享按钮

来源和配方链接

考虑使用哪种样式来渲染配方，网格或单列

主要问题

客户为设计团队提出的需求和想法包含大量信息和想法。设计师必须通过分析确定所有要点的优先级，因为在屏幕上填充信息会导致过载的高风险。基于研究和分析，通过创建用户使用场景来确定配方中哪些信息最重要是很重要的。

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

设计师为配方卡的展示开发了几种不同的解决方案。这些解决方案的核心是允许有限的移动接口尽可能高效和高效地显示核心数据。考虑到配方卡是整体互动的关键因素，最终设计师决定平衡逻辑和情感，我希望在可用性，导航性和视觉美学之间找到平衡点。在尝试不同的方向后，设计师设计了三种不同的内容布局方案。其中，创意团队必须根据目标受众的期望找到最接近的一个。

选项A：使用列表显示食谱

优点：您可以在屏幕上显示尽可能多的内容。

缺点：图片看起来太小。

选项B：在卡片中显示食谱（类似于Pinterest）

优点：该卡具有很大的灵活性，其高度可以轻松匹配不同类型的内容和信息。

缺点：由于双列布局，每列的宽度相对较窄，并且诸如向购物车添加成分之类的交互主要由长按卡触发。这些交互是隐藏的，对用户来说并不重要且友好。

选项C：大食谱卡设计

优点：图片可以极大地吸引用户的注意力。

缺点：一次只能在屏幕上显示一张食谱卡。对于用户来说，附加功能和交互仍然不够明显。

最终的解决方案

创意团队最终倾向于解决方案C.更大的卡片设计使产品具有更强的视觉吸引力，在竞争中具有明显的优势。同时，它还有助于收集反馈和分析数据，这可以作为下一阶段设计的基础，以增强用户体验。滑动卡带来的微交互是微妙和优雅的，然后可以隐藏更多的交互和操作，以及其他功能。

其他细节：过滤器

由于不同的配方差异很大，用户需要通过过滤器过滤配方，用户可以使用此功能查找更适合它们的配方。例如，您可以选择仅使用当前现有配料的配方，以便用户可以购买上表中的优质菜肴而无需购买。过滤器为用户提供了更多便利。

结论

在Apple创建产品时，“我们要问的第一个问题是我们希望人们感受到的。”在创建数字产品之前，并不是每个人都认为产品设计和用户情感密切相关，但事实上并非如此。用户的情感和感受是最重要的，然后尝试找到产品的功能和体验，而不能忽视用户的情感需求。

« 基于用户体验的基于Web的人机交互符合代购源码网站建设目的 | 什么是视觉建筑系统？ »