图片预览怎么设计？缩放、切换与关闭返回

图片预览应先完整呈现当前图片，再提供有边界的放大、缩小和拖动。切图时明确是否重置缩放，关闭后回到原缩略图与列表位置；图片加载失败时保留返回和重试入口。缩放是为了查看细节，不应改变原图，也不要把双指缩放、左右切图和关闭手势做成互相争抢的动作。

以采购员查看灯具资料为例：图库有正面、接口和包装3张照片，他从第2张接口图进入大图，放大检查接线细节，再切到第3张包装图。用在线原型设计工具串起进入、缩放、切换和关闭返回，才能发现孤立的大图页面里看不出来的断点。

从哪张图进入，就从哪张图开始

点击图库第2张接口照片，大图应显示同一张，而不是每次都从第1张开始。预览中保留图片标题或简短说明，以及“2 / 3”这类当前位置，能让用户把大图与刚才的缩略图对应起来。编号反映的是当前可浏览集合，不应把无权限、已删除或尚未确定能加载的图片先算入总数。

如果预览来自搜索结果或筛选后的图库，先约定左右切换的集合：是这次筛选出的3张，还是完整商品图库。通常沿用当前集合更容易理解；确需进入完整图库时，应明确告知范围变化。不能让人从接口照片按下一张，突然看到另一个商品的图片。

进入后的默认画面一般先适应可用窗口，让用户看清完整主体。预留标题和工具栏所占空间，不要先按整个屏幕算高度，再把底部操作压到图片上。横图、竖图和细长图要分别检查；为了铺满屏幕裁掉主体，会让用户误以为原照片本来就缺了一部分。

这里的预览只改变查看方式。若需要截取头像或修改最终输出尺寸，应进入独立的图片裁剪流程，给出确认与保存动作。不要在同一个“放大”按钮背后悄悄完成裁剪或覆盖源文件。

适应窗口、100%和最大倍率，分别说清楚

“适应窗口”表示完整图片放得进当前预览区域；“100%”通常用于按约定比例观察像素细节，两者不是同一状态。对高分辨率图片，适应窗口往往低于100%；对小图，放大铺满屏幕可能只让像素更明显。设计稿需要规定百分比的口径，并与实现对齐，不能把任何默认画面都标成100%。

灯具接口图的任务是辨认孔位与标识，可以提供加减按钮和重置到适应窗口的动作。放大上限由图像质量与业务需要决定，不必为了显得功能强而允许无限放大；到达上限时，让加号状态体现边界，并保留缩小与重置。按钮名称应说明动作，只有一个无说明的“1:1”图标，可能让不熟悉图片工具的人无从判断。

放大最好围绕用户关注的位置展开。鼠标指向接口处再放大，视野应尽量保持该区域；手机双指缩放也应减少主体突然漂移。若实现只能围绕画面中心缩放，需要通过稳定居中和可预期拖动降低寻找成本，不能在视觉稿里承诺一个尚未实现的缩放中心规则。

放大后的拖动，与前后切图不要混在一起

完整图还在窗口内时，拖动通常没有意义；放大后超出窗口，拖动才承担移动视野的任务。应限制可拖动边界，避免把整张图甩到屏幕外只剩空白。拖动结束后也不要突然跳回中心，否则用户每次检查边缘细节都要重新定位。

手机上最常见的冲突是：用户想横向拖动放大的接口图，查看器却切到了包装图。一种清晰规则是，放大状态优先让手势移动当前图片；回到适应窗口后再允许左右轻扫切图，同时保留明确的前后张按钮。产品也可以采用别的模型，但必须让用户分得清当前手势会做什么。

切到另一张图片时，通常可以重置到适应窗口，避免把上一张接口图的高倍率套到包装照上，只显示一小块纸箱。但在需要逐张比较同一细节的专业图库中，保留倍率和位置也可能更有价值。选择依据是查看任务，不是某个组件默认值；一旦选择，就在前进、后退和缩略图跳转中保持一致。

还要明确第一张与最后一张的边界。若图库不循环，末张的下一张入口应体现不可继续；若循环回首张，则编号和切换结果要可预期。只把箭头画得一样，却让有的图库循环、有的不循环，会增加用户判断成本。

Ant Design 的图片组件文档将多图预览、工具栏、变换和容错作为不同能力。它提供了实现讨论的参照，但默认参数不能替代这套灯具图库自己的缩放与切换规则。

关闭大图时，把人送回刚才的那张卡片

采购员看完第3张包装图后关闭预览，原图库仍应保留筛选条件和阅读位置。桌面焦点返回触发预览的缩略图，或一个与当前任务合理衔接的位置；如果原缩略图已被移除，则选择附近仍存在的入口，不能让焦点消失。W3C 的模态对话框模式说明了打开后的焦点管理与关闭后的返回原则，全屏查看器同样需要这些安排。

关闭按钮应一直容易找到，不依赖用户先把图缩小或把鼠标移到某个角落。键盘用户需要能关闭预览并继续访问原列表；页面滚动在预览打开和关闭时也要保持一致，避免关掉大图后原页面突然跳到最上方。

遮罩点击是否关闭，取决于是否容易误触。对于需要频繁拖动的预览，用户在图片边缘松手时不应意外退出。若支持点击空白关闭，拖动过程与真正的空白点击要区分；手机下滑关闭也应与图片平移有清楚边界。无论是否提供快捷手势，都保留可见的关闭入口。

在 Pixso 文件中把图库列表、第2张接口预览和第3张包装预览放在同一画布。连线从原缩略图出发，再标出关闭后的返回位置；把“切图重置到适应窗口”写在两张预览之间，而不是只放在页尾备注。这样评审时能沿着一次完整采购任务走完。

加载失败仍是预览的一部分

缩略图能显示，不代表大图一定能加载。两者可能使用不同资源，或大图体积更大、访问条件不同。进入预览后可以先保留已有缩略图作低清过渡，再加载清晰图；只有清晰图可用后才提供与它对应的细节查看能力，不把模糊过渡图当成原始质量。

大图加载失败时，说明当前这张未能显示，提供重试并保留前后张与关闭。若只是单张失败，不要让整个图库退出或把其他图片编号重新打乱。重试成功后沿用当前图片身份，避免内容已经切换，旧请求才回来并覆盖新图。

图片说明也不能全靠图内文字。灯具接口照片的名称、序号和必要说明应出现在界面可读取区域，帮助用户在加载前后确认对象。对需要描述的图片提供有意义的替代文字；装饰性工具图标则由其按钮名称表达功能，不能让读屏反复念一串无意义文件名。

最后用横图、竖图、小尺寸图、加载失败图各走一次：进入正确图片，放大仍能找到主体，切图规则一致，关闭回原任务。桌面键盘与手机触屏分别验证，尤其看拖动是否误切图、工具栏是否遮住关闭入口。能顺畅完成这条路径，比在大图上堆更多工具按钮更有价值。