画面とコンポーネントのパターンを作る
THEME
Lesson6-05・06・07で作った画面を元に、いろいろなパターンを作ります。エラー表示やパスワードの表示非表示の切り替えなど、複数のパターンを持つ要素が画面上にあります。 デザインの一貫性を保つためにも、デザインの用意が必要です。Lesson6-08では、それぞれのパターンを作り、コンポーネント化していきます。
テキストフォームのパターンを作る
テキストフォームには複数の状態が存在します。デザインをするときに意識した方がよいパターンは、主に以下です。
- 何も入力されていない状態
- テキストフォームが選択されている状態
- 適切な文字が入力されている状態
- 文字が多量に入力されているか、文字数制限ギリギリまで入力されている状態
- エラーが生じている状態
formでそれぞれのパターンを作っていきます。 このとき、formのバリアンツに追加していくことで、ほかの画面でも展開しやすくなります。 認証コード入力フォームについては、文字数を超えた場合の表示はないため、作りません。
コンポーネント・バリアンツは、xxページ、LessonX-XX参照。
エラーが生じている状態では、エラーの原因をテキストでユーザーに伝えることで、どうやったらエラーが解除できるかわかりやすくなります。 端的な言葉で追加するとよいでしょう。
パスワード入力フォームにはパスワードの表示・非表示を切り替えるボタンを搭載しています。 パスワードが表示されたパターン・パスワードが非表示のパターンをそれぞれ作ります。 アイコンの状態が変化する点に気をつけます。
@div:figure
formのパターン @divend
慣れてきたら、テキストフォームを作るときに、はじめからパターンを含めた形でコンポーネントを作っておくとよいでしょう。デザインの考慮漏れを防ぐことができます。
キーボードを配置する
入力フォームがある画面では、OS独自のキーボードが表示されます。 コミュニティで配布されているものや、スクリーンショットを配置し、キーボードが配置された状態を再現すると、実際の画面に近い形で見ることができます。
@div:figure
キーボードが表示されたパターン @divend
コミュニティは、xxページ、LessonX-XX参照。
キーボードに隠れてしまう要素が重要なものの場合、レイアウトや配置を調整し、なるべく隠れないようにします。
パターンを適用した画面を作る
フォームのパターン・キーボードを配置したパターンを作成したら、Lesson6-05・06・07で作成した画面に当ててみます。 制作に慣れるまでは、作って確認してみるとよいでしょう。
横幅が最小サイズの端末の場合のデザインを作る
フレームのサイズをiPhone 13 miniで作っていますが、iPhone SEのサイズで一部の画面を制作してみることで、すべての端末で問題なくデザインの再現ができるかを確認できます。 すべての画面を作ることが望ましいですが、共通する要素が多い画面が複数ある場合は、代表的な画面を選びます。
2023年1月現在で、考えておくとよい最小サイズの画面はiPhone SEサイズです。 余裕があれば、大きな画面のときのパターンも考慮しておくと、汎用性の高い画面を作ることができます。理想は、すべての画面サイズに適用できるデザインにすることです。
@div:figure
iPhone 8 @divend