Flowspace｜远程创作团队协作工具
产品设计与交互
给远程创作团队用的任务协作工具：每天要交什么、项目卡在哪、下一步交给谁。有可操作的 Vue 原型。
项目概况
Flowspace 是给小型远程创作团队用的任务协作工具。成员打开首页能看到今天要交什么、项目停在哪一步、下一步该谁接手，也能看自己手上的活。
我做了什么
这是我独立做的项目：产品范围、信息架构、Figma 页面、交互反馈和视觉规范都由我负责。原型由 Codex 按我的描述实现，我再逐页检查内容、状态和交互。
要解决的问题
小型内容团队经常同时推进好几个客户项目，中间要写作、设计、审核、等客户确认。信息一旦散在聊天和文档里，就看不清今天要交什么、哪里卡住、下一步归谁。
范围与限制
- 界面里的客户、成员和任务都是演示内容，设置和邀请还没接通。项目没有商业上线，也没有真实用户验证或成效数据。
- 首个版本只做桌面 Web，服务 5–20 人的小团队。
- 首版不做甘特图、工时、OKR 和复杂权限配置。
设计过程
先照着 Figma 把页面搭出来，再逐页看文字层级、间距和状态反馈。Today 页改得最多：任务信息、文字层级、滚动范围、右侧信息和详情抽屉都重新理了一遍，然后处理抽屉打开后选中和悬停不好区分的问题。之后把首页任务连到对应的日程详情，让三个页面共用一份完成状态，切页后不会出现同一个任务两种结果。
关键判断
默认先回答今天要做什么
首页先显示最近要交的活和交接，打开就能确认今天谁要交什么。
- 首页同时展示所有项目和团队统计
按日常工作组织导航
原型现在分首页、个人工作、项目和团队。Today 和 Calendar 放在个人工作下，设置放在侧栏底部，找任务和排期都短一点。
- 把任务、文件、成员分别放在一级导航
首版先做任务与项目协作
先把任务、项目进度和交接做清楚，复杂权限和可配置工作流先不放进首版。
- 首版就加入完整的企业项目管理功能
详情打开后，悬停只恢复文字强调
选中背景表示正在看这个任务。抽屉打开时，其他行悬停只恢复文字强调，不让两行同时出现一样的背景。列表还能继续操作。
- 用加粗描边标记选中，或新增悬停颜色
- 用行尾箭头或“详情”文字作为回退提示
手机端默认展开侧边栏
桌面端侧边栏靠悬停展开，手机上没有悬停。如果只保留点按展开，入口只有 logo 下方一个不显眼的图标；所以手机里默认展开，收起后还能点它重新打开。
- 手机上改成悬停展开，跟桌面保持一致
- 移动端直接隐藏侧边栏
工具
- Figma
- Vue 3
- TypeScript
- Vue Router
做完了什么
原型现在有首页、今日任务、日程、项目列表、项目详情和团队六类页面，能跳转任务、同步完成状态、切换日期、筛选项目、搜索成员。主要页面统一了颜色、字号、间距和动效；空状态和其他页面的规范还在做。
复盘
- 首页先显示今天的任务和待交接事项，项目总览留在单独页面，两类信息更容易分清。
可交互原型
Flowspace Vue 原型
更新于 2026 年 10 月 13 日。切页会保留操作状态，刷新后重置。桌面端侧边栏悬停展开；手机上没有悬停，进入时会默认展开，收起后点 logo 下方的图标打开。可以全屏、缩放。