Báo cáo môn học THỰC HÀNH CHUYÊN SÂU | KHOA ĐA PHƯƠNG TIỆN| HỌC VIỆN BƯU CHÍNH VIỄN THÔNG (PTIT) Báo cáo này phù hợp với các bạn đang theo học chuyên ngành thiết kế UIUX tại các trường đại học hoặc các trung tâm dạy thiết kế nói chung và thiết kế UIUX nói riêng. Đây là một sản phẩm rất tâm đắc và giúp mình đạt được A+ cho môn học này. NGHIÊN CỨU LÝ THUYẾT VỀ PHÂN CẤP TRONG THIẾT KẾ ỨNG DỤNG DI ĐỘNG VÀ ÁP DỤNG VÀO THIẾT KẾ GIAO DIỆN ỨNG DỤNG DI ĐỘNG TRỢ LÝ MẸ BẦU) Báo cáo là một sản phẩm trong lĩnh vực thiết kế UIUX, vận dụng một phần kiến thức lý thuyết và áp dụng vào triển khai sản phẩm cụ thể.
BỘ THÔNG TIN VÀ TRUYỀN THÔNG HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THƠNG - MÔN HỌC THỰC HÀNH CHUYÊN SÂU Đề tài: “NGHIÊN CỨU LÝ THUYẾT VỀ PHÂN CẤP THỊ GIÁC TRONG THIẾT KẾ GIAO DIỆN ỨNG DỤNG DI ĐỘNG VÀ ỨNG DỤNG CẢI THIỆN GIAO DIỆN ỨNG DỤNG - TRỢ LÝ MẸ BẦU” Người hướng dẫn : TH.S.NGUYỄN TUYẾT MAI Sinh viên thực hiện: NGUYỄN THỊ HẬU Lớp: D18TKDPT2 Hệ: Đại học quy Hà Nội – Năm 2022 LỜI CẢM ƠN Lời đầu tiên, em xin gửi lời cảm ơn sâu sắc đến thầy, cô giáo Khoa Đa phương tiện, Học viện Cơng nghệ Bưu Viễn thơng, người tận tình giảng dạy, truyền đạt cho em kiến thức quý báu để phát triển sản phẩm lĩnh vực đa phương tiện nói chung mơn Thực hành chun sâu nói riêng Đặc biệt dạy dỗ, dẫn dắt, tâm huyết cô giáo Nguyễn Tuyết Mai Từ kiến thức đó, em phát triển thêm vốn hiểu biết để hồn thành đề tài vận dụng công việc sau thân Đề tài chắn cịn nhiều điểm hạn chế thiếu sót, em kính mong tiếp tục nhận góp ý từ q thầy để sản phẩm cải thiện thân em phát triển cách tốt Cuối xin gửi lời cảm ơn sâu sắc tới quý thầy cô tạo điều kiện tốt cho em suốt trình học tập MỤC LỤC CHƯƠNG 1: TỔNG QUAN LÝ THUYẾT I TỔNG QUAN THIẾT KẾ UI UI ? Thiết kế UI ? 2 Quy trình thiết kế UI (UI Design Process) Nguyên lý thiết kế UI II TỔNG QUAN THIẾT KẾ ĐỐI VỚI ỨNG DỤNG DI ĐỘNG (MOBILE APP) Ứng dụng di động (Mobile app) gì? Lợi ích thiết kế ứng dụng di động Quy trình thiết kế giao diện ứng dụng di động? Các nguyên tắc thiết kế giao diện ứng dụng di động Những quy tắc quan trọng thiết kế giao diện app iOS 10 III NGHIÊN CỨU LÝ THUYẾT VỀ PHÂN CẤP THỊ GIÁC TRONG THIẾT KẾ GIAO DIỆN ỨNG DỤNG DI ĐỘNG (MOBILE APP) 11 Phân cấp thị giác thiết kế ứng dụng di động 12 Phân cấp thông tin 14 Các yếu tố giúp xây dựng hệ thống phân cấp thị giác trực quan thiết kế giao diện ứng dụng di động 17 Kết luận 30 CHƯƠNG 2: NGHIÊN CỨU ỨNG DỤNG “TRỢ LÝ MẸ BẦU” 31 Giới thiệu ứng dụng 31 Hiện trạng ứng dụng 31 So sánh thiết kế giao diện với ứng dụng đối thủ 38 Đề xuất giải pháp khắc phục 43 Nghiên cứu người dùng 43 CHƯƠNG 3: THIẾT KẾ GIAO DIỆN ỨNG DỤNG 46 “TRỢ LÝ MẸ BẦU” 46 Wiframe 46 Danh sách wiframe: 46 48 Thiết kế UI 51 TÀI LIỆU THAM KHẢO 61 MỤC LỤC HÌNH ẢNH Hình Hình ảnh giao diện ứng dụng di động Hình So sánh hệ điều hành Android iOS Hình Giao diện đơn giản ứng dụng BCJ Hình Giao diện ứng dụng Google maps app Hình Giao diện ứng dụng Google maps trình duyệt web Hình Giao diện phản hồi Grab sau người dùng đánh giá ăn 10 Hình Chức “Thu hồi” ảnh Zalo 10 Hình 10 Hình ảnh minh họa phân cấp thị giác thiết kế 12 Hình 11 Một website khơng có hệ thống phân cấp thị giác 12 Hình 12 Một ứng dụng di động có áp dụng phân cấp thị giác 13 Hình 13 Hệ thống phân cấp chữ trang 14 Hình 14 Ứng dụng Wineyard áp dựng hệ thống phân cấp thị giác cho văn 15 Hình 15 So sánh hai đoạn văn giãn dịng khác 16 Hình 16 Đoạn văn lề hai bên tạo thành “dịng chảy” 16 Hình 17 Một số kiểu lề phổ biến 17 Hình 18 Một ứng dụng có sử dụng yếu tố tương phản 18 Hình 19 Yếu tố tương phản màu sắc ứng dụng Grainger 18 Hình 20 Một số màu sắc ý nghĩa theo quan điểm phương Tây 19 Hình 21 So sánh việc sử dụng màu sáng tối hai ứng dụng di động 20 Hình 22 Phối màu đơn sắc 20 Hình 23 Phối màu tương đồng 21 Hình 24 Phối màu tương phản 21 Hình 25 Phối màu ba 21 Hình 26 Phối màu tam giác cân 22 Hình 27 Phối màu chữ nhật 22 Hình 28 Phối màu hình vng 23 Hình 29 Yếu tố kích thước áp dụng ứng dụng di động 23 Hình 30 Kích thước ảnh chiếm 60% ứng dụng Instagram 24 Hình 31 Hệ thống lưới (Lưới cột) 24 Hình 32 Hệ thống loại lưới thiết kế giao diện di động 25 Hình 33 Lưới mo-đun 26 Hình 34 Lưới đường sở 26 Hình 35 Yếu tố liên tục áp dụng ứng dụng di động 27 Hình 36 Yếu tố Line áp dụng ứng dụng di động 28 Hình 37 Yếu tố tương đồng màu sắc áp dụng ứng dụng di động 28 Hình 38 Không gian thiết kế 29 Hình 39 Hệ thống không gian 29 Hình 40 Áp dụng tỷ lệ không gian cho button 30 Hình Ứng dụng “Trợ lý mẹ bầu” hiển thị Appstore 31 Hình 2 Trang “Thơng tin dự sinh” “Trang chủ” ứng dụng 31 Hình Trang chủ ứng dụng cuộn xuống 31 Hình Một số trang chức ứng dụng 31 Hình Một số trang chức khác ứng dụng thiếu sụ tương phản………………………………………………………………………………………… 31 Hình Một số trang sử dụng hình ứng dụng 31 Hình Trang “Thai kỳ” ứng dụng 31 Hình Trang người dùng bắt đầu sử dụng ứng dụng 31 Hình Ứng dụng sử dụng lặp lại hình ảnh 31 Hình 10 Ứng dụng trợ lý bà bầu 31 Hình 11 Trang chủ ứng dụng Trợ lý bà bầu 31 Hình 12 Trang “Thai nhi” ứng dụng Trợ lý bà bầu 31 Hình 13 Trang “Mẹ bầu” ứng dụng Trợ lý bà bầu 50 Hình 14 Ứng dụng bà bầu 50 Hình 15 Trang chủ ứng dụng Bà bầu 50 Hình 16 Trang “Thai nhi” ứng dụng bà bầu 51 Hình 17 Trang “Bà bầu” 31 Hình 18 Persona nhóm người dùng ứng dụng 53 Hình 19 Persona nhóm người dùng ứng dụng 54 Hình Danh sách wireframe Chào mừng, Đăng nhập, Trang chủ ứng dụng 55 Hình Danh sách wireframe Thai kỳ, Chỉ số, Nhật ký, Cá nhân ứng dụng 56 Hình 3 Danh sách wireframe Góc chia sẻ, Xem viêt, Tạo viêt ứng dụng 57 Hình Danh sách wireframe Kiến thức thai kỳ, Cân nặng mẹ bầu, Bác sĩ ứng dụng 58 Hình Logo ứng dụng “Trợ lý mẹ bầu” 59 Hình Màu sắc ứng dụng “Trợ lý mẹ bầu” 60 Hình Lưới cột sử dụng ứng dụng “Trợ lý mẹ bầu” 63 Hình Phong cách icon có viền sử dụng ứng dụng “Trợ lý mẹ bầu” 64 Hình 10 Moockup giao diện ứng dụng “Trợ lý mẹ bầu” 65 Hình 11 Giao diện hồn chỉnh ứng dụng “Trợ lý mẹ bầu” 66 CHƯƠNG 1: TỔNG QUAN LÝ THUYẾT I TỔNG QUAN THIẾT KẾ UI UI ? Thiết kế UI ? UI (User Interface) – Giao diện người dùng điểm tương tác người dùng sản phẩm [2] Về bản, UI giao diện đồ họa người máy, giống máy tính, điện thoại thơng minh, trang web tivi bạn Hiểu cách đơn giản UI bao gồm tất người dùng nhìn thấy như: màu sắc, bố cục xếp nào, website/ứng dụng sử dụng fonts chữ gì, hình ảnh web có hấp dẫn hay khơng, Hay nói cách khác, UI tất yếu tố xuất giao diện người dùng Thiết kế UI (User Interface Design) trình nhà thiết kế tạo nên toàn giao diện người dùng Thiết kế giao diện người dùng chia thành hai yếu tố riêng biệt, lần cách người dùng tương tác với giao diện thứ hai cách giao diện trông Tầm quan trọng UI UI có vai trị quan trọng thành cơng sản phẩm Mục đích thiết kế UI làm cho tương tác người dùng với sản phẩm hiệu đơn giản Mục tiêu thiết kế UI quản lý bên ngồi người dùng thơng qua giao diện sản phẩm Một thiết kế UI tốt cung cấp cho người dùng xác họ cần làm theo cách nhanh chóng đơn giản đồng thời giúp sản phẩm ấn tượng tốt, nâng cao uy tín thương hiệu, giúp người dùng dễ dàng tiếp cận thông tin, thúc đẩy khách hàng thực chuyển đổi (quyết định mua hàng, sử dụng dịch vụ, liên hệ, để lại thơng tin…) [5] Một sản phẩm website/app có giao diện thiết kế bắt mắt, màu sắc bắt mắt thu hút người dùng nhiều chẳng muốn dùng sản phẩm có giao diện tẻ nhạt, buồn chán Quy trình thiết kế UI (UI Design Process) ● Giai đoạn 1: Kết hợp (Collaborating) Giai đoạn này, nhà thiết kế làm việc trực tiếp với UX Designer Developer (lập trình viên) để nắm concept sản phẩm đối tượng người dùng sản phẩm nhắm đến trước hoàn thành thiết kế [7] ● Giai đoạn 2: Thiết kế (Design) Để chuẩn bị cho thiết kế vừa tương tác “tốt” vừa “mãn nhãn”, UI Designer phải qua bước từ tạo kiến trúc thông tin, soạn thảo Style Guide – Hướng dẫn phong cách, thiết kế panel (bảng điều khiển) , xếp layout (trang) cho thiết kế tương thích (responsive), thiết kế yếu tố UI nhỏ (như trượt, nút bấm, [Họ tên: Nguyễn Thị Hậu| Lớp: D18TKDPT2] icon,…), tạo hệ thống thiết kế (design system), tăng tính tương tác cho yếu tố UI [14] ● Giai đoạn 3: Lên mẫu thử (Prototyping) Thường xuyên kiểm tra prototype để xem hiển thị, chuyển động tìm lỗi cần sửa Sau hoàn thiện thiết kế, UI Designer bàn giao thiết kế cho team lập trình để bắt đầu giai đoạn phát triển sản phẩm [7] ● Giai đoạn 4: Thử nghiệm, cải thiện cập nhật Ở giai đoạn UI Designer phải liên tục cải thiện sản phẩm cho phù hợp với nhu cầu, vấn đề, hành vi hay kì vọng liên tục thay đổi người dùng để sản phẩm ngày hoàn thiện [7] Nguyên lý thiết kế UI 3.1 Bộ nguyên lý DOET Đây nguyên lý tạo nhà khoa học Donald A Norman lúc ông nghiên cứu vấn đề tương tác người với máy tính dự án gọi "Design of Everyday Things" DOET (tạm dịch: thiết kế cho thứ dùng ngày) [6] Nó sử dụng để nhà thiết kế tích hợp đánh giá xem giao diện có thực hữu ích giúp cho việc tương tác người với máy tính dễ dàng hay khơng Nó bao gồm yếu tố sau: - Hoàn tất yêu cầu từ phía người dùng - Sử dụng “Knowledge in the Head" “Knowledge in the World - Đơn giản hóa tác vụ người dùng - Làm thứ rõ ràng - Thu hẹp khoảng cách thực thi khoảng cách đánh giá - Sắp xếp cách đắn - Khai thác sức mạnh từ biện pháp hạn chế - Thiết kế phải tính đến lỗi - Chuẩn hóa cần thiết 3.2 Bộ nguyên lý Nielsen Jakob Nielsen năm 1995 mắt tập ngun lý mà ơng nghiên cứu, cịn gọi heuristic, số nguyên tắc thiết kế công nhận Các nguyên tắc quy tắc ngón tay thay hướng dẫn sử dụng cụ thể Những nguyên tắc chứng minh đem lại kết tố cho thiết kế [6] Về 10 điều Nielsen đưa giống với DOET nói trên, khác chút cách diễn đạt cách người ta đánh giá Bộ nguyên lý bao gồm nguyên tắc sau: - Luôn rõ trạng thái hệ thống [Họ tên: Nguyễn Thị Hậu| Lớp: D18TKDPT2] - Làm giao diện giống với thực đời sống - Cho người dùng kiểm soát tự - Đề cao thống - Hạn chế lỗi - Cung cấp linh hoạt cho người sùng - Giảm tải người dùng cần phải nhớ - Giao diện phải có tính thẩm mỹ tính liên quan - Giúp người dùng xác định khắc phục lỗi xảy - Cung cấp trợ giúp, tài liệu hướng dẫn người dùng II TỔNG QUAN THIẾT KẾ ĐỐI VỚI ỨNG DỤNG DI ĐỘNG (MOBILE APP) Ứng dụng di động (Mobile app) gì? Ứng dụng di động hay mobile app định nghĩa chương trình phần mềm thiết kế dành riêng cho điện thoại di động Ứng dụng biển đổi tùy thuộc vào chức giải trí, mua sắm hay xem tin tức,… Thiết kế ứng dụng di động sử dụng ngôn ngữ lập trình để thiết kế phát triển ứng dụng nhằm gia tăng tiện ích cho thiết bị di động đến mức tốt Và tùy mục đích khác mà ứng dụng có tính riêng biệt Hình Hình ảnh giao diện ứng dụng di động [Họ tên: Nguyễn Thị Hậu| Lớp: D18TKDPT2] Lợi ích thiết kế ứng dụng di động Ứng dụng thường thiết kế cho hai hệ điều hành sử dụng phổ biến Android iOS Việc phát triển ứng dụng thỏa mãn nhu cầu người dùng, từ giúp phát triển việc kinh doanh doanh nghiệp So sánh hệ điều hành Android iOS Hình So sánh hệ điều hành Android iOS Android Ưu điểm iOS + Ở Châu Á, số lượng người dùng iOS người dùng Android nên ứng dụng chạy Android thu nhiều phản hồi chạy iOS + Phần mềm ứng dụng chạy iOS xây dựng nhanh giá thành thiết kế rẻ ứng dụng chạy Android + Mỗi lần tải App Android xuống thường tốn chi phí tải App iOS xuống + App thu phí cửa hàng ứng dụng dễ kiếm tiền người dùng điện thoại hệ điều hành có xu hướng bỏ tiền mua ứng dụng nhiều + Mobile app Android không cần phải cập nhật thường xuyên IOS, giúp góp phần giảm chi phí bảo trì + Ngun tắc cửa hàng ứng dụng iOS có nhiều nguyên tắc nghiêm ngặt nhằm đảm bảo chất lượng App + App chạy iOS dễ sử dụng gặp cố phần mềm [Họ tên: Nguyễn Thị Hậu| Lớp: D18TKDPT2] Nhược điểm + Thiết kế ứng dụng Android nhiều thời gian nghiên cứu ứng dụng phải vận hành nhiều loại thiết bị với kích cỡ, hiệu suất độ phân giải hình khác + Chi phí lưu trữ ứng dụng App Store khoảng gần 200$ + Quá trình phát triển ứng dụng Android nhiều thời gian iOS + Ở Châu Á, người dùng Android chiếm số lượng nhiều iOS + Các quy định nghiêm ngặt Apple khiến trình phê duyệt từ kho ứng dụng khó Thiết kế ứng dụng di động không bắt kịp xu hướng chung, đáp ứng nhu cầu đại xã hội mà cịn tạo nhiều lợi ích ưu việt khác cho doanh nghiệp Có thể kể đến như: Tạo nên ứng dụng riêng cho doanh nghiệp chất lượng, hỗ trợ đem đến lợi nhuận cao, gia tăng việc tiêu thụ sản phẩm; thu hút nhiều khách hàng tiềm năng; đơn giản hóa việc quảng cáo, tiết kiệm chi phí; kênh tiếp thị, quảng cáo hiệu qua ứng dụng di động; đưa sản phẩm đến gần với khách hàng, giúp họ dễ dàng tìm hiểu sản phẩm từ nhiều nguồn thơng tin Quy trình thiết kế giao diện ứng dụng di động? Thơng thường, q trình tạo mobile app bao gồm bước sau: • • • Bước 1: Xác định yêu cầu: o Xác định đối tượng mục tiêu sử dụng ứng dụng o Xác định ngữ cảnh sử dụng ứng dụng o Những hoạt động người dùng với ứng dụng Bước 2: Thiết kế phác thảo o Xây dựng thiết kế phác thảo cho ứng dụng: Các chức ứng dụng cách thức hoạt động Bước 3: Xây dựng mẫu o Xây dựng dùng thử để người dùng trải nghiệm, hiểu ứng dụng • Bước 4: Đánh giá o Đánh giá ứng dụng sau bước thực để xem ứng dụng có đạt mục tiêu hay khơng Các nguyên tắc thiết kế giao diện ứng dụng di động Thực tế có khoảng 3,8 tỷ người dùng điện thoại thơng minh tồn giới có nghĩa việc tối ưu hóa trang web bạn để sử dụng thiết bị di động quan trọng Thiết kế web di động trình tối ưu hóa trải nghiệm web cho người dùng di động Quá trình bao gồm việc tạo: thiết kế ưu tiên thiết bị di động Điều có nghĩa thiết kế bắt đầu với [Họ tên: Nguyễn Thị Hậu| Lớp: D18TKDPT2] Hình Danh sách wiframe Chào mừng, Đăng nhập, Trang chủ ứng dụng [Họ tên: Nguyễn Thị Hậu| Lớp: D18TKDPT2] 47 Hình Danh sách wiframe Thai kỳ, Chỉ số, Nhật ký, Cá nhân ứng dụng [Họ tên: Nguyễn Thị Hậu| Lớp: D18TKDPT2] 48 Hình 3 Danh sách wiframe Góc chia sẻ, Xem viêt, Tạo viêt ứng dụng [Họ tên: Nguyễn Thị Hậu| Lớp: D18TKDPT2] 49 Hình Danh sách wiframe Kiến thức thai kỳ, Cân nặng mẹ bầu, Bác sĩ ứng dụng Userflow: [Họ tên: Nguyễn Thị Hậu| Lớp: D18TKDPT2] 50 Hình 4.1 Userflow luồng di chuyển người dùng ứng dụng Để bắt đầu sử dụng ứng dụng, người dùng đăng nhập đăng ký tài khoản (nếu chưa có) Sau người dùng nhập thơng tin dự sinh bé để hồn tất trình khởi tạo ứng dụng lần sử dụng Tiếp người dùng tự lựa chọn tác vụ chức mà muốn xem Thiết kế UI 2.1 Logo Do phân tích màu sắc ứng dụng chưa thực thân thiện, phù hợp với ứng dụng dành cho mẹ bầu, thay đổi màu sắc logo để phù hợp với định hướng thiết theo [Họ tên: Nguyễn Thị Hậu| Lớp: D18TKDPT2] 51 Hình Logo ứng dụng “Trợ lý mẹ bầu” [Họ tên: Nguyễn Thị Hậu| Lớp: D18TKDPT2] 52 2.2 Phơng chữ - Typography Hình Phơng chữ ứng dụng “Trợ lý mẹ bầu” Sử dụng font chữ Work San khơng chân, có đủ độ đậm, nhạt khác nhau, có bo góc trịn tạo cảm giác thân thiện, đại cho ứng dụng dễ đọc cho người dùng 2.3 Màu sắc – Color Hình Màu sắc ứng dụng “Trợ lý mẹ bầu” Lựa chọn hai màu chủ đạo màu hồng màu xanh dương Màu hồng biểu tượng lãng mạn, bay bổng, đại diện cho phái đẹp châu Á Những thiết kế sử dụng màu hồng có tác dụng đem đến thư thái, dễ chịu, giải tỏa stress mang tới cảm xúc tích cực cho người dùng Cịn màu dương có ý nghĩa thể bảo vệ, an tồn, che chở Có [Họ tên: Nguyễn Thị Hậu| Lớp: D18TKDPT2] 53 ý nghĩa nhờ tính “ổn định” màu, màu xanh khơng có tính động đỏ vàng mà yên tĩnh, cố định Sử dụng hai tone màu kết hợp với cách phối màu tương đồng nhằm mang lại cảm giác thư giãn, thoải mái, đáng tin cho người dùng (mẹ bầu) sử dụng ứng dụng mang tính chất cung cấp thông tin “Trợ lý mẹ bầu” 2.4 Hệ thống lưới Sử dụng hệ thống lưới cột giúp cấu trúc thành phần ứng dụng cách gọn gàng, cân đối, giúp người dùng dễ dàng đọc thông tin ứng dụng, Đồng thời tạo chuyên nghiệp cho app Hình Lưới cột sử dụng ứng dụng “Trợ lý mẹ bầu” [Họ tên: Nguyễn Thị Hậu| Lớp: D18TKDPT2] 54 2.5 Biểu tượng – Icon Hình Phong cách icon có viền sử dụng ứng dụng “Trợ lý mẹ bầu” Sử dụng icon dạng outline (icon có viền đơn giản, không nền, viền đơn sắc) tạo đại, trẻ trung cho ứng dụng, đồng thời giúp điều hướng giao diện, tiết kiệm không gian trực quan tạo kết nối với người dùng 2.6 Màn hình giao diện hoàn chỉnh (UI Screens) [Họ tên: Nguyễn Thị Hậu| Lớp: D18TKDPT2] 55 Hình 10 Moockup giao diện ứng dụng “Trợ lý mẹ bầu” [Họ tên: Nguyễn Thị Hậu| Lớp: D18TKDPT2] 56 [Họ tên: Nguyễn Thị Hậu| Lớp: D18TKDPT2] 57 [Họ tên: Nguyễn Thị Hậu| Lớp: D18TKDPT2] 58 [Họ tên: Nguyễn Thị Hậu| Lớp: D18TKDPT2] 59 Hình 10 Giao diện hồn chỉnh ứng dụng “Trợ lý mẹ bầu” Link Figma wiframe giao diện: https://www.figma.com/file/pYHEBvjJ2AJ4qn5EiY9Gv7/UI-Troly-me-bau-mobile-app?node-id=71%3A15839 [Họ tên: Nguyễn Thị Hậu| Lớp: D18TKDPT2] 60 TÀI LIỆU THAM KHẢO Sách tham khảo Ebook UX UI Design Introduction Guide To Intuitive Design And User-Friendly Experience Tác giả: Steven Branson Xuất năm: 2020 https://drive.google.com/file/d/1Yuzwwp2vOlnQ4WGApblhnjBr53s66AAB/view?usp=drivesdk Ebook UXUI Design 2021-2022 Tutorial for Beginners Tác giả: Tom Mulligan Năm xuất bản: 2021 https://web.kamihq.com/web/viewer.html?source=filepicker&document_identifier=66586fcc-e34a-4ea7-8686712d8d3e189d&filename=UXUI%20Design%2020212022%20Tutorial%20for%20Beginners%20The%20Complete%20Step%20by%20Step%20Guide%20to%20U XUI%20Design%20and%20Best%20Practices%20for%20designers%20with%20no%20Experience%20by%20 Mulligan%2C%20Tom%20(z-lib.org).pdf Thiết kế tương tác đa phương tiện Tác giả: PGS.TS.Đỗ Trung Tuấn Năm xuất bản: 2014 http://dlib.ptit.edu.vn/flowpaper/simple_document.php?subfolder=11/87/97/&doc=11879794195393154129133 4424875368502456&bitsid=43d9c9ef-7e07-4ee5-9d0e-026eae9a4858&uid=d31e45e2-f8eb-4783-b3f14bdb2f036be5 Ebook Stephen Boss, Jason Cranford Teague (2017) Web Typography: A handbook for designing beautiful and effective responsive typography [E-book] Taylor & Francis https://vn.vn1lib.org/book/16790632/0eca2c Website tham khảo Alina Arhipova (2021) Visual Hierarchy: Effective UI Content Organization Tubik Studio https://blog.tubikstudio.com/visual-hierarchy-effective-uicontentorganization/#:~:text=Visual%20hierarchy%20strives%20at%20presenting,%2C%20contrast%2C%20st yle%2C %20etc Miklos Philips (2018) Design Principles – An Introduction to Visual Hierarchy Toptal.Com https://www.toptal.com/designers/visual/design-principles-hierarchy Cameron Chapman (2019) Design Foundations – A Guide to Visual Hierarchy (with Infographic) Toptal.Com https://www.toptal.com/designers/ux/visual-hierarchy-infographic Miklos Philips (2021) Design Principles – An Introduction to Visual Hierarchy Toptal.Com https://www.toptal.com/designers/visual/design-principles-hierarchy Samantha Lile (2022, January 1) 12 Visual Hierarchy Principles Every Non-Designer Needs to Know Visme.Co https://visme.co/blog/visual-hierarchy/ lene Strizver (2016) Typographic Hierarchy Fonts.Com https://www.fonts.com/content/learning/fyti/typographic-tips/typographic-hierarchy Chris Berridge (2019) Boost Your UX with Clear Visual Hierarchy Toptal.Com https://www.toptal.com/designers/ux/visual-hierarchy [Họ tên: Nguyễn Thị Hậu| Lớp: D18TKDPT2] 61 ... tắc thiết kế giao di? ??n ứng dụng di động Những quy tắc quan trọng thiết kế giao di? ??n app iOS 10 III NGHIÊN CỨU LÝ THUYẾT VỀ PHÂN CẤP THỊ GIÁC TRONG THIẾT KẾ GIAO DI? ??N ỨNG DỤNG DI ĐỘNG... TỔNG QUAN THIẾT KẾ ĐỐI VỚI ỨNG DỤNG DI ĐỘNG (MOBILE APP) Ứng dụng di động (Mobile app) gì? Lợi ích thiết kế ứng dụng di động Quy trình thiết kế giao di? ??n ứng dụng di động? ... III NGHIÊN CỨU LÝ THUYẾT VỀ PHÂN CẤP THỊ GIÁC TRONG THIẾT KẾ GIAO DI? ??N ỨNG DỤNG DI ĐỘNG (MOBILE APP) [Họ tên: Nguyễn Thị Hậu| Lớp: D18TKDPT2] 11 Để thiết kế ứng dụng di động thành công, cụ thể thiết