f0a6a364f2
Align Sidebar & BottomNav menus, remove "Search", add user profile mock data, implement /api/users, add FilterDrawer, complete Section, ProfileHeader, MetricsRFM components Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>
2.9 KiB
2.9 KiB
数据资产中台 · 布局/图标/界面风格提示词合集
全局主题
- 现代数据中台、极简理性、数据优先
- 冷色品牌渐变（蓝 #3B82F6 → 紫 #8B5CF6），高明度低饱和背景；深色模式以中性灰为主
- 玻璃拟态：半透明白描边、轻雾面、柔和阴影
- 几何无衬线、数字等宽；8pt 网格；圆角 12–16px；组件间距 8/12/16/24
布局
- 移动：粘性顶部栏（菜单/搜索/通知）、底部 4 项主导航、安全区内边距
- 桌面：左侧可折叠侧栏（图标+标题+描述），右侧内容画布
- 卡片栅格 2–3 列；层级从背景渐变→玻璃容器→卡片→控件与数据
组件
- 按钮：玻璃浅层，主按钮品牌渐变，hover 轻微缩放
- 输入/选择：浅玻璃、聚焦加光环
- 卡片：大圆角、柔和阴影、标题可用渐变字
- 图表：细网格；品牌主色阶；玻璃工具提示
- 非打断式提示：Toast/Tooltip 简短且半透明
图标集
- 线性图标，2px 线宽、圆角端点、24px 栅格
- 语义：数据/中台、用户/画像、AI、搜索、设备、设置
- 未激活灰 600–700；激活品牌主色或渐变描边
- 尺寸：列表 16–20px；导航/按钮 20–24px
动效
- 200–300ms，ease-out 进入、ease-in 离开
- 悬停轻微缩放与亮度提升；抽屉 slide-in/out
- 玻璃层淡入+模糊过渡；同屏动画不超 3 处
可访问性
- AA 对比；触达 40–44px；键盘可达与显著焦点环
- 图表用形状/点样式区分色盲场景
插画/图片
- 抽象几何、淡彩渐变、线面结合；避免写实
- 头像/占位简洁清爽
避免项
- 过度饱和与强烈渐变；>5 系列色；硬阴影；复杂动效
- 移动端复杂多列表格
直接可用的提示模板
- 全局主题： 「现代数据中台 UI：冷色品牌渐变（蓝→紫）、高明度低饱和背景、玻璃拟态（半透明描边+轻雾面+柔和阴影）、几何无衬线与等宽数字、8pt 网格、圆角 12–16px；移动优先，桌面有可折叠侧栏；动效温和、可访问性 AA、数据优先。」
- 布局： 「移动端粘性顶部栏与底部 4 项主导航（安全区内边距）；桌面左侧可折叠导航、右侧内容画布；卡片 2–3 列，层级从背景渐变到玻璃容器再到卡片。」
- 组件： 「玻璃按钮与输入（聚焦发光环），主按钮品牌渐变；卡片大圆角、柔和阴影、标题渐变字；图表用品牌主色阶与细网格，玻璃工具提示；非打断式提示。」
- 图标集： 「线性图标 2px 圆角线、24px 栅格；涵盖数据/画像/AI/搜索/设备/设置；未激活灰 600–700，激活品牌主色或渐变描边；适配 16–24px 尺寸。」
- 动效： 「200–300ms、ease-out/in；hover 轻微缩放；抽屉 slide-in/out；玻璃层淡入+模糊过渡；不超过 3 处并发动画。」