用途:为任意平台(iOS、Android、Web、桌面)和行业提供高级、易用的 UI/UX 设计规则,用于设计新界面、建立跨平台设计系统、组织复杂数据与用户流程,以及在桌面与移动视口间适配布局。
主要能力:按优先级组织规则。一是通用可用性,由人体工学(触控/点击)与无障碍决定基础;二是结构架构,强调可扫读性与空间分组;三是 UX 心理学,先做灰度结构再谈美感;四是视觉深度与质感,用叠加、阴影、重叠消除扁平;五是色彩掌控,注重对比、可读性与比例;六是流式交互,动画模拟真实物理并给予反馈。
必要用法:处理 UI/UX 请求时按工作流执行——先确定主平台并保证移动端最小 44x44px 触控目标;用中性占位做灰度线框,应用邻近法则;再按 60-30-10 规则注入颜色,文字对比度至少 4.5:1;通过重叠元素、细微网格渐变或 1% 噪点增加层次;最后加入平台适配动效。
跨平台要点:Web(React/Next.js/Tailwind)用 grid、flex,过渡如 transition-all duration-300 ease-in-out、hover:-translate-y-1,背景可用 bg-primary/20 blur-[100px];移动端(React Native/Flutter/SwiftUI)使用安全区、原生手势与弹簧物理,最小触控尺寸 min-h-[44px] min-w-[44px]。
适用场景:移动应用、Web 仪表盘、电商站点等界面设计,品牌设计系统搭建,复杂数据与流程结构化,桌面到移动的布局适配。
限制:资料未提供具体收费、价格、平台支持范围、效果数据或安装命令;规则以设计指导为主,需结合具体项目技术栈落地。