移行中の知識
UIコンポーネント
UI Component
定義
UIコンポーネント（UI component）とは、button、checkbox、text input、modal等のように、interface上の特定の役割や操作上の問題を担い、複数の場所で再利用できるよう設計・実装されたUIの構成単位です。見た目だけでなく、入れられるcontent、状態、振る舞い、keyboard操作やfocus等のaccessibility条件まで含めて考えます。componentはそれ自体でtask全体の最適解になるものではなく、複数のcomponentをcontextに応じて組み合わせたpatternやflowとは粒度が異なります。
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
web application
Button componentの状態を設計する
見るポイント
defaultの見た目だけを作らず、hover、focus、disabled、loading、labelの長さ、icon併用、keyboard操作等まで含めて再利用可能な単位にする。各pageで別のbuttonを描き直すのではなく、共通componentとして揃える条件と、contextによって変える条件を分ける。
form design
Text inputを別taskで再利用する
見るポイント
email、氏名、検索等で同じinput componentを使っても、label、hint、validation、autocomplete等はtask contextに応じて変わる。componentを再利用することと、入力内容やinteractionまで一律にすることを分ける。
注意
誤解しやすい点
- 見た目が似たelementをまとめただけで、stateやbehavior、accessibility条件を持たないものを完成したUI componentと考える。
- componentを再利用すればtask全体のUXも自動的に適切になると考える。
- componentの内部実装やDOM nodeの細かさと、design上の再利用単位を常に一致させる。
- component consistencyを優先して、contextに必要なlabel、content、error handlingまで固定する。
関連
関連する概念
出典