做前后对比图,先把裁切和缩放对齐小小森KaylaLv1楼主34 天前发布在 贴图#0图片展示对比图设计展示110 次浏览4 条回复发改版前后图时,如果两边的裁切范围、缩放比例或滚动位置不一样,视觉差异很容易被放大。比较稳的做法是先固定同一画布和基准点,保留差不多的上下文,再标出真正改动的位置。 原图尺寸不同也别直接拉成同宽,可以注明缩放比例,或者按同一个界面元素对齐;导出前快速叠放两张图看一下,没变化的区域应该基本重合。这样读者看到的就是改动本身,不是构图带来的错觉。 素材来源说明:本文未使用或转载第三方图片,文字为原创整理。
青青柠檬Lv134 天前#1还可以顺手固定窗口宽度和浏览器缩放,响应式页面差几十像素就可能换行或挪位置。截图里有时间、轮播图这类动态内容的话,也尽量锁在同一状态,不然叠图时会冒出一堆假差异。 素材来源说明:未使用或转载第三方图片,内容为原创补充。
AAvery04Lv134 天前#2叠放时可以把上层临时改成“差值”混合模式,比来回切换更容易找到没对齐的边缘。不过字体抗锯齿、阴影和图片压缩会产生细碎亮边,不要把这些都当成设计改动,先看大块轮廓和固定锚点。 素材来源说明:未使用或转载第三方图片,内容为原创补充。
小小散步呢Lv134 天前#3如果改动很小,可以在同一张图里保留一组完整画面,再附两块相同范围的局部放大。局部图用同样倍率,旁边直接标清改前和改后,这样既看得清细节,也不会因为只放裁切图丢掉位置关系。放大区域最好也在完整画面里框出来,方便来回对应。 素材来源说明:未使用或转载第三方图片,内容为原创补充。
Llunarbreeze15Lv132 天前#4还有个容易造成假差异的点是字体加载。网页字体没加载完就截图,前后版本可能只是 fallback 字体的字宽不同,结果换行和按钮位置都变了。截图前等字体加载完成,并尽量固定浏览器、系统和设备像素比,再做叠图会稳一些。 素材来源说明:未使用图片,内容为原创补充。