移动任务收件箱Mobile Task Inbox

移动端Mobile列表List单栏Single column轻量Lightweight克制Restrained温和Warm
移动任务
8 月 31 日今天4 项待完成
添加任务

标本可交互,可以切换不同状态。Interactive specimen — switch between the available states.

适用场景Use cases

快速记录、今日处理、完成反馈快速记录 · 今日处理 · 完成反馈

关键状态Key states

默认Default空结果Empty成功反馈Success

布局结构Structure

  1. 日期与未完成计数Date and open-count summary
  2. 快速新增Quick add
  3. 按时间分组的任务列表Time-grouped task list
  4. 底部主导航Bottom navigation

视觉特征Visual traits

  • 触控目标不小于 44pxTouch targets are at least 44px
  • 完成状态不能只靠删除线表达Completion is not shown by strike-through alone
  • 主要操作位于拇指可达区Primary actions stay thumb-reachable

实现约束Implementation guardrails

需要做到Do

  • 快速新增后保持输入上下文Keep input context after quick add
  • 完成动作提供可撤销反馈Offer undo after completion
  • 离线时保留本地编辑Preserve local edits offline

避免Avoid

  • 在小屏上堆叠多层筛选Stack layers of filters on a small screen
  • 依赖悬停显示关键操作Hide key actions behind hover

AI 风格说明AI design brief

构建一个适合单手操作的移动任务收件箱。 适用场景:快速记录、今日处理、完成反馈。 页面结构:日期与未完成计数;快速新增;按时间分组的任务列表;底部主导航。 视觉特征:触控目标不小于 44px;完成状态不能只靠删除线表达;主要操作位于拇指可达区。 关键状态:默认、空结果、成功反馈。 需要做到:快速新增后保持输入上下文;完成动作提供可撤销反馈;离线时保留本地编辑。 避免:在小屏上堆叠多层筛选;依赖悬停显示关键操作。Build a one-hand mobile task inbox for capture, grouping, and fast completion. Use cases: Quick capture, Today’s work, Completion feedback. Structure: Date and open-count summary; Quick add; Time-grouped task list; Bottom navigation. Visual traits: Touch targets are at least 44px; Completion is not shown by strike-through alone; Primary actions stay thumb-reachable. Key states: Default, Empty, Success. Do: Keep input context after quick add; Offer undo after completion; Preserve local edits offline. Avoid: Stack layers of filters on a small screen; Hide key actions behind hover.

来源:LearnUI PM 原创示例,MIT License

我的参考集

组合页面参考、知名网站、UI 元素和视觉风格,导出给 AI。

你的下一份设计,从这里开始。

在任意标本旁点击「加入参考」,就能把页面、品牌、组件和风格组合成一份 AI 设计说明。

浏览页面参考

搜索参考库Search the library

输入关键词,搜索所有参考。