产品动线牌桌：为什么是一副牌The product flow card table: why a deck of cards
产品动线看板从「楼层、传送带、河流」三个方向开始，被否掉之后变成了一副牌。这篇讲它是怎么一步步变成现在这张 3D 牌桌的。The product flow board started as a building, a conveyor and a river, all rejected, and became a deck of cards. This is how it turned into the 3D table it is now.
「产品动线」要回答的是一个很具体的问题：几十个项目同时在走，哪几个卡住了、卡在哪一步、谁该动。做这个看板，我们一共走了三轮。
第一轮：三个看起来很像看板的方向
最早的三个方向都挺好看：楼层等于阶段的立体楼，项目在楼里往上爬；一条流水线传送带，项目在带子上往前走；一条河流分叉，项目顺流而下。
它们都被否掉了，原因是同一个：它们从「看板」出发，而不是从用户要做的事出发。用户打开这页不是来欣赏一座楼的，是来找「我今天该管哪几个」。楼层、传送带、河流都把「正常」和「有问题」画得一样显眼。
第二轮：一副平面的牌
于是换了个比喻：一个项目一张牌。平面牌桌，按状态、步骤、负责人、更新时间分堆，点开一张牌看它的步骤时间线。
这一版把问题抓住了——有问题的牌和正常的牌终于长得不一样——但做出来之后又出现两个新问题：不够 3D，放在销售大屏旁边像两个产品；牌堆的交互也不对，点一摞牌弹出一个列表，和「牌」这个比喻打架。
第三轮：把牌桌搬进空间
现在这版（v9）是从第二版长出来的：
- 有问题的牌沿弧线摊开，一眼能数；正常的叠成牌堆，不占注意力。
- 点牌堆，牌在空间里摊成扇面，可以直接翻，不弹列表。
- 点一张牌，它飞上时间轴，每一步排成一行。
- 点某一步，放大成步骤页，图像博物馆的画框一样挂在墙上，灯一盏盏点亮。
- 牌是毛玻璃，边缘发光；飞行路径算过，不穿模；大屏模式可以轮播。
材质是在一张单独的玻璃实验台上定的：同一个场景里放四件玻璃，七盏灯可以单独开关，四种灯光预设，看磨砂和透明在不同光下的差别。
为什么这件事值得写
因为它是我们定交互的方法：先做三个方向比，否掉的理由要能说清楚；换比喻之后先做平面版，把「问题是什么」抓住；最后才上空间和材质。每一轮的稿子都留着，索引页上标成「早期对照」，不删。
三轮的稿子都在 UX Sandbox 里，可以拖、可以点。
The "product flow" board answers one concrete question: dozens of projects are moving at once, which ones are stuck, at which step, and who should act. We went through three rounds to get it right.
Round one: three things that looked like boards
The earliest directions were all handsome: a building whose floors are stages, with projects climbing; a conveyor belt with projects moving along it; a river branching, with projects floating downstream.
All three were rejected for the same reason: they started from the board, not from what the user came to do. Nobody opens this page to admire a building; they open it to find "which ones do I need to handle today". The building, the belt and the river all drew "fine" and "in trouble" equally loudly.
Round two: a flat deck
So the metaphor changed: one project, one card. A flat table, stacks by status, step, owner and last update, and a step timeline when you open a card.
That version caught the problem (troubled cards finally looked different from healthy ones) but raised two new ones. It was not spatial enough: next to the sales big screen it looked like a different product. And the stack interaction was wrong: tapping a stack popped up a list, which fought the card metaphor.
Round three: the table moves into space
The current version (v9) grew out of the second:
- Troubled cards fan out along an arc, countable at a glance; healthy ones stack and stay quiet.
- Tap a stack and the cards fan open in space, ready to flip, no list.
- Tap a card and it flies onto the timeline, every step in a row.
- Tap a step and it zooms into its own page, images hung on a wall like museum frames, lights coming on one by one.
- Cards are frosted glass with glowing edges; flight paths are computed so nothing clips; a big-screen mode runs a carousel.
The material was settled on a separate glass lab: four pieces of glass in the same scene, seven lights that switch individually, four lighting presets, to see frosted against clear under different light.
Why this is worth writing down
Because it is how we settle interaction: build three directions and compare, with rejection reasons that can be said out loud; after changing metaphor, build the flat version first to pin down the problem; only then add space and material. Every round's draft is kept and labelled "early" on the index, never deleted.
All three rounds are in the UX Sandbox: drag them, click them.