リーンスクリーン / Lean Screen

リーンスクリーン

最初の画面はジョブそのものです。一度だけ描画され、作業の幅いっぱいに表示されます。2つ目の文、2つ目の数字、2つ目のパネルは、その人の次の行動を変える場合にのみ、配置を勝ち取る必要があります。

このスキルは、スクリーンテンプレートコーディングエージェントがデフォルトで出力するもの（メトリックヒーロー、説明的なサブタイトル、均等カード、圧縮された中央カラム、ダッシュボードのように見せかけたリスト）を管理します。タスクロジック、フォーム、アクセシビリティは管理しません。これらは ux-best-practices に委ねられます。また、視覚的アイデンティティを選択することもありません。デザインシステムが存在する場合はそれを使用してください。このスキルを適用するために製品を再スタイルしないでください。

スクリーンが完了したと判断する前に、references/tells.md のチェックリストを実行してください。一致するものがあれば、装飾を削除するか、その情報を別の場所に移動してください。ユーザーがまだ必要とする機能を削除し、そこへのパスを残さないことは、失敗したスクリーンです。

描画前に行うこと

目の前の製品から、このスクリーンのジョブに名前を付けてください。前のプロジェクトからジョブ、名詞、動詞を借用しないでください。

そのジョブに合わせてスクリーンを一致させてください：

• 既存のサーフェス上の1つのアクション → ボタン。ページを構築しないでください。
• ユーザーが操作するリスト → そのリスト。
• ユーザーが読むか編集するレコード → そのレコード。
• 確認しに来た値 → その値。

主要なコントロールはジョブの動詞を使用します。「新規」「編集」「削除」は、それ自体がジョブである場合のみ主要です。「開く」はジョブの動詞ではありません。ユーティリティアクションは控えめに、最初の読み取りクラスターから外してください。

残りの情報の配置場所

オンデマンドとは、ユーザーが予測できる名前が付けられた場所を意味します。サマリー、履歴、合計のセット、または稀にしか使われないツールには、パネル、セカンドビュー、または1行の静かな表示を割り当ててください。その場所を構築してください。ヒーローカードとして許可されなかったという理由で、その情報を削除しないでください。

その場所には、中身に合わせた名前を付けてください。「データ」「詳細」「情報」は名前ではありません。前のスクリーンにあった機能がこのスクリーンに到達する方法がない場合、そのスクリーンは完了していません。

タブまたはセカンドビューは、同じカードのコピーではなく、異なるジョブです。ダッシュボードを隠すことだけを目的としたコントロールを最初のスクリーンに配置しないでください。パネルに非表示ボタンが必要な場合、それは最初のスクリーンではありません。

プロダクトにシェルがある場合

製品に複数のエリアがある場合、それらのエリアは永続的なサイドナビゲーションに配置します。グループ化してください。現在のものをマークしてください。アイテムにカウントを表示するのは、そのカウントがユーザーが操作するバックログである場合のみです。ページは1つのエリアです。製品の残りを持ち運ばず、収まらないからといって残りを削除しないでください。

同じエリアのいくつかのモードは、タイトルの下にタブとして配置し、モードにちなんだ名前を付けます。同じリストのいくつかの安定したビュー（カウント付き）は、リストと一緒に配置します。これらは4つのドロップダウンではなく、2つ目のサイドバーでもありません。

グローバル検索はシェルに属します。このリストの検索はリストに属します。エリアの主要なアクションは、作業が始まる場所に配置します。ユーティリティはシェル内に、控えめに配置します。

長いカタログは、ウィンドウと残りを見るための正直な方法を表示します。すべての行をダンプせず、名前のないコントロールの後ろに残りを隠しません。

個性は構成から生まれる

製品がすでに持っているタイプ、アクセント、密度を使用してください。何もない場合は、1つの中立テキストフェイスと1つのアクセントを使用します。アクセントはアクティブなナビゲーションアイテムと主要アクションをマークします。ほとんどすべての他のものはニュートラルです。

完成しているように見えるものは、整列、明確な行、控えめなセカンダリテキスト、そして現在の場所が明確であることです。ディスプレイフェイス、グラデーション、新しいパレットは、構造が間違っているページを修正しません。製品をデザインされているように見せるために再スタイルしないでください。

最初のスクリーンに含まれるもの

今このジョブに必要なものだけです。順序、ステータス、動詞はジョブに従います。固定レイアウトではありません。

• ユーザーがアイテムに対してアクションを実行する必要がある場合、アイテムとアクションを表示します。未完了の作業を最初に配置するのは、ジョブが作業を完了することである場合のみです。ディレクトリはユーザーが要求した順序のままにします。
• ユーザーが読んだり比較したりする必要がある場合、その読み取りを表示します。比較可能ないくつかのメジャーは、比較自体がジョブである場合に限り、1つのコンパクトな行に配置できます。各メジャーには実際の比較（前期、目標、または正直な空）を表示します。スパークラインやチャートは、系列が存在する場合のみ本文として表示します。キャプションは数字を繰り返しません。カードのバッジは比較の代わりにはなりません。ジョブ全体である1つのメジャーは、3つの装飾の仲間としてではなく、1回だけ表示されます。
• ジョブが単一のアクションである場合、スクリーンはそのアクションそのものです。
• ステータスワードは、それがユーザーの次の行動を変える場合にのみ表示されます。1つの単語で、真実でなければなりません。部分的な作業に対する成功スタイルは嘘です。部分的なものは部分的なままにします。

カウントは、次のアクションを変える場合に限り、カウント対象の横に、小さく1回だけ許可されます。仕事より大きい数字は、その数字が仕事ではない場合、虚栄です。異なるものを意味し、ペアのように見える2つの大きな数字は、偽の韻です。次のクリックを決定する1つの事実だけを保持してください。

最初のスクリーンから除去されるもの

余分な合計、チャート、履歴、空のフィールド、稀なフィルター、説明、すべてのフィールドを編集するフォーム。これらは上記の名前付きの場所に移動します。消えたり、すべてがオブジェクトに行に対する税金としてダンプされたりしません。

余分な合計、チャート、履歴を最初のスクリーンに残すのは、それがジョブである場合のみです。ページをミニマルに見せるために、ジョブを開示要素に格下げしないでください。

マネージャーはスプレッドシートではない

ジョブがコレクションを管理することである場合、行はオブジェクトとアクションです。名前が最も太いテキストです。ジョブの動詞は行上にあります。ユーザーが比較するフィールドは残します。ほとんどの行で空であるフィールド、およびユーザーがほとんど比較しないフィールドは、カラムにしません。

スプレッドシートの失敗は、すべてのプロパティをカラムにすること、データがないところにダッシュを表示すること、すべての値にコピーアイコンを表示すること、名前の下にカテゴリをくっつけること、レコードを開くだけの単一のボタンだけにすることです。フル幅を使用してそれらのカラムを追加することは、狭いダッシュボードと同じ間違いです。幅は、アイデンティティとアクションに属します。

行は1つのオブジェクトとして読み取られます。名前が最も強いです。1つのステータスまたは金額は、行の最後に静かに配置します。2行目は、ユーザーがスキャンするプレビューであり、ラベルのスタックではなく、控えめに表示します。レコードへの入り口は、行自体または最後の手がかりであり、ジョブの動詞を置き換えません。

アイテムの削除は、ユーザーがリストを管理している場合、リストアクションです。行上に、名前を付けて控えめに配置し、主要なものから外す必要がある場合はその行のメニュー内に配置します。削除のために詳細画面を強制しないでください。オブジェクトの名前で確認し、レコードがなくなるのか、それともそれが指しているものがなくなるのかを明示してください。削除は、リストを管理するよりも稀で危険な場合のみ、行上から外します。その場合、詳細画面がそれを保持し、ジョブの動詞は依然として行上にあります。

構成

• 1つの重み。 目を細めて見てください。1つのクラスターが最も重く、そのクラスターがジョブです。均等なカード、均等なバッジ、均等なヘッダーボタンは、焦点がないことを意味します。何かを追加する前に重みを修正してください。
• 作業領域のフル幅。 ツール、テーブル、キュー、コンソールは、シェルの横のコンテンツ領域を使用します。max-w-4xl、max-w-6xl、max-w-7xl、またはデータが窮屈なのに広い空のガターを残す中央の狭いカラムでラップしないでください。行の長さは、誰かが読むことを期待する散文（約65～75文字）に対してのみ制限してください。
• ページを言い換えるページ家具はなし。 1つのタイトル、場所またはオブジェクトの名前。その上にアイブロウ（スモールキャップス）はなし。タイトルを定義するサブタイトルはなし（「ライブラリ — あなたのライブラリがある場所」）。タイトルの横に製品を繰り返すバッジはなし。2行目は、タイトルがまだ言っていない事実で、かつその事実がアクションを変更する場合のみ許可されます。
• 指示行はなし。 「チップをクリックして即座にフィルタリング」ということは、コントロールがコントロールのように見えないことを意味します。コントロールを修正し、その文を削除してください。インタラクションが瞬間的であることを自慢しないでください。
• ボックスではなく位置によるグループ化。 近接性と見出し。カードは、ユーザーが単位としてスキャンする繰り返しオブジェクト、または真の境界（モーダル、ドラッグ可能なタイル）に対してのみ使用します。統計、フィルターストリップ、テーブルはそれぞれカードを取得しません。カードの中にカードを決して入れないでください。7つのリストが7つの大きなカードになることはありません。
• ほとんど空のカラムはカラムではない。 折りたたんでください。ダッシュはデータではありません。必須の値が欠落している場合、オプションの空白のように見せてはいけません。ギャップがアクションを変更する場合は表示し、そうでない場合は省略します。
• 三重エンコードしない。 2つのアイテムに対する分数、パーセント、バーは、1つの事実を3回表示していることになります。ユーザーが完了する必要がある場合、名前が付けられ、チェック可能なアイテムを優先してください。一目で区別できないバー（3つのうちの50％対67％）は属しません。
• 行を装飾しない。 名前がすでにあるのにイニシャルタイル、すべての名前の下に繰り返されるカテゴリ、永続的なコピーアイコン、ピルとバーとパーセント。コピーやその他のまれなアクションは、フォーカス時に表示します。行の高さはデータの高さと同じです。
• 破壊的なアクションは控えめに、名前を付けて、到達可能に。 ラベルのないゴミ箱アイコンが唯一のボタンに接着されているのは誤クリックです。同様に、「開く」の後にのみ存在する削除も誤クリックです。上記のマネージャールールに従ってください。
• フィルターはその場所を獲得する。 検索とフィルターは、リストが十分に長くスキャンが失敗する場合にのみ表示されます。フィルターとして偽装されたソート（「ステータス（すべて）」の横にある「名前 A～Z」）はソートです。マッチがゼロのフィルターチップは、実際のものの仲間ではありません。
• フィラーオブジェクトはなし。 レイアウトを埋めるためだけに行、バケット、サンプルレコードを発明しないでください。確認されたかのように切り詰められた、または不確かな値を表示しないでください。

管理画面テンプレートが表示された場合

反射的に、ヘッダースタック、メトリックカードの行、チップ、フィルターバー、ストライプテーブル、編集と削除ボタンが出てきます。それが実際にジョブである場合のみ使用してください。そうでない場合：

1. 1つのタイトル。場所またはオブジェクトの名前。
2. ジョブ自体、コンテンツ幅で。リスト、レコード、値、または単一のアクション。代替キューではありません。
3. ジョブを言い換えるクロームは最初の画面から外します。
4. 合計と履歴は、ジョブでない限り、名前付きの場所に移動します。削除はしません。

してはいけないこと

• ボタンであるタスクにダッシュボードを追加しないでください。
• 読み取り、レコード、単一のアクションを未完了オブジェクトのキューに変えないでください。
• サブタイトルで画面を教えないでください。
• アイブロウ＋タイトル＋サポート文のタイププリセットをセクション、カード、ページに使用しないでください。
• ジョブではないメトリクスを先頭に配置しないでください。
• 窮屈なツールを空のマージンの海の中央に配置しないでください。
• すべての領域をカードにしないでください。
• 未完了の作業に成功色を使用しないでください。
• アクションを変更しない限り、1つのアイデアに複数の名前を付けないでください。1つの単語を選んでください。
• ユーザーが次のクリック、または読みに来たものを1秒以内に指摘できない画面をリリースしないでください。
• 混雑した画面に対して、その機能を削除することで対応しないでください。二次的なものを移動してください。ジョブに必要なものを表面に残してください。
• マネージャーを、唯一のアクションが「開く」であるデータベースグリッドに変えないでください。
• 製品のすべての領域を1ページに配置せず、ページがリーンだからといってそれらの領域を削除しないでください。サイドバーを提供してください。
• 個性を偽造するために書体やパレットを発明しないでください。シェル、行、アクセントを修正してください。