Thiết kế giao diện

2. Phân tích, thiết kế hệ thống

2.4. Thiết kế giao diện

2.4.1. Sơ đồ liên kết màn hình

Trang 115

2.4.2. Danh sách các màn hình - Màn hình giới thiệu

- Màn hình đăng nhập - Màn hình đăng ký

- Màn hình quên mật khẩu - Màn hình xác thực email

- Màn hình thiết lập số dư ban đầu - Màn hình trang chủ

- Màn hình lịch chi tiêu - Màn hình thêm chi tiêu - Màn hình chỉnh sửa chi tiêu - Màn hình xem chi tiêu - Màn hình báo cáo - Màn hình cài đặt - Màn hình tìm kiếm

- Màn hình đổi thông tin cá nhân - Màn hình đổi mật khẩu

- Màn hình thống kê chi tiêu 2.4.3. Mô tả các màn hình

2.4.3.1. Màn hình giới thiệu a. Giao diện

Trang 116

b. Mô tả các đối tượng trên màn hình

STT Tên xử lý Ý nghĩa Điều kiện gọi Ghi chú

Trang 117

1 Giới thiệu tiếp theo

Hiển thị thông tin giới thiệu ứng dụng tiếp

theo

Khi người dùng nhấn vào button

tiếp

2 Bỏ qua các thông tin giới thiệu

Bỏ qua các thông tin giới

thiệu và trực tiếp đi đến thông tin giới thiệu cuối cùng

Khi người dùng nhấn vào button

bỏ qua

2.4.3.2. Màn hình đăng nhập a. Giao diện

Trang 118

b. Mô tả các đối tượng trên màn hình

STT Tên xử lý Ý nghĩa Điều kiện gọi Ghi chú

1 Đăng Nhập

Đăng nhập vào hệ thống bằng

email + password

Khi người dùng nhập đầy đủ

Email + password và nhấn vào button

đăng nhập

2 Đăng nhập bằng Google

Đăng nhập vào hệ thống bằng

tài khoản Google

Khi người dùng nhấn vào button

Google

3 Đăng nhập bằng Facebook

Đăng nhập vào hệ thống bằng

tài khoản Facebook

Khi người dùng nhấn vào button

Facebook

4 Quên mật khẩu

Lấy lại mật khẩu khi người

dùng quên

Khi người dùng nhấn vào button quên mật khẩu 5 Đến màn hình

đăng ký

Đăng ký một tài khoản mới

Khi người dùng nhấn vào button Đăng ký ngay

2.4.3.3. Màn hình đăng ký

a. Giao diện

Trang 119

b. Mô tả các đối tượng trên màn hình

STT Tên xử lý Ý nghĩa Điều kiện gọi Ghi chú

1 Đăng ký

Đăng ký tài khoản mới bằng

Email + password mới

trên hệ thống

Khi người dùng nhập đầy đủ các

thông tin và nhấn vào button

đăng ký 2 Về màn hình

đăng nhập

Về lại màn hình đăng nhập

Khi người dùng nhấn vào đăng

nhập ngay

2.4.3.4. Màn hình quên mật khẩu

Trang 120

a. Giao diện

b. Mô tả các đối tượng trên màn hình

STT Tên xử lý Ý nghĩa Điều kiện gọi Ghi chú

1 Gửi yêu cầu đặt lại mật khẩu

Gửi đi yêu cầu đặt lại mật khẩu

lên hệ thống

Khi người dùng nhập vào email

đúng và nhấn vào button Gửi

2.4.3.5. Màn hình xác thực email a. Giao diện

Trang 121

b. Mô tả các đối tượng trên màn hình

STT Tên xử lý Ý nghĩa Điều kiện gọi Ghi chú

1 Gửi lại email xác thực

Hệ thống sẽ gửi một email xác

thực đến tài khoản email của

dùng

Nhấn vào button gửi lại

email

2 Đến trang chủ Đưa người dùng đến trang chủ

Khi người dùng xác thực email

và nhấn vào button đi đến

trang chủ

Trang 122

2.4.3.6. Màn hình thiết lập số dư ban đầu a. Giao diện

b. Mô tả các đối tượng trên màn hình

STT Tên xử lý Ý nghĩa Điều kiện gọi Ghi chú

1

Lưu lại số tiền hàng tháng của

người dùng

Lưu lại số tiền hàng tháng của người dùng vào

hệ thống

Khi người dùng nhập vào số tiền và nhấn button

ok

2.4.3.7. Màn hình trang chủ

a. Giao diện

Trang 123

b. Mô tả các đối tượng trên màn hình

STT Tên xử lý Ý nghĩa Điều kiện gọi Ghi chú

1 Thanh cuộn tháng

Chọn để hiển thị danh sách chi tiêu tháng

đó

Chọn tháng cần hiển thị trên

màn hình

2 Text lable số dư đầu số dư cuối

hiển thị số dư đầu số dư cuối và tổng số tiền đã chi tiêu trong

tháng

mở page home/trang chủ

trên màn hình

3 Danh sách chi tiêu tháng

Hiển thị danh sách chi tiêu

không

Trang 124

của tháng đã chọn

4 Chi tiết chi tiêu

xem chi tiết về chi tiêu mình đã chọn trong danh

sách chi tiêu

chọn 1 chi tiêu bất kì trong danh sách chi

tiêu 2.4.3.8. Màn hình lịch chi tiêu

a. Giao diện

b. Mô tả các đối tượng trên màn hình

STT Tên xử lý Ý nghĩa Điều kiện gọi Ghi chú

1 Lịch Chọn thời gian

mong muốn , truy

Chọn ngày tháng năm cần

xem chi tiêu

Trang 125

tìm chi tiêu theo ngày nhanh chóng 2 Text lable

thu nhập

Hiển thị thu nhập

trong ngày Mở trang lịch 3

Text lable chi tiêu

Hiển thị chi tiêu

trong ngày Mở trang lịch

4

Text lable tổng

Hiển thị tổng thu nhập và chi tiêu

trong ngày

Mở trang lịch

5 Danh sách chi tiêu trong ngày

Hiển thị danh sách chi tiêu trong ngày

đã chọn

Chọn ngày mong muốn

6 Chi tiết chi tiêu

xem chi tiết về chi tiêu mình đã chọn trong danh sách

chi tiêu

chọn 1 chi tiêu bất kì trong danh sách chi

tiêu 2.4.3.9. Màn hình thêm chi tiêu

a. Giao diện

Trang 126

b. Mô tả các đối tượng trên màn hình

STT Tên xử lý Ý nghĩa Điều kiện gọi Ghi chú

1 Button thoát

Hủy thêm chi tiêu

Khi người dùng nhấn vào button X trên màn hình

2 Texbutton Lưu

Lưu thông tin chi tiêu người dùng đã nhập

Khi người dùng nhấn vào texbutton Lưu trên màn hình

3 Số tiền Nhập số tiền

chi tiêu

Nhấn vào

textbox Bắt buộc

Trang 127

4 Ngày tháng năm Ngày tháng năm chi tiêu

Nhấn vào label ngày tháng năm

Mặc định là hiện tại

5 Giờ Thời gian chi

tiêu trong ngày

Nhấn vào label giờ

Mặc định là hiện tại

6 Ghi chú Nhập ghi chú Nhấn vào

textbox Không bắt buộc

7 Loại Chọn loại

chi tiêu

Nhấn vào

label loại Bắt buộc

8 Vị trí Chọn vị trí

chi tiêu

Nhấn vào

label loại Không bắt buộc

9 Bạn bè Thêm bạn bè

cùng chi tiêu

Nhấn vào

label bạn bè Không bắt buộc

10 Ảnh Ảnh chụp

chi tiêu

Nhấn vào

label ảnh Không bắt buộc

2.4.3.10. Màn hình chỉnh sửa chi tiêu a. Giao diện

Trang 128

b. Mô tả các đối tượng trên màn hình

STT Tên xử lý Ý nghĩa Điều kiện gọi Ghi chú

Button thoát hủy chỉnh sửa chi tiêu

Khi người dùng nhấn vào button X trên màn hình

Texbutton Lưu

lưu chi tiêu thông tin người

dùng đã sửa trên màn hình

Khi người dùng nhấn vào texbutton Lưu trên màn hình Sửa thông tin chi

tiêu

Người dùng có thể sửa chi tiêu với thông tin

người dùng có thể sửa thông tin chi tiêu khi

người dùng

Trang 129

hiện có trên màn hình

click vào thông tin tương ứng

2.4.3.11. Màn hình xem chi tiêu a. Giao diện

b. Mô tả các đối tượng trên màn hình

STT Tên xử lý Ý nghĩa Điều kiện gọi Ghi chú

1 Button quay lại Quay lại màn hình trước đó

Khi người dùng nhấn vào button

< trên màn hình 2 Button chia sẻ chia sẻ chi tiêu

lên mạng xã hội Khi người dùng nhấn vào button

Trang 130

chia sẻ trên màn hình

3 Button xóa

xóa chi tiêu đang hiển thị trên màn hình

Khi người dùng nhấn vào button xóa trên màn

hình

4 Thông tin chi tiêu

Hiển thị chi tiết chi tiêu mà người dùng đã

lưu

Khi người dùng nhấn vào chi

tiêu ở page home trước đó

2.4.3.12. Màn hình báo cáo a. Giao diện

Trang 131

b. Mô tả các đối tượng trên màn hình

STT Tên xử lý Ý nghĩa Điều kiện gọi Ghi chú

1 Báo cáo Tuần Hiển thị báo cáo tuần

Khi người dùng nhấn vào nút

tuần 2 Báo cáo Tháng Hiển thị báo cáo

tháng

Khi người dùng nhấn vào nút

tháng 3 Báo cáo Năm Hiển thị báo cáo

năm

Khi người dùng nhấn vào nút

năm

4 Tìm kiếm Chuyển sang

trang tìm kiếm

Khi người dùng nhấn vào nút

tìm kiếm 5 Báo cáo Chi tiêu

Chuyển sang báo cáo cho chi

tiêu

Khi người dùng nhấn vào nút

chi tiêu 6 Báo cáo Thu

nhập

Chuyển sang báo cáo cho thu

nhập

Khi người dùng nhấn vào nút

thu nhập

7 Hiển thị biểu đồ tròn

Chuyển sang biểu đồ tròn

Khi người dùng nhấn vào biểu tượng biểu đồ

tròn

8 Hiển thị biểu đồ cột

Chuyển sang biểu đồ cột

Khi người dùng nhấn vào biểu tượng biểu đồ

cột

2.4.3.13. Màn hình cài đặt

Trang 132

a. Giao diện

b. Mô tả các đối tượng trên màn hình

STT Tên xử lý Ý nghĩa Điều kiện gọi Ghi chú

1 Cài đặt tài khoản Thay đổi thông tin cá nhân

Khi người dùng nhấn vào Button tài khoản trên

màn hình

2 Đổi mật khẩu Thay đổi mật khẩu hiện tại

Khi người dùng nhấn vào Button đổi mật khẩu trên màn hình

Trang 133

3 Ngôn ngữ

Chuyễn đổi ngôn ngữ sẵn có

trong ứng dụng

Khi người dùng nhấn vào Button ngôn ngữ trên

màn hình

4 Chế độ tối Thay đổi giao diện màn hình

Khi người dùng nhấn vào Button chế độ tối trên

màn hình

5 Lịch sử

Xem lịch sử giao dịch từ mới nhất đến cũ nhất của người dùng

Khi người dùng nhấn vào Button lịch sử trên màn

hình

6 Xuất CSV

Xuất toàn bộ dữ liệu chi tiêu của

người dùng thành file CSV

Khi người dùng nhấn vào Button xuất CSV trên

màn hình

7 Tỷ giá tiền tệ Xem tỷ giá tiền tệ hiện tại

Khi người dùng nhấn vào Button Tỷ giá tiền tệ trên màn hình

8 Thông tin Xem thông tin ứng dụng

Khi người dùng nhấn vào Button thông tin trên

màn hình

9 Đăng xuất

Đăng xuất tài khoản ra khỏi

ứng dụng

Khi người dùng nhấn vào Button Đăng xuất trên

màn hình

2.4.3.14. Màn hình tìm kiếm a. Giao diện

Trang 134

b. Mô tả các đối tượng trên màn hình

STT Tên xử lý Ý nghĩa Điều kiện gọi Ghi chú

1 Tìm kiếm chi tiêu

Tìm kiếm chi tiêu theo yêu cầu của người

dùng

Khi người dùng nhấn vào button

kính lúp trên bàn phím

2 Hiển thị bộ lọc

Hiển thị bộ lọc tìm kiếm lên

màn hình

Khi người dùng nhấn vào button có biểu tượng

bộ lọc 3 Lọc tìm kiếm

theo số tiền

Lọc các tìm kiếm theo số tiền mà người

Khi người dùng chọn những tùy

Trang 135

dùng chọn trong bộ lọc

chọn trong bộ

lọc số tiền

4 Lọc tìm kiếm theo thời gian

Lọc các tìm kiếm theo thời gian mà người dùng chọn trong

bộ lọc

Khi người dùng chọn những tùy chọn trong bộ

lọc thời gian

5 Lọc tìm kiếm theo bạn bè

Lọc các tìm kiếm theo bạn

bè mà người dùng chọn trong

bộ lọc

Khi người dùng chọn những tùy chọn trong bộ

lọc bạn bè

6 Lọc tìm kiếm theo ghi chú

Lọc các tìm kiếm theo ghi chú mà người dùng chọn trong

bộ lọc

Khi người dùng chọn những tùy chọn trong bộ

lọc ghi chú

7 Lọc tìm kiếm theo nhóm

Lọc các tìm kiếm theo nhóm

mà người dùng chọn trong bộ

lọc

Khi người dùng chọn những tùy chọn trong bộ

lọc nhóm

8 Áp dụng bộ lọc vào tìm kiếm

Áp dụng bộ lọc sau khi được người dùng tùy chỉnh vào trong

tìm kiếm

Khi người dùng nhấn vào nút tìm kiếm trong

bộ lọc

2.4.3.15. Màn hình thay đổi thông tin cá nhân a. Giao diện

Trang 136

b. Mô tả các đối tượng trên màn hình

STT Tên xử lý Ý nghĩa Điều kiện gọi Ghi chú

1 Thêm ảnh người dùng

Người dùng có thể thêm ảnh cá

nhân vòa tài khoản

Khi người dùng nhấn vào button dấu + trên màn

hình

2 Họ và tên người dùng

Người dùng có thể thêm tên hiển thị trong

tài khoản

Người dùng click vào thanh

textbox họ tên để sửa 3 Số tiền hàng

tháng

Người dùng có thể sửa tổng số

Người dùng click vào thanh

Trang 137

tiền chi tiêu hàng tháng

textbox tiền hàng tháng sửa

4 Ngày sinh

Người dùng có thể sửa ngày sinh của mình trong tài khoản

Người dùng click vào thanh

textbox ngày sinh để sửa

5 Giới tính

Người dùng có thể sửa giới tính

của mình trong tài khoản

Khi người dùng chọn button male/female

2.4.3.16. Màn hình đổi mật khẩu a. Giao diện

Trang 138

b. Mô tả các đối tượng trên màn hình

STT Tên xử lý Ý nghĩa Điều kiện gọi Ghi chú

1 Textbox Nhập mật khẩu cũ

Nhập mật khẩu cũ để có thể sang trang tiếp theo để đổi mật

khẩu

Người dùng click và textbox

trên màn hình để nhập mật

khẩu cũ

2 Button gửi

chuyển trang tiếp khi người dùng nhập đúng

mật khẩu cũ

Khi người dùng click vào button

gửi trên màn hình

3 Textbox nhập mật khẩu mới

Nhập mật khẩu mới của người

dùng

Người dùng click và textbox

mật khẩu để nhập mật khẩu

mới

4 Textbox nhập lại mật khẩu mới

Nhập lại mật khẩu mới của người dùng

Người dùng click và textbox

nhập lại mật khẩu để nhập lại

mật khẩu mới

5 Button gửi

kiểm tra và xác nhận thay đổi mật khẩu của người dùng

Khi người dùng click vào button

gửi trên màn hình