功能结构
存储什么数据，记录如何关联，用户能进行哪些操作。
项目 / 03 · 应用表格
从产品逻辑出发，把复杂交互设计完整。
应用表格结合数据库的结构化逻辑与表格的信息组织方式。我从这两条路径建立设计方法，通过任务调研确定问题与优先级，并将任务依赖需求拆为甘特图优化和字段交互设计，让功能、视图与操作相互配合。
查看设计推导- 职责与范围
- UX 设计；产品与需求分析、竞品及任务调研、甘特图优化、任务依赖字段交互、组件化设计交付。
1一项新字段需求
2两条设计工作线
3三类甘特图问题
4增查改删四个阶段
01 — 产品理解
数据库的逻辑，表格的信息形态。
应用表格面向项目管理、CRM 等具有明确目标的场景。它的数据逻辑来自数据库，信息呈现借鉴表格。因此，我从功能结构与信息组织两条路径分析需求：既要看数据与操作是否完整，也要看信息如何被组织和理解。
信息组织
同一批数据如何被组织，让用户能理解并完成工作。
这两种特性，如何转化成设计时真正可用的检查方法？
02 — 设计方法
用操作与信息层次，交叉检查完整性。
在功能结构上，我用增、删、查、改检查交互是否完整：创建新字段时，既要考虑字段列的配置，也要考虑单元格内容的添加。在信息组织上，我同时检查视图、工具栏和字段——同一个字段在不同视图中怎样呈现，在分组、筛选等操作下又怎样变化。
两个互相校验的框架 / 基于原稿整理FIG. 02
操作是否完整？
-
C
增
配置字段列，添加单元格内容。
-
R
查
找到记录，识别关系。
-
U
改
修改内容，检查相关状态。
-
D
删
移除目标对象，明确操作反馈。
信息在哪些层次变化？
-
视图
记录在表格、甘特、画廊与看板中的呈现。
-
工具栏
分组、筛选与隐藏如何影响信息展示。
-
字段
单元格内容的性质、约束与编辑方式。
把要完成的事，连接到具体设计。
在操作完整性检查之外，我也可以从用户要完成的事来解释方案：安排协作、看清时间、调整关联任务。后续具体设计，能够逐项对应这些任务中的阻碍。
用这套方法，重新看一个具体的任务依赖需求。
03 — 需求与调研
一个新字段，拆成两条工作线。
任务依赖需要帮助团队理解任务先后与时间关系，而甘特图是承载这些关系的重要视图。调研前，我已注意到既有甘特图的基础体验可能影响新字段的使用效果，因此与产品讨论，将工作拆为任务依赖字段设计和甘特图优化两部分。
改善甘特图基础体验
先解决承载新关系的视图里，已经存在的可用性问题。
完整定义任务依赖
完整定义关系的创建、识别、修改与删除。
沿用熟悉形态，细化操作反馈。
竞品研究按增删查改观察入口、关系方向、信息展示、修改与删除反馈。原稿沿用用户熟悉的箭头与字段形态，把重点放在微交互和界面细节。
观察任务，再追问原因。
2 位深度使用甘特视图的测试同事、3 位未用过该功能的用户，以及 3 位轻度用户参与了定性调研。通过任务观察与主观提问定位问题，不将其包装成大规模统计结论。
创建甘特视图
匹配时间字段，建立第一条时间条。
调整多个任务
修改多个任务日期，并理解父子任务的范围关系。
调研附录 · 原始任务表
任务按操作维度组织。原附录包含多组任务；这里保留任务与提问，不补写成功率或用时评分。
04 — 优先级与收敛
归并问题，明确改动的先后。
问题并不都需要在同一次改版中解决。我结合使用频率、习得难度与影响程度判断优先级，并用开发成本约束本次改动范围。再把指向同一原因的问题归并为三个优化方向，同时检查这些改动能否覆盖其他相关问题。
信息空间分配
聚焦主键，把责任人放入甘特区，明确收起和找回字段的入口。
-
E1
字段列显示太多占据了页面太多尺寸
-
E3
收起列的时候不希望标题列也一起收起
-
E4
不知道隐藏的列怎么开启
-
G3
看不到任务责任人的信息，必须展开左侧的字段
时间信息准确性
调整时间尺度、精确日期反馈和里程碑的位置与折叠。
-
G1
月、季度、半年、年时间尺度下，无法准确判断时间起止时间
-
H1
月、季度、半年、年时间尺度下，无法准确判断里程碑的时间
-
H3
多个里程碑的显示效果无法区分
-
K2
大时间尺度下，无法从图中获知修改后的时间
多任务操作一致性
连接选中、多选、批量编辑与父子任务的范围规则。
-
J1
想要批量调整行次序的时候不是很便利
-
K1
子任务条的修改时间触发范围太小
-
K3
子父任务时间条不能自动适应修改
先让甘特图承接信息与操作，再让依赖关系进入这个基础。
05 — 工作线 A · 甘特图优化
信息看得清，操作连得上。
甘特图优化围绕三个已经收敛的问题展开：把空间留给关键任务信息，让不同时间尺度中的日期更准确，并统一多任务处理的交互。
A
把空间留给关键任务信息。
问题 · 字段区占用空间，任务责任人却需要另外查找。
默认字段区聚焦主键内容；将负责人头像加入甘特区，时长放入 hover 信息；明确收起及调回其他字段的入口。
B
让时间位置，对应准确日期。
问题 · 大时间尺度下，日期难以读准，多个里程碑容易混淆。
周、月、季度尺度分别调整日期与周末的区隔；聚焦时间条时显示准确范围；重新定义里程碑在日期中的位置，以及同一时间单位下的折叠展示。
C
让多任务与父子编辑连贯。
问题 · 批量调整和父子任务编辑缺少连续、一致的处理。
点击时间条选中，Shift 多选；批量修改日期或拖动时保持一致变化。原稿规定：父任务范围缩至子任务范围内时，子任务随之收缩；子任务超出时，父任务扩展。
06 — 工作线 B · 任务依赖字段
回到方法，把增查改删设计完整。
在甘特图的基础体验之上，我回到最初的方法，逐一设计关系的创建、识别、修改和删除。同时检查它们在表格、甘特图、详情页以及其他视图中的表现，让用户对“依赖／被依赖”的理解保持一致。
C
增 · 不同入口，同一关系方向
在表格中选择关系类型并检索任务，在甘特图中拖动时间条端点创建。两处沿用一致图标和箭头方向，明确当前目标与完成状态。
甘特图原稿 · 三个连续状态CREATE / GANTT
限制与冲突反馈
已建立的依赖不能重复创建，父子任务之间也不能建立依赖。时间冲突采用红线与标签图标提示；逻辑冲突时，拖出的连线弹回。
R
查 · 同时识别关系与方向
依赖标签与关联引用、多选字段区分，用颜色与符号共同表达方向；画廊和看板每行一条关系。甘特图通过线条，把同一关系放回空间位置中。
原稿按不同位置定义 Z 形、楼梯形与蛇形路径；hover 强化相关线条，同时考虑分组后的呈现。Frame 12 另描述点击线条进入编辑／删除的入口。
U
改 · 说明联动，也保留控制
单元格通过删除／添加处理修改，详情页可以改关系类型。原稿还定义了拖动后的相关依赖日期联动，并在设置中提供关闭选项。
关系类型的修改入口
D
删 · 明确移除的是哪个关系
移除前，需要看清正在操作哪个关系。入口靠近标签或连线，并强化当前目标，使反馈与操作对象保持一致。
删除的对象是关系，而不是任务。表格与详情页从标签移除；Frame 14 展示悬停线条后的删除入口。Frame 12 的点击入口作为另一处原稿说明保留，不自行合并为未经确认的最终触发规范。
07 — 组件化交付
让设计稿的组织，也体现交互逻辑。
设计逻辑也应体现在设计稿的组织方式中。我将甘特图拆为任务列表、时间轴和时间条三个主要模块，使用组件与 Figma Layout 参数组织细节，使不同状态和修改能够沿用同一套结构。
甘特图 / 三个组成模块FIG. 12
01 · 任务列表02 · 时间轴03 · 时间条
Layout 细节 · 原组件参数
row/gantt横向布局 · 343 × 40 · 间距 0
column/gantt纵向布局 · 336 × 48 · 间距 0
cell/gantt固定单元格 · 48 × 40
08 — 结果与回看
从设计改进，到体验提升。
原项目复盘记录，2022 年 11 月改版上线后，甘特图使用频次上升 3.4%；另记录了对大客户需求的回应。对我而言，这个案例的重要积累是把产品理解、调研分类、优先级判断和交互细节串成同一条推导路径。
应用表格 · 整体体验
整体体验改善。
我将调研、功能规划与交互设计衔接起来，围绕整体体验判断优先级，推进甘特图优化与依赖字段设计。
−24%
用户负面反馈数量
应用表格整体用户负面反馈数量下降。
4.2 → 4.5
用户总体评分
产品总体评分上升。
这两项指标对应应用表格整体；下方单独呈现甘特图的使用频次变化。
+3.4%
甘特图使用频次
让方法贯穿整个方案。
这个案例的重要积累，是把产品理解、调研分类、优先级判断和交互细节串成同一条推导路径。数据逻辑、信息组织与每一步操作，彼此校验。
独立证据 · 客户需求与反馈
原复盘另记录了对大客户需求的回应。下方反馈记录单独呈现，不作为 3.4% 使用频次变化的测量依据。
补充附录 · 其他视图
复杂工具的完整性，来自数据逻辑、信息组织和每一步操作之间的相互校验。