SuperAPI AI 工具集

expo-ui-best-practices

设计与创作

查看项目

更新于 10-15 23:43

技能介绍

用途:在 Expo 或 React Native 界面中做产品与交互决策。保留用户要求的行为和既有的设计语言;当实现细节重要时,加载相关的 Expo Router、设计系统或组件库技能。

塑造界面:从主要用户任务出发,让当前状态和下一步操作一目了然。先删减重复标题、副标题、嵌套界面和装饰性元数据,再考虑增加界面元素;每个连贯分组尽量只用一个视觉容器。行或卡片若只有一个目的地,就让它整体可点;只有执行不同操作时才嵌套按钮。紧凑控件需保持可读易按,视觉密度不能缩小有效触控区域,也不能掩盖选中、禁用、加载和危险状态。

选择呈现方式:属于当前屏幕的简短确认、短表单或小选项集,用内联对话框或 sheet。流程若像一屏,如全屏、可滚动、有状态、多步骤、自带标题栏、接收路由参数或需要深链接,则用模态路由。用户要求以模态出现的新路由,应实现路由并配置 stack presentation;iOS 上真正全屏模态使用 fullScreenModal。目的地不是临时性、属于导航层级时用普通路由。不要用拉伸组件库对话框铺满视口来模拟路由。

支持浅色与深色模式:背景、表面、边框、文字、图标、状态色以及按下或禁用状态使用语义化主题 token,避免只在一种外观下有效的固定颜色。两种模式都要保持层级和可读性;深色模式不是字面颜色反转,抬升表面、浮层、分隔线和系统栏仍需有意设计的对比。范围内的选中、禁用、成功、警告、错误和危险状态都要在两种外观下检查。

验证结果:实现视觉改动后,在环境支持时运行应用并截取浅色与深色模式下的同一有意义状态,检查主要操作与信息层级是否清晰;有无裁切、溢出、安全区、键盘和系统栏问题;有无重复界面或多余卡片嵌套;行与卡片点击区域是否完整;选中、禁用、按下和危险状态是否可区分;模态呈现是否匹配要求的导航行为。构建成功不等于视觉验证完成;若无法截图,应说明该限制,不要暗示已检查两种外观。