7.0 KiB

Raw Permalink Blame History

name

description

colors

typography

rounded

spacing

components

门店管理服务

面向线下门店经营负责人的蓝色科技感业务落地页

midnight-navy	service-blue	action-blue	signal-cyan	canvas-blue	pure-white	trust-ink	supporting-ink	soft-border
#05256E	#0B57D0	#1677FF	#5FC8FF	#F3F7FF	#FFFFFF	#102A56	#425F8C	#D7E4FF

display

title

body

label

fontFamily	fontSize	fontWeight	lineHeight	letterSpacing
-apple-system, BlinkMacSystemFont, PingFang SC, Microsoft YaHei, sans-serif	56px	700	1.18	-1px

fontFamily	fontSize	fontWeight	lineHeight
-apple-system, BlinkMacSystemFont, PingFang SC, Microsoft YaHei, sans-serif	32px	700	1.4

fontFamily	fontSize	fontWeight	lineHeight
-apple-system, BlinkMacSystemFont, PingFang SC, Microsoft YaHei, sans-serif	28px	400	1.65

fontFamily	fontSize	fontWeight	lineHeight
-apple-system, BlinkMacSystemFont, PingFang SC, Microsoft YaHei, sans-serif	24px	600	1.4

sm	md	lg	pill
12px	24px	36px	999px

xs	sm	md	lg	xl	section
8px	16px	24px	32px	48px	72px

call-button

industry-mark

service-item

backgroundColor	textColor	rounded	height	padding
{colors.action-blue}	{colors.pure-white}	{rounded.pill}	88px	0 36px

backgroundColor	textColor	rounded	size
{colors.canvas-blue}	{colors.service-blue}	{rounded.md}	112px

backgroundColor	textColor	rounded	padding
{colors.pure-white}	{colors.trust-ink}	{rounded.md}	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，保持移动端舒适密度。

原生导航栏使用午夜门楣蓝背景、纯白标题“门店管理服务”，不放 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 使用渐变文字、侧边粗色条、嵌套卡片或重复的图标卡片网格。

7.0 KiB Raw Permalink Blame History Unescape Escape