CHƯƠNG 5. THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ
5.1.6. Màn hình xác thực OTP khi đổi mật khẩu
Hình 30. Màn hình xác thực OTP khi đổi mật khẩu
72
STT Tên Loại Ghi chú
1 Nhập mã OTP TextFormFi
eld
Nhâp mã OTP đã được gửi đến email
2 Xác nhận Button Nhấn để chuyển đến màn hình cài lại mật khẩu
Bảng 9. Mô tả màn hình xác thực OTP để cài lại mật khẩu
73 5.1.7. Màn hình đổi mật khẩu
\
Hình 31. Màn hình đổi mật khẩu
74
STT Tên Loại Ghi chú
1 Mật khẩu mới TextFormFi
eld Người dùng nhập mật khẩu mới
2 Nhập lại mật khẩu mới TextFormFi
eld Người dùng nhập lại mật khẩu mới
3 Xác nhận cài lại mật
khẩu Button Người dùng nhấn để cài lại mật khẩu Bảng 10. Mô tả màn hình trang cài lại mật khẩu
75 5.1.8. Tìm kiếm truyện tranh
Hình 32. Tìm kiếm truyện tranh
76
STT Tên Loại Ghi chú
1 Quay lại Button Quay lại màn hình trước
2 Tìm kiếm TextFormFi
eld Nhập tên truyện cần tìm kiếm
3 Xóa Button Xóa tất cả những kí tự người dùng đã nhập để tìm truyện
4 Tổng số truyện tìm được Text Tổng truyện tìm được dựa theo dữ liệu người dùng nhập vào
5 Những truyện đã tìm
được Card Tất cả những bộ truyện đã tìm được và thông tin của chúng
Bảng 11. Mô tả màn hình trang tìm kiếm truyện tranh
77 5.1.9. Chi tiết truyện tranh
Hình 33. Màn hình chi tiết truyện
78
STT Tên Loại Ghi chú
1 Trở về Button Trở về trang trước
2 Tên truyện Text Tên của truyện
3 Home Button Quay lại trang chủ
4 Ảnh bìa truyện Image Ảnh bìa của truyện
5 Tên truyện Text Tên của truyện
6 Số lượt xem, lượt đánh giá, lượt theo dõi
Text Số lượng lượt xem, lượt đánh giá, lượt theo dõi của bộ truyện
7 Đánh giá RatingBar Đánh giá bộ truyện
8 Tên khác Text Các tên khác của truyện
9 Tác giả Text Các tác giả của truyện
10 Nghệ sĩ Text Các nghệ sĩ của bộ truyện
11 Người đănng Text Người đăng truyện lên ứng dụng
12 Thể loại
Chip Danh sách các thể loại của truyện, nhấn vào tên thể loại để xem những bộ truyện thuộc thể loại đó
13 Giới thiệu nội dung Text Giới thiệu nội dung của truyện 14 Đọc chương mới nhất Button Nhấn vào để đọc chương mới nhất 15 Theo dõi truyện Button Nhấn vào để theo dõi truyện
16 Danh sách chương truyện
List Các chương của bộ truyện, thông tin của từng chương (tên chương, ngày đăng, lượt xem, đã khóa hay miễn phí), 17 Mở khóa chương Text Nhấn vào để mua truyện
Bảng 12. Mô tả màn hình chi tiết truyện tranh
79 5.1.10. Màn hình bình luận
Hình 34. Màn hình bình luận
80
STT Tên Loại Ghi chú
1 Quay lại Button Nhấn vào để quay lại trang chi tiết truyện
2 Avatar của tài khoản
bình luận Image Hiển thị avatar của tài khoản bình luận
3 Nickname, email của tài
khoản bình luận Text Hiển thị email hoặc nickname của tài khoản bình luận
4 Nội dung bình luận Text Nội dung cỉa bình luận
5 Thời điểm bình luận Text Thời điểm người dùng đăng bình luận 6 Like comment Button Like bình luận
7 Dislike comment Button Dislike bình luận
8 Reply Button Phản hồi bình luận
9 Bình luận phản hồi Card Bình luận phản hồi Bảng 13. Mô tả màn hình bình luận
81 5.1.11. Thể loại
Hình 35. Màn hình thể loại
82
STT Tên Loại Ghi chú
1 Danh sách các thể loại Tab Hiển thị tên thể loại, nhấn vào tab để hiển thị các bộ truyện thuộc thể loại đó
2 Hiển thị tất cả thể loại Text Nhấn vào để hiển thị tất cả
3
Danh sách các bộ truyện của thể loại đang chọn
Card
Hiển thị ảnh bìa, tên, số lượt xem, đánh giá của các bộ truyện trong thể loại đang chọn
Bảng 14. Mô tả màn hình thể loại
83 5.1.12. Màn hình đọc truyện
Hình 36. Màn hình đọc truyện
84
STT Tên Loại Ghi chú
1 Quay lại Button Khi nhấn vào sẽ quay lại trang chi tiết truyện
2 Tên chương Text Tên chương đang đọc
3 Quay lại trang home Button Nhấn vào để quay lại màn hình chính 4 Hình ảnh trong chương Image Danh sách hình ảnh của chương truyện 5 Chương trước Button Chuyển đến chương trước
6 Bình luận Button Hiển thị bình luận của chương truyện
7 Danh sách chương
truyện Button Hiển thị danh sách các chương của bộ truyện đang đọc
8 Chương tiếp theo Button Nhấn vào đê đến chương tiếp theo Bảng 15. Mô tả màn hình đọc truyện
85 5.1.13. Màn hình cá nhân
Hình 37. Màn hình cá nhân
86
STT Tên Loại Ghi chú
1 Avatar Image Avatar của tài khoản
2 Số coin Button Số coin còn lại
3 Email Text Email của người dùng
4 Tên Text Tên của người dùng
5 Họ Text Họ của người dùng
6 Số điện thoại Text Số điện thoại của người dùng
7 Giới tính Text Giới tính của người dùng
8 Ngày sinh Text Ngày sinh của người dùng
9 Nickname Text Nicknamecủa người dùng
10 Nâng cấp tài khoản lên
creator Button Nâng cấp tài khoản lên quyền creator Bảng 16. Mô tả màn hình cá nhân
87 5.1.14. Màn hình thay đổi thông tin cá nhân
Hình 38. Màn hình thay đổi thông tin cá nhân
88
STT Tên Loại Ghi chú
1 Tên TextField Nhập tên
2 Họ TextField Nhập họ
3 Ngày sinh Datepicker Chọn ngày sinh
4 Giới tính Dropdownb
utton Chọn giới tính
5 Xác nhận Button Xác nhận thay đổi thông tin cá nhân
6 Hủy Button Hủy thay đổi thông tin cá nhân
Bảng 17. Mô tả màn hình thay đổi thông tin cá nhân
89 5.1.15. Màn hình thêm số điện thoại người dùng
Hình 39. Màn hình thêm số điện thoại người dùng
90
STT Tên Loại Ghi chú
1 Chọn quốc gia DropdownB
utton Chọn quốc gia
2 Nhập số điện thoại TextField Người dùng nhập số điện thoại 3 Xác nhận Button Xác nhận số điện thoại để nhận OTP
Bảng 18. Mô tả màn hình thêm số điện thoại người dùng
91 5.1.16. Màn hình xác thực OTP khi thêm số điện thoại
Hình 40. Màn hình xác thực OTP khi thêm số điện thoại
92
STT Tên Loại Ghi chú
1 Nhập mã OTP TextFormFi
eld
Nhâp mã OTP đã được gửi đến số điện thoại
2 Xác nhận Button Nhấn để thêm số điện thoại Bảng 19. Mô tả màn hình xác thực OTP để thêm số điện thoại
93 5.1.17. Màn hình thư viện
Hình 41. Màn hình thư viện
94
STT Tên Loại Ghi chú
1 Tab lịch sử đọc truyện Tab Tab hiển thị lịch sử đọc truyện 2 Bộ truyện vừa đọc Card Hình của truyện vừa đọc
Bảng 20. Mô tả màn hình tủ sách
95 5.1.18. Màn hình truyện theo dõi
Hình 42. Màn hình truyện theo dõi
96
STT Tên Loại Ghi chú
1 Tab lịch sử Tab Tab hiển thị lịch sử đọc truyện
2 Tab truyện đang theo
dõi Tab Tab hiển thị những truyện đang theo dõi
3 Truyện đang theo dõi Card Bộ truyện đang theo dõi Bảng 21. Mô tả màn hình truyện theo dõi
97 5.1.19. Màn hình thanh toán
Hình 43. Màn hình thanh toán
98
STT Tên Loại Ghi chú
1 Mức nạp Card Mức nạp tiền và coin tương ứng
2 Thanh toán bằng PayPal Button Nạp tiền bằng PayPal
3 Thanh toán bằng
ZaloPay Button Nạp tiền bằng ZaloPay
Bảng 22. Mô tả màn hình thanh toán
99 5.1.20. Màn hình lịch sử thanh toán
Hình 44. Màn hình lịch sử thanh toán
100
STT Tên Loại Ghi chú
1 Số lượng coin Text Số lượng coin còn lại của người dùng 2 Mua coin Button Nhấn vào để đến màn hình mua coin
3 Tab lịch sử thanh toán Tab Nhấn để chuyển sang tab lịch sử thanh toán
4 Tab lịch sử mua truyện Tab Nhấn để chuyển sang tab lịch sử mua truyện
5 Thông tin thanh toán
Card Thông tin về những lần thanh toán bao gồm tình trạng thanh toán, phương thức thanh toán, số lượng thanh toán, thời điểm thanh toán
Bảng 23. Mô tả màn hình lịch sử thanh toán
101 5.1.21. Màn hình lịch sử mua truyện
Hình 45. Màn hình lịch sử mua truyện
102
STT Tên Loại Ghi chú
1 Tab lịch sử mua truyện Tab Nhấn để chuyển sang tab lịch sử mua truyện
2 Tên truyện Text Tên truyện đã mua
3 Tên chương Text Tên chương đã mua
4 Số coin Text Số coin đã dùng để mua truyện
Bảng 24. Mô tả màn hình lịch sử mua truyện
103 5.1.22. Màn hình thông báo
Hình 46. Màn hình thông báo