很多人觉得协议数据单元（PDU）是网络工程师才需要碰的东西，跟图形设计八竿子打不着。可当你在做网页动效、交互原型，甚至设计一个实时协作的UI工具时，数据是怎么在网络里跑的，其实直接影响你的设计逻辑。
什么是协议数据单元
简单说，PDU 就是不同网络层之间传递信息时打包的“包裹”。比如你在 Figma 里拖动一个图层，这个动作可能触发一系列数据上传。应用层把操作打包成 PDU，传给传输层，再封装成 TCP 段，到网络层变成 IP 包，最后在数据链路层成了帧——每一层都有自己的格式和规则。
就像你寄快递，箱子外面贴的单子（应用层信息）、内部装箱清单（传输层端口）、物流编号（IP 地址），都是不同层级的“标签”。
为什么设计师要了解这些
假设你在设计一个远程白板工具，用户笔迹要实时同步。如果你不知道数据在网络中是如何分段、重组、可能延迟或丢失，就很难理解为什么有时候线条会卡顿或者顺序错乱。这时候去看一眼 PDU 在各层的变化，反而能帮你预判体验问题。
比如，当数据量太大，PDU 被拆分成多个片段，接收端需要时间重组。这期间如果前端没做加载反馈，用户就会觉得“卡了”——其实是网络机制在起作用。
实用学习资料推荐
网上搜“协议数据单元学习资料”，大部分是计算机课程讲义。推荐几个看得懂、用得上的：
- 《计算机网络自顶向下方法》前两章，讲 PDU 和封装过程特别清楚；
- B站上搜“PDU 封装解封装”，有动画演示每一层怎么加头部；
- Wireshark 抓包工具实操视频，能看到真实数据包结构。
试着抓一下自己用 Sketch Cloud 同步文件时的数据流，你会发现每个请求背后都是一串精心打包的 PDU。
动手试试：模拟一个 PDU 流程
假设你要传一个图标文件，从应用层开始：
<PDU layer="application">\n <data>icon.png uploaded</data>\n</PDU>
<PDU layer="transport">\n <src_port>54321</src_port>\n <dst_port>443</dst_port>\n <data>...</data>\n</PDU>每往下一层，就加点控制信息。最终物理层把它变成比特流，通过网线或 Wi-Fi 发出去。接收端再一层层剥开，就像拆快递盒子。
下次你点“保存”按钮时，不妨想想：此刻我的设计文件正在哪一层被封装？有没有可能因为某个头信息不对，导致同步失败？这种思维会让你的设计更贴近真实使用场景。