Phần thiết kế này chỉ giới thiệu một số màn hình chính của ứng dụng. Có thể tham khảo chi tiết tại phần Phụ lục A – Giao diện ứng dụng.
4.6.1 Giao diện ứng dụng SaaSSystem - ứng dụng cha
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.6.1.1 Màn hình trang chủ (front-end)
Hình 4-39 Trang chủ ứng dụng SaaSSystem
(1): Logo hệ thống (2): Hệ thống menu trái
4.6.1.2 Màn hình đăng ký
4.6.1.3 Màn hình trang chủ (back-end)
Hình 4-41 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.6.2 Giao diện ứng dụng SaaSCustomer - ứng dụng con
4.6.2.1 Màn hình trang chủ (front-end)
(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.6.2.2 Màn hình trang chủ (back–end)
Hình 4-43 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.6.2.3 Hệ thống menu (back-end)
Hình 4-44 Hệ thống menu trong admin của SaaSCustomer
Hệ thống menu được thiết kế theo dạng menu hướng đối tượng.Việc bố trí menu sổ xuống giúp tiết kiệm không gian màn hình để thể hiện nội dung.