Daily UI 24日目のお題は「Boarding Pass」。
航空券アプリの画面を制作します。
制作過程
今回も3時間半くらいでした。
リサーチ
既存の飛行機予約アプリや紙の航空券などを参考にしました。DribbbleやPinterestも「Boarding pass」等で検索しました。
要件定義
いつものようにChatGPTに要件を詰めてもらいました。あまり飛行機に乗らない人をターゲットに設定しています。
合わせて、必要な項目も考えます。
ワイヤーフレーム
制作したワイヤーフレームがこちら ↓
遅延中の画面にしてみました。
完成
制作した画面がこちら ↓
搭乗口や座席の辺りのあしらいは、紙の航空券のデザインを参考にして作りました。また、下にある紺のボタンを押すと、搭乗口などでスキャンする二次元コードが表示される想定です。表示した場合の画面がこちら ↓
デザインのポイント
関連情報のタブ
予約情報と合わせて空港内の地図や当日の天気を見られるタブを作りました。乗り慣れていないとそういう周辺情報も含めて知りたいかなと思い、作ってみました。
ボタンで表示する二次元コード
すぐ出せるようにボタンに格納しない方がいいかなとも思ったんですが、他の人に読み取られて悪用されたりする恐れもあるので、最小限の表示に留められるようにしました。
制作してみて
・キャンセルボタン、予約の変更ボタンをつけ忘れました。途中までは覚えてたのに…。載せる項目が多いときは一度確認した方がいいですね。
・チケット風にしたりイラストをつけたり、もう少し楽しそうな感じにできたら良かったです。