Phân tích thiết kế giao diện web tin tức

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
&
TRUYỀN THÔNG
_____♣_____
BÀI THẢO LUẬN
Môn: Giao diện người máy
Giáo viên : Nguyễn Thị Linh
NHÓM 4
Đề tài: Phân tích thiết kế giao diện web tin tức
* Danh sách thành viên nhóm :
1. Nguyễn Đình Hưng
2. Hoàng Ngọc Hà
3. Lâm Văn Tùng
4. Lê Tuấn Phong
5. Đặng Xuân Quyết
Thái Nguyên , Ngày 05 Tháng 11 Năm 2011
1
MỤC LỤC
A/-Ý TƯỞNG __________________________________________________________________Trang 3
B/-PHẦN MỀM HỖ TRỢ ________________________________________________________Trang 3
C/-GIAO DIỆN_________________________________________________________________Trang 3
I/- Giao Diện Trang Chủ _____________________________________________________Trang 3
II/-Giao Diện Trang Chuyên Mục ______________________________________________Trang 6
III/-Giao Diện Trang Bài Viết __________________________________________________Trang 7
IV/-Giao Diện Trang Tìm Kiếm_________________________________________________Trang 9
V/-Giao Diện Trang Đăng Ký Và Đăng Nhập ____________________________________Trang 10

D/- TÀI LIỆU THAM KHẢO ___________________________________________________Trang 15
2
A/- Ý TƯỞNG :
Thiết kế một giao diện website phù hợp cho các trường đại học. Các tin tức, thông báo mới nhất sẽ được đưa lên

cho sinh viên cũng như những đối tượng khác quan tâm truy cập và tìm hiểu.
B/-PHẦN MỀM HỖ TRỢ :
• Emeditor 11
• Adobe Photoshop 7.0
• Macromedia Dreamweaver 8
• Firefox 7
C/-Các trang chính trong website được thiết kế bao gồm :
1/- Trang chủ
2/-Trang chuyên mục
3/-Trang bài viết
4/-Trang tìm kiếm
5/-Trang đăng ký và đăng nhập
I/- GIAO DIỆN TRANG CHỦ
Ấn tượng đầu tiên khi người dùng ghé thăm website là banner được thiết kế đơn giản nhưng ấn tượng trên
cùng trang web hiển thị tên trường cùng logo trường bên trái , ngày thàng hiện tại ở góc nhỏ bên phải, ngoài
ra còn có phần đăng nhập dành cho thành viên của website, phần đăng ký cho người dùng muốn làm thành
viên của website
Kích thước banner phù hợp. banner to, rộng, cuốn hút sự chú ý của người đọc.
Nội dung banner phù hợp với Nội dung của website và màu sắc chủ đạo là màu xanh da trời phù hợp với
đối tượng hướng tới là sinh viên.
Dưới banner là phần menu ngang có chữ trắng trên nền xám giúp người xem dễ nhìn và chọn lựa phần muốn
truy cập.
Dưới phần menu là phần hiển thị thông tin mới nhất có trên website :
3


Phần này giúp người đọc chọn nhanh các tin mới được phát hành trên web, tin mới nhất còn có hình ảnh minh
họa kích thước to, rõ ràng, ở dưới ảnh là tiêu để và tóm tắt. Bên phải là phần gồm 10 tin cập nhật mới nhất.
Sau đó đến phần hiển thị những bài viết mới nhất của chuyên mục, ở đây cho hiển thị 2 bài mới nhất /1 chuyên
mục. Mỗi chuyên mục đều được ghi tên dễ nhìn và mỗi bài viết đều có ảnh minh họa, tiêu đề và tóm tắt nội

dung.
Bên phải gồm có các phần tìm kiếm, video giới thiệu,slide ảnh và quảng cáo.
• Phần Tìm Kiếm
Được thể hiện bên phải, thiết kế đơn giản và bắt mắt, nút ấn nổi bật bên cạnh ô gõ từ cần tìm kiếm.
• Phần video giới thiệu
4
Giới thiệu về Trường giúp những người lần đầu truy cập có thể tìm hiểu đôi nét về trường.
• Phần slide ảnh giới thiệu
Đưa lên những ảnh hoạt động mới và nổi bật của trường.
• Phần quảng cáo
5
Là các hình ảnh liên kết tới website khác được thể hiện theo dạng cây, khi người dùng click chuột sẽ được
chuyển đến trang web liên kết.
• Phần cuối trang

Ghi thông tin liên hệ, giúp người dùng dễ dàng liên hệ khi có ý kiến xây dựng hoặc đóng góp cho trang web.
Ngoài giao diện trang chủ, khi người dùng click link liên kết đến bài viết thì sẽ được chuyển vào phần bài viết.
II/- GIAO DIỆN TRANG CHUYÊN MỤC
Khi người dùng click vào tên của một trong các chuyên mục thì trình duyệt sẽ được load tới trang chuyên mục.
6