设计师 @nitishkmrk 在 X 上发布了一个列表编辑的交互方案。一张支出记录表，每行显示支出类别、支付方式和金额，右侧有一个编辑按钮。用户点击编辑后，这一行就地展开成表单，三个字段从横向排列变成纵向排列，每个字段变成可输入的状态。与此同时，列表里其他内容变淡，但不消失。用户填完后点 Done，表单收回，列表恢复原状。
整个编辑过程没有弹窗，没有页面跳转，也没有遮罩层。编辑像是从列表里长出来的，改完又收回去了。
这个方案值得拆解的地方，并不是酷炫的动画，而在于它处理了一个列表编辑场景里的问题：用户在修改一条数据时，需不需要知道其他数据长什么样？如果需要，那把编辑转场到另一个地方，就意味着用户需要在大脑中记住上下文。而这个方案的精妙之处在于，让编辑发生在原地，让上下文待在视野里。
一. 设计拆解
1. 编辑发生在行的位置，不另开空间
列表编辑最常见的两种做法是弹窗和跳转到详情页。弹窗会在列表上方叠一层新界面，用户的视线从列表移到弹窗，列表被遮住一部分甚至全部。跳转则直接把列表从视野里移走，用户改完再跳回来。这两种做法都能完成编辑任务，但都让用户在编辑过程中失去了对列表的感知。
这个方案把表单放在被编辑行的原始位置，用户的视线不需要跳到别处。编辑的对象就在那一行，编辑的表单也出现在那一行，位置不变，向用户很好的诠释了"你在改的正是这条数据"。
2. 表格的列变成表单的行
列表状态下，Expense、Method、Amount 三个字段横向排列在一行里，每个字段只占一列的宽度。进入编辑状态后，这三个字段变成纵向排列，每个字段独占一行，旁边配上对应的标签和图标。
这个转换解决的是空间问题。列表里一行要同时显示三个字段的值，每个字段的空间被压缩到刚够展示内容。编辑时，用户需要点进输入框、修改文字、检查修改结果，每个字段都需要比展示态更大的操作区域。如果编辑时还保持横向排列，输入框会被挤得很窄，这样用户在一个很窄的输入框里修改内容的体验会明显变差。纵向排列能让每个字段获得整行的填写宽度，输入框有足够的空间容纳内容，这样，用户就不需要在一个狭小的区域里来回拖动光标。同时，标签和输入框上下对齐，字段之间的视觉间距也更为充裕，用户不容易改错行。
