原创精选｜一款为你带来难忘体验的美食 APP

▲点击"三分设"关注，回复"社群"加入我们

欢迎来到专业设计师学习交流社区

三分设｜连接知识，帮助全球 1 亿设计师成长

转自：TCC 翻译情报局

编辑：皮皮

共 5097 字，预计阅读 13 分钟

民以食为天，美食是人类永恒的追求。在信息爆炸的时代，人们可以迅速收集到海量美食信息，却总会因为口味的差异、信息的可靠性、评论者的可信度等因素，得不到满意的美食推荐。针对这些问题，作者设计出一款能够为你带来难忘体验的美食 APP —— Elok。从问题阐述、解决方案、设计过程和结论四方面，作者详细描述了 Elok 诞生的全过程，包括共情、定义、概念、原型、可用性测试五大设计过程。一起来学习这一完整的产品流程吧~

问题阐述

美食爱好者们总是很难找到他们认为美味的食物，尤其是当他们想在家乡尝到新菜或典型的地方菜时。面对每个人的不同口味以及美食的不同味道，“美食爱好者” 在选择推荐菜时可能会感到沮丧。

如果你想与家人或朋友聚餐，但不想花时间从网络评论中的过时信息里寻找美食，那沮丧的心情就更不用说了。即使你找到了美食，也很难将你的经历分享给那些与你有着相似口味的朋友，让他们了解到这家餐馆是多么的方便。同样的，想得到他们的推荐也并非易事。

解决方案

要提出良好的解决方案，首先需要明确的一点是，美食爱好者们正在寻找一些可供选择的地方。在了解了他们之间的独特行为后，我设计了一个 APP。这个 APP 不仅能够解决以上问题，而且还是一个可供美食爱好者们进行交流的社交平台。

Elok，这个单词结合了英语中的 “Eat” 和印度尼西亚语中的 “LOKal”（本地）。该  APP 可供用户与朋友们探讨各地美食，分享经验，交换建议，甚至为美食计划设定预算。

设计过程

为确保移动 APP 能够满足目标用户的需求，我决定创建一个好的用户体验策略，并在今后的案例研究中使用它。

一、共情

用户访谈

我决定对用户进行访谈，并分析他们的不同观点。根据诺曼·尼尔森集团的定义，我选择了 5 个人。在这一阶段，我需要更多地了解用户喜欢什么地方，以及他们在选择用餐地点时如何面对问题。我采用了 “5why 分析法“。通过不断问 “为什么”，收集到的信息让我不断接近问题的根源。在问问题之前，我先做了简单介绍。

我问的问题包括:

1. 你现在是怎么吃到这道菜的？
2. 你一般花多少时间来选择品尝何种美食？
3. 你还尝试过哪些在线点评平台？
4. 关于上述在线点评平台，哪些方面是你喜欢或不喜欢的？
5. 你认为以上平台缺失了什么？

用户语录：

• 我不会阅读陌生点评者的在线推荐，也不相信他们的品味。
• 我想花尽可能少的时间寻找美食。搜索推荐需花费大量时间，而且信息总是过时的。
• 我还没有找到一个我感兴趣的在线推荐资源。
• 在周末，我会通过品尝美食来缓解压力。我想知道我的朋友在哪里吃过美味的食物。我也想去尝试一下，并分享我的经历。
• 好友的点评比在线平台的推荐更可信，因为我们有相似的品味。
• 我会根据认识的人的推荐来选择美食，明智地花费金钱和时间。

我在采访中发现:

1. 人们没有过多时间去寻找美食。
2. 信息应该被及时更新，并且是可信的。
3. 人们喜欢在朋友和家人之间分享他们的经历，因为他们有相似的品味。

二、定义

亲和图

为了从不同的角度看问题，我分析了访谈结果，总结出一个美食爱好者需要什么，然后将它们分组，寻找相同模式。

用户研究的亲和图

竞品分析

我体验了一些现有的美食 APP，并阅读了每个用户的观点。这是获取真实用户评论的最简单的方式。此外，竞品分析有助于明确并改进 Elok 的功能特性，从而获得竞争优势。

竞品分析

用户画像

我根据用户研究结果创建了两个用户角色，收集了他们共同的动机、目标和挫折。

照片来自 Unsplash

商业目标

1. 将有着相似口味的人联系起来，让用户信任应用上的评论。
2. 为用户提供预算功能，让他们可以设置美食价格范围。

产品目标

1. 易于在用户之间提供和接收建议。
2. 提供类似价格、付款方式、营业时间、菜单以及预订方式等信息。
3. 可视化呈现附近哪些餐厅有非常棒的美食。

工作故事

我创建了两个工作故事，并以此来设计产品特性。

1. 当我来到印度尼西亚，渴望吃到那里最好的美食，或去到那里最好的餐馆时，我希望能找到一份值得信赖的美食推荐，这样我就能节省更多的时间和金钱。
2. 当我知道有重要事件即将到来的时候，我希望可以了解到一个地理位置好，并且大家都会感兴趣的地方，这样我就可以让每个人都开心。

三、概念

用户流

用户流[1]可以帮助我可视化用户与 APP 界面的交互方式。下图是用户在平台上征集美食推荐的流程。

（[1]用户流（user flow）是用户为实现有意义的目标而采取的一系列步骤。）

我将该 APP 分为三个部分：

主页 -- APP 主页包含了 用户附近的餐厅卡片，这些卡片中有着各餐厅的最佳菜单。当用户首次打开该 APP 时，无需登录即可直接转到该页面。用户在被索要个人信息之前，便可以大致了解到该 APP 的功能，这是至关重要的一点。

社区 -- 这是 寻找推荐的快速方法。当用户想尝试一些有趣的事情时，可以打开此 Tab 选项卡，询问他们的朋友，或浏览其它用户发布的评论。如果用户喜欢该评论，可以为它点赞。

个人中心 -- 管理设置、通知、好友以及注销。在此 Tab 选项卡中，用户可以添加好友或查看好友主页，查看新通知以及编辑用户个人资料。之所以在“个人中心”页面中放置通知提醒，是因为该 APP 并非通讯类 APP，便于用户自行设置，接收他们想要的信息，并屏蔽他们不需要的信息。

四、原型

草图

完成用户流之后，下一步是 绘制解决方案。我有一个很好的主意，即从 APP 概述开始，包括内容层次结构，然后选择我认为最有效的方案。由于时间不允许，我决定做纸上原型。与用户一起测试想法和用户流，然后在高保真上改进原型。

为 Elok 绘制的原型草图

线框图

当我开始画线框图时，基于来自用户的信息会更加真实，我可以将所有元素放在图中，而不用担心它的外观。我在 Figma 中设计了线框图，我喜欢看到它们排列在各自的模块中，以便于更清晰地查看整个流程。这帮助我明确了遗漏的步骤以及需要改进的行为，并确定了无用的步骤。以下是线框图：

线框图：登录 / 注册 / 忘记密码

线框图：首页 / 社区

线框图：个人中心

情绪板

Elok 的情绪版

基准:

1. Grab（东南亚打车租车服务）
2. Airbnb（爱彼迎，全球民宿短租公寓预定平台）
3. Zenly（法国实时定位应用）

引导

受 Zenly 的启发，用蓝色来做背景色，给人以舒适的视觉感受，并向用户介绍该应用的信息。

图标

Grab 通过图标来传达其具备的功能。该图标简单易懂，其背景色与 Grab 的主色——绿色相似。

卡片及个人中心

Airbnb 的卡片利用空白空间、干净的元素和标价，帮助用户快速获取所需信息，并体现出选择过程的简单性，以此鼓励用户向客人出租房子或空余房间。关于个人中心部分，它非常易于理解。

社区

Airbnb 的收件箱非常简单，它是一个 Tab 选项卡，很实用，并且不需要设计其他的底部选项卡来发送消息和通知。尤其是在我的案例中，Tab 选项卡将帮助我做出更简洁的设计。

调色板

因为美食能为人们带来幸福、快乐和乐趣，所以我 选择了柔和的橙色作为我的主题色。我希望用户在使用该 APP 时感到兴奋。我通过下图来说明用户可以体验到的情绪。

字体

我决定使用 Poppins 字体，因为它 有多种字重，而且易于阅读。此外，Poppins 是一种圆形字体，调整字体大小后将更有趣，而且有助于保持外观的整洁。

高保真

引导页

引导页通常指用户首次与 APP 交互时呈现的一组界面，它为新用户提供了关于该产品的信息。引导页可以帮助新用户快速洞察该 APP 解决了什么问题，它是如何帮助用户的，以及它提供了什么好处。

登录页

除了传统的电子邮件注册及登录方式，我还添加了社交账号登录方式。为了提高效率，我在此不展示注册过程。其注册过程类似于登录过程，但我会要求用户输入用户名。

首页

为了避免冗余，这里不显示权限请求的过程。在主页界面中，我请求访问用户位置及联系人，并请求通知推送权限。

• 我会在主页顶部显示用户所在的位置，让用户感觉美食好像就在周围。
• 研究期间，我考虑到人们通常会搜索正宗的食物，或点击该区域内的食物，以及 24 小时随时可获取到的食物，特别是对于那些在午夜或清晨寻找食物的人。
• 排序功能，能够帮助用户按评分、价格、送餐速度对食物进行排序。

主页功能

在点击 “菜系”、“预算”、“聚会类型” 时，用户将进入一个页面，上面有不同菜系的列表，可以为某种食物设定最低或最高的价格，并选择享用美食的地方。这将有助于用户做出决策。

详情页

1. 后退按钮：返回上一页，即主页。
2. 分享及心愿单：通过社交媒体分享用户喜欢的食物，并记录下用户想要尝试的美食。
3. 食物大图：让用户对他们选择的食物有所期待。这是一种让人们感受食物的方式，而关于食物的文字描述是无法做到这一点的，用户更喜欢提供多图的商家。
4. 信息：为用户提供他们需要了解的食物关键信息。
5. 致电：致电餐厅预订或获取更多信息。
6. 菜单：为用户提供食品和饮料清单及其价格。
7. 付款：饭店支持的付款方式。
8. 位置：打开地图，告知用户前往餐厅的方式。
9. 设施：餐厅提供的设施清单。
10. 评分和评论：可评估食物的质量。
11. CTA 按钮[2]："显示所有 500 条评论" 这一按钮必须明显地显示在页面上。如果用户想继续阅读评论，他可以自行选择。
12. 添加评论：用户写下对食物的意见。

（[2]CTA（Call to Action，用户行为召唤）：CTA 按钮明确地告诉用户下一步该做什么，引导用户进行下一步操作。）

分享推荐

用户实际上可以看到关于印度尼西亚附近美食的所有讨论，但他们只能根据所在地给出建议。

• 过滤器允许用户选择特定城市进行讨论。
• 查看所有讨论，然后通过三个选项卡推荐食物或餐厅。第一步是点击 “讨论卡”，第二步是点击 “写推荐”，第三步是点击 “发布” 按钮发布您的推荐。这个简单的步骤非常好，用户只需三次点击即可对食物或餐厅进行评论。
• 点击卡片，用户可以了解更多关于推荐人的信息。

发布需求

如果您是新用户，并且从不写推荐，那么 “我的帖子” 页面为空白状态。当用户在印度尼西亚，该 APP 允许用户在任何时候发布需求，获取所需的推荐。用户可以输入想去的地点，或使用当前位置，然后输入所需的食物或餐厅类型，点击 “发布” 按钮发布问题。

个人中心

最后一个页面是 “个人中心”，但出于项目范围的考虑，我暂时不重点关注该页面。在此页面中，用户可以通过绑定其它账户来搜索或查看列表中的好友。

五、可用性测试

在完成高保真设计后，我制作了项目原型，并邀请受访者完成一些测试任务。我选择了涵盖该 APP 主要功能的测试方案。之后，我进行了用户测试并获取了整体反馈。

结论

这是我第一次尝试从头开始设计 APP，这是一个极具挑战性的全新体验。我意识到研究阶段非常重要。用户可以告诉你产品应该往哪个方向走，以及你的不足之处是什么。我想确保这个 APP 是被用户所需要的，且拥有良好的市场。事实证明，很多人都想要这样的服务。长远地看，比起在产品准备好后才获得反馈，来自导师及朋友的每个阶段反馈都非常有价值。通过这个项目，我更深刻地理解到设计系统的重要性，因为它在生产力和效率方面对我有很大的帮助。

我花了五周时间达到现在的目标，这是我接下来的计划：

1. 使用分析功能为新用户推荐具有相似品味的用户。
2. 通过 APP 预订餐厅。
3. 开发一个功能，允许用户寻求反馈，从而了解到自己的推荐是否符合其它用户的期望。
4. 若某用户推荐符合大多数用户的期望，为其提供推荐徽章。
5. 制定产品扩展计划（网络版本）。
6. 还有更多，敬请期待！

---

超值课程推荐
华为用户体验设计的体系搭建方法
超 10 亿用户的产品，到底是怎么做用户体验的？
揭秘滴滴、蔚来等大厂的用户体验设计策略
原创好文推荐2021 年用户体验设计趋势分析想要引导用户行为转化，设计师必须深刻理解这 4 个认知心理学理论
让设计圈一片哗然的 Google 新 logo 到底出了什么问题？国外的设计专家这么说
如何系统的增强用户粘性，提升产品转化率？你要懂得“行为设计学”
设计新趋势「玻璃拟态」到底是什么？这里有一份实现效果的详细教程
如何将设计系统快速的从 Sketch 切换到 Figma？这里有 6 个需要注意的关键点

---

欢迎大家关注三分设，每天分享优质设计、创意灵感、新知新识，定期大咖老师直播分享，零距离连麦，答疑解惑。