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

Thiết kế một giao diện website phù hợp cho các trường đại họ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

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

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

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

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)