Trang chủ Khám phá Trợ giúp
Đăng ký Đăng nhập
kym
/
haha
2
0
Fork 0
Các tập tin Các vấn đề 0 Yêu cầu kéo về 0 Wiki
Branch: master
Branches Tags
haha
/
DESIGN.md

DESIGN.md 11 KB
Permalink Lịch sử Raw

name: AI零售柜 description: AI智能零售柜小程序 — 扫码开门、即拿即走、自动扣款 colors: primary-yellow: "#FFC107" primary-yellow-light: "#FFE082" primary-yellow-dark: "#FFA000" primary-yellow-bg: "#FFF8E1" neutral-ink: "#2C2C2C" neutral-ash: "#8C8C8C" neutral-cloud: "#BDBDBD" neutral-white: "#FFFFFF" neutral-cream: "#FAFAFA" neutral-mist: "#F5F5F5" neutral-border: "#EEEEEE" success-green: "#4CAF50" warning-orange: "#FF9800" error-red: "#F44336" info-blue: "#2196F3" typography: body:

fontFamily: "-apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', system-ui, sans-serif"
fontSize: "28rpx"
fontWeight: 400
lineHeight: 1.6

rounded: sm: "8rpx" md: "16rpx" lg: "24rpx" xl: "32rpx" full: "50%" spacing: xs: "8rpx" sm: "16rpx" md: "24rpx" lg: "32rpx" xl: "48rpx" xxl: "64rpx" components: button-primary:

backgroundColor: "{colors.primary-yellow}"
textColor: "#1A1A1A"
rounded: "54rpx"
padding: "24rpx 0"
height: "108rpx"

button-primary-hover:

backgroundColor: "{colors.primary-yellow-dark}"

button-ghost:

backgroundColor: "{colors.neutral-white}"
textColor: "{colors.neutral-ash}"
rounded: "{rounded.xl}"
padding: "16rpx 32rpx"

card-default:

backgroundColor: "{colors.neutral-white}"
rounded: "{rounded.lg}"

input-field:

backgroundColor: "{colors.neutral-white}"
textColor: "{colors.neutral-ink}"
rounded: "{rounded.sm}"

chip-tag:

backgroundColor: "rgba(255,255,255,0.9)"
textColor: "#555555"
rounded: "40rpx"

Design System: AI零售柜

1. Overview

Creative North Star: "The Yellow Mark"

AI零售柜 is a consumer mini-program where the yellow accent works like a brand marker — instantly recognizable, like 美团's yellow or 闲鱼's yellow. The surface is clean and white, the yellow appears with purpose: a scan button, a selected state, a price. Its presence signals action; its absence signals rest.

The system is built on restraint, not because less is more, but because every element must justify itself against the physical context: a user standing in front of a cabinet under bright office lights, phone in one hand, products in the other. Speed reads as intelligence. Friction reads as cheapness.

The aesthetic rejects the busy, promo-heavy energy of discount retail mini-programs. No banner carousels, no red flash-sale tags, no cluttered grids of identically-sized product cards. Instead: generous negative space, deliberate typography, one shade of yellow doing one job at a time.

Key Characteristics:

  • Yellow as brand marker, not surface decoration
  • White-dominant backgrounds with warm tint
  • Precision over abundance — every pixel is intentional
  • Fast transitions that feel mechanical, not theatrical
  • Physical-digital coherence: the phone UI mirrors the cabinet interaction

2. Colors

The palette is built around a single committed yellow, supported by warm-tinted neutrals and four functional signal colors. This is a Committed strategy: yellow carries 30-40% of the visual weight (primary buttons, brand marks, active states), while the rest of the surface stays in neutral territory.

Primary

  • Brand Yellow (#FFC107): The only accent. Used on the scan button, primary action buttons, active states, selected indicators, and the brand mark. Never used as a background fill on text-heavy surfaces; its job is to signal, not to decorate.
  • Yellow Light (#FFE082): Transitions and subtle fills only. The gradient midpoint on the scan button.
  • Yellow Dark (#FFA000): Hover/press states on yellow buttons, link text.
  • Yellow Background (#FFF8E1): Lightest tint, used for highlight overlays and the top of page gradients.

Neutral

  • Ink (#2C2C2C): Primary text. Not pure black; slightly warm.
  • Ash (#8C8C8C): Secondary text, descriptions, meta information.
  • Cloud (#BDBDBD): Tertiary text, placeholder content, disabled states.
  • White (#FFFFFF): Card and surface backgrounds.
  • Cream (#FAFAFA): Page backgrounds, section dividers.
  • Mist (#F5F5F5): Depressed surfaces, skeleton loading states.
  • Border (#EEEEEE): Dividers, card borders, input strokes at rest.

Functional

  • Green (#4CAF50): Success, completed orders, payment confirmed.
  • Orange (#FF9800): Warnings, pending status, attention-needed states.
  • Red (#F44336): Errors, failed payments, expired states.
  • Blue (#2196F3): Informational highlights, expand-tip text, links.

Named Rules

The One Yellow Rule. Brand Yellow appears on at most 30-40% of any given screen. It is the brand marker, not the brand blanket. When everything is yellow, nothing is.

The White Canvas Rule. White (#FFFFFF) is the default card surface; Cream (#FAFAFA) is the default page background. The difference is subtle but structural — cards float on cream; content that belongs to the page sits directly on cream.

3. Typography

Primary Font: PingFang SC (with system fallback: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', system-ui, sans-serif)

Character: A single sans-serif stack optimized for Chinese text on small screens. PingFang SC's generous x-height and clean geometry work at the small sizes required by mini-program interfaces. No display face needed — this is a utility, not a magazine.

Hierarchy

  • Page Title (700, 48rpx, 1.2): Page-level headers like "AI零售柜" brand mark or modal titles. Used sparingly, 1-2 per screen.
  • Section Title (600, 32-36rpx, 1.3): Card headers, section labels, status messages. The workhorse heading.
  • Body (400-500, 28rpx, 1.6): Product names, prices, menu labels, form content. The default size for most text.
  • Caption (400, 22-24rpx, 1.5): Secondary metadata, timestamps, helper text, version info.
  • Button (600, 28-36rpx, 1.0): Action labels in buttons. Letter-spacing of 2-8rpx on primary CTAs for presence.

Named Rules

The Scale Jump Rule. Adjacent text sizes differ by at least 1.25x. No 28rpx next to 30rpx; the scale skips intentionally: 22 → 24 → 28 → 32 → 36 → 48 → 56.

4. Elevation

This system uses intentional, restrained shadows. Surfaces are flat at rest; elevation is a response to state — a button lifts on hover, a card lifts when interactive. The shadow vocabulary is minimal: four levels from ambient to prominent.

Shadows are never decorative. They exist to communicate: "this is tappable," "this is above," "this is important right now."

Shadow Vocabulary

  • Ambient (0 2rpx 8rpx rgba(0,0,0,0.04)): Subtle grounding for cards at rest. Barely visible; more felt than seen.
  • Low (0 4rpx 16rpx rgba(0,0,0,0.06)): Default card elevation. Separates a card from the cream background.
  • Mid (0 8rpx 32rpx rgba(0,0,0,0.08)): Elevated surfaces like the login card or active modal.
  • Brand Glow (0 8rpx 24rpx rgba(255,193,7,0.25)): The scan button's halo. The only colored shadow; reserved for the primary CTA.

Named Rules

The Shadow Has a Job Rule. Never use a shadow without answering: what does this elevation communicate? If the answer is "looks nice," remove it.

The Flat-By-Default Rule. Menu items, list rows, and non-interactive surfaces carry no shadow. Shadow = affordance, not decoration.

5. Components

Buttons

  • Shape: Fully rounded pill (54rpx radius) for primary actions; 32rpx for secondary.
  • Primary: Brand Yellow fill (#FFC107), near-black text (#1A1A1A), Brand Glow shadow. Used for the scan button, "开门购物," and the payment confirmation button. Height: 108rpx for the scan/home buttons, 88rpx for inline actions.
  • Hover: Darkens to Yellow Dark (#FFA000), lifts 4rpx with expanded shadow. 300ms ease-out.
  • Ghost: White fill, 2rpx Border (#EEEEEE) stroke, Ash text. Used for "返回" and secondary actions alongside primary buttons. Active state: background shifts to Cream.

Cards

  • Corner Style: 24rpx radius ($radius-lg). Consistent across all card types.
  • Background: White (#FFFFFF) with Ambient or Low shadow depending on context.
  • Internal Padding: 32rpx ($spacing-lg) as default; varies to 24rpx for compact info cards.
  • Border: Cards use shadow for separation, not borders. The only bordered surface is the login card (1rpx solid rgba yellow tint).

Inputs & Fields

  • Style: White fill, 2rpx Border stroke at rest, 2rpx Brand Yellow or Blue on focus.
  • Focus: Border-color shift to #1890FF or Brand Yellow. No glow; the border transition is enough.
  • Error: Border shifts to Error Red. Error text in Red below the field.

Navigation

  • Tab bar: Text labels with icon above. Active tab in Brand Yellow, inactive in Cloud (#BDBDBD).
  • Door tabs (left/right): Horizonally split, active tab underlined with 4rpx Brand Yellow bar.
  • Page header: Centered title in Body weight, optional back arrow on left.

Chips & Tags

  • Style: White background (90% opacity), 1rpx border with yellow tint, 40rpx rounded pill.
  • Usage: Feature tags on login page (秒级开门, 安全支付, AI识别).
  • Badge: Error Red fill, white text, 32rpx height, 16rpx radius. Used for coupon counts and notification dots.

Status Indicators

  • Success: Green circle with white checkmark, 56rpx diameter.
  • Pending: Orange circle with clock or spinner.
  • Error: Red circle with cross mark.
  • Each has a 4rpx 12rpx colored shadow matching its fill.

6. Do's and Don'ts

Do:

  • Do use Brand Yellow (#FFC107) exclusively for interactive elements: buttons, selected states, brand marks, and active indicators.
  • Do use White (#FFFFFF) for cards and Cream (#FAFAFA) for page backgrounds. The distinction creates structure without borders.
  • Do maintain at least 32rpx of breathing room around primary CTAs. The scan button needs space to own the center of the screen.
  • Do use the Shadow vocabulary intentionally: Ambient for at-rest cards, Brand Glow only for the primary CTA.
  • Do cap body text at 65-75 characters per line on the widest screen.

Don't:

  • Don't use Brand Yellow as a background fill on text-heavy surfaces. Yellow's job is signaling action, not hosting reading.
  • Don't introduce a second accent color. Green, orange, red, and blue are functional signals; they are not decorative accents.
  • Don't use nested cards. A card inside a card is always wrong.
  • Don't use side-stripe borders (border-left/border-right > 1px) as colored accents. Use full borders, background tints, or nothing.
  • Don't use gradient text (background-clip: text). Solid colors only.
  • Don't use glassmorphism, decorative blurs, or translucent overlays as a default aesthetic.
  • Don't use em dashes in copy. Commas, colons, and periods only.
  • Don't use the hero-metric template (big number + small label + supporting stats + gradient accent).
  • Don't let the interface feel like a discount retail mini-program: no red flash-sale badges, no banner carousels, no cluttered grids of same-sized product cards.