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. Đề 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 THỰC HÀNH CHUYÊN SÂU GVHD Th.S Nguyễn Thị Tuyết Mai Khoa Đa phương tiện Học Viện Công nghệ Bưu chính Viễn thông (PTIT)
THỰC HÀNH CHUYÊN SÂU GVHD: Th.S Nguyễn Thị Tuyết Mai Đề tài Nghiên cứu lý thuyết Phân cấp thị giác thiết kế giao diện ứng dụng di động ứng dụng cải thiện giao diện ứng dụng "Trợ lý mẹ bầu" Họ tên: Nguyễn Thị Hậu MSV: B18DCPT078 Nội dung Chương 1: Cơ sở lý thuyết thiết kế UI/UX phân tích nguyên lý Phân cấp thị giác thiết kế giao diện ứng dụng di động Chương 2: Nghiên cứu ứng dụng “Trợ lý mẹ bầu” Chương 3: Thiết kế giao diện ứng dụng “Trợ lý mẹ bầu” Chương CƠ SỞ LÝ THUYẾT VỀ THIẾT KẾ UI/UX I TỔNG QUAN THIẾT KẾ UI/UX UI ? Thiết kế UI ? UX ? Thiết kế UX ? Những khái niệm liên quan tới thiết kế UI/UX Quy trình thiết kế UI Nguyên lý thiết kế UI Chương CƠ SỞ LÝ THUYẾT VỀ THIẾT KẾ UI/UX 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ế ứng dụng di động? Các nguyên tắc thiết kế ứng dụng di động Chương CƠ SỞ LÝ THUYẾT VỀ THIẾT KẾ UI/UX 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 Chương CƠ SỞ LÝ THUYẾT VỀ THIẾT KẾ UI/UX II TỔNG QUAN THIẾT KẾ ĐỐI VỚI ỨNG DỤNG DI ĐỘNG (MOBILE APP) 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 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 quả, Chương CƠ SỞ LÝ THUYẾT VỀ THIẾT KẾ UI/UX II TỔNG QUAN THIẾT KẾ ĐỐI VỚI ỨNG DỤNG DI ĐỘNG (MOBILE APP) Quy trình thiết kế giao diện ứng dụng di động? Bước 1: Xác định yêu cầu Bước 2: Thiết kế phác thảo Bước 3: Xây dựng mẫu Bước 4: Đánh giá Chương CƠ SỞ LÝ THUYẾT VỀ THIẾT KẾ UI/UX II TỔNG QUAN THIẾT KẾ ĐỐI VỚI ỨNG DỤNG DI ĐỘNG (MOBILE APP) Các nguyên tắc thiết kế giao diện ứng dụng di động Nguyên tắc cấu trúc (The Structure Principle) Nguyên tắc đơn giản (The Simple Principle) Nguyên tắc hiển thị (The Visibility Principle) Nguyên tắc quán (The Consistency Principle) Nguyên tắc phản hồi (The Feedback Principle) Nguyên tắc dùng sai (The Tolerance Principle) Chương CƠ SỞ LÝ THUYẾT VỀ THIẾT KẾ UI/UX 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 Phân cấp thị giác thiết kế ứng dụng di động ? Tại phân cấp thị giác lại quan trọng thiết kế ứng dụng di động? Phân cấp chữ 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 III Nghiên cứu lý thuyết phân cấp thị giác ứng dụng di động Phân cấp thị giác thiết kế ứng dụ ng di độ ng Phân cấp thị giác (Visual Hierarchy ) cách thông tin cấu trúc ưu tiên thiết kế Dựa lý thuyết tâm lý Gestalt, kiểm tra nhận thức thị giác người dùng yếu tố liên quan đến cho thấy cách người có xu hướng thống yếu tố hình ảnh thành nhóm Hệ thống phân cấp trực quan hướng người xem đến thông tin quan trọng trước tiên, sau đến nội dung phụ Chương NGHIÊN CỨU ỨNG DỤNG “TRỢ LÝ MẸ BẦU” NGHIÊN CỨU NGƯỜI DÙNG Personas người dùng Nhóm 1: Nhóm phụ nữ kết đã, dự định mang bầu, độ tuổi giao động khoảng 22 – 37 tuổi Đây nhóm đối tượng mang thai có kế hoạch tự nguyện, họ muốn trang bị kiến thức cần thiết, chuyên sâu, xác chế độ ăn uống, ngủ nghỉ vấn đề khác liên quan đến mẹ bầu em bé để có thai kỳ khỏe mạnh cho mẹ em bé Nhóm 2: Nhóm phụ nữ chưa kết có ngồi ý muốn Đây nhóm đối tượng tập trung độ tuổi 17 – 21 tuổi Bên cạnh số lượng không nhỏ phụ nữ lựa chọn nạo phá thai có nhiều phụ nữ nhóm tuổi lựa chọn giữ lại thai nhi Họ nhóm đối tượng trẻ, chưa có kinh nghiệm, kỹ sống, tài đầy đủ để sẵn sàng làm mẹ Chương THIẾT KẾ GIAO DIỆN "TRỢ LÝ MẸ BẦU" APP WIFREAM CỦA ỨNG DỤNG Chào mừng Đăng ký/ Đăng nhập Trang chủ Thai kỳ Nhật Ký Cá nhân Danh sách wireframe Danh sách wireframe 1.USERFLOW CỦA Ứ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 Chương THIẾT KẾ GIAO DIỆN "TRỢ LÝ MẸ BẦU" APP THIẾT KẾ UI Logo: Thay đổi màu sắc logo để phù hợp với định hướng thiết theo Chương THIẾT KẾ GIAO DIỆN "TRỢ LÝ MẸ BẦU" APP THIẾT KẾ UI Phông chữ - Typography: 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 Chương THIẾT KẾ GIAO DIỆN "TRỢ LÝ MẸ BẦU" APP THIẾT KẾ UI Màu sắc – Color: 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ở Chương THIẾT KẾ GIAO DIỆN "TRỢ LÝ MẸ BẦU" APP THIẾT KẾ UI 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 Chương THIẾT KẾ GIAO DIỆN "TRỢ LÝ MẸ BẦU" APP THIẾT KẾ UI 2.5 Biểu tượng – Icon: 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 Danh sách giao diện hoàn chỉnh Danh sách giao diện hoàn chỉnh Danh sách giao diện hoàn chỉnh ... động hệ điều hành iOS Ứng dụng đời nhằm cung cấp đầy đủ thông tin, kiến thức cần thiết, hữu ích thai kỳ, chăm sóc bé mẹ tổng hợp từ nguồn tài liệu chất lượng, đội ngũ bác sĩ có chuyên môn thâm niên... 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 quả, Chương CƠ SỞ LÝ THUYẾT VỀ THIẾT KẾ UI/UX II TỔNG QUAN THIẾT... điểm nhấn, gần gũi thực dành cho người dùng Ứng dụng Trợ lý bà bầu Ưu điểm: - Giao diện trang chủ đơn giản, nội dung thông tin phân cấp rõ ràng - Các chức chia cho mẹ bầu em bé thành trang nhỏ giúp