画面定義書

Qiita用ブラッシュアップ
未着手
ステータス
進行中
作成日時
最終更新日時

画面一覧


No.画面名概要
1ダッシュボード中心となる画面。ここには収支が確認できるカレンダー、カレンダーの日付を押下すると出てくる収支詳細表、今月あとどのくらい使用可能であるのか残金と総資産を表示するカードを表示する。収支詳細表の変更したいものを押下すると収支編集画面へ遷移し、ごみ箱を押すと削除がされるようにする。削除時、削除しても良いか聞くモーダル表示。
2ヘッダーヘッダーには「ダッシュボード」「収支登録画面」「固定費一覧画面」「貯金目標一覧画面」「ユーザー情報編集画面」へ遷移するボタンを表示。
3収支登録画面収支を登録する画面。収入も支出も同じ画面で行うが、トグルにより収入の記録であるか支出の記録であるかの判断を行う。支出の場合のみ、画像をアップロードするボタンを表示。
4収支編集画面収支を編集する画面。収支登録画面と同様のフォーム。しかし、トグルで収支を切り替えることは不可能。この画面に遷移した際、既に入力してあった項目は入力されている状態で表示する。
5固定費一覧画面登録した固定費を一覧表示する画面。+を押下すると固定費登録画面へ遷移。それぞれの固定費を押下すると、固定費詳細へ遷移。ゴミ箱を押すと削除がされるようにする。削除時、削除しても良いか聞くモーダル表示。
6固定費登録画面固定費を登録する画面。
7固定費編集画面固定費を編集する画面。固定費登録画面と同様のフォーム。この画面に遷移した際、既に入力してあった項目は入力されている状態で表示する。
8貯金目標一覧画面登録した貯金目標を一覧表示する画面。+を押下すると貯金目標登録画面へ遷移。それぞれの貯金目標を押下すると、貯金目標詳細画面に遷移する。ゴミ箱を押すと削除がされるようにする。削除時、削除しても良いか聞くモーダル表示。
9貯金目標詳細画面貯金目標詳細を表示する画面。画面右にその貯金目標に紐づく貯金履歴一覧が表示される。
10貯金目標登録画面貯金目標を登録する画面。
11貯金目標編集画面貯金目標を編集する画面。貯金目標登録画面と同様のフォーム。この画面に遷移した際、既に入力してあった項目は入力されている状態で表示する。
12貯金履歴登録モーダル貯金履歴を登録するモーダル。
13貯金履歴編集モーダル貯金履歴を編集するモーダル。
14ジャンル一覧画面収支・固定費で使用するジャンルを管理する画面。画面内で編集と削除が可能
15ジャンル新規登録モーダルジャンルを新規登録するモーダル。収支登録画面・固定費登録画面で使用。
16ユーザー情報編集画面ユーザー情報を編集する画面。編集ボタンを押下すると、編集が可能になる。
17ログイン画面ログインをする場面。タイムアウト時にもこの画面に遷移される。新規登録はこちらボタン押下時、新規ユーザー登録画面へ遷移。※パスワードを忘れた際の処理へも遷移したいが、実装が間に合うかどうかわからないので、余裕があれば実装。
18新規ユーザー登録画面新規ユーザーの情報を登録する画面。登録が完了するとログイン画面へ遷移。
19削除モーダル削除ボタンを押下した際に表示される、本当に削除していいかを問うモーダル。全ドメイン共通デザイン。

画面詳細


1.Dashboard 2. ヘッダー

3. 収支登録画面

4. 収支編集画面

5. 固定費一覧画面

6. 固定費登録画面

7. 固定費編集画面

8. 貯金目標一覧画面

9. 貯金目標詳細

10. 貯金目標登録

11. 貯金目標編集画面

12. 貯金履歴登録モーダル

13. 貯金履歴編集モーダル

14. ジャンル一覧画面

15. ジャンル新規登録モーダル

16. ユーザー情報編集画面

17. ログイン画面

18. 新規ユーザー登録画面

19. 削除モーダル