Thiết kế giao diện cho ứng dụng japanese phrases

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG CAO ĐẲNG KINH TẾ CÔNG NGHỆ TP HỒ CHÍ MINH ĐỒ ÁN TỐT NGHIỆP THIẾT KẾ GIAO DIỆN CHO ỨNG DỤNG JAPANESE PRASES Giảng viên hướng dẫn Sinh viên thực hiện Mã số Sinh viên Lớp Ngành Công nghệ thông tin Chuyên ngành Công nghệ phần mềm TP Hồ Chí Minh, tháng 6 năm 20 MỤC LỤC CHƯƠNG 1 Giới thiệu và tổng quan về UIUX 1 1 UIUX là gì, tìm hiểu về cộng nghệ thiết kế UIUX 1 1 1 UIUX là gì 1 1 1 1 UI là gì 2 1 1 2 UX là gì 7 1 2 Sự khác nhau giữa UI và UX 13 CHƯƠNG 2 Cài đặt phần.

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG CAO ĐẲNG KINH TẾ - CƠNG NGHỆ TP HỒ CHÍ MINH ĐỒ ÁN TỐT NGHIỆP: THIẾT KẾ GIAO DIỆN CHO ỨNG DỤNG JAPANESE PRASES Giảng viên hướng dẫn: Sinh viên thực hiện: Mã số Sinh viên: Lớp: Ngành: Công nghệ thông tin Chuyên ngành: Cơng nghệ phần mềm TP Hồ Chí Minh, tháng năm 20 MỤC LỤC DANH MỤC HÌNH ẢNH TRƯỜNG CAO ĐẲNG KT-CN TP.HCM KHOA CÔNG NGHỆ THÔNG TIN - - CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM ĐỘC LẬP – TỰ DO – HẠNH PHÚC - NHẬN XÉT ĐÁNH GIÁ CỦA GIẢNG VIÊN HƯỚNG DẪN ĐỒ ÁN TỐT NGHIỆP: Thiết kế giao diện cho ứng dụng Japanese Phrases Sinh viên: MSSV: Lớp: Chuyên ngành: Công nghệ phần mềm Nhận xét giáo viên hướng dẫn: Điểm: (Bằng chữ số):…………………………………………………… TP.HCM, ngày tháng năm 20 Giáo viên (Ký ghi rõ họ tên) TRƯỜNG CAO ĐẲNG KT - CN TP.HCM KHOA CÔNG NGHỆ THÔNG TIN - - CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM ĐỘC LẬP – TỰ DO – HẠNH PHÚC - NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN ĐỀ TÀI : Thiết kế giao diện cho ứng dụng Japanese Phrases Sinh viên: MSSV : Chuyên ngành: Công nghệ phần mềm Nhận xét giáo viên phản biện: Điểm số: Điểm chữ: TP.HCM, ngày tháng năm 20 GIÁO VIÊN PHẢN BIỆN (Ký ghi rõ họ tên) LỜI CẢM ƠN Để hồn thành đồ án mơn Đồ án báo cáo này, trước hết em xin gửi đến quý thầy, cô giáo tất bạn sinh viên thuộc chuyên ngành Công nghệ phần mềm khoa Công nghệ thông tin, trường Cao đẳng Kinh tế - Cơng nghệ thành phố Hồ Chí Minh lời cảm ơn chân thành Đặc biệt, chúng em xin gởi đến thầy, người tận tình hướng dẫn, giúp đỡ chúng em hoàn thành đồ án tốt nghiệp lời cảm ơn sâu sắc Trong trình học tập, q trình làm đồ án mơn học, khó tránh khỏi sai sót, mong thầy bỏ qua Đồng thời trình độ lý luận kinh nghiệm thực tiễn cịn hạn chế nên báo cáo khơng thể tránh khỏi thiếu sót, chúng em mong nhận ý kiến đóng góp thầy để chúng em học thêm nhiều kinh nghiệm hoàn thành tốt báo cáo tới Chúng em xin chân thành cảm ơn! LỜI MỞ ĐẦU Việc xây dựng ứng dụng để phục vụ cho nhu cầu riêng tơt chức,cơng ty,thậm chí cá nhân,ngày nay,khơng lấy làm xa lạ Thời thay đổi! UI/UX phức tạp phát triển nhiều Và giao diện đơn giản hiệu vài năm trước trở thành vơ ích thời điểm vạn ngày phải “dè chừng” với khách hàng khó tính mặt thẩm mỹ.Nếu người làm UI/UX hẳn bạn biết UI/UX liên tục phát triển không ngừng để đáp ứng nhu cầu cho khách hàng kể khách hàng coi trọng mặt thẩm mỹ ứng dụng hay trang web Và trang web hay ứng dụng đa phần phải cần có hổ trợ UI/UX để tạo giao diện đẹp mắt lôi người xem Sử dụng UI/UX để thiết kế giao diện cho sản phâm ứng dụng hoạt giao diện trang web phương pháp hiệu tiện lợi.trở thành nhu cầu tất yếu lĩnh vực thiết kế giao diện.Hình thức trình bày ứng dụng UI, hiểu thao tác người dùng trải nghiệm lại UX Người thiết kế giao diện app phải thật tinh tế gần người có tồn trải nghiệm hiểu rõ hệ thống Với ý tưởng đó,dưới hướng dẫ tận tình thầy em thực báo cáo với đề tài “Thiết kế giao diện cho ứng dụng Japanese Phrases” CHƯƠNG 1: Giới thiệu tổng quan UI/UX UI/UX gì, tìm hiểu cộng nghệ thiết kế UI/UX 1.1 UI/UX Cơng nghệ thiết kế UI, UX công nghệ thiết kế web phổ biến nhiều công ty, sử dụng để làm web cho doanh nghiệp Đây xu hướng thiết kế web đánh giá tiếp tục ưa chuộng phát triển năm 2018 UI/UX khái niệm bạn gặp nhiều tìm hiểu lĩnh vực thiết kế website, viết web chuyên nghiệp Trong đó, “UI” cụm từ đại diện cho thiết kế website “Giao diện người dùng” “UX” hiểu “Trải nghiệm người dùng” Hai khái niệm đôi song hành nhau, trở thành tiêu chuẩn quan trọng để đánh giá website Trong nhiều sản phẩm website thực hiện, phần lớn khách hàng thẩm định xem trang web có đạt tiêu chuẩn UI/UX khơng, sau xem đến chức cụ thể hay hiệu suất hoạt động Một website chất lượng phải có UI tốt, UX tốt, bug, hạn chế crash 1.1 Công nghệ thiết kế UX/UI Trong thời buổi cách mạng công nghiệp 4.0 bùng nổ, xu hướng tập trung vào trải nghiệm người dùng ưu tiên đề cao, không ngành công nghiệp thiết kế web mà gần phổ biến lĩnh vực kinh doanh khác thiết bị công nghệ, đồ dùng gia đình, thiết kế in ấn… Những cần thiết kế nằm nhiều lĩnh vực, thiết kế công nghiệp (xe, nội thất…) tới in ấn (tạp chí, ẩn phẩm…) tới cơng nghệ (webstie, mobile) nhiều lĩnh vực khác Những công ty công nghệ ngày nhiều phải tập trung tạo giao diện cho người dùng, đương nhiên kiểu công việc tạo Các chức danh UX (thiết kế trải nghiệm) hay UI Designer rắc rối để hiểu rõ với người thiết kế làm lĩnh vực khác Nào ráng sức để hiểu công việc đằng sau chức danh ngành công nghệ máy tính 1.1.1 UI Giao diện người dùng giao diện người dùng giao diện người dùng viết tắt giao diện người dùng, giao diện người dùng giao diện đồ họa ứng dụng Nó bao gồm nút mà người dùng nhấp vào, văn họ đọc, hình ảnh, trượt, trường nhập văn tất mục lại mà người dùng tương tác Điều bao gồm bố cục hình, chuyển tiếp, hình động giao diện tương tác vi mô Bất kỳ loại yếu tố trực quan, tương tác hoạt hình phải thiết kế Công việc thuộc nhà thiết kế UI Họ định ứng dụng trông Họ phải chọn cách phối màu hình dạng nút - độ rộng dịng phơng chữ sử dụng cho văn Các nhà thiết kế giao diện người dùng tạo giao diện giao diện người dùng ứng dụng 10 1.2 Khái niệm UI UX Designer có nhiệm vụ tập trung chủ yếu vào việc Cảm giác sản phẩm Một vấn đề thiết kế khơng có câu trả lời hợp lý UX designer tìm nhiều cách để tiếp cận nhằm giải vấn đề cụ thể người dùng Nhiệm vụ UX designer chắn quy trình logic sản phẩm từ bước tới bước Một cách mà người UX Designer hay làm đóng vai người dùng để quan sát cách người dùng… quan sát Việc người dùng có nhận khối hình, chữ, màu sắc họ xác định lặp lại để tạo cách trải nghiệm “Tốt nhất” Một dự án ví dụ việc tạo quy trình tiếp cận cho người dùng " Xác định mẫu dùng, quy trình người dùng làm tác vụ, nhận diện UI Tương tác với kịch bản, người dùng cuối cùng, tương tác với mẫu thử, đưa hình thiết kế với người chủ sản phẩm Làm việc với giám đốc sáng tạo người thiết kế thẩm mỹ để tạo hình ảnh nhận diện Twitter tương ứng với tính Phát triển trì cơng cụ thiết kế, 64 7.7 Thêm hình ảnh cho background Và cuối ghi tên ứng phí ta có hình Loading cho ứng dụng Tôi cho hiệu ứng vào chữ để hình thêm đẹp hơn: 65 7.8 Thêm chữ cho background Và tất thao tác thực phần mềm Adobe Photoshop Bước sử dụng phần mềm Android Studio để tạo ứng dụng đưa hình ảnh mà làm vào ứng dụng Trong ứng dụng có nút bấm (button) icon giới thiệu phần mềm Android Studio tải chúng từ mạng 1.2 Thiết kế giao diện ứng dụng Android Studio Sau mở phần mềm Android Studio giao diện sau: 66 7.9 Giao diện Android Studio Ứng dụng cài đặt sẵn có database, việc thêm hình ảnh thiết kế giao diện cho ứng dụng Đầu tiên đưa hình ảnh mà làm Photoshop vào ứng dụng, phải tìm tới mục: res -> drawable Nơi nơi chưa hình ảnh nguồn để ứng dụng nhận hình ảnh 8.1 Nơi chứa hình ảnh Ở tơi đưa hình ảnh cần thiết cho ứng dụng ngồi hình Logo Loading tơi cịn đưa hai hình ảnh hai sau: 8.2 Headphone 67 8.3 Reload Tiếp theo thêm mã nguồn để ứng dụng nhận hình mà vừa đưa vào Mã nguồn ứng dụng mở hình Loading sau: 8.4 Mã nguồn Loading Và hình ảnh hiển thị phần Design sau: 8.5 Giao diện Loading Ứng dụng Japanese Phrases ứng dụng cuộn, trải nghiệm cách trược thơng tin ứng dụng để sử dụng chúng Vì giao diện khác đơn gian, hình mã nguồn: 68 8.6 Mã nguồn giao diện Và phần giao diện là: 8.7 Giao diện Tiếp theo tạo button, ta thực thao tác click vào phát câu mà cần Và tơi thêm hình ảnh headphone vào button để ứng dụng thêm phần sinh động Dưới phần mã nguồn nó: 69 8.8 Mã nguồn buton headphone Và bên phần giao diện ứng dụng hiển thị sau: 70 8.9 Giao diện button headphone Ở phần header tên ứng dụng bên phải button Reload có chức tải lại thơng tin ứng dụng Mã nguồn hình: 9.1 Mã nguồn button reload Và phần Design hình: 71 9.2 Header ứng dụng Và tất thao tác để thiết kế giao diện cho ứng dung Japanese Phrases Bước cuối chạy demo ứng dụng phần mềm thứ ba Genymotion 1.3 Chạy demo ứng dụng phần mềm Genymotion Mở phần mềm Genymotion thấy giao diện sau: 72 9.3 Giao diện Genymotion Ở Genymotion hiển thị cho phiên Android, chất lượng hình ảnh hiển thị tên sản phẩm tương ứng Genymoton phần mềm giả lập Android hổ trợ phiên Android thấp phiên Android Đặc biết nhẹ chạy tiện lợi Chúng ta cần tải phiên Android phù hợp với ứng dụng mà cài đặt Lưu ý cài đặt ứng dụng chạy phiên Android cài thấp ứng dụng sử dụng nhiều Ở tơi tải hai phiên hình sau: 9.4 Ứng dụng tải 73 Tiếp tiến hành chạy ứng dụng Japanese Phrases hai phiên vừa tải Tôi chạy Google Pixel - 7.1 – 1080 x 1920 trước để trải nghiệm Giả lập hoạt động hiển thị hình: 9.5 Giao diện Android 74 Kế tiếp chạy ứng dụng Japanese Phrases phiên Màn hình Loading ứng dụng: 9.6 Màn hình loading 75 Và sau giao diện ứng dụng: 9.7 Giao diện ứng dụng 76 Ở phần giao diện dòng câu nói giao tiếp đơn giản tiếng Nhật Bản Mỗi câu bên phải có button hình ảnh headphone, bên trái có ba dịng chữ Dịng hiển chữ Nhật bản, dịng hai chữ phiên âm quốc tế, dòng cuối câu nói hiển thị sang tiếng anh Để nghe cần click vào Icon headphone 77 CHƯƠNG 3: Tổng Kết Sau trình nghiên cứu, tìm hiểu thực tơi xây dựng công giao diện ứng dụng phục vụ cho việc học tập tiếng Nhật Về mặt lý thuyết đồ án trình bày số nghiên cứu tảng Android số phần mềm khác nhằm mục đích để biết nhiều phần mềm tác dụng số công cụ cở để phục vụ cho việc làm việc học tập Về mặt thực nghiệm ứng dụng có khả áp dụng thực tế, mạng lại lợi ích cho người dùng  Kết đạt - Ứng dụng giao diện hồn thành yêu cầu đặt - Ứng dụng cung cấp tương đối đầy đủ câu nói đơn giản để giao tiếp ngày - Ứng dụng có giao diện đơn giản thân thiện, đẹp mặt dể sử  dụng Hạn chế - Ứng dụng chưa Public chưa sử dụng Online - Tốc độ ứng dụng chưa tối ưu, lần đầu sử dụng phải cần khoản thời gian để ứng dụng tải hết thông tin - Nút chức Reload chưa tối ưu, sử dụng click vào xảy tượng đứng máy crach chương trình  Hướng phát triển - Sẽ phát triển ứng dụng để chạy tảng IOS, Window Phone - Cải thiện nút chức Reload thêm nhiều câu nói hưu ích - Thêm cài tính cho ứng dụng TÀI LIỆU THAM KHỎA [1] https://vi.wikipedia.org/ (ngày truy cập 3/4/2019) 78 [2] https://now.edu.vn/ (ngày truy cập 3/4/2019) [3] https://viblo.asia/ (ngày truy cập 3/4/2019) [4] http://www.uplevo.com/ (ngày truy cập 3/4/2019) [5] http://www http://rgb.vn/ (ngày truy cập 3/4/2019) [6] https://designervn.net/ (ngày truy cập 3/4/2019) [7] https://vieclamit.careerbuilder.vn/ (ngày truy cập 3/4/2019) [8]https://quantrimang.com/cach-cai-dat-adobe-flash-player-tren-may-tinh130189 (ngày truy cập 3/4/2019) [9] https://www.adobe.com/products/photoshop.html (ngày truy cập 3/4/2019) [10] https://developer.android.com/studio (ngày truy cập 3/4/2019) [11] https://www.genymotion.com/ (ngày truy cập 3/4/2019) ... Cài đặt phần mềm thiết kế giao diện cho ứng dụng 1.Cài đặt phần mềm 1.1 Giới thiệu phần mềm sử dụng để thiết kế giao diện cho ứng dụng Japanese Phrases Japanese Phrases ứng dụng đơn giản giúp... dụng UI/UX để thiết kế giao diện cho sản phâm ứng dụng hoạt giao diện trang web phương pháp hiệu tiện lợi.trở thành nhu cầu tất yếu lĩnh vực thiết kế giao diện. Hình thức trình bày ứng dụng UI, hiểu... cơng nghệ máy tính 1.1.1 UI Giao diện người dùng giao diện người dùng giao diện người dùng viết tắt giao diện người dùng, giao diện người dùng giao diện đồ họa ứng dụng Nó bao gồm nút mà người