機能タイル
機能グリッドの各タイルに、その機能が何をするかを示す小さな抽象シーンを載せます。
実際のグリッド
スクロールして表示するか、マウスでホバー、または Tab でフォーカスすると再生し直します。
構造
- 1角丸 28px のカード 1 枚。セルはボーダー色の上の 1px のヘアラインで区切る。
- 2アートのパネルはセルの 8px 内側、角丸 20px、うっすらした内側のリングと 45° のヘアラインの質感。
- 3シーンは中央に約 126 × 118px。バー、小さなウィンドウ、入力欄で組み、スクリーンショットや本物の文字は使わない。
- 4黄色はシーンの結果にだけ現れる。
- 5左上に 32px のアイコンチップ。タイルの再生に合わせてグリフが一画ずつ描き直される。
- 6タイトルと 1 行の説明はアートの下、アートの外に置く。
再生
- 1各タイルは約 70% 見えてから 200ms 後に一度再生する。同時に入ってきたタイルは 250ms ずつずらす。
- 2ひとつの played 属性がすべてのアニメーションを動かす。再生し直すときは外してリフローさせ、付け直す。
- 3マウスのホバーかキーボードのフォーカスで、最終フレームを 160ms でぼかして消し、ぼかしの下でシーンをやり直してから、ぼかしを解く。
- 4マウスが載っている間は、再生が終わるたびに 600ms 後にもう一度再生する。タッチはリンクに移動する。
- 5ホバーでセルが温かくなり、パネルのリングが濃くなり、チップが左上を起点に 32px から 36px へ大きくなる。
- 6視差効果を減らす設定では、すべてのタイルが最終フレームを表示する。