We began by asking whether transportation was the main difficulty. Japanese-language questionnaires shifted our attention toward understanding food and ordering at night markets.我們原先關注日本旅客的交通困難。透過日文問卷,注意力逐漸轉向夜市裡看懂食物、開口點餐的需求。
よいちかぞく 夜市家族夜市家族
An app to help Japanese visitors understand night-market food and order it. The project began with travel needs, then narrowed to the gap between seeing a stall and knowing what it sells. I ran the traveler survey and handled the competitor analysis, helping the team connect sign recognition with food information.協助日本旅客看懂夜市食物、開口點餐的 APP。專案從旅行需求出發,逐漸聚焦於看見攤位卻不清楚販售內容的困難。我負責執行旅客問卷與競品分析,協助團隊將招牌辨識與食物資訊連結起來。
From travel needs to the food in front of us從旅行需求,走近眼前的食物
-
01 / TRAVEL SURVEY01 / 旅遊問卷
Travel barriers旅行中的阻礙
7 of 12 responses mentioned language or communication; two mentioned transportation.12 份回覆中,7 份提到語言或溝通,2 份提到交通。
-
02 / NIGHT-MARKET SURVEY02 / 夜市問卷
An interest in food對夜市飲食的興趣
All 22 respondents selected food and drink among the stalls that interested them.22 位回覆者全數在感興趣的攤位類型中勾選飲食。
-
03 / TEAM FOCUS03 / 小組收斂方向
Understand, then order看懂食物,再開口點餐
Focus the app on the gap between seeing a stall and knowing what it sells.將 APP 聚焦於看見攤位卻不清楚販售內容的那段落差。
-
Use stall signs as the entry point從招牌辨識切入
Plan sign photography in the field; keep menu recognition secondary.規劃實地拍攝招牌,菜單辨識列為次要範圍。
-
Build food information around it補上理解食物所需的資訊
Organize names, ingredients, cooking methods and pronunciation in a spreadsheet.以試算表整理名稱、食材、做法與發音。
-
Choose foods for the demo用想吃的食物建立展示內容
Start with foods respondents wanted to try.以問卷中受歡迎的食物作為展示內容。
Travel survey: 12 responses; night-market survey: 22. The chart shows multiple-choice responses from 20 people who had visited a night market.旅遊問卷 12 份、夜市問卷 22 份;圖表呈現 20 位夜市訪客的複選回覆。
Yamada Kenichi, 25, Osaka山田健一,25 歲,大阪
Yamada is a design persona built from themes in the survey. The background and quotation below make the scenario concrete.山田是綜合問卷主題建立的設計角色。以下背景與引言用來具體化使用情境。
- Name姓名
- 山田健一 Yamada Kenichi山田健一 Yamada Kenichi
- Age年齡
- 2525
- Job職業
- Office worker, mid-range salary上班族,中等薪資
- Lives in居住地
- Osaka, single, living with family大阪人,單身,與家人同住
- Travel style旅行偏好
- Travels solo, goes deep, follows the food routes he finds on social media獨自旅行、深度體驗、會跟著社群上的美食路線踩點
- Goal in Taiwan在台目標
- Eat the local way: recognize it, order it想用在地的方式品嚐美食,認得出它、點得到它
“I can tell it’s food, but I don’t know what it’s called, what’s in it, or how to ask for it.”「我大概看得出那是食物,但我不知道它叫什麼、裡面有什麼,也不知道該如何開口點餐。」
- Sign recognition The characters look familiar. In Japanese they mean something else entirely, which makes them easy to read wrong.招牌辨認 漢字看似熟悉,字義卻與日文截然不同,易生誤判。
- Unfamiliar appearance What arrives doesn’t match what he pictured, and it may contain something he has to avoid.外觀陌生 實際菜色與想像有落差,可能包含忌口的成分。
- Ingredients & method He can’t tell what is in the sauce, how it was cooked, or how hot “a little spicy” actually gets.食材與做法 不確定醬汁、烹調方式,以及「小辣」的實際程度。
- Ordering language He can point and say “this one.” Anything more specific is out of reach.點餐語言 除了用手指著說「這個」,難以具體表達其他需求。
Where a Japanese traveler can get stuck at a night market.一位日本旅客逛夜市時可能遇到的困難。
Read the sign. Get to know the food.先看懂招牌,再慢慢認識這道菜。
Browse Tainan’s night markets, save dishes you want to try, or scan a sign to prepare an ingredient question card for the vendor.你可以逛逛台南夜市、收藏想吃的菜色,或從一張招牌,一路找到能拿給攤商看的食材確認卡。
2026 web remake of the 2024 Flutter course prototype. Sign recognition is simulated.2026 年網頁重製版。原作為 2024 年課程的 Flutter 原型,招牌辨識為模擬。
A translated name still leaves questions翻出菜名,還是不知道會吃到什麼
Recognizing the words on a sign does not explain the food. “Dongshan Duck Head,” for example, tells a traveler little about the available ingredients or how they are prepared, making it hard to judge whether the dish suits their preferences. We needed to provide food information alongside the translated name.辨識出招牌文字,不代表旅客就能理解菜色。例如「東山鴨頭」被翻成「Dongshan Duck Head」後,旅客仍不知道有哪些食材、如何料理,也難以判斷是否符合自己的飲食偏好。因此,我們需要在菜名之外提供食物資訊。
We visited three night markets in Tainan and photographed 48 signs covering 32 foods. We annotated each with its name, background, preparation, common ingredients, and dietary restrictions. A recognized sign could then lead to an explanation of the food, rather than just a translated name.我們走訪台南三間夜市,拍下涵蓋三十二種食物的四十八張招牌照片,並標註名稱、菜餚故事、烹調方式、常見食材與飲食禁忌。辨識結果因此能連到對應的介紹,而不只是一個翻譯後的菜名。
The gap left by translation apps and travel apps翻譯與旅遊 APP 的服務缺口
Before development, we reviewed general translation apps and travel apps for Taiwan’s night markets. The former handled text and speech but offered little detail about food; the latter focused on places and stall recommendations without providing translation.開發前,我們評估了市面上的通用型翻譯 APP 與台灣夜市旅遊 APP,前者擅長文字與語音翻譯,但缺乏對食物的深度介紹。後者著重地標與攤位推薦,卻不支援翻譯。
| Feature功能 | App AApp A | App BApp B | App CApp C |
|---|---|---|---|
| Chinese / Japanese translation中/日翻譯 | yes有 | yes有 | yes有 |
| OCR text recognitionOCR 文字辨識 | yes有 | yes有 | yes有 |
| Optimized for street food對街頭小吃的優化 | —— | —— | —— |
| Voice synthesis語音合成 | yes有 | yes有 | yes有 |
| Food introduction / information食物介紹/資訊 | —— | —— | —— |
| Feature功能 | App DApp D | App EApp E |
|---|---|---|
| Nearby night-market recommendations附近夜市推薦 | yes有 | yes有 |
| Map and landmark search地圖與地標查詢 | yes有 | —— |
| Stall recommendations攤位推薦 | —— | yes有 |
| Translation翻譯 | —— | —— |
| Food introduction / information食物介紹/資訊 | —— | —— |
From sign recognition to food information把辨識結果接上食物資訊
Among the five apps we compared, translation and night-market guides served different needs, but neither offered detailed food information. The team built the basic functions first, then added night-market sign recognition and dish descriptions so travelers could go from identifying a sign to understanding ingredients and preparation.在我們比較的五款 APP 中,翻譯與夜市導覽各有側重,食物介紹卻是共同的缺口。因此團隊先完成基礎功能,再加入夜市招牌辨識與菜色資訊,讓旅客從認出招牌,一路查到食材與做法。
Thirty-eight local dishes三十八道在地美味
For the 2026 web remake, AI-generated images give the 38 dishes a consistent studio style. The library also includes images of common ingredients people may want to avoid.2026 年製作網頁重製版時,以 AI 生成統一棚拍風格的食物圖片,供三十八道餐點的展示使用,並補充常見忌口食材的圖像。












Logo and paletteLOGO 與配色
The key visual and the color palette, set early so the interface holds together.主視覺與色彩設定確保介面風格的一致。
Three things we learned我們學到的三件事
Looking back over four months, three practical lessons stand out: recognition needs to suit the setting, the way we collect data limits how far it can scale, and design handoff dates shape the time available for engineering.回看四個月的開發,最值得保留的是幾項具體經驗:辨識模型需要貼近使用場域,資料蒐集方式會限制擴展規模,設計交付時間則影響工程端能做多少。
Training for night-market signs針對夜市招牌訓練辨識模型
The team built a training set from 48 night-market sign photographs to improve recognition in that setting. The project focused our attention on how closely the training material matched real signs, rather than simply how much text a general-purpose tool could recognize.團隊以四十八張夜市招牌照片建立訓練資料,針對這個場域改善辨識。這次專案讓我們把注意力放在資料是否貼近實際招牌,而不只是通用工具能辨識多少文字。
The commercial potential of the database資料庫的商業化潛力
Photographing and annotating signs individually would be difficult to scale across Taiwan’s night markets. A commercial version could use a shared upload platform managed by market administrators, or let vendors create and maintain their own sign listings in the app.手工拍照與逐筆標註難以擴展至全台夜市。未來若要實現商業化,可以考慮由夜市管理單位建立統一的上傳平台,或開放攤商在 APP 內自行建立並維護招牌檔案。
Giving engineering time to build為工程開發留出時間
At the start of the semester, we agreed to deliver the complete design package in week seven, leaving time for model training and development. After handoff, the design team shifted to asset support and project management as integration continued.學期初,我們就約定設計端在第七週交付完整設計包,為工程端留下模型訓練與開發時間。交付後,設計端轉為素材支援與專案管理,配合後續整合。
The six of us, from different fields來自不同領域的我們
A six-person project for a joint course offered by NCKU’s Industrial Design and Computer Science graduate programs.本案是成大工設所與資工所合開課程的作品,團隊共六人。
Design side (leading through week seven, then asset support and project management)設計端,前七週主導,後續轉為素材支援與專案管理
Survey, persona, paper prototype, wireframe. After the handoff the design side switched to supporting the engineers, and hosted the midterm and final presentations.問卷、persona、paper prototype、wireframe。交付之後,設計端轉為支援工程團隊,並主持期中與期末報告。
- 許庭瑜 Hsu Ting-Yu許庭瑜 Hsu Ting-Yu Presentations & Content Writing主持發表與語料撰寫 Hosted the midterm and final presentations. Japanese at N2 level: wrote the food introductions and proofread the Japanese copy.主持期中與期末報告。具備日文 N2 能力,負責撰寫食物介紹與日文校對。
- 顧文宇 Ku Wen-Yu顧文宇 Ku Wen-Yu Research & Survey Fieldwork研究與問卷執行 Ran the traveler survey, helped shape the persona, and built the competitor and iteration-strategy matrices.執行旅客問卷、協助建立人物誌,並以矩陣分析競品與迭代策略。
- 陳禹任 Chen Yu-Jen陳禹任 Chen Yu-Jen UX / UI DesignUX / UI 設計 Turned the wireframes into a high-fidelity Figma interface, and set the brand logo, the colors and the visual rules.將線框稿轉化為 Figma 高擬真介面,並制定品牌 LOGO、色彩與視覺規範。
Engineering side · build from week seven工程端 · 第 7 週之後開發
From Figma to a working Flutter app: integration, model training, and the mobile-side features.從 Figma 到可運作的 Flutter App,負責整合、模型訓練與行動端功能。
- 李宗翰 Lee Tsung-Han李宗翰 Lee Tsung-Han Software Engineering & Integration軟體工程與整合 Ran the schedule for the back half of development, and tied the recognition model, the camera flow and the interface together.管控後半段開發時程,整合辨識模型、相機流程與介面。
- 洪靖睿 Hong Jing-Rui洪靖睿 Hong Jing-Rui Database & Model Training資料庫訓練工程 Trained a night-market model on annotated signs to improve OCR.以標註的招牌照片訓練夜市模型,改善 OCR 辨識。
- 鄭勝謙 Cheng Sheng-Chien鄭勝謙 Cheng Sheng-Chien Mobile Front-End Engineering行動前端工程 Built the Flutter front end and wired up the standard device features, camera capture and haptics among them.開發 Flutter 前端,整合相機擷取、觸覺回饋等常規功能。