Thiết kế giao diện

Một phần của tài liệu Xây dựng hệ thống thương mại hướng dịch vụ (Trang 86 - 110)

4.7.1 Giao diện ứng dụng SaaSSystem - ứng dụng cha

4.7.1.1 Front-end

Thiết kế giao diện phần SaaSSystem với tiêu chí: đơn giản, thân thiện và dễ dùng. Sau đây là một số màn hình chính của ứng dụng phía SaaSSystem:

4.7.1.1.1 Màn hình trang chủ SaaSSystem

Hình 4-35 Trang chủ ứng dụng SaaSSystem

(1): Logo hệ thống (2): Hệ thống menu trái

4.7.1.1.2 Màn hình đăng ký SaaSCustomer

Hình 4-36 Màn hình đăng ký SaaSCustomer

4.7.1.1.3 Màn hình đăng nhập SaaSCustomer

4.7.1.2 Back-end

4.7.1.2.1 Màn hình login hệ thống SaaSSystem

Hình 4-38 Màn hình login SaaSAdmin

Tên đăng nhập: không được bỏ trống Mật khẩu: không được bỏ trống

4.7.1.2.2 Màn hình trang chủ khu vực admin của SaaSSystem

Hình 4-39 Màn hình trang chủ admin SaaSAdmin

(1): Logo + header

(2): Hệ thống menu ngang

(3): Thông tin người dùng đăng nhập

(4): Khu vực nội dung thay đổi theo menu ngang ở trên (5): Footer – chứa thông tin bản quyền

4.7.1.2.3 Màn hình danh sách khách hàng (SaaSCustomer)

Hình 4-40 Màn hình danh sách khách hàng SaaSCustomer

4.7.1.2.4 Màn hình danh sách người dùng

4.7.2 Giao diện ứng dụng SaaSCustomer - ứng dụng con

4.7.2.1 Front-end

Hình 4-42 Màn hình trang chủ SaaSCustomer

(1): Khu vực top menu. Chứa menu top và hiển thị thông tin người đăng nhập.

(2): Logo site. Mỗi site có logo khác nhau và logo này có thể cấu hình trong quản trị site. (3): Banner site. Mỗi site có banner riêng và banner này có thể cấu hình trong quản trị site.

(4): Hệ thống menu chính (5): Tìm kiếm sản phẩm (6): Thống kê tổng quan site

(7): Hệ thống menu trái thể hiện danh mục hiện có của site. (8): Khu vực sản phẩm xem nhiều nhất.

(9): Khu vực sản phẩm của từng danh mục. Sản phẩm này hiển thị theo tiêu chí mới nhất trong từng danh mục.

(10): Khu vực thể hiện thông tin tin tức (11): Khu vực banner quảng cáo

(12): Thông tin hữu ích: tỉ giá, thời tiết, …

(13): Thông tin footer – địa chỉ liên hệ, email, điện thoại. Các thông tin này khác nhau cho từng site.

4.7.2.1.2 Màn hình chi tiết sản phẩm

4.7.2.1.3 Màn hình kết quả tìm kiếm

4.7.2.1.4 Màn hình danh mục sản phẩm

4.7.2.1.5 Màn hình chi tiết tin tức

Hình 4-46 Màn hình xem chi tiết tin tức

4.7.2.1.6 Màn hình thông tin giỏ hàng

4.7.2.1.7 Màn hình thanh toán

4.7.2.2 Back-end

4.7.2.2.1 Màn hình trang chủ

Hình 4-49 Màn hình trang chủ phần quản trị của SaaSCustomer

(1): Khu vực hiển thị thông tin người đang đăng nhập (2): Hệ thống menu ngang – menu chính trong admin

(3): Khu vực hiển thị nội dung, thay đổi theo menu ngang phía trên. (4): Thông tin footer

4.7.2.2.2 Hệ thống menu

4.7.2.2.3 Màn hình danh sách danh mục sản phẩm

Hình 4-51 Màn hình danh mục sản phẩm

4.7.2.2.4 Màn hình thêm mới danh mục

4.7.2.2.5 Màn hình danh sách sản phẩm

4.7.2.2.6 Màn hình thêm mới sản phẩm

4.7.2.2.7 Màn hình danh sách đơn hàng

Hình 4-55 Màn hình danh sách đơn hàng

4.7.2.2.8 Màn hình chi tiết đơn hàng

4.7.2.2.9 Màn hình doanh thu

Hình 4-57 Màn hình doanh thu

4.7.2.2.10 Màn hình danh sách tin tức

4.7.2.2.11 Màn hình thêm mới tin tức

4.7.2.2.12 Màn hình danh sách menu

Hình 4-60 Màn hình danh sách menu

4.7.2.2.13 Màn hình thêm mới menu

4.7.2.2.14 Màn hình danh sách banner

Hình 4-62 Màn hình danh sách banner

4.7.2.2.15 Màn hình thêm mới banner

4.7.2.2.16 Màn hình cấu hình hệ thống

Hình 4-64 Màn hình cấu hình hệ thống

4.7.2.2.17 Màn hình danh sách khách hàng

Chương 5 TRIỂN KHAI ỨNG DỤNG

Một phần của tài liệu Xây dựng hệ thống thương mại hướng dịch vụ (Trang 86 - 110)

Tải bản đầy đủ (DOC)

(126 trang)
w