II. Mô tả giao diện
4. Giao diện người dùng
1. Bố cục – giao diện
Diễn giải:
Tên thành phần Diễn giải
Banner – top Đây là banner flash của website tra cứu xe buýt Menu – top Chứa các menu của trang web
Left – top Chứa khối banner bản đồ
Left Chứa các liên kết đến các trang web khác Left – bottom Chứa khối hỗ trợ trực tuyến, thời tiết Right – top Chứa khối đăng nhập, đăng ký thành viên Right Chứa khối quảng cáo
Right – bottom Chứa khối thống kê số lượng người truy cập Footer Thông tin liên hệ, bản quyền
Bảng IV-2: Bảng thành phần bố cục của giao diện websiteSơ đồ: Sơ đồ: BANNER – TOP MENU – TOP LEFT – TOP CONTENT RIGHT – TOP LEFT RIGHT
LEFT – BOTTOM RIGHT – BOTTOM
2. Trang chủ
Thể hiện phần lớn các nội dung của website, các tin tức giao thông hằng ngày cập nhật.
Bố cục:
1. Banner flash: có hình ảnh những chiếc xe buýt, biểu tượng của trạm điều hành xe buýt Sài Gòn và tòa nhà của thành phố. Nổi bật trên nền màu xanh dương của banner. Website sử dụng tơng màu xanh dương mong muốn có được một mơi trường thành phố xanh – sạch – đẹp, bình an và hưng thịnh dưới sự hoạt động của hệ thống xe buýt.
Hình IV-4: Banner flash
2. Menu: giúp cho người dùng sử dụng các chức năng của website.
Hình IV-5: Menu chính
3. Slide show ảnh: hiển thị các tin tức nổi bật, khi click vào những slide này sẽ liên kết đến trang chi tiết của tin tức mà người dùng đã chọn.
4. Các tin tức – tiêu điểm hằng ngày cập nhật: các tin tức mới nhất liên quan đến hoạt độngcủa các tuyến xe buýt sẽ cập được hiển thị.
Hình IV-7: Tin tức cập nhật hàng ngày
5. Khối các liên kết website: hiển thị các liên kết đến các website để người dùng có thể xem các trang một cách nhanh nhất.
6. Khối dự báo thời tiết: hiển thị thời tiết ở một số vùng nổi bật trong cả nước, khối này hiển thị ở cột bên trái của giao diện.
Hình IV-9: Khối dự báo thời tiết
7. Khối hỗ trợ người dùng trực tuyến: hỗ trợ người dùng trực tuyến qua Yahoo Messenger khi người dùng yêu cầu, khối này nằm ở cột bên trái của giao diện
Hình IV-10: Khối hỗ trợ trực tuyến
8. Khối bản đồ: hiển thị bản đồ trực tuyến, khối này hiển thị ở cột bên trái của giao diện
9. Khối đăng nhập: hỗ trợ thành viên đăng nhập vào website, khối này nằm bên cột bên phải của giao diện
Hình IV-12: Khối đăng nhập
10. Khối đếm số lượt truy cập: hiển thị thông tin đã có bao nhiêu người truy cập vào website tính đến thời điểm hiện tại
Hình IV-13: Khối đếm số lượng người truy cập
11. Khối quảng cáo: khối hiển thị các quảng cáo lên website
12. Khối footer: đây là phần cuối cùng của website, hiển thị thông tin liên hệ, bản quyền. Đây là phần khơng thể thiếu của một website
Hình IV-15: Khối footer
13. Khối video – bài ảnh: đây là những tin tức nổi bật được đăng tải
3. Trang thông tin tuyến
Đây là trang hiển thị các tuyến xe buýt để người dùng có thể xem thơng tin các tuyến xe cần biết thơng tin. Ngồi ra, người dùng có thể xem được lộ trình của tuyến xe, cũng như danh sách các trạm dừng được hiển thị sẵn trên bản đồ tương ứng với lượt đi và lượt về của tuyến xe đó.
Hình IV-17: Trang thông tin tuyến
1. Trang thông tin chi tiết tuyến xe buýt: hiển thị chi tiết những thông tin liên quan đến tuyến xe mà người dùng đã chọn
Hình IV-18: Thơng tin chi tiết của tuyến xe buýt 18
Và đây là đường dẫn đường xe buýt trên bản đồ, có các trạm dừng tương ứng với lượt đi và lượt về. Lượt đi và trạm dừng của lượt đi có màu đỏ, lượt về và trạm dừng của lượt về có màu xanh.
4. Trang tìm kiếm
Đây là trang dành cho người dùng tìm kiếm các tuyến xe bt cần biết thơng tin. Website hỗ trợ tìm kiếm theo hai phương thức: tìm kiếm cơ bản và tìm kiếm nâng cao.
Đây là kết quả tìm kiếm cơ bản với từ khóa là “Gia Lâm” và tìm theo tiêu chí là “Tên Trạm Dừng”:
5. Giao diện cho người quản trị (ADMIN)
Đây là một vài hình ảnh cho giao diện của người quản trị: 1. Trình đăng nhập hệ thống:
Hình IV-25: Đăng nhập hệ thống
2. Quản lý tuyến xe:
3. Quản lý vé xe buýt:
Hình IV-27: Giao diện quản lý vé xe buýt
4. Quản lý tin tức: