HỌC VIEN CÔNG NGHỆ BƯU CHÍNH VIÊN THONG KHOA ĐA PHƯƠNG TIỆN Đề tài “NGHIÊN CỨU ĐỊNH LUẬT GESTALT VÀ ÁP DỤNG VÀO THIET KE GIAO DIỆN UNG DUNG KHÁM PHA AM THUC HA NOI FOOD” Giang viên hướng dan: ThS Nguyén Minh Thuy Sinh viên thực hiện: Trương Công Hòa Mã sinh viên: B19DCPT090 DI9TKDPT03 2019 — 2024 Dai hoc chinh quy Ha Nội, tháng 12 năm 2023 Đồ án tốt nghiệp Đại học LOI CAM DOAN Em xin cam đoan rang đồ án tốt nghiệp: Nghiên cứu về đỉnh luật Gestalt và áp dụng vào thiết kế giao diện ứng dụng khám phá ẩm thực “Hà Nội Food” 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 Hoa Trương Công Hòa Trương Công Hòa — DI9DCPT090 1 Đồ án tốt nghiệp Đại học LỜI CẢM ƠN Trên thực tế không có sự thành công nào mà không gắn liền với những sự hỗ trợ, giúp đỡ dù ít hay nhiều, dù trực tiếp hay gián tiếp Trong suốt 4 năm học tập tại Học viện tới giờ, em đã nhận được rất nhiều sự giúp đỡ từ phía các thầy cô, gia đình và bạn bè, nhất là trong quá trình thực hiện đồ án tốt nghiệp vừa qua Quá trình này đã giúp em có cơ hội để tổng hợp lại toàn bộ kiến thức đã học tại Học viện, cũng như nghiên cứu sâu hơn những kiến thức chuyên môn dé ứng dụng vào sản phâm khóa luận của mình Em xin phép gửi lời cảm ơn sâu sắc tới ThS Nguyễn Minh Thúy, người đã trực tiếp hướng dẫn, định hướng cho em trong suốt thời gian hơn hai tháng vừa qua để em có thể hoàn thành tốt nhất báo cáo đồ án tốt nghiệp của mình Em cũng xin chân thành cảm ơn các thầy cô giáo của Học viện Công nghệ Bưu chính Viễn thông nói chung, các thầy cô trong Khoa Đa phương tiện nói riêng đã dạy cho em những kiến thức về các môn đại cương cũng như các môn chuyên ngành, giúp em có được cơ sở lý thuyết vững vàng dé ứng dụng vào trong quá trình thực hiện báo cáo Báo cáo của em tuy đã hoàn thành nhưng vì em còn nhiều hạn chế về chuyên môn nên không tránh khỏi những thiếu sót, em rất mong nhận được những ý kiến đóng góp quý báu của quý thầy cô dé kiến thức và kỹ năng của em trong lĩnh vực được hoàn thiện hơn Trương Công Hòa — DI9DCPT090 1 Đồ án tốt nghiệp Đại học MỤC LỤC LOI CAM ĐOAN . - 2222 2222112221 1222.11 2 TT rirrrirrrre i LOI CAM ƠN 55c: 2222212 2222211112222 1 1 eg ii MUC LUC 11 DANH MỤC CÁC HÌNH VẼ -: 222222:222222112222211112222.2 111.11220.d1e1 viii N10 1 1 Lý do chọn đề taie ccccccccecccccsseesessessessessessssssessessessssessessressessessessssscssessessessesssesessneeesnees | 2 Tinh 80ì)(80 13) iu : 2 2.1 Tình hình nghiên cứu trong TƯỚC 2 22232 * 92131 EEEEEEEEEEEEEEEEkErrkrrkererrsee 2 2.2 Tình hình nghiên cứu nước ØOÀÌ . -.2.3 21.13.11.33.12.11.1 5.51.1.51.11.11.1.1 -kr-ree2 3 Mục đích và nhiệm VỤ - + 2E E2 2211112211 8112531111125 111191 vn vn ng vvrree 3 3.1 Mục đích c- c1 11121 ng TH ng v 3 3.2 NIIGM VU 3 4 Thiết kế giao diện ứng QUIN eee eecceceeccessessessscssessessecsecsecsscsnessessessessessesasessesneaeseeseeeeeee 3 5 Phuong phap mghién 0:4) §VỔ 4 6 Ý nghĩa thực tiễn .- ¿- 2c s2 E12 12711211121171121112111112111111112111112111x11611 4 7 Kết cấu đề tài 2t tt He 5 Chương I: Nghiên cứu lý thuy6t c.ccececcccccessessesssessessessessessessecssssessessessessessesseseeessees 5 Chương II: Nghiên cứu về ứng dụng di động “Hà Nội Food'” 2.s s+.sz.+s.zc-sz-2 5 Chương III: Thiết kế giao diện ứng dụng di động “Hà Nội Food” . -s-52:- 5 CHƯƠNG I: TONG QUAN LÝ THUYÉT ĐỊNH LUAT GESTALT VA ANH HUONG CUA ĐỊNH LUẬT VÀO THIET KE UNG DUNG DI DONG cececccsecceseceeceseseseststseseeeeees 6 1 Tổng quan về định luật ŒGestaÌt -¿- - 5c St s21 1 1E12111121151111111112111111111111E11.11111e1.6 I0 i86 6 Trương Công Hòa — DI9DCPT090 11 Đồ án tốt nghiệp Đại học 1.2 Các nguyên tắc trong định luật Gestalt 2-©522E22EE‡2E£EE2EEeEEEEEEEEkrrrrerkrree 7 1.2.1 Nguyên tắc đồng bộ (Similarity) 22 ©se.+S.22E.E2.EEt.2 E.1 2.1 -. ¿r-e 7 1.2.2 Nguyên tắc gần bên (Proximity) -.- 2-5.2 22.x 22.11.2.21.21.12.71 r-e.9 1.2.3 Nguyên tắc liên tục (Continuation) .¿.+2.2.++.EE.+2.EE.2EE.2E.E2.E2-2E-E2E-x2-Ex-zE¿rc-ex 10 1.2.4 Nguyên tắc đóng kín (ClOSUF€) 2.2.2+S.E2E.E£.EE2.EE2.EE.EEE.12E.12.217.1E2.71-2E- cr-xe 11 1.2.5 Nguyên tắc chính — phụ (Figure — ground) 2.2 + +.2 +.+x-+-E+-+z-zr2ze-s 12 1.2.6 Nguyên tắc đối xứng và thứ tự (Symmetry and Order) .s 2 s2-s-2 13 2 Tổng quan về ứng dụng di động 2 2+ 2+S.E2EE.+2E.EEE.EE2.E12.2112.711.271.711.271.1211-11-1.-cxe 15 2.1 Ứng dụng di động là gÌ! .- ¿- 22 s2 x‡EE2EE2E1221127112171121711111211121cr1e 15 2.2 Phân loại ứng dụng di động c5: 2c 2113113115115 111.1.1 111.1 15 2.3 Quy trình thiết kế một ứng dụng di động theo mô hình Design Thinking 16 2.3.1 Đồng cảm (Empathiz€) 2© 2+E.2EE.‡EE.2EE.2EE.E71.127.122.112.711.271.12.11 -71.-1.-1e-xe 16 PP {C0090 0h 17 PS NI (001)-00:01 17 2.3.4 Mẫu thử nghiệm (ProtOfyp€) 2-5.2 S S.1 2122.1 2.17.122.12.112.11.212.1 2.12-110-11-11-111¿-xe 18 2.3.5 Kiểm thử (Testing) 2+.5+.2 2x.2 1.221.122.11.211.271.121.112.111.111-121-121-121-21-1-e- 18 3 Ảnh hưởng của định luật Gestalt vào thiết kế ứng dụng di động . 2 5-2 19 3.1 Nguyên tắc đồng bộ (Similarity) ¿-.22.s.2 E.2.EE.E2.E12.731.27.121.171.12.112.1 21 21 c-e 19 3.2 Nguyên tắc gần bên (Proxiimity)-.- 2.-2.2 22.x EE2.E12.711.211.2711.211.211.7.1 1.1-120 3.3 Nguyên tắc liên tục (ContinuafiOn) s++s+2E+EEt2EE£EEEEEEEE12212112212212222E.e 21 3.4 Nguyên tắc đóng kin (Closure) .c.ccccscsssesssesssessesssessvessesssesssessesssesssessecssesssessesssecees 23 3.5 Nguyên tắc Chính - phụ (Figure - ørourid) .2 sz.++.++.+z.+£.x++.£+.+£.z+.+x.z+x-zz-xe-zx-ez 24 3.6 Nguyên tắc đối xứng và thứ tự (Symmetry and Order) .z.sz.+-s-2 +z-s+-225 A, Tidu két Chu Ong y ễô: : 26 CHƯƠNG II: NGHIÊN CUU VE UNG DUNG “HA NOI FOOD” cecssseseeseessteeeseneeesees 28 Truong Công Hòa — D19DCPT090 iv Đồ án tốt nghiệp Đại học 1 Tổng quan về ứng dụng 2.+ s +2E+ 2EE+.E127.112 E112.1127.1127.112 1111-1211-211- 11 2-111-11- 11 c-ye28 2 Nghiên cứu thứ Cap c.cccecceccescsesssesssessesssessssssesssecsssssessuesseessesssessssssecssessesssesasessessseeaseesess 28 2.1 ¡0u 11 28 2.2 Đối thủ cạnh tranh ccccecccccssescecsessesecsecsecsesecsucseseessesucsucsesecsucsessesavsucarsvsecacavseecevees 30 2.2.1 Foody - Find Reserve IDelTV€TV +.:.+ t.k *.9.11.11.11.19.1 9 1.1 n.g rệ-t 31 Pħ§ ¡Ho 32 2.3 0s 00-0: 11 -.- aa 34 3, Nghién clu nguOi tì), 1n 3® 34 3.1 Đối tượng sử MUNG cccessesssesssessecssecssessecssecsnessvcssesssessesssesssessessuessessessessease 34 3.2 Phuong phap nghién 00) nhaadaaQỐỔ 35 3.2.1 Phuong pháp khảo sat người dùng .- -. 5.c 2c St.S.t v n n.g.hi.ệ.p 35 3.2.2 Kết quả khảo sát ¿2+ 22 E12 127112712117112712111112111121111211112c101.35 “co ha e 3Ÿ 40 5 Giải quyết vẫn đề -: s2 T22 1221121122112 1211111211 1211011210111Erre 40 `, Ô ,ÔỎ 40 5.2 Varn .,ÔỎ 40 5.3 .¡= 41 Xa 41 6 Các chức năng ứng dụng sẽ cung cấp 2+.22.++E.E+.2EE.£EE.E2E.E2E.E22.11-221-221-271- 22-1 -xe 42 7 Kiến trúc thông tỉn + s¿+Sx2E1+EE2EE22E1271127121121112112121111121111.111e1244 ri 44 Z“ZW o 44 8 Tiểu kết chương Ï - 2-52 +£2SE+EE2EE2EEE2E1271127121127112117112112111112112111121r2e1.46 CHUONG III: UNG DỤNG LÝ THUYET ĐỊNH LUAT GESTALT VÀO THIET KE GIAO DIEN UNG DUNG KHAM PHA AM THUC HÀ NỘI HANOIFOOD 47 Trương Công Hòa — D19DCPT090 V Đồ án tốt nghiệp Đại học I Wire frame — 47 li ioisnŸyŸễiẲẳiẳảả3Ả 47 I2 j1 .Ả 48 1.3 Trang chủ - Thông báo - Tìm kiẾm .2:.2.© £.+2E.£+E.E+E.E2E.EtE.EE.2EE.2EE.2EE.2E2.ErE.err-ee 49 1.4 Check in in nh 50 1.5 Thông tin chỉ tiết nhà hàng, quán ăn, món ăn 2 2 2+.+.+E+.+E.++.E+.+E.++E.+z-xz-zx-ez 51 1.6 Trang Ca nan 52 "lu.cà ái 7a ồễẳễôồễồô®^®ˆễ'.ễỄ'Ồ®oồ®ễ®ễêễ.ễ ễˆ®^®ˆĂ' Ả 52 2.1 Logo hoan thigt cc 445 53 2.2 Quy chuẩn 10g0 ccceccesseessesssesssessesssecssessesssecssessvsssecsuessesssecssessesssesssessecasesssessecasecees 53 2.3 Logo âm ban và dương bản . G2 2c 212112113111 11 11 11 1 1 11 111111 ng ng re 54 2.4 Khoảng cách logo an tOÄN - - t1 1121121121121 11 1111111110 10 11111 HH ngư 54 2.5 Logo trên các nền MAU ecceecesssesseessesssessesssesssessecssesssesseessesssessesssssssssssssssaseeseaeees 55 3 Xay dung Design Systeme 56 l5 56 ly 0/0 57 3.3 Biểu tượng -:- 2+2 2x22 127112112211 2111211 111211 1111011211011 ererree 58 E si 607 59 3.5 COMPOMNENUS ¬a 60 “A0009 1 61 3.1 Giao 091i 1n e - 62 3.2 Giao diện Đăng Ký th HH HT HH HT HT HT HH Hàn HT 62 3.3 Giao diện Đăng nhập - Quên mật khẩu 5.5.t E.12E.125.121.211.E11.111.2111.5EE.EE-1x e-Exer63 3.4 Giao diện Trang chủ & Yêu thích & Thông báo .- S e n 64 3.5 Giao điện Tìm kiếm 22.221.1 t.r.n.r.H.H.H.H.r-H-r-r-r2r2r2r2r+ecet 65 Trương Công Hòa — D19DCPT090 vi Đồ án tốt nghiệp Đại học 3.6 Giao diện Chỉ tiết món ăn — nhà hàng .2-2.2.2.+ E+£.E+E.E+.2EE.tE.EtE.Et.rEe.rk.erx.er.ker-ed 66 3.7 Giao diện Đánh giá — check 1m 2 2c 2c 1211311151151111 15111911 11111 91 ky re 67 3.8 Giao diện Trang cá nhâÂn - c2 3131191191191 911 1 11 11 11 11 T1 11 1T TH rệt 68 hs 69 6 Tiểu kết Chương ¿22-52222212 12112711211211271121171211111111111111111.1 70 41889/.9/8.9 i5 `0.1 6 :00 7 .71 1 Kết UA dat QUOC 1 ố ố 71 ”›r 09 5 71 3 Kiến nghị ¿- 52-522 E12 11711271211111122711110211111111111211e.rr1re1g72 TÀI LIEU THAM KHẢO ::-22222t12222222.v.v.22221111t12r 222e 11 73 Trương Công Hòa — D19DCPT090 vii Đồ án tốt nghiệp Đại học DANH MỤC CÁC HÌNH VE Hình 1 1 Mỗi hình dang tạo thành một nhóim . . .- + + + E.23.E*.* EE.EEE.se.Ese.er.ek.rre.kr.ee 8 Hình 1 2 Những hình có màu xanh lam tạo thành một nhóm -.- 5 +.+.++.s.*+.+s.+.+s.++.+ 8 Hình 1 3 Đồng bộ về kích thước ¿.s.2 2.+EE.++E.E£E.E2E.E2EE.E7E.127.112.112.112.1121.121-121-121-.1.-r-e.9 Hình 1 4 Nguyên tắc gần D6n cecccsccessesssesssesssessesssessuessesssessssssesssessusssesssessssessessessesseeseeses 10 Hình 1 5 Nguyên tắc liên tỤc ¿- +-+2++2E2+EEt2EE92112712112711271211271121111111111 211211 xe 11 Hình 1 6 Hình ảnh gấu trúc trong Logo World Wildlife Fund -2:- 525522552 12 Hinh 1 7 Logo tap doan 00i.30 cư 13 Hình 1 8 Logo don sắc của Olympic c.ccsccescesessessessesssessessessessessecssessessessessessesaeseseeseesees 14 Hình 1 9 Nguyên tắc đối xứng và thứ tut eecceccceccccscessesssesssecsesssesssecsesssesssessessesseseaeaesesaes 14 Hình 1 10 Ung dụng nguyên tắc đồng trong thiết kế ứng dụng di động . - 19 Hình 1 11 Ung dụng nguyên tắc gần bên trong thiết kế ứng dụng di động 21 Hình 1 12 Ung dụng nguyên tắc liên tục trong thiết kế ứng dụng di động .- 22 Hình 1 13 Ứng dụng nguyên tắc đóng kín trong thiết kế ứng dụng di động 23 Hình 1 14 Ung dụng nguyên tắc chính — phụ trong thiết kế ứng dung di động 25 Hình 1 15 Ung dụng nguyên tắc đối xứng trong thiết kế ứng dụng di động 26 Hình 2 1 Giao diện ứng dụng FOOdỈy 5c G322 222123111511111 15 11211111 11 g1 1kg kg 31 Hình 2 2 Giao diện ứng dung Food cece eeccececeeeseeseeseeeenececeeceeceececeeseeseseeeeeeeeseeeeaees 33 Hình 2 3 Độ tuổi của người dùng ¿.2 2s 22.x 127.112.712.117.112.1121.111.121.111.11.11 11 -xe36 Hình 2 4 Địa điểm sinh sống 2-22 2¿+SE9EE9EE2EEE2E1E7112712112711211711711211E2112x1e2 36 Hình 2 5 Mức độ yêu thích với âm thực Hà Nội .2.+.+2.2++.2E.++.Ex.+E-zE-rz-xr-zx2rx-ez 37 Hình 2 6 Thói quen ăn uống khi đi du lịch .2.-2 ++S.22S.+2E.E+E.E+E.E£E.E£2.E+.2EE.zEE.zEE.erx-zre-rrr-rs 37 Hình 2 7 Ưu tiên mục đích ăn uống trong du lịch 2.s.+2.++.2E+.+£.x+.+E.++£.++-£+-+z-xez-ss-rx-ee 38 Hình 2 8 Mức độ quan tâm về lịch sử và văn hóa âm thực . :-s-cx+cc+EcErxsrrrsrerrrree 38 Hình 2 9 Nguồn tìm kiếm thông tin về 4m thực và địa điểm ăn uống . -+-: 39 Hình 2 10 Chân dung người dùng + 6+.S.1.1 9.119.11 H.1.11 H.H TH H-iệ-p 40 Hinh 020B 44 Hình 2 12 Userflow đăng ký - đăng nhập .- (.c.1.S.t *.23 21.31.121 11.1 111.11.11 E.E.xr-e45 Trương Công Hòa — DI9DCPT090 vill Đồ án tốt nghiệp Đại học Hình 2 13 Userflow Tìm kiếm nhà hàng -. 2.: 2©.£+.EE£.+EE.+£E.E2E.E2E.EEE.EES.EEE.EEr.Err.Err.krr.ree 45 Hinh 2 6/.-uj0 260 0 46 Hình 3 1 Wireframe các man Onboarding . . -.‹ + +.x.1.* S1.91.1.1 nh nh.n.g.r.ệt 47 Hình 3 2 Wireframe các man Dang ký — đăng nhậtp .- -. .55.5.c 3.22.33.2 +.vv.x.ee.re.er.ss.s 48 Hình 3 3 Wireframe các man Tramg chu - thông báo — tìm kiếm 2-.2 s -2- 49 Hình 3 4 Wireframe các man Checkin — Đánh gIá .- 6 6.6.+ +.xk.+£.vE.se.Es.e.rr.es.rr.ke-e 50 Hình 3 5 Wireframe các man Thông tin chi tiết nhà hàng, quan ăn, món ăn 51 Hình 3 6 Wireframe các man Trang cá nate eceseseeseeseeseeseeeceeeeeseeseeseeseeseeeeseeeeenees 52 Hình 3 7 Logo Hoàn thiện và Ý tuOng c ccccccccescssssssessessesseessessessessessessssesseseessesseseaeseeeees 53 Hinh 3 8 QuyZ0 000 ẺẼ 53 Hình 3 9 Logo âm bản va dương bản . 5c 2c 23112112111 1391191111111 11 111 111g ng ry 54 Hình 3 10 Khoảng cach logo an fOảñ 55 222 32 122113 1121191111111 11111 1n ng ng re 54 Hình 3 11 Logo trên các nền mau .ccsccesssesssessesssesssessusssesssessesssesssessssssssussussessussssesseseeaes 55 Hình 3 12 Màu S80 ecesccsssssseesesssssssseeseseessssneeeeesesssnneeseeessssnneeeesessssumeuetseesssnnneteeeessneess 56 Hinh 3 13 Phong cht ccc 4Ả.ˆÂˆÂ.ẢỒẢ 57 Hình 3 14 Biểu tong eeeccecceccssessessessecsvessessessessessecsesssessesscssessesssssssssessessessessesesseseaesaeeees 58 Hình 3 15 Hình minh họa - - - (0112201122111 1211 1193111581 11511 11011110111 0111111 1k1 vg 59 Hình 3 16 Hệ thống componenIs 2.© 2.+ £+E.Et2.EE.£EE.ESE.EE.EEE.EEE.2E.122.171.127.12.217-171-2-1 -xe 60 Hình 3 17 Tổng quan giao diện ứng dụng .- + 2.+2+.+EE.+EE.+EE.+EE.E2E.E2EE.2EE.EEE.EEE.EEE.EEr.krr.res 61 Hình 3 18 Giao diện các màn Onboard1ng .- -.- + +2.E + + **.EE.+E.Ese.Ee.rer.sr.re.rer.rk.err-rs-ee 62 Hình 3 19 Giao diện các man Đăng ký T.H T.HH.H.H.H.H H.H -.i-t 63 Hình 3 20 Giao diện các màn Đăng nhập — Quên mật khẫu .5c S.t t.t sE.Ert-sr-rrecrr-ee 64 Hình 3 21 Giao diện các man Trang chu - Yêu thích — Thông báo .- -.-.: 5.+.+-.+.+>.+65 Hình 3 22 Giao diện các màn Tìm kiếm ¿2.+ Et+.ES.EE2.E1E.EEE.2E1.112.511.211.11.211.211.125.111-1-1x-5e266 Hình 3 23 Giao diện các màn Chi tiết nhà hàng — món ăn 2.2 5.22-2-2-22-2¿5-2 67 Hình 3 24 Giao diện các man Đánh giá — Check ith ccceseeeeeeeessecssceseeeeseesseeseens 68 Hình 3 25 Giao diện các màn Trang cá nhân -. ¿2 22 +22.E 3.21.33.3 EE.+EE.Es.eE.ee.rer.er.re.er-ss 69 Trương Công Hòa — D19DCPT090 1X