翻訳: ロシア語

しばらく前にWaylandについて読んでいたとき、この言葉が心に残った。

Waylandの掲げる目標の一つは「すべてのフレームは完璧である」ということだ。

これは私たちみんなが目指すべき目標だと思う。Waylandが語っているのは技術的な側面のことだが（現代のGPUスタックは非常に複雑で、Waylandは制御を取り戻そうとしている）、これはUIにも当てはめることができる。

大まかな原則はこうだ。

どんな瞬間にあなたのアプリのスクリーンショットを撮っても、そこに写っているものをあなたが説明できなければならない

追記：以前は「……、それは意味をなさなければならない」と書いていたが、スメアフレームなどの高度なアニメーション技法を考慮できていなかったため修正した。

なぜすべてのフレームを気にする必要があるのか？それは信頼を築くからだ。ユーザーはコードを見ることができないので、UIだけがアプリの品質を判断する手がかりになる。UIがきれいに見えれば、それは開発者が磨きをかける時間があったということであり、おそらくコードを磨くのにも同等の時間を費やしたということだ。これはヒューリスティックだが、理にかなっている。

では、実際にはどういうことだろうか？いくつか思いつくことがある。

• 画面間に白いフラッシュが出ないこと。
• 部分的にしか読み込まれていないコンテンツが表示されないこと。
• コンテンツの読み込み中に再レイアウトが起きないこと。
• 内部的に一貫していること。UIのある部分が「1 update available」と表示しているのに、別の部分が「Checking for updates...」と表示することがないこと。
• 正確なアニメーションであること。

アニメーションはしばしば忘れ去られる。UIは開始状態と終了状態では素晴らしく見えても、その間がひどくカクつくことがある。例えばこんな感じだ。

そこに何か奇妙なことが起きていると感じたなら、その通りだ！スロー再生版を見てほしい。

では例のルールを当てはめて、アニメーションの途中でスクリーンショットを撮ってみよう。これはおかしい。

これもおかしい。

どちらのフレームも完璧ではない。

別の例を見てみよう。Safariだ。

ここではプレースホルダーのテキストが中央から動くのに、カーソルは左端の位置からアニメーションする。

決して致命的な問題ではないが、この2つの要素が互いに同期していないという感覚を生む。次に浮かぶのは、もしかしたらこれらは一緒に設計されたのではないのか？という考えだ。もしそうなら、うまく連携しないかもしれない。そうやって信頼は失われていく。

このズレは大きな混乱を招くことがある。例えば写真アプリで、CropとAdjustのモードを切り替えると、写真自体は一瞬で所定の位置に収まるのに、トリミング枠だけがアニメーションする。

これにより、モードを切り替えると何かが微妙に変化したかのような誤った感覚が生まれる。正直なところ、私はUIに誤った感覚を与えてほしくない。UIには、アニメーションのおもちゃではなく、精密な道具であってほしいのだ。

アニメーションは本来、遷移を理解する助けになるはずなのに、それがかえって理解を妨げるとなると二重に残念だ。虫眼鏡の動きを追ってみてほしい。

YouTubeも同じだ。世界で最も単純なタスク、長方形をある位置から別の位置へ動かすだけのことだったのに、彼らは非常に奇妙なことをやってのけた。

これを説明できるだろうか？意味が通っているだろうか？

おそらく以前に決めたDOMアーキテクチャの技術的な制約なのだろう。私はこういう状況を「技術がプログラマーを出し抜いた」と呼んでいる。理由が何であれ、結果は不完全なフレームだ。

アニメーションが後付けで、成り行き任せにされることもある。そうなるとこうなる。

その詳細は見ていて実に興味深い。

だから、開始状態と終了状態だけでなく、その間のすべてにも注意を払ってほしい。すべてのフレームが重要なのだ。

最後に、プレビューアプリの唐突なズームアニメーションを置いておこう。またね！