Thiết kế giao diện website “Bảo mật mạng”

BÀI TẬP LỚN Nhập môn tương tác người máy : Thiết kế giao diện website “Bảo mật mạng” Nhóm sinh viên thực hiện – HCI16 Đinh Quang Huy 20081124 Nguyễn Hữu Hạnh 20080903 Đào Văn Long 20081576 Hoàng Việt Hùng 20081199 Nguyễn Hải Đăng 20080649 Phân tích yêu cầu Phác thảo ý tưởng Đánh giá mẫu phác thảo Thiết kế giao diện Đánh giá

Trang 1

BÀI T P L N ẬP LỚN ỚN

Nh p môn t ập môn tương tác người máy ương tác người máy ng tác ng ười máy i máy

Nhóm sinh viên th c hi n – HCI16 ực hiện – HCI16 ện – HCI16

Thi t k giao di n website “B o m t m ng” ết kế giao diện website “Bảo mật mạng” ết kế giao diện website “Bảo mật mạng” ện website “Bảo mật mạng” ảo mật mạng” ật mạng” ạng”

Trang 2

N i dung ội dung

• Phân tích yêu c uầu

• Phác th o ý tải Đăng ưởngng

• Đánh giá m u phác th oẫu phác thảo ải Đăng

• Thi t k giao di nết kế giao diện ết kế giao diện ệt Hùng

• Đánh giá

Trang 3

Phân tích yêu c u ầu

Yêu c u ch c năng: ầu chức năng: ức năng:

Trang 4

Phân tích yêu c u ầu

Yêu c u phi ch c năng: ầu chức năng: ức năng:

Trang 5

Phác th o ý t ải Đăng ưởng ng

Trang 7

Đánh giá m u phác th o ẫu phác thảo ải Đăng

• B c c tố cục hợp lý ục hợp lý ương tác người máyng đ i h p lý, nhìn vào là có th ố cục hợp lý ợp lý ể

n m b t t ng th trang webắm bắt tổng thể trang web ắm bắt tổng thể trang web ổng thể trang web ể

• Giao di n khá thân quen v i ngệt Hùng ới thói quen người dùng ười máy ử dụng ục hợp lýi s d ng

• Các ch c năng rõ ràngức năng rõ ràng

Trang 8

Thi t k giao di n ết kế giao diện ết kế giao diện ệt Hùng

Thi t k giao di n đ h a b n đ n s c: ết kế giao diện đồ họa bản đơn sắc: ết kế giao diện đồ họa bản đơn sắc: ện – HCI16 ồ họa bản đơn sắc: ọa bản đơn sắc: ản đơn sắc: ơn sắc: ắc:

•Là giao di n đệt Hùng ượp lýc thi t k v i các m ng ết kế giao diện ết kế giao diện ới thói quen người dùng ải Đăngmàu, đười máyng k , ch đẻ, chữ được để ở thang màu ữu Hạnh ượp lýc đ thang màu ể ởngxám, ch a đư ượp lýc ph i màuố cục hợp lý

•M c đích: Ki m tra b c c trang web hi n ục hợp lý ể ố cục hợp lý ục hợp lý ể

th trên trình duy t đã h p lý ch a, các Form, ị trên trình duyệt đã hợp lý chưa, các Form, ệt Hùng ợp lý ưhình nh, d li u khi đ ra t CSDL có b v ải Đăng ữu Hạnh ệt Hùng ổng thể trang web ừ CSDL có bị vỡ ị trên trình duyệt đã hợp lý chưa, các Form, ỡ

b c c hay khôngố cục hợp lý ục hợp lý

Trang 9

Hoàn thi n trang web: ện – HCI16

•Font_faminly: Helvetica Neue, Times New Roman, Lucida Grande, Segoe UI, Arial, Helvetica, sans-serif

•Tiêu đề : Font size = 18px in đ mập môn tương tác người máy

•Overlook : Font size = 14px in đ mập môn tương tác người máy

•N i dung : ội dung Font size = 14px

Trang 10

Trang 11

Trang 12

Trang 13

Đánh giá

Tính rõ ràng

•Các thành ph n: Header banner, Top menu, ầuMain content, banner qu ng cáo… đải Đăng ượp lýc b ố cục hợp lý

c c và hi n th m t cách rõ ràngục hợp lý ể ị trên trình duyệt đã hợp lý chưa, các Form, ội dung

•Tiêu đ , t ng quan, n i dung bài vi t và các ề ổng thể trang web ội dung ết kế giao diện

đười máyng link… đượp lýc hi n th v i font, màu s c ể ị trên trình duyệt đã hợp lý chưa, các Form, ới thói quen người dùng ắm bắt tổng thể trang webkhác nhau giúp m i ngọi người dễ dàng phân biệt ười máy ễn Hữu Hạnhi d dàng phân bi tệt Hùng

Trang 14

Đánh giá

Tính th m mỹ: ẩm mỹ:

•Đ tội dung ương tác người máyng ph n gi a Header banner, Top ải Đăng ữu Hạnhmenu, Main content, Footer t tố cục hợp lý

•Nhóm các thành ph n cùng ch c năng đầu ức năng rõ ràng ượp lýc

hi n th gi ng nhauể ị trên trình duyệt đã hợp lý chưa, các Form, ố cục hợp lý

Trang 16

Đánh giá

Tính nh t quán: ất quán:

•Ch c năng c a các thành ph n là c đ nhức năng rõ ràng ủa các thành phần là cố định ầu ố cục hợp lý ị trên trình duyệt đã hợp lý chưa, các Form,

•Cùng m t hành đ ng c a ngội dung ội dung ủa các thành phần là cố định ười máyi dùng đ i v i ố cục hợp lý ới thói quen người dùng

m t ch c năng đ u cho ra m t k t quội dung ức năng rõ ràng ề ội dung ết kế giao diện ải Đăng

•V trí các thành ph n chu n hóa: Header ị trên trình duyệt đã hợp lý chưa, các Form, ầu ẩn hóa: Header banner, Top menu, search bar, các bài vi t ết kế giao diệntruy c p nhi u nh t đập môn tương tác người máy ề ất được giữ cố định ượp lýc gi c đ nhữu Hạnh ố cục hợp lý ị trên trình duyệt đã hợp lý chưa, các Form,

Trang 17

Đánh giá

Tính hi u qu : ện – HCI16 ản đơn sắc:

•Đ u và cu i trang web đ u có thanh menu ầu ố cục hợp lý ềgiúp người máyi dùng truy c p đ n các chuyên ập môn tương tác người máy ết kế giao diện

m c c n ch nục hợp lý ầu ọi người dễ dàng phân biệt

•Khi người máyi dùng kéo trang web xu ng quá ố cục hợp lýmàn hình sẽ xu t hi n button Back to top giúp ất được giữ cố định ệt Hùnglên ngay đ u trang khi click vàoầu

•Chuy n các ch c năng, bài vi t d dàng, ể ức năng rõ ràng ết kế giao diện ễn Hữu Hạnh

m m m iề ạnh

Trang 18

Đánh giá

Tính thân thi n: ện – HCI16

•Các khái ni m đệt Hùng ượp lýc trình bày tương tác người máyng đ i d ố cục hợp lý ễn Hữu Hạnh

hi u hể ưới thói quen người dùngng t i các đ i tới thói quen người dùng ố cục hợp lý ượp lýng chính có chút

hi u bi t vê m ng, máy tínhể ết kế giao diện ạnh

•Ngôn ng ti ng Vi t thân quen v i t t c ữu Hạnh ết kế giao diện ệt Hùng ới thói quen người dùng ất được giữ cố định ải Đăng

người máyi dân vi t Namệt Hùng

Trang 19

Đánh giá

Tính đ n gi n: ơn sắc: ản đơn sắc:

•Giao di n nhìn vào khá đ n gi n và hi u qu , ệt Hùng ơng tác người máy ải Đăng ệt Hùng ải Đăngkhông r i m tố cục hợp lý ắm bắt tổng thể trang web

Trang 20

Đánh giá

Tính d hi u d h c: ễ hiểu dễ học: ểu dễ học: ễ hiểu dễ học: ọa bản đơn sắc:

•Người máy ọi người dễ dàng phân biệti đ c truy c p trang web là có th hình ập môn tương tác người máy ể dung ra ngay các ch c năng nh tìm ki m, ức năng rõ ràng ư ết kế giao diệnxem bài m i nh t, bài đ c nhi u nh t, bài ới thói quen người dùng ất được giữ cố định ọi người dễ dàng phân biệt ề ất được giữ cố định

vi t theo t ng chuyên m c,… đ th c hi n ết kế giao diện ừ CSDL có bị vỡ ục hợp lý ể ực hiện đúng với yêu cầu đã ệt Hùng

m c đích c a mìnhục hợp lý ủa các thành phần là cố định

Trang 21

The end !

Định dạng
Số trang	21
Dung lượng	621 KB