|
|
@@ -0,0 +1,402 @@
|
|
|
+# 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)
|
|
|
+
|
|
|
+6. Login page
|
|
|
+7. Order list
|
|
|
+8. Order detail
|
|
|
+9. Profile page
|
|
|
+10. Table detail (POS)
|
|
|
+
|
|
|
+### Priority 3 (Components)
|
|
|
+
|
|
|
+11. Bottom navigation bar
|
|
|
+12. Shop card component
|
|
|
+13. Dish card component
|
|
|
+14. Modal overlays
|
|
|
+15. 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**
|
FanLide