Báo cáo cuối kỳ học phần Thực hành chuyên sâu (khoa Đa phương tiện, PTIT)

Báo cáo cuối kỳ học phần Thực hành chuyên sâu (khoa Đa phương tiện, PTIT) Đề tài: NGHIÊN CỨU LÝ THUYẾT DESIGN SYSTEM VÀ ÁP DỤNG VÀO THIẾT KẾ ỨNG DỤNG THUÊ NHÀ TRỌ OHANA Thực hành chuyên sâu là một học phần thú vị, vô cùng bổ ích và có tính thực tế cao. Học phần này đảm bảo cung cấp một lượng lớn kiến thức cũng như kỹ năng gắn liền với nhu cầu thực tiễn của mỗi sinh viên theo học chuyên ngành Thiết kế Đa phương tiện thuộc khoa Đa phương tiện, Học viện Công nghệ Bưu chính Viễn thông.

HỌC VIỆN CƠNG NGHỆ BƯU CHÍNH VIỄN THƠNG KHOA ĐA PHƯƠNG TIỆN THỰC HÀNH CHUYÊN SÂU Đề tài: NGHIÊN CỨU LÝ THUYẾT DESIGN SYSTEM VÀ ÁP DỤNG VÀO THIẾT KẾ ỨNG DỤNG THUÊ NHÀ TRỌ OHANA Giảng viên hướng dẫn: Tuyết Mai Sinh viên thực hiện: Họ tên: Mã sinh viên: Lớp niên chế: Nhóm mơn học: Hệ: Đại học quy ThS Nguyễn Thị THỰC HÀNH CHUYÊN SÂUGVHD: NGUYỄN THỊ TUYẾT MAI Hà Nội, tháng năm 2022 SVTH: THỰC HÀNH CHUYÊN SÂUGVHD: NGUYỄN THỊ TUYẾT MAI LỜI CẢM ƠN Thực hành chuyên sâu học phần thú vị, vơ bổ ích có tính thực tế cao Học phần đảm bảo cung cấp lượng lớn kiến thức kỹ gắn liền với nhu cầu thực tiễn sinh viên theo học chuyên ngành Thiết kế Đa phương tiện thuộc khoa Đa phương tiện, Học viện Cơng nghệ Bưu Viễn thơng Trong suốt q trình nghiên cứu thực báo cáo này, bên cạnh nỗ lực thân, em nhận hỗ trợ, hướng dẫn nhiệt tình q thầy khoa Em xin gửi lời cảm ơn đến ban lãnh đạo cán khoa Đa phương tiện, Học viện Công nghệ Bưu Viễn thơng tổ chức quản lý hoạt động dạy học cách hiệu quả, giúp em yên tâm suốt trình thực đồ án Đặc biệt, em xin gửi lời cảm ơn sâu sắc đến ThS Nguyễn Thị Tuyết Mai trực tiếp hướng dẫn, truyền đạt kiến thức quý báu cho em suốt thời gian thực đồ án vừa qua Do điều kiện thời gian kinh nghiệm thực tế vốn kiến thức nhiều hạn chế, báo cáo em không tránh khỏi thiếu sót Em mong thầy góp ý, bảo để từ em hoàn thiện thêm kỹ kiến thức mình, phục vụ cho học tập cơng việc sau Em xin chân thành cảm ơn! Sinh viên thực SVTH: i THỰC HÀNH CHUYÊN SÂUGVHD: NGUYỄN THỊ TUYẾT MAI MỤC LỤC LỜI CẢM ƠN .i DANH MỤC CÁC KÝ HIỆU VÀ CHỮ VIẾT TẮT iv DANH MỤC BẢNG BIỂU VÀ HÌNH ẢNH v MỞ ĐẦU CHƯƠNG 1: TỔNG QUAN VỀ DESIGN SYSTEM TRONG THIẾT KẾ GIAO DIỆN .5 1.1 Tổng quan thiết kế UX/UI .5 1.1.1 Thiết kế UX (User Experience) .5 1.1.2 Thiết kế UI (User Interface) 1.2 Tổng quan ứng dụng di động thiết kế UX/UI ứng dụng di động 1.2.1 Tổng quan ứng dụng di động 1.2.2 Thiết kế UX/UI ứng dụng di động .8 1.3 Tổng quan Design System thiết kế UX/UI .9 1.3.1 Khái niệm Design System 1.3.2 Lợi ích sử dụng Design System 10 1.3.3 Các thành phần Design System 11 1.4 Phương pháp Atomic Design xây dựng Design System 16 1.4.1 Định nghĩa Atomic Design 16 1.4.2 Các thành phần Atomic Design 16 1.4.3 Ưu điểm phương pháp Atomic Design 17 1.5 Phương pháp xây dựng Design System 18 1.5.1 Quy trình xây dựng Design System 18 1.5.2 Các hướng tiếp cận Design System 22 1.6 Tiểu kết 23 CHƯƠNG 2: NGHIÊN CỨU VỀ ỨNG DỤNG THUÊ PHÒNG TRỌ OHANA 25 2.1 Tổng quan thị trường cho thuê phòng trọ Hà Nội .25 SVTH: ii THỰC HÀNH CHUYÊN SÂUGVHD: NGUYỄN THỊ TUYẾT MAI 2.2 Nghiên cứu ứng dụng thuê phòng trọ Ohana 25 2.2.1 Giới thiệu chung 25 2.2.2 Nhiệm vụ ứng dụng 26 2.2.3 Các ứng dụng tương tự thị trường 26 2.2.4 Nghiên cứu người dùng 27 2.2.5 Các sản phẩm đầu từ kế nghiên cứu 30 CHƯƠNG 3: ÁP DỤNG LÝ THUYẾT DESIGN SYSTEM ĐỀ XUẤT GIẢI PHÁP THIẾT KẾ ỨNG DỤNG THUÊ PHÒNG TRỌ OHANA .34 3.1 Đề xuất giải pháp thiết kế ứng dụng thuê nhà Ohana 34 3.2 Thiết kế giao diện ứng dụng Ohana 34 3.2.1 Atoms 34 3.2.2 Molecules 38 3.2.3 Organisms 39 3.2.4 Templates 40 3.2.5 Pages 41 KẾT LUẬN, KIẾN NGHỊ 43 TÀI LIỆU THAM KHẢO .44 SVTH: iii THỰC HÀNH CHUYÊN SÂUGVHD: NGUYỄN THỊ TUYẾT MAI SVTH: iv THỰC HÀNH CHUYÊN SÂUGVHD: NGUYỄN THỊ TUYẾT MAI DANH MỤC CÁC KÝ HIỆU VÀ CHỮ VIẾT TẮT STT Chữ viết tắt UI Viết đầy đủ User Interface UX User Experience SVTH: Nghĩa Giao diện người dùng Trải nghiệm người dùng v THỰC HÀNH CHUYÊN SÂUGVHD: NGUYỄN THỊ TUYẾT MAI DANH MỤC BẢNG BIỂU VÀ HÌNH ẢNH Bảng biểu: Bảng 2.1 Kết khảo sát người dùng 29 Hình ảnh: Hình 1.1 Biểu đồ thể mối quan hệ thành phần Design System Nate Baldwin 11 Hình 1.2 Style Guide Mailchimp 12 Hình 1.3 Component Library hệ thống Material Design 13 Hình 1.4 Design System Carbon IBM .14 Hình 1.5 Design System Atlassian 15 Hình 1.6 Phương pháp Atomic Design Brad Frost 16 Hình 1.7 Mơ hình đơn lẻ 20 Hình 1.8 Mơ hình tập trung 20 Hình 1.9 Mơ hình liên kết .21 Hình 1.10 Trang tích hợp “Có mới” Design System Lightning Salesforce .22 Hình 1.11 hướng tiếp cận để sử dụng Design System 23 Hình 2.1 Những ghi quan trọng sau vấn #1 30 Hình 2.2 Những ghi quan trọng sau vấn #2 30 Hình 2.3 Empathy Map 31 Hình 2.4 User Persona #1 32 Hình 2.5 User Persona #2 32 Hình 2.6 Kiến trúc thơng tin ứng dụng 33 SVTH: vi THỰC HÀNH CHUYÊN SÂUGVHD: NGUYỄN THỊ TUYẾT MAI Hình 3.1 Logo ứng dụng Ohana 35 Hình 3.2 Font chữ sử dụng ứng dụng 35 Hình 3.3 Bảng màu ứng dụng Ohana 36 Hình 3.4 Các biểu tượng sử dụng ứng dụng 37 Hình 3.5 Hệ thống nút bấm 38 Hình 3.6 Một tab thông tin ứng dụng 38 Hình 3.7 Hệ thống trường nhập văn 39 Hình 3,8 Menu điều hướng ứng dụng 40 Hình 3,9 Template hình đăng nhập 41 Hình 3,10 Màn hình đăng nhập ứng dụng 42 SVTH: vii THỰC HÀNH CHUYÊN SÂUGVHD: NGUYỄN THỊ TUYẾT MAI MỞ ĐẦU Lý chọn đề tài Design System (Hệ thống thiết kế) giúp doanh nghiệp trì tính quán nhiều sản phẩm, dịch vụ Mặc dù thường kết hợp với visual guidelines thư viện components, Design System lại hoàn toàn khác Khi ngày có nhiều cơng ty nhận giá trị tính đồng thiết kế, nhóm Design System tạo thiết lập phương pháp tốt để đảm bảo phù hợp lâu dài cho công việc thiết kế công ty, tổ chức Design System có tầm quan trọng to lớn đứng trước thực trạng có nhiều sản phẩm kỹ thuật số (ứng dụng/website) lại chưa thực đầu tư nghiêm túc cho việc thiết lập mơ hình Design System Thậm chí nhiều cơng ty, tổ chức cịn chưa nhận lợi ích Design System hay loay hoay việc tạo dựng mơ hình Design System cho cơng ty, tổ chức Từ dẫn đến hệ nhiều ứng dụng website chưa đảm bảo tối ưu mặt giao diện, không đem lại trải nghiệm tốt cho người dùng hay gây vấn đề khả sử dụng khiến doanh thu công ty, tổ chức bị giảm mạnh Tại thị trường Việt Nam, ứng dụng cho thuê nhà trọ gần bắt đầu lên số sản phẩm Tuy nhiên, sản phẩm gặp nhiều lỗi thiết kế giao diện chưa thể tạo hiệu bật thị trường ứng dụng Ngay kể ứng dụng cho thuê nhà trọ nói tiếng Việt Nam đến thời điểm không tránh khỏi vấn đề Từ đây, đề tài nghiên cứu lý thuyết Design System áp dụng vào thiết kế ứng dụng thuê nhà trọ Ohana hứa hẹn khai thác nhiều khía cạnh thú vị, hi vọng đưa số giải pháp việc ứng dụng Design System thiết kế giao diện web/app Tính khoa học khả thi đề tài - Tính khả thi: Sau năm học tập rèn luyện trường, em có tích luỹ kiến thức kỹ sau:  Về kiến thức o Nắm kiến thức tư thiết kế SVTH: viii