# 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**