苏州维多利亚医疗美容医院 · 小程序界面提案

Design System

设计规范

整套界面共用一套 token，保证视觉语言统一。以下为实际落地参数，可直接交付开发。

Color

品牌主色

#9451CD

深紫（强调/渐变端）

#5C2A8C

浅紫（渐变起点）

#AE79DB

辅助紫（描边/块）

#E0CDF3

紫雾底色

#F7F2FC

主文字

#17161D

辅助文字

#8C8896

分割线

#EFECF3

价格（唯一暖色）

#C2410C

Typography · PingFang SC

H1主标题26/34

H2模块标题20/28

H3卡片区块17/24

Body商品名称 / 正文14/20

Text描述性文字13/21

Aux辅助说明12/18

Mini角标 / 免责声明10/14

Spacing & Radius

页面左右安全边距16 px

模块垂直间距24 px

模块内元素间距8 / 12 px

列表行高44–52 px

基础栅格4 pt

8 小

12 中

16 卡片

20 大卡

999 药丸

Key Dimensions

画布375 × 812（@2x 750 × 1624）

首页轮播 Banner343 × 174（750×380）

金刚区5 列 / 图标 46×46 / 圆角 15

瓷片区左大卡 167×164 + 右小卡 2×78

商品卡（2 列）167 宽 · 主图 1:1 · 间距 10

医生横滑卡118 宽 · 主图 4:5

顶部导航状态栏 44 + 导航 44

底部 Tabbar50 + 安全区 34 = 84

Elevation（轻新拟态）

Flat

分割线分隔，用于密集列表

Soft（默认卡片）

外柔阴影 + 内高光，厚度 ≤ 1px

Lift（浮起）

价格卡、数据条，仅用于层级抬升

Iconography

统一 24×24 视框、1.5px 描边、圆头圆角连接。不使用面性图标与彩色图标，保证在任意底色上都能保持轻盈。

Rationale

四个设计决策

01 · Color

紫色只做「点」，不做「面」

#9451CD 仅出现在按钮、价格强调、图标与渐变端，大面积仍是白与紫雾灰。医美的高级感来自留白比例，而不是饱和度。

02 · Elevation

阴影只用来分层，不用来装饰

全站只有三档阴影，且外阴影最大扩散控制在 30px 内、透明度低于 16%，配合 1px 内高光形成轻新拟态的「薄」质感。

03 · Rhythm

信息密度对齐成熟电商

参考杭州艺星的模块节奏：Banner → 信任条 → 金刚区 → 瓷片区 → 活动 → 商品，首屏即完成「看到活动—建立信任—找到入口」三步。

04 · Trust

把医疗资质放到显眼位置

5A 认证、正品验真、180 天跟踪被拆成可复用的小组件，出现在首页、医生页、详情页与品牌页，让合规成为设计语言的一部分。

美一步，
各有态度

界面总览