online-order-h5/UI_DESIGN_BRIEF.md

UI Design Brief - Restaurant Management System

Project Name: LINE Order App
Target Platform: Mobile Web (iOS/Android)
Design Tool: Stitch AI
Version: 1.0
Date: 2026-01-15

---

1. Project Overview

A multi-mode restaurant ordering and management system built as a Progressive Web App, supporting 4 distinct operational modes with seamless switching between them.

Core Modes

1. Platform Mode (店铺聚合) - Marketplace homepage with shop discovery
2. Customer Mode (顾客点餐) - Menu browsing and ordering for dine-in or takeaway
3. POS Mode (店员端) - Staff interface for table and order management
4. Owner Mode (店长后台) - Management dashboard for shop owners

---

2. Design Requirements

2.1 Visual Style

• Design Language: Modern, clean, and friendly
• Color Palette:
  • Primary: Fresh orange/green for CTAs (order button, add to cart)
  • Secondary: Warm neutrals (beige, light gray) for backgrounds
  • Accent: Status colors (green for available, yellow for occupied, red for alerts)
• Typography:
  • Headings: Bold, clear sans-serif
  • Body: Readable, 14-16px base
  • Support for multilingual (Japanese, English, Chinese)
• Iconography: Simple, recognizable icons for food categories and actions
• Spacing: Generous padding for touch targets (min 44px)

2.3 Theme System (New Requirement)

The application must support a dynamic theming system allowing for branded experiences.

• Theme Sources:
  1. User Setting: Users can select preferred themes in "Settings" (e.g., Light, Dark, System).
  2. Backend Configuration: Shops can enforce a specific brand theme (Primary Color, Logo, Font) via backend parameters.
• Priority Logic: Backend Shop Theme > User Preference > Default System Theme.
• Design Deliverables:
  • Mockups should demonstrate the same screen in 2-3 different color themes (e.g., "Default Orange", "Sushi Zen Black", "Matcha Green").
  • "Settings" page must include a specialized Theme Selector UI.

2.2 Mobile-First Principles

• Bottom Navigation: Fixed tab bar for primary navigation
• Thumb-Friendly: Critical actions within reach zone
• Card-Based: Content organized in cards for easy scanning
• Swipe Gestures: Support for common mobile interactions

---

3. Page-by-Page Specifications

3.1 Platform Mode (首页)

Route: /#/index

Purpose: Shop discovery and selection with location-based services

Layout:

┌─────────────────────────┐
│ [Location] 📍 [Search]  │ ← Top Bar
├─────────────────────────┤
│ 🎯 Banner Carousel      │ ← Promotions (3-5 slides)
├─────────────────────────┤
│ 🍱 Category Grid        │ ← Food types (4 columns)
│ [中華] [和食] [洋食] [カフェ]│
├─────────────────────────┤
│ 📍 Nearby Shops         │ ← Shop Cards (scrollable)
│ ┌──────────────────┐   │
│ │ [Shop Image]     │   │
│ │ Shop Name        │   │
│ │ ⭐4.8 | 📏1.2km  │   │
│ │ ¥¥¥ | 営業中    │   │
│ └──────────────────┘   │
├─────────────────────────┤
│ [Home][Menu][Order][Me] │ ← Bottom Nav
└─────────────────────────┘

Key Components:

• Location picker with current address display
• Search bar with autocomplete
• Horizontal scrolling banner
• Category grid (2x4 or 3x3)
• Shop card with: photo, name, rating, distance, price range, status badge

---

3.2 Customer Mode - Menu Page

Route: /#/menu?shopId=xxx&tableCode=xxx

Purpose: Browse menu and add items to cart

Layout:

┌─────────────────────────┐
│ ← Shop Name      🔍 🛒3 │ ← Nav bar with cart badge
├──┬──────────────────────┤
│菜│ 🔥 Recommended       │ ← Sticky category tabs
│品│ ┌──────────┐         │
│  │ │[Dish Img]│ ¥1200  │ ← Dish card
│酒│ │Gyoza     │  [+]   │
│水│ └──────────┘         │
│  │ ┌──────────┐         │
│デ│ │[Dish Img]│ ¥800   │
│ザ│ │Ramen     │  [+]   │
│｜│ └──────────┘         │
│ト│                      │
├──┴──────────────────────┤
│ 🛒 Cart: ¥2000  [Order]│ ← Sticky bottom bar
└─────────────────────────┘

Key Features:

• Left Sidebar: Scrollable category list with active indicator
• Main Area: Dish cards with image, name, price, quick add button
• Filter/Sort: Row of filter chips (辛さ, 新商品, ベジタリアン)
• Cart Bar: Always visible with total and checkout button
• Empty State: Friendly illustration when no items selected

Interaction:

• Tap card → Open detail modal with options
• Tap [+] → Quick add (increment counter)
• Swipe categories → Scroll to section

---

3.3 Customer Mode - Cart & Checkout

Route: /#/cart

Layout:

┌─────────────────────────┐
│ ← Shopping Cart         │
├─────────────────────────┤
│ 📋 Table A01            │ ← Context info
├─────────────────────────┤
│ ┌─────────────────────┐│
│ │ Gyoza x2      ¥2400 ││ ← Cart item
│ │ [−] 2 [+]     [🗑️]  ││
│ └─────────────────────┘│
│ ┌─────────────────────┐│
│ │ Ramen x1      ¥800  ││
│ │ [−] 1 [+]     [🗑️]  ││
│ └─────────────────────┘│
├─────────────────────────┤
│ Subtotal:        ¥3200 │
│ Tax (10%):        ¥320 │
│ ─────────────────────  │
│ Total:           ¥3520 │
├─────────────────────────┤
│ [Place Order] 🟢       │ ← Large CTA button
└─────────────────────────┘

---

3.4 POS Mode - Table Management

Route: /#/pos/tables

Purpose: Visual table status overview for staff

Layout:

┌─────────────────────────┐
│ POS - Tables    👤 Staff│
├─────────────────────────┤
│ [All] [1F] [2F] [VIP]   │ ← Filter tabs
├─────────────────────────┤
│ Available: 8  Occupied: 4│ ← Status summary
├─────────────────────────┤
│ ┌──────┐ ┌──────┐       │
│ │ A01  │ │ A02  │       │ ← Table grid
│ │ 🟢   │ │ 🟡   │       │   Color-coded by duration
│ │ 4👤  │ │ 2👤  │       │
│ │      │ │ 35min│       │
│ └──────┘ └──────┘       │
│ ┌──────┐ ┌──────┐       │
│ │ B01  │ │ B02  │       │
│ │ 🔴   │ │ 🟢   │       │
│ │ 6👤  │ │ 8👤  │       │
│ │125min│ │      │       │
│ └──────┘ └──────┘       │
└─────────────────────────┘

Color Coding (Time-based):

• 🟢 Green: 0-30 min (新入座)
• 🟡 Yellow: 30-60 min (正常)
• 🟠 Orange: 60-120 min (偏 long)
• 🔴 Red: >120 min (预警)

---

3.5 Owner Mode - Dashboard

Route: /#/owner/dashboard

Purpose: Sales overview and KPIs

Layout:

┌─────────────────────────┐
│ Dashboard       📅 Today│
├─────────────────────────┤
│ ┌─────────┐ ┌─────────┐│
│ │ ¥125,000│ │  68     ││ ← Big KPI cards
│ │ Revenue │ │ Orders  ││
│ │ (+12%)  │ │ (+5%)   ││
│ └─────────┘ └─────────┘│
├─────────────────────────┤
│ 📊 Sales Trend          │
│ [Line Chart Area]       │ ← Chart component
├─────────────────────────┤
│ 🔥 Top Dishes           │
│ 1. Gyoza      ¥24,000  │
│ 2. Ramen      ¥18,000  │
│ 3. Tempura    ¥12,000  │
├─────────────────────────┤
│ [Reports][Shops][Menu]  │ ← Quick actions
└─────────────────────────┘

---

4. Component Library

4.1 Buttons

• Primary CTA: Large, rounded, high contrast (orange/green)
• Secondary: Outlined, gray
• Icon Button: Circular with icon only
• States: Default, Hover, Active, Disabled

4.2 Cards

• Shop Card: Image top, content below, shadow on hover
• Dish Card: Image left (square), text right, add button
• Order Card: Horizontal layout with status badge

4.3 Forms

• Input Fields: Rounded corners, clear labels, validation states
• Selectors: Dropdown, radio, checkbox
• Stepper: [−] number [+] for quantity

4.4 Navigation

• Tab Bar: 4-5 items, icons + labels, active indicator
• Nav Bar: Back button, title, actions
• Category Sidebar: Vertical scrollable list

4.5 Feedback

• Toast: Temporary message at bottom
• Modal: Centered overlay for details
• Badge: Notification count on cart icon
• Status Dot: Color indicator for tables

---

5. User Flows

Flow 1: QR Code Ordering (Guest)

Scan QR → Menu Page (Guest Mode) → Select Items → Cart → Place Order → Order Confirmation

Key Screens:

1. Menu with tableCode in URL
2. Cart showing table number
3. Success page with order number

Flow 2: Table Management (Staff)

POS Login → Table Grid → Select Table → View Orders → Update Status → Clear Table

Key Screens:

1. Table overview with color indicators
2. Table detail with current orders
3. Action buttons (serve, clear, split bill)

Flow 3: Shop Discovery (Customer)

Homepage → Browse Shops → Select Shop → Menu → Cart → Checkout

---

6. Responsive Breakpoints

• Mobile: 375px - 767px (Primary focus)
• Tablet: 768px - 1024px (POS mode optimized)
• Desktop: 1025px+ (Admin/Owner mode)

---

7. Accessibility

• Touch Targets: Minimum 44x44px
• Contrast: WCAG AA compliant
• Text Size: Scalable, readable
• Icons: Always paired with labels for clarity

---

8. Deliverables Needed from Stitch

Priority 1 (Core Screens)

1. ✅ Platform Homepage (shop discovery)
2. ✅ Menu Page (customer ordering)
3. ✅ Cart & Checkout
4. ✅ POS Table Grid
5. ✅ Owner Dashboard

Priority 2 (Support Screens)

1. Login page
2. Order list
3. Order detail
4. Profile page
5. Table detail (POS)

Priority 3 (Components)

1. Bottom navigation bar
2. Shop card component
3. Dish card component
4. Modal overlays
5. Empty states

---

9. Design Constraints

• File Format: Figma or Sketch compatible
• Color Modes: Light mode (primary), Dark mode (optional)
• Languages: Design should accommodate Japanese text length
• Branding: Modern Japanese restaurant aesthetic
• Icons: Use outlined style, consistent set

---

10. Reference Inspiration

Similar Apps:

• Uber Eats (for shop discovery)
• TableCheck (for table management)
• Square POS (for staff interface)
• Hot Pepper Gourmet (for Japanese market feel)

Design Principles:

• Prioritize speed of ordering
• Clear visual hierarchy
• Minimalist but warm
• Trust-building (reviews, photos, status indicators)

---

Contact & Questions

For design clarifications or additional requirements, please refer to:

• Technical documentation: README.md
• Product requirements: 餐饮管理系统需求规格说明书 (PRD).md
• Project structure: /src directory

---

End of Brief