---
name: 门店管理服务
description: 面向线下门店经营负责人的蓝色科技感业务落地页
colors:
  midnight-navy: "#05256E"
  service-blue: "#0B57D0"
  action-blue: "#1677FF"
  signal-cyan: "#5FC8FF"
  canvas-blue: "#F3F7FF"
  pure-white: "#FFFFFF"
  trust-ink: "#102A56"
  supporting-ink: "#425F8C"
  soft-border: "#D7E4FF"
typography:
  display:
    fontFamily: "-apple-system, BlinkMacSystemFont, PingFang SC, Microsoft YaHei, sans-serif"
    fontSize: "56px"
    fontWeight: 700
    lineHeight: 1.18
    letterSpacing: "-1px"
  title:
    fontFamily: "-apple-system, BlinkMacSystemFont, PingFang SC, Microsoft YaHei, sans-serif"
    fontSize: "32px"
    fontWeight: 700
    lineHeight: 1.4
  body:
    fontFamily: "-apple-system, BlinkMacSystemFont, PingFang SC, Microsoft YaHei, sans-serif"
    fontSize: "28px"
    fontWeight: 400
    lineHeight: 1.65
  label:
    fontFamily: "-apple-system, BlinkMacSystemFont, PingFang SC, Microsoft YaHei, sans-serif"
    fontSize: "24px"
    fontWeight: 600
    lineHeight: 1.4
rounded:
  sm: "12px"
  md: "24px"
  lg: "36px"
  pill: "999px"
spacing:
  xs: "8px"
  sm: "16px"
  md: "24px"
  lg: "32px"
  xl: "48px"
  section: "72px"
components:
  call-button:
    backgroundColor: "{colors.action-blue}"
    textColor: "{colors.pure-white}"
    rounded: "{rounded.pill}"
    height: "88px"
    padding: "0 36px"
  industry-mark:
    backgroundColor: "{colors.canvas-blue}"
    textColor: "{colors.service-blue}"
    rounded: "{rounded.md}"
    size: "112px"
  service-item:
    backgroundColor: "{colors.pure-white}"
    textColor: "{colors.trust-ink}"
    rounded: "{rounded.md}"
    padding: "28px"
---

# Design System: 门店管理服务

## Overview

**Creative North Star: "清晨开店前的蓝色灯箱"**

页面像门店营业前刚亮起的蓝色灯箱：清晰、稳定、有秩序。深蓝主视觉承担品牌识别，纯白内容面保证业务说明快速可读，青蓝只用于光线和细节提示。

整个系统拒绝地图工具、表单后台和政务门户的视觉语言，也拒绝用大量发光、玻璃面板或彩虹图标堆叠科技感。布局应让经营负责人在短时间内认出自己的行业、理解服务内容并完成电话咨询。

**Key Characteristics:**

- 深蓝主视觉与浅色信息面的明确分区，不用面板覆盖主视觉。
- 门店剪影完整呈现，真实业务文案始终由原生组件渲染。
- 行业标识收纳在统一横向信息带中，服务说明舒展，唯一主操作固定在底部。
- 轻量入场动效有静态降级，不阻塞内容显示。

## Colors

以深蓝建立信任，以亮蓝承载行动，以青蓝提供有限的光感；内容区保持接近纯白，正文使用带蓝相的深色文字。

### Primary

- **午夜门楣蓝:** 用于原生导航栏、首屏深色背景与最深层光影。
- **服务蓝:** 用于主视觉过渡、行业标识和服务序号。
- **行动蓝:** 仅用于拨号按钮和关键交互状态。

### Secondary

- **信号青:** 只用于插画轮廓、光带和小面积高光，不承载正文。

### Neutral

- **清晨画布:** 页面内容背景，带极轻蓝相。
- **纯白:** 服务内容与固定电话栏的主要表面。
- **信任墨蓝:** 标题和正文主色。
- **辅助墨蓝:** 次要说明文字，仍需满足 AA 对比度。
- **柔和分隔蓝:** 仅用于完整边框和分隔线。

**The Blue Commitment Rule.** 蓝色覆盖首屏主视觉，但内容区必须回到高对比浅色表面；禁止用第三种高饱和色争夺注意力。

## Typography

**Display Font:** 系统无衬线字体（优先 PingFang SC）  
**Body Font:** 系统无衬线字体（优先 PingFang SC）

**Character:** 单一系统字体通过字号和字重建立层级，加载稳定，适合微信小程序和中文快速扫读。

### Hierarchy

- **Display**（700，56px，1.18）：仅用于首屏“门店管理服务”。
- **Title**（700，32px，1.4）：用于“服务行业”“核心服务”和服务名称。
- **Body**（400，28px，1.65）：用于业务说明，单行长度受移动端容器约束。
- **Label**（600，24px，1.4）：用于行业名称、电话提示和辅助标签。

**The Plain Language Rule.** 标题直接命名业务，按钮使用“立即拨打”等动词加对象表达；禁止口号式套话和全大写正文。

## Elevation

系统以色块、完整边框和有限的环境阴影建立层次。内容表面默认平坦，固定电话栏可使用向上的柔和阴影与页面分离，主视觉光晕只存在于蓝色背景内部。

### Shadow Vocabulary

- **内容环境影:** 低透明度、大模糊半径，只用于主内容容器与蓝色主视觉交界处。
- **固定栏上浮影:** 从底部栏向上扩散，说明其固定层级，不模拟厚重卡片。

**The Flat Content Rule.** 服务信息依靠留白与分隔，不给每个条目添加独立厚重阴影。

## Components

### Buttons

- **Shape:** 44px 视觉高度的胶囊按钮（88px 设计稿高度）。
- **Primary:** 行动蓝底、纯白粗体文字，左右内边距 36px。
- **Active / Focus:** 按下时轻微降低亮度；焦点通过完整轮廓表达，不移动布局。

### Chips

- **Style:** 三个行业标识共用一个横向信息带，以 1px 分隔线划分；每项由浅蓝圆形字符标识和行业名称组成。
- **State:** 全部为静态信息，不提供选中、悬停或点击状态。

### Cards / Containers

- **Corner Style:** 主内容容器 36px，服务条目 24px。
- **Background:** 纯白或清晨画布。
- **Shadow Strategy:** 主容器允许环境影，服务条目使用完整边框或分隔线。
- **Internal Padding:** 24px 至 40px，保持移动端舒适密度。

### Navigation

- 原生导航栏使用午夜门楣蓝背景、纯白标题“门店管理服务”，不放 Logo 或自定义返回控件。

### Fixed Consultation Bar

- 白色固定底栏包含“业务咨询”、电话号码和“立即拨打”按钮。
- 底部使用安全区内边距，页面正文预留等高空间，任何屏幕都不得遮挡内容。

## Do's and Don'ts

### Do:

- **Do** 让百货、超市、便利店在首屏直接可见。
- **Do** 使用原生文字承载业务内容，插画加载失败时信息仍完整。
- **Do** 按图片宽度展示门店主视觉，只裁去上方空蓝区域，完整保留门店建筑与地面基线。
- **Do** 保持正文至少 4.5:1 对比度、按钮约 44px 触控高度。
- **Do** 为所有入场动画提供 `prefers-reduced-motion` 静态降级。
- **Do** 使用完整边框、留白和色块建立层级。

### Don't:

- **Don't** 做地图、标注、定位、坐标或地址管理界面。
- **Don't** 做表单页、政务门户或业务办理后台的视觉复刻。
- **Don't** 使用 Logo、彩虹分类图标、夸张赛博霓虹或装饰性玻璃拟态。
- **Don't** 把行业与服务包装成可点击但没有目标的假入口。
- **Don't** 使用负 margin 内容面板覆盖门店图片，或用深色渐变压暗门店底部。
- **Don't** 使用渐变文字、侧边粗色条、嵌套卡片或重复的图标卡片网格。