[DailyUI] 出張申請作成フローデザイン
あけおめです！今年もよろしくです！
Bonoで出張申請作成フローのデザインをしたので、作業メモを記しておきます！
想定した仕様
PCで見る想定。レスポンシブの検討はなし。
入力する項目はこちらの仕様です。
アウトプット
デザインファイル
プロトタイプ
意識したこと
配色
配色はプライマリーからのみを使ってデザインしてみた。
逆にセカンダリーを使って目立たせるタイミングがわからなかったので、プライマリーの目立たさが減っているかもしれない懸念はある。
余白
近い意味をもつ情報たちは近くに、離れているものは遠くにを意識しました。
配置
最初はフォームラベルを左揃えに、入力欄を右揃えにしていたのですが、変な余白が空いてしまったので、ファイルアップロード以外は全て縦並びに統一させました。
SmartHRさんのUIトレースをした経験のおかげで、アイデアが出てきました。
体験
入力情報が多かったため、ステップごとに入力してもらう体験にしました。そのため、最後に確認ページを入れて入力内容に誤りがないかを確認させるページを入れました。
ステップの進捗UIはこちらの記事を参考にしました。どうしても横並びに書いていくと文字が小さくなったり、1つ増えると幅が狭くなるなどがあると思ったので、円グラフで進捗を可視化しました。
気になるところ
「ステップとフォームの余白」と「フォーム提出のボタンとフォームの余白」はどちらを多く開けた方がよいかがわからなかった。
意味的には、フォーム提出ボタンはフォーム内のコンテンツなので、ステップとの余白より開けるべきではないと思ったが、見栄え上ボタンが近く寄ってる気がしたので、何か気持ち悪い気がした。
まとめ
UIの余白の調整にいったりきたりしたので、便利な機能もちゃんとインプットして使えるようになることも今後は意識した方が良いかと思いました。
とはいえ、はじめてのWebアプリのUI作ってみたので、いい経験になりました。
この記事が気に入ったらサポートをしてみませんか？