sketchbook

Sketchbook

このスキルでは、プロジェクトで使われているスタックを活用して、小さなインタラクション実験を新たにいくつか作成します。ユーザーは各ライブタイルを残すか削除するか選ぶため、次のバッチは残したタイルの傾向にさらに近づきます。

件数とスタックは厳守します

実行のたびに、ライブ実験を6～9個含む新しいバッチを作成します。そのうち1つか2つは、現在の好みから外れたものにします。ギャラリーは一時的なもので、プロジェクトで使われているフレームワーク、スタイル設定、アニメーションライブラリ、トークン、フォントを使用します。

ユーザーが「sketchbook」「inspire me」「give me interaction ideas」「daily interactions」と言ったときに使用します。「surprise me with some micro-interactions」「new experiments for today」「keep this one, kill that one」と言ったときにも使用します。

イージング、時間、スプリング、モーション低減はmotionに従います。タイル名と1行の説明はcopyに従います。サーフェスはdefaults、コントラストはcolorに従います。新しいコンポーネントを作る前に既存のコンポーネントを確認するのはreuseに従います。外部の参考資料を集めるのはgatherに従います。1つのアイデアのバリエーションはprototypeに従います。コンポーネントのすべての状態を強制的に開くのはlabに従います。

1. プロジェクトを読む

フレームワーク、スタイル設定、アニメーションライブラリ、トークン、フォントを読みます。それらを読む前に始めたバッチはsketchbook-read-the-stackです。

2. 好みのファイルを読む

バッチを選ぶ前に、プロジェクトのルートにあるsketchbook/taste.mdを読みます。ファイルがない場合、好みは空であり、最初の選択時にファイルを作成します。要約がある場合、次のバッチは残したタイルの傾向にさらに近づきます。すでにファイルがあるのに無視したバッチはsketchbook-read-tasteです。

「Kept」または「Killed」にすでに記載されているインタラクションはスキップします。繰り返しはsketchbook-never-repeatです。

3. バッチを生成する

小さなインタラクションを6～9個作成します。それぞれ、ホバー、切り替え、押下、表示、ドラッグ、スクロール、カーソル、テキスト、ローダー、トランジションのいずれかです。6～9個以外の件数はsketchbook-batch-sizeです。

読み取ったフレームワーク、スタイル設定、アニメーションライブラリ、トークン、フォントを使って、それぞれを作成します。モックアップや別のスタックを使うのはsketchbook-real-stackです。

好みの要約から外れた実験を1つか2つ含めます。その1つか2つによって、バッチが1つのスタイルに偏るのを防ぎます。要約が空の場合、その1つか2つは残りとは種類を変えます。1つか2つ以外の件数はsketchbook-wildcardsです。

4. 1つのギャラリーを表示する

このバッチだけを、/sketchbookにライブで操作できるタイルのグリッドとして配置します。静的な一覧、実験ごとの個別ルート、ページ上の2つ目のバッチはsketchbook-one-galleryです。

各タイルには、タイトルケースの名前、1行の説明、「Keep」と「Kill」の操作を付けます。名前と説明はcopyに従います。選択肢のないタイルはsketchbook-keep-or-killです。

5. 開く

開発サーバーを起動し、/sketchbookを開いて、すべてのタイルを1回ずつ操作します。返信でパスを示しても何も開いていない場合はsketchbook-open-itです。

6. 選択を保存する

ユーザーがタイルを残すか削除したら、同じターン内にsketchbook/taste.mdを更新します。このファイルには「Kept」「Killed」「Summary」の3つの見出しを設けます。「Killed」の行には理由を含めます。要約では、イージング、速度、密度、遊び心、色の使い方を扱います。次のバッチが残したタイルの傾向にさらに近づくよう、要約を書き直します。更新がない場合、削除理由のない行がある場合、またはこれ以外の形式になっている場合はsketchbook-save-the-tasteです。

残した実験は、ギャラリーの装飾を取り除いた、再利用可能なきれいなコンポーネントとしてsketchbook/kept/に移します。ルート上にだけ残されたタイルはsketchbook-keep-the-componentです。

削除した実験は消します。好みのファイルには名前と理由だけを残します。「Kill」のあとにコードが残っている場合はsketchbook-delete-the-killedです。

すべてのタイルで選択が済んだら、/sketchbookルートを削除します。バッチの選別後もギャラリーが残っている場合、または本番環境からアクセスできる場合はsketchbook-remove-the-galleryです。

7. クリップを提案する

クリップにする価値のある、残したタイルを挙げ、理由を1行で説明します。残したタイルがない場合は、その旨を伝えます。提案なしでレビューを終えるのはsketchbook-suggest-a-clipです。

ペア

すべてのチェックはペアです。破られた行の隣に、それを置き換える行が並びます。

ルール	破られた例	置き換え
sketchbook-read-the-stack	プロジェクトを確認する前にバッチを作成	フレームワーク、スタイリング、アニメーションライブラリ、トークン、フォントを最初に確認
sketchbook-read-taste	sketchbook/taste.md を読まずに2つ目のバッチを作成	サマリーを読んで、それに沿ってバッチを調整
sketchbook-never-repeat	「Press Scale」が却下された後、再び提示	新しいインタラクションを作り、古い名前はファイルに残す
sketchbook-batch-size	タイルが4つ	タイルが6～9個
sketchbook-real-stack	ホバーの代わりに PNG を使用	プロジェクトのスタックでホバーを実装
sketchbook-wildcards	9つのタイルすべてが現在の好みの範囲内	7つは好みに沿い、2つはその範囲外
sketchbook-one-gallery	実験ごとに1つ、計8つのルート	動作するタイルを並べた1つの /sketchbook グリッド
sketchbook-keep-or-kill	選択肢のないタイル	Soft Press、メモ1つ、「Keep」と「Kill」
sketchbook-open-it	「/sketchbook に実装しました」	ギャラリーを開き、すべてのタイルを操作
sketchbook-save-the-taste	返信にだけ「Soft Pressを保持しました」と記載	「Kept」の下にSoft Pressを記録し、サマリーを更新
sketchbook-keep-the-component	ギャラリールートにSoft Pressをインラインで残す	sketchbook/kept/SoftPress に移し、ギャラリーのクロームを削除
sketchbook-delete-the-killed	ギャラリー内でCursor Trailをコメントアウト	コードを削除し、名前と理由は好みの記録に残す
sketchbook-remove-the-gallery	すべての選択後も /sketchbook のルーティングが残る	ルートを削除し、保持したコンポーネントは sketchbook/kept/ に残す
sketchbook-suggest-a-clip	次のステップを示さずにバッチを終える	「Soft Pressを録画してください。静止する動きはクリップにする価値があります。」

報告

重大度。 HIGH はモックアップのバッチ、保持したコンポーネントの削除、または本番環境からアクセスできるギャラリーです。MEDIUM は件数が6～9の範囲外であること、ワイルドカードがないこと、好みを記したファイルを読んでいないこと、または実験を繰り返すことです。返信に選択肢を残すこと、保持したタイルをルートに残すこと、却下したコードを残すこと、または選別後もギャラリーを残すことも該当します。LOW はギャラリーを開かなかったこと、またはレビューにクリップの提案がないことです。

形式。 根本原因ごとに指摘を1つ記載します。

file:line - [rule-id] what is wrong

続いて Rule | Count | Severity のサマリーを記載します。HIGH が1つでも残っている場合は Block、それ以外は Approve とします。操作できなかったタイルにはすべて Not verified と記載します。