4 PHÂN TÍCH VÀ THIẾT KẾ WEBSITE BÁN COUPON 1Phân tích yêu cầu
4.3 Thiết kế giao diện
Mô tả màn hình:
Cấu trúc màn hình sử dụng trong trang web có bốn phần chính (frame): • Logo, banner quảng cáo và Topmenu ở trên cùng. Topmenu bao gồm
các thành phần: đăng ký, đăng nhập, hỗ trợ, thành viên, sản phẩm mới nhất, sản phẩm bán chạy.
• Khung bên trái (left panel): gồm hình ảnh và thông tin ngắn gọn của các deal mới nhất.
• Khung giữa (content panel) gồm những hình ảnh và thông tin chi tiết cho từng deal.
• Phần dưới cùng: bao gồm thông tin địa chỉ.
Tùy vào từng màn hình mà các menu trên, trái, giữa, dưới có thể thay đổi theo nội dung của màn hình.
Đây là màn hình chính của trang web, màn hình mà người dùng nhìn thấy đầu tiên khi truy cập trang website. Bên trên là button , nếu đăng nhập Yahoo người dùng có thể chat với admin sau khi click vào button này. Bên phải là các hyperlink chuyển sang trang đăng nhập và đăng ký. Người dùng có thể xem danh sách catalogue sản phẩm bên trái, xem thông tin sản phẩm bao gồm thời gian còn lại có thể mua, hình ảnh, các thông tin khác… Người dùng có thể nhấn vào button Mua ngay để mua sản phẩm, nếu chưa đăng nhập thì website sẽ chuyển sang màn hình đăng nhập vì chỉ có thành viên đăng nhập mới được mua sản phẩm.
Màn hình trang chủ sau khi thành viên đăng nhập
Cũng giống như màn hình trang chủ chỉ khác chỗ hyperlink đăng nhập và đăng ký được thay bằng tên của thành viên, hyperlink qua Tài khoản và hyperlink Logout.
Màn hình giao diện đăng nhập hệ thống
Màn hình đăng nhập là màn hình dùng để truy cập vào hệ thống theo các quyền hạn khác nhau.
Nếu thành công, người dùng sẽ đăng nhập và làm việc với hệ thống dưới quyền hạn của đã được phân công.
+ Mô tả hoạt động:
Người dùng nhập email đăng nhập và mật khẩu. Sau đó chọn “Đăng nhập”. Nếu người dùng muốn đăng nhập bằng tài khoản facebook sẵn có thì có thể chọn button “Login with facebook”.
+ Các thành phần của màn hình:
Nhóm Loại Ý nghĩa
1 TextBox Hai textbox thuộc nhóm này dùng để nhập email và mật khẩu đăng nhập.
2 Button1 Button đăng nhập
3 Button2 Button đăng nhập bằng tài khoản facebook Lưu ý: Các nhóm được minh họa bằng các số được đánh trên màn hình.
Hình 4 Màn hình đăng nhập
Màn hình đăng ký thành viên
+ Cấu trúc:
Màn hình chỉ có Topmenu mà không có khung trái hay giữa. + Mô tả hoạt động:
Khi người dùng muốn trở thành thành viên của trang web, người dùng ấn vào button “Đăng ký” trên top menu. Nếu đăng ký thành công người dùng sẽ trở thành thành viên chính thức của trang web.
+ Các thành phần chính của màn hình
Nhóm Loại Ý nghĩa
1 Validate Sumary Thông báo lỗi khi nhập các thông tin cá nhân không đúng định dạng hay yêu cầu
2 TextBox Nhập thông tin cá nhân
3 Button Button đăng ký
Hình 4 Nội dung màn hình đăng ký
Màn hình hiển thị giỏ hàng
Sau khi thành viên nhấn vào button mua hàng sẽ hiện ra màn hình hiển thị giở hàng này. Thành viên có thể thêm số lượng sản phẩm và nhấn vào button Update hoặc có thể nhấn button Delete để bỏ chọn sản phẩm. Sau khi chọn sản phẩm người dùng có thể thanh toán bằng ngân lượng hoặc Paypal.
Hình 4 Màn hình hiển thị giỏ hàng và chọn phương thức thanh toán
Màn hình chỉnh sửa thông tin người dùng
+ Mô tả hoạt động: người dùng sau một thời gian sử dụng có thay đổi một số thông tin riêng tư như mật khẩu hay một số thông tin khác. Họ có thể chỉnh sửa các thông tin đó.
Màn hình xác nhận thông tin thành viên trước khi đặt mua hàng
Thành viên cần nhập lại các thông tin xác nhận để chuyển hàng
Màn hình sau khi thành viên đặt mua thành công
Màn hình thông báo sau khi thành viên mua hàng thành công
Màn hình thông tin sản phẩm đã mua
Những sản phẩm đã mua của thành viên
Nhóm các màn hình quản lý:
Đây là nhóm các màn hình của quản trị viên. • Quản lý sản phẩm
Quản trị viên có thể chỉnh sửa thông tin sản phẩm, thêm sản phẩm, xóa sản phẩm
Hình 4 Màn hình chỉnh sửa, xóa sản phẩm
Hình 4 Màn hình thêm sản phẩm
• Quản lý thành viên
Hình 4 Màn hình xóa thành viên
• Thống kê
5 HIỆN THỰC