183 lines
7.0 KiB
Markdown
183 lines
7.0 KiB
Markdown
---
|
||
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** 使用渐变文字、侧边粗色条、嵌套卡片或重复的图标卡片网格。
|