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 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 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 : 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 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 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. Có thiết kế tương tự trang chủ, tuy nhiên thay vì hiển thị các bài viết mới của nhiều chuyên mục thì trong trang này chỉ thể hiện bài viết của một chuyên mục mà người dùng quan tâm truy cập. III/- GIAO DIỆN TRANG BÀI VIẾT Phần trọng tâm trong trang này là nội dung chi tiết của bài viết, tiêu đề được thể hiện trên cùng , bên cạnh là tên người đăng cũng như thời gian đăng, ngay dưới là bài viết chi tiết. Tiếp theo dưới bài viết hiển thị các bài viết mới hơn, giúp tru cập dễ dàng không mất thời gian quay lại trang chủ hay trang chuyên mục. Tương tự vậy là phần các bài viết khác ở phần bên phải của trang hiển thị tiêu đề cũng như ảnh thu nhỏ của một số bài viết khác có trên trang web : IV/- GIAO DIỆN TRANG TÌM KIẾM Đối với một website tính năng tím kiếm là điều không thể thiếu, giúp người xem dễ dàng tìm kiếm nội dung mình muốn. Để tìm kiếm người dùng có thể gõ cụm từ cần tìm vào text box bên phải ở tất cả các trang trong website. Ô Text box nhập cụm từ mà người dùng cần tìm. Ví dụ, cần tìm kiếm từ Việt Nam Sau đó click vào nút ở cạnh bên phải text box . Sau khi người dùng Click sẽ được chuyển đến trang tìm kiếm. Ở trang này sẽ hiển thị số lượng bài viết phù hợp với cụm từ cần tìm, tiêu đề bài viết cũng như ảnh minh họa, tóm tắt của bài viết phù hợp. Khi người dùng muốn truy cập chỉ cần click vào tiêu đề bài viết để xem nội dung đầy đủ của bài viết đó. Từ khóa có màu đỏ, dễ nhìn, bên trái là số lượng kết quả tìm được, bên dưới là danh sách bài viết tìm được phù hợp với từ khóa. V/- GIAO DIỆN TRANG ĐĂNG KÝ VÀ ĐĂNG NHẬP Trước tiên phần đăng nhập có hai text box để người dùng gõ tên cũng như mật khẩu truy cập. Trang này được sử dụng dành cho người dùng đã đăng ký tên truy cập trên website. Nút được sử dụng khi người dùng đã điền đủ thông tin truy cập. Nút để người dùng xóa nhanh thông tin đã nhập giúp tiết kiệm thời gian khi người dùng muốn nhập lại. Khi người dùng chưa đầy đủ thông tin cần thiết (tên đăng nhập và mật khẩu) nhưng click và nút thì ngay lập tức sẽ có thông báo hiện ra để nhắc nhở : Thông báo khi để trống ô mật khẩu Thông báo khi để trống ô Tên đăng nhập Còn nếu người dùng muốn xóa nhanh thông tin đã nhập khi click nút mọi thông tin đã nhập sẽ bị xóa. Trước khi click nút Sau khi click nút thì mọi thông tin đã được xóa nhanh và người dùng có thể nhập lại. Trong trường hợp người dùng đã nhập tên đăng nhập và mật khẩu nhưng không trùng khớp thì sau khi click nút thì sẽ có thông báo hiện ra được thể hiện bởi chữ màu đỏ in đậm bên cạnh trái là hình ảnh cảnh báo : Trong trường hợp đăng nhập thành công sẽ có thông báo đươc thể hiện bằng màu xanh in đậm và hình ảnh mang ý nghĩa thành công. Đối với người sử dụng chưa có tên đăng nhập và muốn đăng ký thành viên của website, sau khi truy cập link đăng ký sẽ được chuyển đến trang đăng ký thành viên. Giao diện xét chung khá giống trang đăng nhập tuy nhiên có nhiều trường cần điền hơn. Form đăng ký thành viên Thông báo nhắc nhở hiện ra khi người dùng chưa nhập đầy đủ thông tin cần thiết trong việc đăng ký mà đã click và nút Bên canh nút là nút để người dùng xóa thông tin đã nhập, giúp tiết kiệm thời gian nhập lại nếu cần thiết Cũng giống như trang đăng nhập, sẽ có lỗi hiển thị ra khi người dùng sử dụng tên đăng nhập đã tồn tại trong cơ sở dữ liệu : Còn nếu đăng ký thành công sẽ có thông báo hiển thị việc đăng ký đã xong và diễn ra thành công : Ví dụ ở đây đăng ký tài khoản có tên đăng nhập là test123 và mật khẩu là giaodiennguoimay. Sau khi đã đăng ký thành công, người dùng có thể qay lại trang đăng nhập để đăng nhập vào hệ thống. D/-TÀI LIỆU THAM KHẢO : Simple Css Standard Edition (Bản Tiếng Việt) Ngôn Ngữ Lập Trình PHP Sử Dụng PHP & MySql Trong Thiết Kế Web Động Tiêu chuẩn thiết kế web World Wide Web Consortium (W3C)