OmniCard/docs/UI_UX_DESIGN_SPEC.md

OmniCard AI 体验设计大师规范 (UI/UX Design Specification)

---

一、 设计原则与设计语言 (Design Philosophy)

1. “Touch & Spark” 零阻力触达：
   • 访客端无需注册、无需下载 App，通过 NFC 碰触或扫码，800ms 内完成首屏渲染与语言适配。
   • 核心商业动作（一键保存到手机通讯录、发起 WhatsApp/邮件、预约日程）在 1 次点击内触达。
2. Bento Grid 模块化美学：
   • 采用类似 Apple / Linear 风格的便当盒网格设计，不同维度的内容（身份、案例、文章、社交矩阵、视频）作为独立的响应式磁贴（Tiles）。
3. 全球化包容设计 (Universal Inclusivity)：
   • 全语种排版适配：支持 LTR（左至右如英文、中文）和 RTL（右至左如阿拉伯文、希伯来文）的镜像翻转布局。
   • 国际网络容错：弱网离线缓存联系人，高清媒体图片智能懒加载及 WebP 压缩。

---

二、 视觉与设计系统 (Design System Tokens)

2.1 颜色系统 (Color Tokens)

• 品牌底色与质感：
  • Dark Canvas: #090D16（深邃黑曜石，减少夜间眩光，提升 OLED 屏质感）
  • Surface High: #131B2E（卡片表面）
  • Surface Border: rgba(255, 255, 255, 0.08)（1px 微光渐变描边）
  • Light Canvas: #F8FAFC（纯净极简浅色自适应）
• 功能性高光色 (Accent & Semantics)：
  • Electric Blue: #2563EB / #3B82F6（国际商务与科技，主行动按钮）
  • Emerald Radar: #10B981（高意向访客状态、活跃在线指示灯）
  • Sunset Amber: #F59E0B（重点案例、VIP标签）
  • Arabic Gold: #D97706（中东/奢华定制版主题点缀）

2.2 排版与跨语言排版规范 (Typography)

• 字体栈：
  • 西文字体：Inter, -apple-system, BlinkMacSystemFont, sans-serif
  • 中文字体：PingFang SC, MiSans, Microsoft YaHei
  • 阿拉伯文：IBM Plex Sans Arabic, Tajawal
  • 数字/统计指标：JetBrains Mono, DIN Next LT Pro
• RTL 镜像规则：
  • 当语言切换为阿拉伯语 (ar) 时，整体 UI 自动启用 dir="rtl"，左右边距、图标箭头方向、返回按钮自动镜像对调。

---

三、 核心页面与界面构件字典 (Interface Components)

3.1 移动微官网主页（访客端）

1. Header 状态栏与语言选择器：
   • 左上角：品牌轻量水印或企业域名。
   • 右上角：全球语言切换胶囊按钮（如 🌐 EN ▾），点击弹出丝滑毛玻璃底部抽屉，快速切换语言。
2. Hero 个人/企业身份卡 (Hero Bento Tile)：
   • 3D 浮雕/圆角头像，支持微动态呼吸光圈（代表在线状态或当前处于工作时间）。
   • 姓名旁带有 [发音播报按钮 🔊]，解决跨国商务交流中姓名发音不标准的尴尬痛点。
   • 所在地与时区标签：📍 Singapore (GMT+8, 14:30 PM - Working hours)。
   • 快速连接矩阵：横向轻滑的社交图标群（WhatsApp、LinkedIn、WeChat、X 等）。
3. 主行动号召栏 (Fixed Bottom Action Bar)：
   • 页面底部悬浮毛玻璃栏（Glassmorphism Dock）：
     • 按钮 A【保存通讯录 (Save Contact)】：一键触发 Safari / Chrome 的 vCard 导入通道。
     • 按钮 B【互换名片 (Exchange)】：快速弹出双向留资卡。
     • 按钮 C【AI 顾问 💬】：气泡呼吸动效，提示“Ask anything about our company”。
4. 精选案例磁贴 (Portfolio Bento Tiles)：
   • 2x2 或 2x1 变宽卡片，封面采用高品质大图，下方展示项目成效（如：+240% ROI、$1.2M 签约）。
   • 点击展开沉浸式全屏详情页，支持图文排版与多媒体播放。
5. 深度洞察文章 (Insights & Articles)：
   • 简约瀑布流/横滑卡片，显示阅读预估时间（如 3 min read）和标签分类，支持一键生成适合分享到朋友圈/LinkedIn 的精美图文分享海报。

3.2 名片内置 AI 助理浮层 (Interactive AI Concierge)

• 触发形式：轻量级半屏抽屉式展开（Bottom Sheet），不遮挡主名片背景，保持轻快感。
• 预设快捷提问泡泡 (Quick Prompt Chips)：
  • “你们提供哪些服务？”
  • “有针对欧洲市场的合作案例吗？”
  • “如何预约 1 对 1 线上会议？”
• 留资转化钩子：AI 回答完毕后，智能挂载下一步操作卡片（如发送产品白皮书至邮箱、直接呼起 WhatsApp 对话）。

3.3 NFC 实体卡互动触感与管理

1. 触碰微交互：
   • 访客手机感应到 NFC 时，页面首先展现轻量加载光环动效，伴随平滑过渡淡入名片。
2. App 端 NFC 绑定中心：
   • 3D 拟真卡片视图，展示当前绑定的名片样式与绑定的实时短链。
   • 一键切换模式 (Scene Switcher)：
     • 商务会展模式 (Business)：跳转多语言微官网。
     • 直接通讯录模式 (Direct vCard)：触碰直接弹出新建联系人。
     • 社交主页模式 (Social Hub)：聚合个人社媒矩阵。
   • 挂失状态：一键切换为红灰色不可用状态，若有人刷卡，显示“此卡已由所有者临时挂失”的安全页。

3.4 销售工作台与 CRM 访客雷达

1. 实时雷达推送卡片 (Radar Live Feed)：
   • 卡片式瀑布流：按时间倒序展示每一次名片被访问的事件。
   • 视觉标识：国旗图标（如 🇦🇪 阿联酋、🇺🇸 美国）、访问来源（NFC 碰触 / 微信转发 / LinkedIn 外部链接）、阅读深度进度条（已阅读 80% 案例）。
2. 潜在客户看板 (Lead Kanban)：
   • 依据 AI 意向度评分（Intention Score）分为：
     • 🔥 热意向 (High)：停留时长 > 2分钟，查看了价格或案例详情，甚至尝试与 AI 助手对话。
     • ⚡ 常规意向 (Medium)：浏览了主页并点击了社交链接。
     • ❄️ 低活跃 (Cold)：仅打开主页后秒退。
   • 销售人员在移动端可左滑标记跟进、右滑生成“AI 推荐跟进邮件/WhatsApp 开场白”。

---

四、 性能体验与交付指标 (Performance & Quality Budget)

1. 秒开加载预算：
   • 访客首屏 (FCP - First Contentful Paint) < 500ms（全球 CDN 边缘节点缓存）。
   • 可交互时间 (TTI - Time to Interactive) < 1.0s。
   • 核心 Web 体验指标 (Core Web Vitals) 全绿 (LCP < 1.5s, CLS < 0.05)。
2. 跨平台兼容矩阵：
   • iOS: Safari 14+, 适配 Dynamic Island (灵动岛) 及安全区域。
   • Android: Chrome / Samsung Internet，深度支持 Web NFC API。
   • 桌面端：大屏自适应为居中手机样机预览（Phone Mockup）+ 侧边交互区，兼具优雅展示效果。