DESIGN SYSTEM v1.0

天河基地小程序
UI 设计文档

微信原生增强型 · 明亮简约风 · 蓝紫渐变品牌色
包含小程序全量页面设计 + Web 管理后台
📅 2026-04-09 📐 5 个设计文件 📱 10+ 核心页面 🖥 Web 管理后台
设计规范
01 · 设计规范(Design System)
色彩系统 · 字体规范 · 间距圆角 · 按钮 · 状态标签 · 表单组件 · 内容卡片 · 底部导航
12色语义色板 6级字阶 4pt间距系统 5级圆角 全组件库
页面设计
02 · HOME
首页
Banner轮播 · 8格快捷入口 · 近期活动横滑 · 园区空间 · 科技成果预览 · 社区合伙人CTA
P0全覆盖 6个区块
03 · ENTERPRISE
企业服务中心 · 入驻申请 · 成果供需
6宫格服务Hub · 4步骤入驻申请表单(含OCR识别) · 成果供需列表+发布 · 问题反馈工单
P0核心流程 飞书审批集成 OCR P1
04 · ACTIVITIES & VENUES
活动列表 · 活动详情 · 会场列表 · 会场预约
分段筛选活动列表 · 活动详情+地图导航 · 会场卡片列表 · 日期+时间段选择预约器
P0核心流程 实时时间格
05 · MY + ADMIN
「我的」页面 · Web 管理后台
用户中心(申请/预约/收藏/工单) · 后台看板(KPI卡片)· 入驻申请审核表格 · ��馈工单管理
P0用户中心 P1后台审批 P2 AI洞察
核心设计决策
视觉风格
明亮简约风 · 白底 + 蓝紫渐变点缀 · 微信原生增强型
主色
#3b82f6(蓝) + #6366f1(靛紫) 渐变,背景 #f8fafc
导航结构
5 个底部 Tab:首页 · 企业服务 · 活动 · 会场 · 我的
管理后台
独立 Web 系统(非小程序内),左侧 Sidebar + 右侧内容区
品牌资产
全新设计,无现有 Logo,以蓝紫渐变为核心品牌识别
图标系统
SVG 矢量图标(Lucide 风格),禁止使用 Emoji 作为功能图标
字体
PingFang SC / 微信系统字体,6 级字阶(32/20/16/14/12/11px)
间距系统
4pt 基准:4 / 8 / 12 / 16 / 20 / 24 / 32 / 48px
触控目标
最小 44×44pt,输入框高度 ≥ 44px,底部 Tab 项宽度均等
AI 功能
P2 优先级,含降级方案(用户自行填写 / 默认分类),不阻塞 P0 流程