用户把一张半身照调整到满意的位置，点击“使用头像”，个人资料里却出现被截掉半边脸的圆形图片。问题未必出在裁剪算法，也可能是编辑区只展示了方形选区，没有让用户看到最终的圆形边界；或者预览与保存采用了不同的缩放、方向和坐标。
头像裁剪交互的目标很具体：让用户选好照片中的一块区域，知道它会怎样显示，并将这个结果可靠地用于个人资料。对普通头像，不必先把裁剪器做成完整修图软件，应该优先保证选区、预览和保存一致。
先把选区、结果预览和保存后的头像画成连续状态，再用Pixso 原型设计把它们连接起来，便于核对用户看到的范围是否一致。
从最终头像反推裁剪界面
先整理头像真正出现的位置。假设这个产品在个人资料页显示较大的圆形头像，在评论列表显示较小的圆形头像，团队成员列表也沿用同一来源。裁剪面板就应该提供圆形效果预览，并至少让用户看到一种小尺寸效果，而不是只展示编辑区里的大照片。
存储图片可以是正方形，最终显示时再使用圆形边界；这属于实现选择。设计需要明确的是可见范围：四个角在圆形显示中不会出现，人物头顶和下巴是否接近边缘，长发或帽子是否会被截断。不要让用户在方形区域中精心摆放角落信息，保存后才发现它不可见。
对于团队标志或文字头像，圆形边界也可能裁掉关键字。可以在选择后显示真实结果，让用户决定换图或调整，而不是静默拉伸图片。若产品支持不同形状的头像，应在规则中说明哪种场景使用哪种形状，不要求一张头像同时适合未经约定的所有比例。
一般头像的展示、状态与使用场景，可以先参考用户头像设计基础；下面更关注用户主动更换头像时，怎样准确得到自己选定的画面。
固定窗口移动照片，还是移动裁剪框
裁剪操作常有两种模型。一种固定选区，让用户移动和缩放照片；另一种固定照片，让用户移动或改变裁剪框。两者都能成立，但面板应持续采用同一个模型。用户拖动人物时，如果有时移动照片、有时改变选区大小，就很难形成稳定预期。
对于仅支持一种头像比例的场景，可以优先尝试固定窗口：圆形预览保持不动，照片在后方移动，缩放改变照片覆盖范围。用户更容易把目标理解为“把脸放进这个圈里”。裁剪区外的照片可以降低亮度，但仍保留足够线索，方便用户找回被移到边缘的部分。
固定窗口不意味着允许随意露出空白。如果产品不支持透明或留白头像，缩小到照片无法覆盖选区之前就应到达边界；如果允许留白，则需要明确背景怎样处理。不要在拖动时看见透明区域，保存后却突然变成黑色或另一种未预期背景。
Cropper.js 的选区文档把位置、尺寸、比例、移动与缩放分别表达，说明这些是需要独立定义的行为。即便团队使用其他实现，设计也应讲清本项目锁定什么、允许改变什么，而不是只写一句“可以裁剪”。
先校正方向，再让用户决定构图
手机照片可能带有方向信息。同一张照片在相册里是竖直的，进入裁剪器后却横了过来，用户只能手动转正；保存时如果系统又应用一次方向修正，最终头像还可能再次旋转。选择文件、裁剪预览与导出结果应使用一致的方向解释。
MDN 的 image-orientation 说明区分了依据 EXIF 信息纠正图片方向与用户主动旋转图片。产品里也应把它们看作两个动作：先让照片按其方向信息正确展示，再决定是否提供用户旋转入口，不把自动纠正变成用户必须完成的额外工作。
如果提供“旋转”按钮，要明确一次旋转的角度，以及旋转后如何保持有效选区。可以让构图围绕当前可见主体调整，但不要默默恢复成完全不同的居中位置。按一次按钮后，用户应该立刻看到将要保存的结果，而不是等上传完成才看到方向变化。
首屏选择区域也值得设计。默认居中可以作为简单起点，但不能声称系统已经识别人脸并完成最佳构图，除非产品确实具备并验证了这项能力。提供容易操作的调整方法，比用未经实现的“智能裁剪”标签更有帮助。
缩放不能只依赖双指捏合
移动端可以提供双指缩放，桌面端可以提供拖动与滑杆，但用户不一定能完成精细手势。缩放区域旁可以保留“缩小”“放大”按钮，并显示当前状态；需要精确调整时，再考虑可编辑数值。达到上下限后，应清楚说明已到边界，而不是继续点击却毫无反馈。
W3C 的滑块模式说明了滑块的键盘操作及当前值、最小值、最大值等语义。若使用缩放滑杆，不仅要画出滑块，还要定义步进、名称和可理解的值。用户用方向键调整后，应能知道自己做了什么。
移动照片同样需要考虑非拖拽替代，例如可点击的方向微调按钮。它们不必占据首屏最突出的位置，但应能被找到并完成相同的调整结果。键盘可用与单指针非拖拽可用并不是同一项要求，具体边界可参照W3C 拖动动作说明。
操作区还要与页面滚动区区分开。用户在手机上想向下滚动查看“使用头像”，不应总是拖动照片；想移动照片时，也不应被页面滚动带走。通过明确的编辑区域、稳定的按钮位置和目标设备测试，确定两种动作的边界，不能只在桌面鼠标上判断是否顺手。
在 Pixso 里同时看编辑区和实际展示尺寸
可以在 Pixso 的设计画布中先绘制“更换头像”面板：中央放固定裁剪区，下方安排缩放控件与“重新选择”“使用头像”，右侧摆放个人资料和评论列表两种预览。使用同一张有权使用的照片，在不同画板中保留一致的构图，不用两张不同照片代替裁剪前后。
评审时可以把一张包含帽子或宽发型的照片放进画面，观察主体是否贴边；再换成文字或团队标志，检查圆形边界对非人物内容的影响。画板之间用原型连接重选、取消和保存后的页面，评论直接留在被截断的区域或难以操作的控件旁。
小预览不要只等比例缩小大图后就结束。要看眼睛、脸部轮廓或标志是否仍可辨认，边缘装饰是否变成噪点。若产品要求某个输出尺寸，将它写在交付说明中；不要从一张视觉稿的尺寸推断所有设备上的文件需求。
取消、重新选择与保存，分别影响什么
进入裁剪器之前，用户的旧头像仍是当前资料。点击“取消”应保留旧头像；点击“重新选择”可以切换照片，但若用户在系统文件选择器中取消，通常应回到刚才的裁剪状态，而不是清空一切，让他从头开始。
“使用头像”则表示提交当前裁剪结果。提交期间可以在按钮上显示处理中，避免重复点击；成功后回到资料页并展示新头像。上传和业务更新若是两步，不能只因图片传输完成就宣布资料已经更新。更通用的上传失败处理，可以接着看文件上传重试与恢复。
保存失败时，尽量保留当前照片和裁剪位置，允许用户重试，不要要求重新找图、重新摆正。旧头像仍在使用，就直接说明“头像未更新”；若界面先显示了新预览，则应区分预览与已生效状态，不能让个人资料、导航头像与评论头像各自显示不同结果却毫无解释。
离开裁剪器后能否恢复未提交的构图，取决于实际实现。若不能恢复，应在用户准备离开且确有调整时说明后果；不要把每次打开、没有操作就关闭也变成一轮确认。文件访问权限失效或页面刷新后无法重用原图时，提供重新选择入口，并保留能继续使用的资料内容。
用几张难处理的照片找到一致性问题
除了常规正面照，至少准备横向照片、带方向信息的手机照片、小尺寸图片、主体贴近边缘的照片，以及透明背景图片。目的不是证明所有图片都能完美裁剪，而是确认每一种边界都有清楚结果：方向正确，不能覆盖选区时有说明，清晰度不足时不会伪装成高清，透明背景处理符合约定。
还可以做一次直接对照：保存前截取圆形预览，保存后查看资料页和评论列表，比较同一主体的相对位置。若眼睛或标志中心发生偏移，就继续检查缩放、选区坐标、方向与二次裁切；不要先用换一张照片掩盖问题。
一个好的头像裁剪器不需要很多按钮。用户能看清最终边界，方便地调整构图，取消时不失去旧头像，保存后得到自己刚刚确认的画面，就已经完成了这项任务最重要的部分。
