Skip to content

design_guidelines.md

Latest commit

 

History

History
253 lines (198 loc) · 6.48 KB

design_guidelines.md

File metadata and controls

253 lines (198 loc) · 6.48 KB

BoardCam Design Guidelines

Authentication & User Architecture

No authentication required - BoardCam is a single-user utility app focused on local PCB analysis.

Local Profile/Settings:

  • User avatar (1 preset icon: circuit board or PCB-themed)
  • Display name field for personalization
  • App preferences accessible via Settings screen

Navigation Architecture

Root Navigation: Tab Navigation (4 tabs + Floating Action Button)

Tab Bar Structure:

  1. Home (Home icon)
  2. History (Clock/History icon)
  3. Floating Camera Button (centered, elevated) - Primary action
  4. Settings (Gear icon)

Screen Hierarchy:

  • Home → Result → Detail (modals)
  • Camera → Result → Detail (stack)
  • History → Result → Detail (stack)
  • Settings (standalone)

Screen Specifications

1. Home Screen

Purpose: Quick access to camera and recent scans

Layout:

  • Header: Transparent, "BoardCam" title, no buttons
  • Top Safe Area: insets.top + Spacing.xl
  • Bottom Safe Area: tabBarHeight + Spacing.xl
  • Scrollable: Yes

Components:

  • Large "Scan PCB" button (camera icon)
  • "Upload Image" button (upload icon)
  • Recent scans horizontal carousel (3-4 thumbnails)
  • Empty state: "No scans yet. Start by capturing a PCB image."

2. Camera Screen

Purpose: Capture PCB images with live preview

Layout:

  • Full-screen camera preview
  • Custom header overlay (transparent background)
  • Top Safe Area: insets.top + Spacing.md
  • Bottom Safe Area: insets.bottom + Spacing.xl

Components:

  • Close button (top-left)
  • Flashlight toggle (top-right)
  • Capture button (bottom-center, large circular)
  • Subtle guide overlay: "Position PCB within frame"

Interaction:

  • Auto-focus enabled
  • Tap-to-focus on preview
  • Haptic feedback on capture

3. Result Screen

Purpose: Display analyzed PCB with defect overlays

Layout:

  • Header: Default navigation, "Scan Result" title
  • Left button: Back
  • Right button: Share icon
  • Top Safe Area: Spacing.xl
  • Bottom Safe Area: tabBarHeight + Spacing.xl
  • Scrollable: Yes

Components:

  • Zoomable image view with bounding box overlays
  • Color-coded boxes:
    • Red: Defects (solder bridges, cold joints)
    • Yellow: Warnings (misalignment)
    • Green: Normal components
  • Labels with confidence percentages
  • "View Summary Report" button (bottom floating)

Interaction:

  • Tap box → opens Detail Sheet (modal)
  • Pinch-to-zoom on image
  • Share exports annotated image

4. Detail Sheet (Modal)

Purpose: Explain individual defect/component

Layout:

  • Native bottom sheet modal (70% screen height)
  • Rounded top corners
  • Drag indicator at top
  • Scrollable content

Components:

  • Large defect/component icon
  • Title: "Solder Bridge" (bold)
  • Confidence badge: "92%"
  • Description section
  • "Possible Cause" section
  • "Recommended Fix" section (step-by-step)
  • "Got It" button (bottom)

5. History Screen

Purpose: Browse past PCB scans

Layout:

  • Header: Default, "Scan History" title
  • Right button: Delete all (with confirmation)
  • Top Safe Area: Spacing.xl
  • Bottom Safe Area: tabBarHeight + Spacing.xl
  • List view (not scrollable root, uses FlatList)

Components:

  • List items with:
    • Thumbnail (left, rounded corners)
    • Date/time (bold)
    • Defect count badge (e.g., "3 defects found")
    • Chevron right
  • Empty state: "No scan history"

Interaction:

  • Tap item → navigates to Result screen
  • Swipe-to-delete individual scans

6. Settings Screen

Purpose: App preferences

Layout:

  • Header: Default, "Settings" title
  • Top Safe Area: Spacing.xl
  • Bottom Safe Area: tabBarHeight + Spacing.xl
  • Form-style scrollable list

Components:

  • Profile Section: Avatar, display name
  • Scan Settings:
    • High-resolution mode toggle
    • Save original images toggle
  • Appearance:
    • Theme toggle (light/dark)
  • About:
    • App version
    • Privacy policy (placeholder link)
    • Terms of service (placeholder link)

Design System

Color Palette

Primary:

  • Accent Blue: #0A84FF (iOS blue)
  • Accent Green: #34C759 (success/normal component)

Semantic:

  • Error/Defect Red: #FF3B30
  • Warning Yellow: #FFCC00
  • Background: #FFFFFF (light), #000000 (dark)
  • Surface: #F2F2F7 (light), #1C1C1E (dark)
  • Text Primary: #000000 (light), #FFFFFF (dark)
  • Text Secondary: #8E8E93

Typography

  • Headers: Bold, SF Pro Display (iOS) / Roboto Bold (Android), 28pt
  • Body: Regular, SF Pro Text / Roboto, 16pt
  • Captions: Regular, 13pt, secondary color
  • Labels on Boxes: Medium, 12pt, white text with drop shadow

Spacing

  • xs: 4px
  • sm: 8px
  • md: 16px
  • lg: 24px
  • xl: 32px

Components

Floating Camera Button:

  • Size: 64×64px circular
  • Background: Gradient (blue to green)
  • Icon: Camera (white, 28pt)
  • Shadow: shadowOffset: {width: 0, height: 2}, shadowOpacity: 0.10, shadowRadius: 2
  • Press feedback: Scale down to 0.95

Bounding Box:

  • Border width: 2px
  • Corner radius: 4px
  • Label background: Semi-transparent black (#00000080)
  • Label padding: 4px 8px

Scan Card (History/Home):

  • Border radius: 12px
  • Background: Surface color
  • Shadow (iOS only): shadowOffset: {width: 0, height: 1}, shadowOpacity: 0.05, shadowRadius: 4
  • Press feedback: Opacity 0.7

Buttons:

  • Primary: Filled, accent blue, white text, 50px height, 12px radius
  • Secondary: Outlined, 1px border, accent color text
  • Press feedback: Opacity 0.8

Assets Required

Icons (Use Feather icons from @expo/vector-icons):

  • camera, upload, clock, settings, x, zap, share-2, trash-2, chevron-right

Generated Assets:

  1. User Avatar: Circuit board pattern icon (green/blue gradient)
  2. Defect Icons (for Detail Sheet):
    • Solder bridge icon (droplet shape with connections)
    • Cold joint icon (broken connection)
    • Missing component icon (empty square outline)
    • Misalignment icon (offset squares)

Placeholder Content:

  • 3 sample PCB images for testing
  • Mock defect data with realistic labels and coordinates

Accessibility

  • All touchable areas minimum 44×44px
  • VoiceOver labels for all interactive elements
  • Sufficient color contrast (WCAG AA)
  • Support for Dynamic Type (iOS)
  • Haptic feedback for key actions (capture, delete)

Platform Considerations

  • iOS: Use native blur effects for modals, SF Symbols where possible
  • Android: Use Material elevation for cards, Roboto font
  • Cross-platform: Expo Camera with consistent controls