设计实战！一个美观又易用的食谱APP要如何设计？

Tubik ：国常说，民以为天，吃这件事情很要。好物往往带来好心情。天日三餐是驱动天做各各样事情能量来，物好坏接关系着天心情、情绪、状态甚至工作和生活滴滴，这也难怪物始终都是热话题。而我们样常常借助手和网络，选择更好餐，更好卖，或者寻找更加健康谱。美和技术，也是紧密关联。论这个和美相关 APP UI 背后设计目标是什么，它不仅能够帮助用户成目标，而为美加成，它有着样吸引力。

早些时候，我们已经就这个题分享过于UI 设计的想法，今天我们要探讨的这个设计实战，是个关于新鲜品设计案例研究，这个 APP 核心概念是谱卡。在这个项目，主要设计师是 Anton Morozov, Ernest Asanov 和 Vlad Taran，他们将会过分析和探讨来寻求最合理内容和导航设计。

项目目标

关烹饪和食谱的移动端APP 的 UI 设计。

简介

总的，设师需喜欢烹饪的用户设出一款辅制作出食的APP，它应该拥不断新的食谱数据库，它还应该具备食理的功能，允许用户根据家中的食相应的单，并且针对缺少的食，相应的购清单。

根据客户的偏，款应用应该包含下列的功能：

必须功能

• 搜索栏
• 过滤按钮（含相关结数量和相应过滤信息）
• 食谱卡片（食谱图片+标题）

可选功能

• 具的食谱，各种食材的用量和比
• 烹饪时长
• 卡路里
• 用来关闭和隐藏食谱的X按钮
• 添加食到购清单的按钮
• 喜欢/存 按钮
• 提供谱用户信息
• 食谱的评分
• 喜欢这个食谱的用户的数量
• 主份
• 分享按钮
• 谱来和链接
• 考虑使哪种样式来呈现食谱，格还是单列

主要问题

客户为设计团所提出的需求和构思当中，包含大量的信息和想法，设计师必须通分析优先考虑所有的要点，因为将屏幕填满信息导致载的风险很高。在研究和分析的基础上，通创建用户使用场来判断食谱当中哪信息最重要。

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

设计师为食谱卡的展示定几个不同的方案，方案的核心是让有的移动端界面尽能有效地、高效地展示核心数据。考虑到食谱卡是整个互中的关键因素，并且最终设计师决定平衡逻辑和情感，希望在用、导航和视美学之间找到平衡点。尝试不同的方向之，设计师设计出3种不同的内容局方案。其中，创意团必须基目标受众的期望找到最接近的一个。

方案A：使用列表来展示食谱

• 优点：可以将尽可能多的内容展示在屏幕上。
• 缺点：图片看起太小了。

案B：以卡片来展示谱（类似Pinterest）

• 优点：卡片极的灵活度，它的高度可以轻松匹配不同类型的内信息。
• 缺点：由采用双列局，每列的宽度比窄，而诸添加食材到购物车等互，主要是依靠长按卡来触，互是隐藏的，对用户并不够显著和。

方案C：大食谱卡片设计

• 优点：图以极大的吸引用户的注意力。
• 缺：屏幕上能显示个谱卡片，于用户而言，附加功能和交互依然不够明显。

最终的解决方案

创队最终倾向于方案C，较大的卡片计让产品拥有更有力的视觉吸引力，而这在竞争中有着显的优势。同，这也有助于搜集反馈，析数据，这些数据可以作为下一个阶段的计基础，用来提升用户体验。滑动卡片所带来的交互妙而优雅，其后可以隐藏更多的交互和操作，以及附加的功能。

其他的细节：过滤器

由于不同的食谱千差万别，用户需要通过过滤器来筛选食谱，用户则可以通过这个功能找更加适的食谱。比如可以选择仅使用当前已有食材的食谱，这用户就无需采购也能置上一的好菜。过滤器为用户提供了更多的便利。

结语

在苹果公司，创建产的时候「我们要问的第一个问题是我们希望人们感受到么」。在创建数字产之前，并是每个人都认为产设计和户的情绪是息息相的，然而事实上并非如此。户的情绪和感受才是重中之重，再努寻求产的功和体验，忽视户的情感需求。