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

4. 収支編集画面

5. 固定費一覧画面

6. 固定費登録画面

7. 固定費編集画面

8. 貯金目標一覧画面

9. 貯金目標詳細

10. 貯金目標登録

11. 貯金目標編集画面

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

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

14. ジャンル一覧画面

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

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

17. ログイン画面

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

19. 削除モーダル
