replica-diff

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

replica-diff

replica-diff

Two tools in this folder, both standard-library Python, no installs:
bash
python3 parity.py replica/features.csv                         # feature parity + missing list
python3 imgdiff.py replica/screens/S07.png replica/clone-screens/S07.png --out diff-S07.png
python3 imgdiff.py a.png b.png --json > replica/diffs/S07.json # for parity.py --visual
python3 parity.py replica/features.csv --visual replica/diffs/*.json --markdown > replica/parity.md
此文件夹中的两个工具,均仅使用 Python 标准库,无需安装:
bash
python3 parity.py replica/features.csv                         # feature parity + missing list
python3 imgdiff.py replica/screens/S07.png replica/clone-screens/S07.png --out diff-S07.png
python3 imgdiff.py a.png b.png --json > replica/diffs/S07.json # for parity.py --visual
python3 parity.py replica/features.csv --visual replica/diffs/*.json --markdown > replica/parity.md

What parity means here

此处“一致性”的含义

Parity means it does the same job, not that it looks the same. The feature score is the number that matters: can a user do everything they could do in the original. The layout score checks structure (is the information in the same places, in the same hierarchy), because that is what makes a switcher feel at home. It deliberately ignores colour, because replica-brand changes every colour on purpose. Do not chase pixel parity with the original. Its exact look is its trade dress, and it changes before launch.
一致性意味着完成相同的工作,而不只是外观相同。 功能得分才是关键:用户能否完成他们在原版中可以完成的全部操作。布局得分用于检查结构(信息是否位于相同位置、是否具有相同层级),因为这正是切换到克隆版后仍能感觉熟悉的原因。它会刻意忽略颜色,因为 replica-brand 会有意更改所有颜色。不要追求与原版达到像素级一致。原版的精确外观属于其商业识别特征,并且会在发布前发生变化。

Step 1: feature parity

第 1 步:功能一致性

Make sure
replica/features.csv
is current: every row's
clone
column is
yes
,
partial
(with a note),
no
, or
skip
(with a reason). Then:
bash
python3 parity.py replica/features.csv
It weights must 3, should 2, could 1, counts partial as half, leaves out
skip
rows and rows you added that the original does not have, and prints: the score, must-haves done of total, each area weakest first, and the missing list in build order. Must-haves not done means not shippable, and it says so.
确保
replica/features.csv
是最新版本:每一行的
clone
列应为
yes
、
partial
(附注说明)、
no
或
skip
(附注原因)。然后执行:
bash
python3 parity.py replica/features.csv
它会将 must 的权重设为 3、should 设为 2、could 设为 1,将 partial 计为一半,排除
skip
行以及原版中不存在的自行添加行,并输出: 总分、已完成与总数量的 must 功能、各领域中表现最弱的项目优先排列,以及按开发顺序排列的缺失项清单。如果 must 功能尚未完成,则意味着无法发布,工具也会明确指出这一点。

Step 2: layout diff

第 2 步:布局差异

For each key screen, take two screenshots at the same viewport (1440x900 desktop, 390x844 mobile) in the same state (same data shape, same tab open, logged in the same way). The original's come from public pages or the user's own account, saved in
replica/screens/
. The clone's go in
replica/clone-screens/
.
bash
python3 imgdiff.py replica/screens/S07.png replica/clone-screens/S07.png --out replica/diffs/S07.png
Layout mode (default) turns both into edge maps, cuts them into a grid, and compares where things are, scoring only cells with something in them. It reports the score (matches 90+, close 75+, partly 50+, different), the regions that differ (in the original's pixel coordinates, biggest first), and a height difference if the clone's page is much longer or shorter. Retina and non-retina screenshots compare fine: both are scaled to the same width.
--mode pixel
is exact comparison. Use it for your own regressions (clone today against clone last week), not against the original.
对于每个关键界面,在相同视口(桌面端 1440x900、移动端 390x844)和相同状态(相同数据结构、相同打开的标签页、相同登录方式)下截取两张截图。原版截图来自公共页面或用户自己的账户,保存在
replica/screens/
中;克隆版截图保存在
replica/clone-screens/
中。
bash
python3 imgdiff.py replica/screens/S07.png replica/clone-screens/S07.png --out replica/diffs/S07.png
布局模式(默认模式)会将两张图片转换为边缘图,切分为网格,然后比较各元素所在的位置,仅对包含内容的单元格进行评分。它会报告得分(matches 90+、close 75+、partly 50+、different)、存在差异的区域(使用原版的像素坐标,并按差异大小降序排列),以及当克隆版页面明显更长或更短时的页面高度差异。Retina 与非 Retina 截图可以直接比较,因为两者都会缩放到相同宽度。
--mode pixel
用于精确比较。它适用于你自己的回归测试(将当前克隆版与上周的克隆版进行比较),而不应将其用于与原版比较。

Step 3: behaviour diff

第 3 步:行为差异

Walk each flow in both apps and compare what the scores cannot see: clicks to finish the core flow, what happens on errors, what is remembered between visits, what emails arrive. Fewer clicks than the original is a win. Write each difference as: flow, original does, clone does, fix or keep.
在两个应用中分别走查每条流程,并比较得分无法体现的内容:完成核心流程所需的点击次数、发生错误时的行为、不同访问之间会保留哪些状态,以及会收到哪些邮件。点击次数少于原版是一项优势。
将每项差异写为:流程、原版行为、克隆版行为、修复或保留。

Step 4: the report

第 4 步:报告

replica/parity.md
: overall score, feature score, layout score per screen, missing features in build order, behaviour differences, and a verdict:
  • not shippable: any must-have missing, or any open S1 bug
  • shippable: all must-haves done, feature score 80+, no open S1 or S2
  • better than the original: shippable, plus fixes from replica-entrepreneur. This is the goal. A straight copy has no reason to exist.
Give honest numbers. A clone at 62% is at 62%.
replica/parity.md
:总分、功能得分、各界面的布局得分、按开发顺序排列的缺失功能、行为差异,以及以下结论:
  • 不可发布:缺少任何 must 功能,或存在任何未解决的 S1 bug
  • 可发布:所有 must 功能均已完成,功能得分达到 80+,且没有未解决的 S1 或 S2 问题
  • 优于原版:已达到可发布状态,并且包含来自 replica-entrepreneur 的改进。这才是目标。 直接照搬原版没有任何存在的理由。

Output

输出

replica/parity.md
, the diff images, and the top five things to build next. Then
/replica-build
for the gaps, or
/replica-entrepreneur
if parity is there.
replica/parity.md
、差异图片,以及接下来最应构建的五项内容。 然后使用
/replica-build
补齐差距;如果已经具备一致性,则使用
/replica-entrepreneur
。