こんにちは！iOSエンジニアの柳です。 今回はアプリ開発におけるUIの状態表現について記事を書きたいと思います。
背景
開発を行う際、一枚絵のデザインを見た時にこのデータパターンはどう表示するんだっけ？と考え始めると手が止まり生産性が落ちるため、事前に確認するためのチェックリストのようなものを作ってみました。
考慮した方が良さそうなもの
どういった種別のものがあるのか洗い出してみました。
ボタン
観点：主に文字・色・画像などに変化があるのかを確認します。
- ボタンが有効または無効の時に見た目が変わるかどうか
- ボタンが選択/非選択状態の時に見た目が変わるかどうか
- ボタンが押下中の時に見た目が変わるかどうか
テキスト
観点：テキスト量に応じた表示パターンを確認します。
- 表示するテキストが短い・長い場合はどう表示するか
- 何行までテキストを表示するか
- 最大行まで表示する場合は末尾をどう表示するか（...で表示する等）
- 表示するテキストが存在しない場合はどう表示するか（表示エリアを詰める等）
画像
観点：主に画像のアスペクト比と画像をロードした前後の動きを確認します。
- 画像のアスペクト比はいくつを想定しているのか
- 画像が縦長・横長の場合、どういった表示をするか（縦横比を維持して表示・切り取りなど）
- 画像のロード中にインジケーターを表示するかどうか
- 画像のロード中にローカルの画像を一時的に表示するかどうか
- 画像のロードに失敗した場合はどんな画像を表示するのか
- 背景透過のアイコンと背景の色が同じだった場合を考慮してアイコンに影がついているか
タブ
観点：ボタンの観点＋バッジの表示を確認します。
- タブが選択/非選択状態の時に見た目が変わるかどうか
- バッジを表示するかどうか
テーブルビュー
観点：データの件数とセルのパターンについて確認します。
- 一覧に表示するデータが0件だった場合、何を表示するか
- テーブルに表示するセルのパターンは網羅されているかどうか
スクロール
観点：主にスクロールした時に動作について確認します。
- どこからどこまでをスクロール領域にするか
- スクロールの背景をどうするか
その他
- アニメーションの有無
- ダークモード時の色はどうするか
- iPad等画面サイズが違う場合どう表示するか（ユニバーサル or iPhoneサイズ等）
感想
さっと書いてみただけでもこれだけの量があるのでやはりチェックリストを作った方が良さそうな印象でした。 これまでの経験上、要件定義を行いデザインを作ってもらう段階でこういった内容は抜けやすく実装段階になって質問が増える印象なので、ある程度機械的にチェックすると生産性の向上につながるのではないかと思いました。
