動的テーブルでのゼブラストライプ
以下は、実際のシナリオに触発された架空の質問です。
多くのデータ行を持つテーブルがあると仮定します。このテーブルは静的ではありません。行は、ユーザーのアクションに基づいて動的に変更、追加、および削除できます。行の表示/非表示をより直感的にするために、行を高さ0に拡張/縮小する短いアニメーションが再生されます。 （行の高さが均一であるとは限らないことにも注意してください。）
そのようなテーブルにゼブラストライプを追加する（合理的な）方法はありますか？大きな懸念は、行が奇数であるか、さらには時間の経過とともに変化する可能性があるかどうかです。これは、おそらくテーブルの大きなチャンクが突然色を変える可能性があり（おそらく煩わしいでしょう）、または隣接する2つの行に同じ色（行を追加または削除すると、ポイントが部分的に台無しになり、混乱する可能性があります）。
誰もがこのような何かを見て面倒なことなく達成できるという賢い考えを持っていますか？
Html/cssで作業している場合、効果の設定は非常に簡単です。CSSは、交互の行の色と行の削除での遷移効果の両方を処理できます。
CSSは、テーブルセルごとに「ベース」グリーンを設定しますが、2行ごとのセルの背景（ tr：nth-child（2n） ）を赤に設定します。行が動的に削除または追加された場合。
Td {}宣言の2番目の部分は CSS3トランジション を使用して、要素のスタイルの（サポートされている）変更について、2秒で状態間を遷移することを確立します。
Webテクノロジを使用していない場合でも、同様の効果がおそらく求めているものです。静的な背景行の上でコンテンツをスライドさせるのは非常に不快です（スクロール可能なテキストを含む静的/非移動の背景画像があるようです...いいね）。それでも、行の高さが変わる場合はカバーしません。色（これらはかなり派手です）とトランジションのタイミング/効果（イーズアウト/インなど）をいじって、UIの最も目立たない組み合わせを見つけることができますが、私は比較的「長い」効果の長さを見つけます通知からそれを隠すのに役立ちます。
これは優れた質問であり、優れた答えがあります。 2つの例から始めましょう。
色と意味
システムを使用していて、レコードを削除したい（そしてレコードを削除したい）と考えてください。インターフェイスは次のダイアログを表示します：
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
どのボタンを押しますか？
しばらくして、もう一度レコードを削除したい場合は、次のダイアログが表示されます。
どのボタンを押しますか？
次の画像では、同じモバイルデバイスが表示されますが、色が異なるだけですか、それとも5つの異なるモバイルデバイスが表示されますか？
意味論
重要なのは、一部の視覚情報がsemanticである一方で、一部の視覚情報は（またはcomplementary）。意味論を表すために色が使用されない限り、脳はそれらに意味を付けません。
良い例は、ロンドンのチューブマップです。線の色は意味です-それらは線名を示し、明日青を赤に変更すると、多くの人がピカデリー線と中央線を混同します。
ただし、非セマンティックでのグレー/ホワイトゾーンのコーディング-これらが明日入れ替えられる場合、毎日チューブを旅行している360万人はほとんど気付かないでしょう。
行のストライプ化
行を切り替える2つのシェードにはセマンティクスがありません-脳はこれらを視覚的補助として認識するのに十分なほど「スマート」です（そして、脳が水平線をたどろうとしない限り、これらの色は無視されます）。テーブルの意味データはテキストです。背景色に明確な意味がない限り、レコードが並べ替えられても、脳は背景色の変化に気付くことはありません。
ただし、色は十分に似ている必要があり、注意を引く必要はありません。20％グレーと30％グレーは機能しますが、赤と緑が問題になる場合があります。
したがって、生の背景色を切り替えることは安全な方法であるため、使用される色を意味論的に解釈することはできません。
アニメーションについて
アニメーションは、誰かの注意を引く最も効果的な方法の1つです。したがって、慎重に使用する必要があります。効果をアニメーション化すると、視覚的なノイズが追加されるだけであり、ユーザーにとってはまったく意味のないものに注意を向けさせることになります。 Visual Thinking for Design 、Ware 2008の第2章（簡単にわかるもの）からのこの引用を参照してください。モーションはアニメーションを意味することに注意してください。
Webデザイナーは、クロール、ジグル、フラッシュするWebページを作成できるようになりました。当然のことながら、動きに対する方向付けの応答を抑制することは難しいため、これらの効果が盛んなWebサイトへのユーザーの間で強い嫌悪感を引き起こしています。モーションの不必要な使用は、視覚的な汚染の最悪の形態の1つですが、慎重に適用されたモーションは有用なテクニックです。
アニメーション化されたJSFiddle と アニメーション化されていないJSFiddle を比較して、違いを確認してください。アニメーション化されていないバージョンのほうが煩わしくなく、ガーベニングが少なくなることを願っています。
結論
答えは、視覚的認識の観点から、データが並べ替えられたり変更されたりするときにストライプの背景が切り替わることを気にする必要がない理由を論じています。
あなたがすべき：
- 背景に適切な色を選択します。つまり、同じ色の近い色合い、理想的には灰色です。
- 縞模様の背景をアニメーション化しないでください。そうすることで、意味のない情報に注意する必要があります。
- 隣接する行の色を同じにしないでください-ストライプの目的に反し、一貫性が失われます。
Smallhacker-最初にゼブラストライプが必要ですか？ユーザーが広い列をスキャンできるようにする場合は、別のデザインパターンが機能する可能性がありますか？ 「ホバー行を強調表示」してみてください。
別のリストには、ゼブラストライプが有用かどうかに関する2つの興味深い記事があります。
ジェシカエンダース、「ゼブラストライプ：本当に役立つか？」 A List Apart、2008年5月6日 http://www.alistapart.com/articles/zebrastripingdoesithelp
Jessica Enders、「Zebra Striping：More Data for the Case」、A List Apart、2008年9月9日 http://www.alistapart.com/articles/zebrastripingmoredataforthecase/
ストリップとテキストがアニメーションにリンクされていない場合は、煩わしさを取り除くことができます。ストライプの高さを変更する前にテキストアニメーションが終了するのを待っている場合は、均一な高さなしで作業することも可能だと思います。
私の意見では、ブライアンノースのFiddleは、移行することなく、それほど不快ではなく、適切に明確に見えます。