Dish Decode

Understand any menu, anywhere

Simply take a photo of any menu
and get instant translations with dish details

Pro tip: Hold your phone steady for best results
Keeping your phone parallel to the menu helps our AI recognize text more accurately!

Translated Menu

Golden Dragon Restaurant

Detected: Chinese
Original menu image:
Menu
Tap on info icons for detailed dish information Each dish has an info button that reveals ingredients, allergens, and more!

Appetizers

Spring Rolls

Crispy rolls with vegetables

¥28

Wonton Soup

Dumplings in clear broth

¥32

Steamed Dumplings

Pork and vegetable filling

¥38

Main Dishes

Kung Pao Chicken

Spicy chicken with peanuts

¥68

Mapo Tofu

Spicy tofu with minced pork

¥58

Sweet and Sour Fish

Crispy fish with tangy sauce

¥88

Beef with Broccoli

Tender beef with vegetables

¥78

Rice & Noodles

Fried Rice

Rice with eggs and vegetables

¥42

Dan Dan Noodles

Spicy Sichuan noodles

¥48

Desserts

Mango Pudding

Creamy mango dessert

¥28

Sesame Balls

Sweet rice balls with filling

¥32

Analyzing menu...

Detecting language and menu items

Dish Decode: Design Story

1. 需求洞察与痛点分析

目标用户画像

旅行者 Sarah

28岁，英语母语者

热爱旅行的美国人，经常独自或与朋友探索亚洲国家。对尝试地道美食充满热情，但语言障碍常让她感到困扰。

商务人士 Michael

42岁，英语母语者

经常出差到亚洲国家的销售经理。需要与客户共进晚餐，但担心因菜单理解不足而出现尴尬情况。

留学生 Emma

22岁，英语母语者

在亚洲国家学习的留学生。想要融入当地文化，但对菜单上的食物成分和烹饪方式缺乏了解。

核心用户痛点

痛点1：语言障碍导致的菜单理解困难

用户面对非英语菜单时，不仅无法理解菜名，更无法获知菜品的具体成分、烹饪方式和口味特点，导致点菜时的不确定感和焦虑。

痛点2：缺乏文化背景知识导致的选择困难

即使菜名被翻译成英文，用户也常常不理解菜品的文化背景、传统吃法和搭配方式，难以做出符合个人口味和饮食习惯的选择。

痛点3：饮食限制和过敏源信息缺失

对于有特殊饮食需求（如素食主义者）或食物过敏的用户来说，无法确认菜品是否含有特定成分，增加了健康风险和用餐焦虑。

用户旅程图

graph TD A[进入餐厅] -->|拿到菜单| B(面对非英文菜单) B -->|感到困惑| C{尝试理解菜单} C -->|使用Dish Decode| D[拍照/上传菜单] D --> E[获取翻译和详细信息] E --> F[查看菜品详情] F --> G[做出明智的点餐决定] C -->|不使用工具| H[随机点菜] H -->|可能不符合期望| I[用餐体验受影响] style D fill:#FF6B6B,stroke:#FF6B6B,color:white style E fill:#FF6B6B,stroke:#FF6B6B,color:white style F fill:#FF6B6B,stroke:#FF6B6B,color:white style G fill:#4ECDC4,stroke:#4ECDC4,color:white

2. 设计系统与风格定义

设计风格选择

Dish Decode采用了现代简约风格，融合了温暖友好的元素，旨在创造一个既专业可靠又亲切易用的体验。设计风格的选择基于以下考虑：

简约清晰的界面

在陌生环境中使用App时，用户往往处于轻度压力状态。简约的界面设计减少了认知负担，让用户能够快速理解功能并获取所需信息。

温暖友好的色彩系统

主色调选择温暖的珊瑚红，辅以清新的薄荷绿，创造愉悦且与食物相关的视觉体验，同时传达信任感和专业性。

直观的信息层级

通过卡片式设计和清晰的视觉层级，帮助用户快速区分菜单类别、菜品名称和详细信息，模拟实体菜单的浏览体验。

文化敏感的视觉语言

设计元素避免文化刻板印象，采用中性且现代的视觉语言，尊重多元文化背景，同时保持界面的一致性和专业性。

色彩系统

主色调

#FF6B6B

辅助色

#4ECDC4

强调色

#FFE66D

文本色

#292F36

背景色

#F7FFF7

色彩选择考虑了以下因素：

  • 珊瑚红（#FF6B6B）作为主色调，传达温暖、热情和食物相关的联想
  • 薄荷绿（#4ECDC4）作为辅助色，带来清新感和平衡感
  • 柔和的黄色（#FFE66D）用于强调重要信息和引导用户注意
  • 深色文本确保良好的可读性，浅色背景提供舒适的阅读环境
  • 功能性色彩（如警告、成功等）保持一致的语义关联

组件系统

按钮系统
卡片与容器

信息卡片

用于组织和展示相关内容

标签系统
口味标签 类型标签 过敏源 饮食限制

3. 痛点驱动的设计解决方案

痛点1解决方案：智能菜单翻译与信息增强

设计响应
  • 简化的拍照/上传流程，仅需一步即可获取翻译结果
  • 保留原始菜单的视觉布局，同时提供清晰的英文翻译，帮助用户建立视觉关联
  • 为每道菜添加简短描述，提供即时的基本理解
  • 通过信息图标指示可获取更多详情，不占用主界面空间但保持信息可访问性
关键设计元素

原始菜单图片展示

保留原菜单视觉参考，帮助用户在实体菜单上定位菜品

分类清晰的菜单结构

保持与原菜单相同的分类，便于理解菜品在餐食中的定位

简洁的菜品描述

每道菜配有简短描述，提供即时理解而不需深入阅读

信息图标指示

清晰标识可获取更多信息的入口，不干扰主界面浏览

痛点2解决方案：文化背景与口味解析

设计响应
  • 详情弹窗中提供符合西方理解方式的口味描述，使用熟悉的形容词（如"savory"、"tangy"）
  • 通过视觉化的标签系统，快速传达菜品的关键特性
  • 提供菜品类型信息（主食、配菜等），帮助用户理解如何组合点餐
  • 详细描述使用西方饮食文化中的类比，帮助用户建立认知连接
关键设计元素

口味标签系统

使用简洁直观的标签，快速传达菜品的口味特点

菜品类型指示

明确标示菜品在餐食中的定位，帮助合理搭配点餐

详细且易理解的描述

使用西方文化视角描述菜品，增强理解和共鸣

菜品图片展示

提供视觉参考，减少想象障碍，增强决策信心

痛点3解决方案：饮食限制与过敏源信息

设计响应
  • 在详情弹窗中突出显示潜在过敏源信息，使用醒目的标签设计
  • 提供明确的饮食限制信息（素食、无麸质等），帮助特殊饮食需求的用户
  • 将过敏源和饮食信息放在详情页底部，确保用户在做决定前能看到这些关键信息
  • 使用颜色编码区分不同类型的标签，增强信息的视觉识别度
关键设计元素

过敏源标签

使用警示色系的标签，突出显示潜在过敏源

饮食限制标签

清晰标示菜品是否适合特定饮食习惯（素食、无麸质等）

信息分区布局

将健康相关信息放在详情页底部，确保用户不会忽略

颜色编码系统

不同类型信息使用不同颜色，提高扫描效率

4. 设计亮点与创新点

无缝拍照体验

简化的拍照流程，无需多步操作，直接从主屏幕进入拍照或选择照片，减少用户在餐厅环境中的操作时间和注意力分散。

保留原始菜单布局

翻译结果保持原始菜单的视觉结构，帮助用户在实体菜单和App之间建立关联，减少认知负担，增强使用信心。

多维度标签系统

创新的多维度标签系统，通过颜色和形状编码，在紧凑空间内传达丰富信息，使用户能快速识别菜品特性、过敏源和饮食限制。

文化敏感的信息呈现

菜品描述采用西方文化视角，但尊重原始菜品的文化背景，避免过度简化或曲解，在跨文化理解和保持真实性之间取得平衡。

情感化的用户引导

通过温暖的色彩、友好的提示文案和适度的动效，减轻用户在陌生环境中的焦虑感，创造愉悦的使用体验，增强用户信心。

分层信息架构

采用"需要时才显示"的信息设计原则，主界面保持简洁，详细信息通过弹窗呈现，平衡了信息丰富度和界面清爽度，适应不同深度的用户需求。