UI 设计展示

水印清单系统的完整UI设计方案展示。每个页面都在移动设备尺寸的容器中显示,方便比较不同设计风格的用户体验。

登录页面

多种登录页面设计方案,满足不同用户偏好

登录页面 - 线条风格

白色背景+线条边框设计,极简现代风格

线条边框 白色背景 极简设计 现代风格

注册页面 - 线条风格

用户注册页面,白色背景+线条边框设计,极简现代风格

线条边框 白色背景 极简设计 现代风格

忘记密码页面 - 线条风格

密码重置页面,白色背景+线条边框设计,极简现代风格

线条边框 白色背景 极简设计 现代风格

工作列表页面

主页和任务管理相关页面设计方案

工作列表页 - 空白状态 v2

工作空白页,线条边框设计风格,极简现代风格

线条边框 空白状态 极简设计 现代风格

工作列表页 - 主页设计

工作列表页重构,采用线条边框设计系统,极简现代风格

线条边框 白色背景 极简设计 现代风格 UI规范

团队管理页面

团队创建、成员管理和权限设置相关页面设计方案

团队列表页 - 空白状态

团队空白页,线条边框设计风格,极简现代风格

线条边框 空白状态 极简设计 现代风格

团队列表页 - 团队管理主页

团队列表页重构,采用线条边框设计系统,极简现代风格

线条边框 极简设计 现代风格 UI规范

创建团队页 - 团队创建表单

创建团队表单重构,采用线条边框设计系统,极简现代风格

线条边框 白色背景 极简设计 现代风格 UI规范

编辑团队页 - 团队信息编辑

编辑团队页面重构,采用线条边框设计系统,极简现代风格

线条边框 白色背景 极简设计 现代风格 UI规范

团队详情页-超级管理员

超级管理员视角下的团队详情页面,支持团队信息管理、成员管理、任务管理和申请审核

超级管理员 团队 - v2

团队详情页面,线条边框设计风格,极简现代风格

线条边框 白色背景 极简设计 现代风格

超级管理员 - 成员 - v2

团队成员管理界面,线条边框设计风格,极简现代风格

线条边框 成员管理 搜索筛选 现代风格

超级管理员 - 成员申请 - v2

成员申请管理界面,线条边框设计风格,极简现代风格

线条边框 成员申请 申请审核 现代风格

超级管理员 - 成员申请历史 - v2

成员申请历史记录界面,线条边框设计风格,极简现代风格

线条边框 历史记录 状态筛选 现代风格

超级管理员 - 任务 - v2

团队任务管理界面,线条边框设计风格,极简现代风格

线条边框 任务管理 任务统计 现代风格

超级管理员 - 任务 - 列表 - v2

任务管理界面,线条边框设计风格,极简现代风格

线条边框 按任务查看 生效任务 现代风格

超级管理员 - 任务 - 未排期 - v2

任务管理界面,线条边框设计风格,极简现代风格

线条边框 未排期任务 周数选择 现代风格

新建与编辑任务

任务创建和编辑页面设计方案,支持团队选择、基本信息设置和工作项管理

创建任务页 - 线条风格

创建任务页面重构,采用线条边框设计系统,极简现代风格

线条边框 白色背景 极简设计 现代风格

任务重复选择页 - 线条风格

任务重复选择页面重构,采用线条边框设计系统,极简现代风格

线条边框 重复设置 极简设计 现代风格

自定义重复规则页 - 线条风格

自定义重复规则页面重构,采用线条边框设计系统,极简现代风格

线条边框 滚轮选择器 极简设计 现代风格

任务管理 TAB

任务管理页面设计方案,支持团队分组查看、任务筛选和排序功能

任务管理页 - 团队分组任务列表

任务管理页面重构,采用线条边框设计系统,极简现代风格

线条边框 团队分组 任务筛选 极简设计 现代风格

任务草稿箱页 - 草稿管理

任务草稿箱页面重构,采用线条边框设计系统,极简现代风格

线条边框 草稿管理 搜索筛选 极简设计 现代风格

我的 TAB

个人中心页面设计方案,包含用户信息、设置和账户管理功能

我的页面 - 个人中心

个人中心页面重构,采用线条边框设计系统,极简现代风格

线条边框 白色背景 极简设计 现代风格 UI规范

设计说明

页面组织结构

  • • 登录页面:多种登录方案设计对比
  • • 任务列表:主页和任务管理功能
  • • 团队管理:团队创建、成员管理和权限设置
  • • 任务创建:新建和编辑任务功能
  • • 重复规则:自定义任务重复频率和条件
  • • 任务管理:团队分组任务列表,支持筛选和排序
  • • 我的页面:个人中心、设置和账户管理
  • • 扩展功能:预留消息中心、个人资料等
  • • 模块化设计:便于后续页面添加

技术实现

  • • 响应式设计:适配桌面、平板、移动端
  • • 移动设备模拟:375x812px 标准尺寸
  • • 模块化架构:便于维护和扩展
  • • 一致性设计:统一的视觉风格