SuperAPI AI 工具集

mobile-app-ux

设计与创作

查看项目

更新于 10-15 22:17

技能介绍

用途:为移动应用界面提供 UX/UI 最佳实践参考,适用于设计触控友好界面、移动导航模式、手势处理等场景。

主要能力:给出触控目标尺寸规范(按钮最小 44×44px、推荐 48×48px,间距 8px;图标 24×24px 加 44px 触控区;列表项 44px 高、推荐 48-56px;表单输入 44px 高、推荐 48px,间距 16px),并给出 .touch-target 与 .icon-button 的 CSS 示例。列出导航、内容、表单、反馈的 Do 与 Don't:底部导航用于 3-5 个主要操作、重要操作置于拇指可及范围、优先内容而非界面装饰、渐进披露、懒加载、下拉刷新、骨架屏;避免汉堡菜单作主导航、层级超过 3 层、过小过密的点击目标、无视觉提示的手势、隐藏关键操作;表单使用合适键盘类型、内联校验、自动补全、自动保存进度;反馈要求即时视觉响应、重要操作触觉反馈、清晰加载状态、破坏性操作确认、用撤销替代“确定吗”。

使用方式:作为设计评审与实现参考,按触控尺寸、导航、表单、反馈、拇指区、组件模式逐项对照。拇指区设计将屏幕分为难触及(次要操作、菜单)、自然触及(内容、滚动区)、易触及(主要操作、导航)三层,并提供底部固定主操作栏的 CSS 示例(含 env(safe-area-inset-bottom))。组件模式给出 Bottom Sheet 与 Swipeable Card 的 React/TypeScript 代码结构。性能清单包括首次内容绘制 <1.8s、可交互时间 <3.8s、图片优化与懒加载、动画 60fps、加载无布局偏移、支持离线(PWA)。无障碍要求使用语义化 HTML、aria-label、4.5:1 对比度、支持文字放大至 200%、不禁用双指缩放。

限制:资料未提供该技能的安装命令、平台支持范围、收费方式与具体使用步骤,暂未提供。