分屏编辑预览要说明正在预览哪一版内容，优先按段落对应位置，而不是把两边滚动百分比简单绑定。用户主动浏览预览时可以暂时解除跟随；拖动分隔条改变工作空间，但不改变文章内容。手机预览还要区分目标页面宽度与画面缩放，避免把缩小桌面截图当成手机效果。
帮助中心编辑者正在修改一篇含长表格和配图的操作说明，左边写正文，右边观察读者看到的页面。先用Pixso演示编辑与预览的交互关系，把更新中、跟随光标和手动查看分开，后续就不必用一个“实时预览”名称包住所有不同状态。
预览更新、草稿保存、正式发布是三件事
本地文字刚改完，预览可以先渲染出来，但草稿未必已同步到服务器，更不代表网站已经发布。界面应分别表达内容是否已保存、预览是否是最新结果、正式页面是否已更新。只有一句“已同步”，编辑者无法判断它指的是左右面板还是线上文章。
本例在编辑区标题旁显示草稿保存状态，预览标题旁显示“预览已更新”或“预览更新中”；正式发布通过独立操作完成。输入后预览需要短暂等待时，保留上一份可读结果，同时标明更新中，不要每敲一个字就清空整个右栏。
预览失败也不应该吞掉刚写的内容。保留编辑区与最近一次成功结果，提示预览未更新并提供重试。若失败与某个不支持的内容块有关，尽可能定位具体块；不要只给出“网络异常”却无法解释为何同一段始终失败。
更新请求返回顺序可能与编辑顺序不同。用户先写“先选择文件”，随即改成“先选择目标文件”，较早结果不能覆盖较新预览。设计说明需要明确预览对应的内容版本，允许展示“当前预览尚未包含最新修改”，而不是让右栏无提示地退回旧文案。
同步的是段落身份，不是滚动百分比
左边编辑区可能把图片显示成较小占位，右边则显示完整大图。两边都滚到50%，未必处在同一章节。长表格、代码块和折叠内容都会进一步扩大差异。按比例联动虽然看起来同时在动，却容易把编辑者带到错误段落。
更清晰的设计目标是：光标进入“上传附件”段落，预览定位到对应段落；点击预览中的表格，可在支持的情况下定位回相应编辑块。内容块应有稳定身份，不能仅靠当前是第几个段落。用户在前面插入新内容后，关联仍需保持。
不必让每次光标移动都触发右栏跳转。可以提供“跟随编辑位置”开关，以及一次性的“定位当前段落”。编辑者手动滚动右侧检查页尾时，暂时暂停自动跟随并保持可见状态；再次启用后再回到编辑位置。否则右栏始终被左侧光标拉走，无法独立阅读。
在Pixso里设计两个清楚的工作台状态：第一张左侧光标位于“上传附件”，右侧同段落被轻量突出；第二张右侧手动滚到页尾，顶部显示跟随已暂停和定位当前段落入口。保留相同文章标题与段落，改变的是联动方式，不是换成另一篇文章。
同步不能变成两侧互相触发的循环。一次由左栏引起的定位，不应又被当成用户在右栏主动滚动，反过来改变编辑光标。对于设计交付，可以把主动操作、程序跟随和暂停状态写在相应画板旁，让研发实现时有明确的触发来源。
分隔条要能拖，也要有恢复方式
可拖动分隔条给编辑者分配空间，但两边都应有可用的最小宽度。左侧窄到只能显示三四个字，或右侧预览窄到所有按钮叠在一起，都不是有效的双栏状态。达到边界时停止缩小，并通过光标或边界反馈表明已经到达允许范围。
分隔条要有足够容易操作的区域，不只是一根难以命中的细线。悬停或获得焦点时可增强可见性，拖动过程中保持内容稳定。没有必要让整篇页面每次拖动一像素都重新从顶部加载；变化的是尺寸，不是内容身份。
W3C分隔条模式讨论了面板尺寸、可访问名称及方向键调整等交互。可将这些作为设计参考，为分隔条提供名称和键盘操作，同时结合目标产品测试，不把鼠标拖动作为唯一入口。
可提供“等宽”“仅编辑”“仅预览”等明确布局选项，帮助用户恢复。折叠预览后仍保留重新打开的按钮，重新打开可恢复先前宽度；若视口已缩小，则将宽度限制在当前可用范围内。不能记住一个旧的大像素宽度，让另一边只剩空白缝隙。
手机宽度和缩放比例必须分开
目标宽度决定页面怎样排版，缩放比例决定在当前工作区里看得多大。把一张桌面页面缩到50%，标题、导航和表格仍然按桌面布局排列，不等于手机适配。预览控件应清楚区分“页面宽度”与“显示比例”，避免两个操作都叫“尺寸”。
本例选择一个手机宽度后，预览区域按该视口重新排版；工作区放不下时再缩放显示，同时保留当前比例。拖动左右分隔条只是改变预览面板可用空间，如果处在固定手机宽度模式，不应悄悄改变目标手机宽度。切到随面板自适应模式时，再让宽度跟着容器变化。
桌面、平板和手机预设也要显示实际采用的尺寸，而不是仅用三个图标。横竖屏切换应交换或重设对应视口，并保留文章位置；如果某一内容块在窄屏变高，继续根据段落身份定位，别恢复旧滚动像素导致跳到别处。
预览可用于发现断行、溢出和信息顺序问题，但字体加载、浏览器差异与真实输入行为仍需在对应环境检查。把“当前预览”与“打开正式页面”设为不同入口：前者检查正在编辑的内容，后者查看读者实际访问的已发布页面。
预览里的按钮，点击后去哪里
预览文章可能包含目录、站内链接、下载按钮和表单。编辑者点击它们，可能是想检查跳转，也可能只是选择这个元素继续编辑。需要明确当前模式：阅读预览中按读者行为测试，选择模式中定位编辑对象。不要在相同外观下随机采用两套点击结果。
如果点击外链会离开编辑器，可在预览中打开独立窗口，保留未保存内容与当前编辑位置；涉及真实提交的按钮则使用安全的预览处理，避免编辑者检查排版时意外发送数据。不能让外观上的“预览”成为真实交易或通知操作的隐蔽入口。
目录锚点在预览内部跳转，不应滚动整个编辑器页面；关闭单栏预览后，回到原编辑段落。图片放大也需要明确关闭后落回哪块内容。把这些小交互处理完整，左右面板才能形成可反复检查的工作循环。
分屏的目标不是让两个区域永远一起运动，而是让编辑者随时确认“这段文字会怎样呈现”，又能独立查看整页。最新内容可辨、对应段落可找、空间可调整，预览才真正减轻了来回切换的成本。
