Nghiên cứu phân cấp thị giác trong thiết kế giao diện và ứng dụng thiết kế website nhà hát múa rối nước Thăng Long

yr BAO CAO DO AN TOT NGHIEP Dé tài: “NGHIÊN CUU PHAN CAP THỊ GIAC TRONG THIET KE GIAO DIEN VA UNG DUNG VAO THIET KE WEBSITE NHA HAT MUA ROI NUOC THANG LONG” Giảng viên hướng dẫn: Th.S Nguyễn Thị Kim Ngân Sinh viên thực hiện: Đỗ Thị Kim Anh Mã sinh viên: BI9DCPT004 Lớp: DI9TKDPT02 Hệ: Đại học chính quy Hà Nội - 2023 BO THONG TIN VÀ TRUYEN THONG HỌC VIEN CÔNG NGHỆ BƯU CHÍNH VIÊN THONG ĐỎ ÁN TÓT NGHIỆP ĐẠI HỌC Dé tài: “NGHIEN CỨU PHAN CAP THỊ GIÁC TRONG THIET KE GIAO DIEN VA UNG DUNG VÀO THIET KE WEBSITE NHÀ HAT MUA ROI NƯỚC THANG LONG” Giảng viên hướng dẫn: Ths NGUYÊN THỊ KIM NGÂN Sinh viên thực hiện: ĐỖ THỊ KIM ANH Lớp: DI9TKDPT2 Khóa: 2019-2024 Hệ: ĐẠI HỌC CHÍNH QUY HÀ NỘI - 2023 CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập — Tự do — Hạnh phúc NHÂN XÉT CUA GIÁO VIÊN HUONG DAN DO ÁN/KHÓA LUẬN TOT NGHIỆP ĐẠI HỌC I Tên dé tài: Nghiên cứu phân cap thị giác trong thiêt kê giao diện và ứng dụng thiêt kê website nhà hát múa roi nước Thăng Long Sinh viên: Đỗ Thị Kim Anh Lớp: DI9ØTKDPT02 Mã sinh viên: B19DCPT004 Giáo viên hướng dẫn: ThS Nguyễn Thị Kim Ngân Nơi công tác: NOI DUNG NHAN XÉT Đánh giá chung: 5/Diém hướng dan: GIAO VIEN HUONG DAN (Ky, ghi rõ họ, tên) HỌC VIEN CÔNG NGHE BƯU CHÍNH VIÊN THONG CONG HOA XÃ HỘI CHỦ NGHĨA VIỆT NAM KP HOH A ĐAƯƠNTG IEN Độc lập — Tự do ~ Hanh phúc ĐÈ TÀI ĐÒ ÁN TÓT NGHIỆP ĐẠI HỌC Họ và tên sinh viên: Đỗ Thị Kim Anh - BI9DCPT004 Lớp: DI9TKDPT2 Khoá: D19 Ngành đào tạo: Công Nghệ Đa Phương Tiện Hệ đào tạo: Đại học chính quy I _ Tên dé án/khoá luận tốt nghiệp: Nghiên cứu phân cấp thị giác trong thiết kế giao điện và ứng dụng thiết kế website nhà hát múa rối nước Thăng Long 2 Lý do chọn đề tài: Một báo cáo của Google/Ipsos năm 2019 thống kê rang, 50% người dùng smartphone thường có xu hướng truy cập trực tiếp vào website dé mua sắm thay vi tải xuống ứng dụng Theo một thống kê khác của Statista - một nền tảng trực tuyến của Đức chuyên thu thập và trực quan hóa đữ liệu, cho thấy năm 2021, số người sử dung internet trên toàn thế giới đạt 4,6 tỷ người và có hơn 1,88 tỷ website Chính vì vậy xu hướng thiết kế website ngày càng thay đổi, đòi hỏi các doanh nghiệp và nhà thiết kế cần cập nhật liên tục dé giúp website của mình phát triển Có rất nhiều kỹ thuật được áp dụng trong quá trình thiết kế giao diện như mô hình Bj Fogg, mô hình Design Thinking Trong đó phải kế đến kỹ thuật phân cấp thị giác, là một trong những kỹ thuật cốt lõi được áp dụng cho quá trình thiết kế Nó hỗ trợ nâng cao trải nghiệm người dùng nhờ việc định hướng và dẫn dắt người dùng tới trọng tâm của thiết kế một cách hợp lý và có ý nghĩa Nhà hát múa rối nước Thăng Long (Thang Long Water Puppet Theater) là nhà hát trình điễn múa rối nước nằm tại trung tâm Hà Nội Nhà hát là thương hiệu hàng đầu của nghệ thuật múa rối nước Việt Nam Nhà hát đã nhận được nhiều giải thưởng danh giá trong các kỳ liên hoan múa rối trong và ngoài nước Đặc biệt, nhà hát múa rối nước Thăng Long đã thành công ghi dấu ấn nghệ thuật truyền thống độc đáo của nước nhà trên 40 quốc gia, từ châu Á đến châu Âu, châu Mỹ, Mặc dù có tầm ảnh hưởng lớn như vậy, khách đến xem biểu diễn tại đây mới chỉ có thể mua vé theo hình thức mua trực tiếp tại nhà hát, liên hệ mua vé qua số tông đài hoặc liên hệ qua kênh trung gian Nhà hát cũng có website tuy nhiên website mới chỉ ở mức độ cung cấp thông tin Website cũng chưa có dấu văn hóa đặc trưng và thiếu sự hấp dẫn, thu hút với người dùng Bên cạnh đó, mục đặt vé của website chỉ có thé xem va tham khảo giá, chưa có hình thức đặt vé và thanh toán trực tuyến Từ những lập luận trên, em quyết định lựa chọn đề tài “Nghiên cứu phân cấp thị giác trong thiết kế giao diện và ứng dụng thiết kế website nhà hát múa rối nước Thăng Long” phục vụ cho việc thực hiện dự án và đồ án tốt nghiệp của mình 3 Nội dung chính của đồ an: Chương I: Tổng quan về lý thuyết Chương này giới thiệu tổng quan về giao diện người dùng cũng như là giao diện người dùng website Cùng với đó là lý thuyết về phân cấp thị giác trong thiết kế giao diện website Chương II: Tổng quan về đề tài Chương này đi sâu vào nghiên cứu về nhà hát múa rỗi nước Thăng Long và website của nhà hát, các website đối thủ trên thị trường để có thê có thể tìm ra các điểm cần phát huy và hạn chế cho đề tài Bên cạnh đó ở chương này cũng đi sâu vào nghiên cứu người dùng, xây dựng chân dung người dùng, kiến trúc thông tin và các chức năng ứng dụng cung cấp dé giải quyết van dé của người dùng Chương III: Từ những phân tích ở chương 2 và ứng dụng kiến thức về phân cấp thị giác trong thiết kế giao điện website ở chương 1, chương3 sẽ đi sâu vào việc phát triển thiết kế giao diện cho website nhà hát múa rối nước Thăng Long 4 Cơ sớ dữ liệu ban dau: 5 Ngày giao đề tài: / /20 6 Ngày nộp quyển: ⁄ /20 GIẢNG VIÊN HƯỚNG DÂN SINH VIÊN THỰC HIỆN (Ký, ghỉ rõ họ tên) (Ký, ghi rõ họ tên) TRUONG KHOA (Ky, ghi rõ họ tên) Đồ án tốt nghiệp Đại Lời cam LỜI CAM ĐOAN Em xin cam đoan rang đồ án tốt nghiệp “Nghién cứu phân cấp thị giác trong thiết kế giao diện và ứng dụng thiết kế website nhà hát múa rỗi nước Thăng Long” là công trình nghiên cứu của bản thân mình Những phần có sử dụng tài liệu tham khảo có trong đồ án đã được liệt kê và nêu rõ ra tại phần tài liệu tham khảo Đồng thời những số liệu hay kết quả trình bày trong đồ án đều mang tính chất trung thực, không sao chép, đạo nhái Nếu như sai em xin chịu hoàn toàn trách nhiệm và chịu tất cả các kỷ luật của bộ môn cũng như Học viện đề ra Sinh viên Đỗ Thị Kim Anh Đỗ Thị Kim i Đồ án tốt nghiệp Đại Lời cảm LỜI CẢM ƠN Đề hoàn thành khóa luận tốt nghiệp nay, em xin gửi lời cảm ơn chân thành và tri ân sâu sắc đến cô giáo viên hướng dẫn ThS Nguyễn Thị Kim Ngân đã tận tình hướng dan em trong suốt quá trình nghiên cứu và hoàn thành bai khóa luận Trong thời gian được cô hướng dẫn, em đã được tiếp thu thêm được nhiều kiến thức làm cơ sở dé áp dụng vào thực tế sau này Đồng thời, em xin chân thành cảm ơn sự hướng dẫn tận tình của thầy cô trong khoa Công nghệ Đa phương tiện của Học viện Công nghệ Bưu chính Viễn thông đã tâm huyết, nhiệt tình dạy dỗ và truyền đạt những kiến thức quý báu cho chúng em trong suốt quá trình học tập dé em có được những kiến thức chuyên môn day đủ về chuyên công nghệ đa phương tiện mà em đang theo học Những kiến thức đó không chỉ giúp em hoàn thành tốt dé tài khóa luận nay mày còn là hành trang quý báu dé em có thé tự tin vững bước trong tương lai Cuối cùng, em xin kính chúc cô giáo ThS Nguyễn Thị Kim Ngân cùng toàn thể thầy cô giáo trong khoa Công nghệ Da phương tiện dồi dao sức khỏe, niềm tin dé có thé thực hiện sứ mệnh cao đẹp của mình là truyền lại kiến thức cho thế hệ mai sau Em xin chân thành cảm on! Sinh viên Đỗ Thị Kim Anh Đỗ Thị Kim ii Đồ án tốt nghiệp Đại Mục MỤC LỤC LOL CAM ĐOANN 5: 21 22122112212211221211211211111211211111211110112111121111r21e21 i LOI CẢM ƠN G2522 222211221221271211211211211211011111121121121101111011111211121r1e12 ii MỤC LỤC 5-5: 52222 2122122121211211211211211112112112112111111111121121121r11e11.1 iii DANH MỤC KÝ HIỆU VA CHU VIET TAT ucecccccscccssesecsesscseseceesecsvsecsesecsnsessneessveeeaeees vi DANH MỤC HINH ẢNH 6-5-1 1T 1E 111511111111 1111111 1.11111111111111 E1 vii MO ĐẦU 52-52 21 21 21 2112112112112112111112112112112111111211211211.112r11e1 1 la 5 1 2 Lý do chọn dé tai.c cececceccccccccscssessessescsssessessesscsucassessssucsscsessesscsvssscsvsesesevsnseseveeees 1 3 Tình hình nghiên cứu liên quan đến đề tai csscesessessessessesssesesesseseseseeseeees 2 3.1 Tình hình nghiên cứu trên thế giới 2.2.s.+2E.+2.E£2.EE.2EE.2EE.EE.EEE.EE-rEe-rxr-re-rkz-es 2 3.2 Tinh hình nghiên cứu trong TƯỚC + 11.1.19 v n vn k.e.k.g 3 4 Mục đích và nhiệm vụ của đề tài .¿.7+.2t.2x.21.21.211.211.211.212.212.1 21.21-2.-¿re- 3 4.1 Mục đích của đề tài 5:.22.22.2.12.122.11.271.21.122.11.211.21.12.112.12.110.12.2.-r-e 3 4.2 Nhiệm vụ của đề tài + 21.222.221.2.112.712.11.221.12.112.11.21.12.11-21.21-21-2c:a- 4 5 Đối tượng, phạm vi nghiên cứu 2.2+.2x.+2E.£2E.2EE.2EE.£EE.2EE.EEE.EEE.EEE-E21-212-1 -212-.c2-Xe, 4 5.1 Đối tượng nghiên CỨU .2.52+.S+S.E9E.E2EE.2EE.2EE.E12E.121.121.711.1211.211.1 1.11-112¿x-e 4 5.2 voan ao na 4 6 Phương pháp nghiên CỨU -. c1 1191119111911 191 191v HH ket 4 7 Ý nghĩa thực tiễn của đề tài 5-5.-2.522 2122.1 21E.212.211.211.212.111.111.110.112.1 0.11 1 ee 5 7.1 _ Ý nghĩa khoa hỌc ¿5.2 5t+.SE9.SE.92E.2E5.22.122.152.12.121.212.11.712.117.11.111.1-.1 ce 5 7.2 _ Ý nghĩa lý luận +.5.+.2 2.12.1E.E1E.71.211.21.121.121.11.1 111.11.11.211.21.1 -H-1-0 5 7.3 Giá trị thực tiễn của đề tải - ccn cv E3 E111 E11 TT ngư nưệt 6 8 Kết cấu của đề tài is ctct TT 1111111111111 111111111111 11111111 1111 111gr rrưệu 6 CHƯƠNG 1 TONG QUAN VE LÝ THUYÊTT - 6.-5.5 ‡E‡.EEE.EEE.‡EE.EEEE.EEE.EEE.EEk.rke.rer.kes 1 1.1 Tổng quan ly thuyết về thiết kế giao diện người ding (UI Design) 1 1.1.1 UI là gì? Thiết kế UI là gi? occ ccceccccccceccessessesssssvessessessessesssssssessessessessessseeeseaes | 1.1.2 Quy trình thiết kế UI (UI Design PrOC€SS) - -.2G n h .e.ek.p 3 Đỗ Thị Kim iii Đồ án tốt nghiệp Đại Mục 1.1.3 Tầm quan trọng của UI ¿2.2.%+ SE+S E+SE 2EE2E.EEEE EEEE EEEE E2E1 22122.1221.21 212- cer 5 1.2 Tổng quan về thiết kế giao diện người dùng website .52.©.5¿.+5.z+-cz-zz-xc-zs-ze-d 7 1.2.1 Giao diện người dùng website là 8Ì? .-.- S.t.1.S S.2 TH.T.H.n.g g.h.e7 1.2.2 Phân loại giao diện người dùng We€bSIf€ . c.1 1.+ x e , - 8 1.2.2 Các thành phan của giao diện người dùng website + 5c.cc.cc.cc.c.cr.ec-sz-re-c 9 1.2.3 Thế nào là một giao điện website hiệu quả? ¿.5+ ++.c+.+E.+£.zz.xz-Ee-re-rx2ze-d 12 1.2.4 Lợi ích khi giao diện người dùng web được thiết kế tốt 2 -.-5-s-¿ 13 1.3 Nghiên cứu lý thuyết về phân cap thị giác trong thiết kế giao điện website 13 1.3.1 Phân cấp thị giác là gÌ? .+ s x E.2E.121.121.21.121.121.12.111.111.211.21.1 1-1¿11-1-srr-ei 13 1.3.2 Tầm quan trọng của PCTG trong thiết kế giao diện website) - 15 1.3.3 Một số yếu tố giúp PCTG trực quan trong thiết kế giao điện website 17 1.3.4 Một số mô hình giúp PCTG hiệu quả 2 22.5.S S2 S£.2E£.£E.+£E.+E.EzE.zE.erz-xr-ed 25 1.4 Tiểu kết chương Ì - 2-5: £+22+2