适用于uniapp和即时设计的应用设计规范
以下是针对Vue Uniapp 多端开发（小程序/App/H5）、结合即时设计（UI 平台）的Android/iOS 通用最新设计规范，聚焦“通用性”与“多端适配”，附即时设计落地指南和开发辅助建议。
一、核心设计原则（通用+平台差异平衡）
1. 通用原则（跨平台统一体验）
- 以用户为中心：简化流程，核心功能前置（如电商首页突出“搜索+分类+推荐”）。
- 一致性：相同功能组件样式统一（如按钮、输入框在所有端保持一致视觉语言）。
- 轻量化：避免冗余装饰，用留白和层级区分内容（参考 iOS “清晰”、Android “大胆”的平衡）。
- 包容性：支持深色模式、字体缩放（动态类型）、无障碍访问（WCAG 2.1 AA 级）。
2. 平台差异处理原则（Uniapp 条件编译适配）
- 视觉微调：iOS 偏简约（少阴影、圆角柔和），Android 偏立体（适度阴影、鲜明色彩），通过 Uniapp 的
#ifdef APP-PLUS || H5区分平台样式。 - 交互习惯：iOS 用“左滑返回”“顶部导航栏”，Android 用“底部导航栏”“边缘滑动返回”，通用场景保留两者最优解（如导航栏统一用“标题+返回”）。
二、视觉规范（通用参数+即时设计变量）
1. 颜色系统（全局变量，即时设计用“颜色样式”管理）
| 类型 | 通用值（HEX） | 说明 | 平台差异调整 |
|---|---|---|---|
| 主色 | #165DFF（蓝） | 品牌色，用于主要按钮、重要标签 | iOS 降低饱和度（#0A84FF），Android 用原色 |
| 辅助色 | #36D399（绿）、#F87272（红） | 成功/错误状态，用于提示、标签 | 无差异 |
| 中性色 | 黑：#1D2129，灰：#4E5969，浅灰：#C9CDD4，白：#FFFFFF | 文字、背景、边框 | 深色模式：黑→#121316，白→#1D2129 |
| 禁用色 | #C9CDD4 | 不可点击状态 | 无差异 |
即时设计操作：创建“颜色样式”库，命名如Primary/Main、Neutral/Text-Primary，支持一键切换深浅模式。
2. 字体规范（通用层级+动态类型适配）
| 层级 | 通用字号（px） | 行高（px） | 字重 | 适用场景 | 平台差异 |
|---|---|---|---|---|---|
| 标题1（H1） | 24 | 32 | Bold | 页面主标题 | iOS 用 SF Pro，Android 用 Roboto |
| 标题2（H2） | 20 | 28 | Semibold | 模块标题 | 同上 |
| 正文（Body） | 16 | 24 | Regular | 主要文字 | 同上 |
| 辅助文（Caption） | 12 | 18 | Regular | 备注、时间、标签 | 同上 |
通用规则：
文字对比度≥4.5:1（如正文黑#1D2129配白底，或白#FFFFFF配深灰底#1D2129）。
支持系统字体缩放（Uniapp 用
rpx适配，1px = 2rpx，动态调整根字体大小）。
即时设计操作：创建“文字样式”库，关联字体文件（SF Pro/Roboto 备用），标注“动态类型适配范围”（如正文12-20px）。
3. 图标与图形（通用库+平台符号）
图标库：优先用Material Icons（Android）和SF Symbols（iOS）的交集图标（如搜索、返回、设置），统一风格（线性图标，2px 描边）。
尺寸：通用 24px×24px（小图标）、32px×32px（大图标），支持 @2x/@3x 倍图（即时设计导出 SVG/PNG）。
平台差异：iOS 图标圆角更柔和（如按钮图标），Android 图标可带轻微棱角（参考 MD3 形状）。
即时设计操作：导入 SF Symbols 和 Material Icons 插件，创建“图标组件库”，按功能分类（导航/操作/状态）。
4. 间距与布局（4px 基准网格，通用适配）
基础单位：以4px为最小间距单位（如 4/8/12/16/24/32px），避免奇数像素导致模糊。
布局原则：
容器边距：左右 16px（手机）、24px（平板），上下 12px（模块间距）。
元素间距：按钮内边距 12px 16px（水平×垂直），列表项间距 8px。
安全区域：适配刘海屏/底部指示条（Uniapp 用
safe-area-inset-top/bottom变量）。
即时设计操作：开启“网格系统”（4px 间距），用“自动布局”约束组件间距，标注“安全区域参考线”。
5. 圆角与阴影（通用值+平台微调）
| 元素 | 通用圆角（px） | 通用阴影（CSS 参数） | 平台差异 |
|---|---|---|---|
| 按钮 | 8 | 0 2px 8px rgba(0,0,0,0.08) | iOS 去阴影，用轻微内凹效果 |
| 卡片 | 12 | 0 4px 12px rgba(0,0,0,0.1) | Android 用 MD3 形状（可配置圆角） |
| 输入框 | 6 | 无阴影（聚焦时边框变色 #165DFF） | 无差异 |
| 弹窗 | 16 | 0 8px 24px rgba(0,0,0,0.15) | iOS 半屏弹窗圆角 20px |
即时设计操作：创建“圆角样式”（Small:6px, Medium:8px, Large:12px），阴影用“效果样式”库统一参数。
三、组件规范（通用组件+平台差异化实现）
1. 通用组件库（Uniapp 单文件组件.vue）
按功能分类，每个组件标注“通用样式”和“平台差异代码”（用 Uniapp 条件编译）。
| 组件 | 通用样式 | 平台差异处理（Uniapp 代码示例） |
|---|---|---|
| 按钮（Button） | 类型：primary（主色）、secondary（灰底）、text（文字按钮）；尺寸：small(32px)、medium(40px)、large(48px)；圆角 8px。 | iOS：`#ifdef APP-PLUS |
| 输入框（Input） | 高度 44px，边框 1px solid #E5E6EB，聚焦时边框 #165DFF，内边距 12px 16px，字体 16px。 | iOS：用input原生样式（无边框，聚焦时底部线条）；Android：用outlined样式（带边框阴影）。 |
| 列表（List） | 每项高度 56px，左侧图标 24px，右侧箭头图标 20px，分隔线 #F2F3F5（1px 实线）。 | iOS：用UITableView风格（圆角卡片分组）；Android：用Material List风格（卡片阴影）。 |
| 弹窗（Modal） | 宽度 90%（最大 500px），标题 20px Bold，正文 16px Regular，按钮间距 16px。 | iOS：半屏弹窗（底部滑出），圆角 20px；Android：居中弹窗，圆角 16px，背景模糊（Uniapp 用backdrop-filter）。 |
| 导航栏（NavBar） | 高度 44px（iOS）/ 56px（Android），标题居中，左侧返回按钮（20px 图标），右侧操作按钮（可选）。 | iOS：用navigationStyle: custom隐藏原生导航栏，自定义样式；Android：用原生navigationBar。 |
2. 平台差异化组件（按需启用）
iOS 专属：Segmented Control（分段选择器）、Action Sheet（底部动作面板），用 Uniapp 的
uView UI或自定义组件实现。Android 专属：Bottom App Bar（底部应用栏）、Chip（标签芯片），用 MD3 组件库（如
Vant Weapp的 Android 主题）。
四、交互规范（通用体验+多端适配）
1. 手势与导航（通用为主，差异兼容）
通用手势：
点击：反馈用“轻微缩放”（transform: scale(0.98)）+ 颜色加深（按钮按下时主色透明度 80%）。
滑动：列表左滑删除（触发区 44px 高）、下拉刷新（顶部 loading 动画）。
长按：弹出上下文菜单（如列表项复制/删除）。
导航逻辑：
层级导航：用“返回按钮+面包屑”（如“首页 > 分类 > 详情”），避免超过 3 层嵌套。
底部导航：最多 5 个标签（图标+文字），选中态用主色（iOS 图标填充色，Android 图标+文字变色）。
2. 动效与反馈（通用参数）
动效原则：自然流畅，时长 200-300ms（缓动函数用
ease-out），避免干扰用户。页面跳转：淡入淡出（opacity 0→1）、右滑进入（iOS）/ 渐变缩放（Android）。
加载状态：骨架屏（Skeleton）→ 内容渐显（fade-in），用 Uniapp 的
uni-skeleton组件。反馈机制：
- 成功：Toast（绿色背景，2秒消失，“✓ 操作成功”）。
- 错误：Snackbar（红色背景，3秒消失，“⚠️ 网络异常，请重试”）。
- 加载：按钮内转圈（直径 16px），页面用环形进度条（MD3 风格）。
五、多端适配（Uniapp 开发重点）
1. 屏幕尺寸适配
- 单位：用
rpx（小程序/H5，750rpx=屏幕宽度）和upx（旧版兼容），避免px硬编码。 - 断点：手机（375-428px 宽）、平板（≥768px 宽），用 Uniapp 的
uni.getSystemInfoSync().screenWidth动态判断，切换布局（如单列→双列）。
2. 平台特殊限制
- 小程序：包体积≤2MB（主包），用分包加载；图片用 WebP 格式（压缩率比 PNG 高 30%），尺寸≤200KB。
- H5：兼容 iOS Safari/Android Chrome，避免
position: fixed在 iOS 底部导航栏失效（用env(safe-area-inset-bottom)修复）。 - App：用原生插件（如扫码、支付），调用系统 API 时注意权限（如相机权限用
uni.authorize提前申请）。
六、即时设计落地指南
1. 搭建共享组件库
- 结构：按“基础组件（按钮/输入框）→ 业务组件（商品卡片/订单列表）→ 页面模板（首页/详情页）”分层。
- 标注：用“自动标注”功能导出尺寸（px）、颜色（HEX）、字体（字号/字重），关联 Uniapp 变量名（如
$color-primary: #165DFF）。
2. 多端预览与协作
- 用即时设计的“多端预览”模拟手机/平板视图，标注“Uniapp 适配注意点”（如“此组件在小程序需用
scroll-view包裹”）。 - 共享链接给开发，开启“开发者模式”，支持直接查看 CSS 代码和切图下载（SVG/PNG @2x）。
七、Vue Uniapp 开发辅助（代码示例）
1. 样式变量管理（SCSS）
// common/variables.scss $color-primary: #165DFF; // 主色（通用） $color-success: #36D399; // 成功色 $spacing-unit: 4px; // 基础间距单位 $border-radius-sm: 6px; // 小圆角 $border-radius-md: 8px; // 中圆角 // 平台差异化变量（Uniapp 条件编译注入） /* #ifdef APP-PLUS || H5 */ $button-shadow: none; // iOS 去阴影 /* #endif */ /* #ifdef MP-WEIXIN */ $button-shadow: 0 2px 8px rgba(0,0,0,0.08); // 小程序保留阴影 /* #endif */2. 通用按钮组件（Button.vue）
<template> <button class="btn" :class="[type, size]" :disabled="disabled" @click="handleClick" > <slot></slot> </button> </template> <script setup> const props = defineProps({ type: { type: String, default: 'primary' }, // primary/secondary/text size: { type: String, default: 'medium' }, // small/medium/large disabled: Boolean }); const emit = defineEmits(['click']); const handleClick = () => !props.disabled && emit('click'); </script> <style lang="scss" scoped> @import "@/common/variables.scss"; .btn { border: none; border-radius: $border-radius-md; font-weight: 500; transition: all 0.2s ease-out; /* 通用样式 */ &.primary { background: $color-primary; color: white; } &.secondary { background: #F2F3F5; color: #4E5969; } &.text { background: transparent; color: $color-primary; } /* 平台差异（Uniapp 条件编译） */ /* #ifdef APP-PLUS || H5 */ /* iOS 风格 */ box-shadow: $button-shadow; &:active { transform: scale(0.98); } /* #endif */ } </style>总结
本规范以“通用性”为核心，通过即时设计组件库+Uniapp 条件编译平衡平台差异，确保多端体验一致。重点关注：颜色/字体/间距的变量化管理、组件复用、动效轻量化、多端适配细节（如 rpx 单位、安全区域）。开发时结合 Vue 单文件组件和 SCSS 变量，可大幅提升效率。
