1 TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO THỰC TẬP THIẾT KẾ GIAO DIỆN & TRẢI NGHIỆM NGƯỜI DÙNG (UI/UX DESIGN) Công ty thực tập Terralogic Người phụ trách Quintus Dương Thực[.]
1 TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO THỰC TẬP THIẾT KẾ GIAO DIỆN & TRẢI NGHIỆM NGƯỜI DÙNG (UI/UX DESIGN) Công ty thực tập : Terralogic Người phụ trách : Quintus Dương Thực tập sinh : Hà Văn Dương TP Hồ Chí Minh, 26 tháng 12 năm 2022 Hà Văn Dương LỜI MỞ ĐẦU Ngày nay, thiết kế giao diện trải nghiệm người dùng công việc thiếu phát triển sản phẩm công nghệ Việc website, ứng dụng mobile đời ngày nhiều thúc đẩy nhu cầu thiết kế giao diện trải nghiệm sản phẩm tốt nhằm đảm bảo tính cạnh tranh giữ chân người dùng sử dụng sản phẩm Từ đó, kích thích phát triển cơng nghệ thơng tin nước giới Cùng với xu phát triển giới, Việt Nam ngoại lệ Ngành UI/UX Designer Việt Nam phát triển mạnh mẽ, để hòa nhập với công ty hàng đầu giới Bên cạnh với xu thời đại, UI/UX dần giúp cơng ty tạo nên giá trị tốt hơn, hồn thiện hết UI (viết tắt User Interface) dùng để mô tả giao diện người dùng, bao gồm yếu tố mà người dùng tiếp xúc với trang web ứng dụng Trong đó, UX (viết tắt User Experience) trải nghiệm người dùng Nói cách khác, cách thức mà người dùng tương tác với yếu tố UI tạo Cả hai yếu tố UI UX quan trọng tính tương trợ chúng ảnh hưởng trực tiếp tới lên trình sử dụng sản phẩm cảm nhận người dùng Tuy vậy, vai trị UI UX lại khơng giống nhiều khía cạnh, từ q trình phát triển sản phẩm nguyên lý, nguyên tắc thiết kế. Sau ba năm học tập trường, mong muốn có thêm kinh nghiệm thực tế, muốn trở thành Nhà thiết kế giao diện & trải nghiệm người dùng môi trường chuyên nghiệp Vì vậy, em định chọn Terralogic - mơi trường lý tưởng, đại, chuyên nghiệp, với dự án nhiều nơi khắp giới nhiều ngành nghề, lĩnh vực khác - nơi giúp em thực dự định Hà Văn Dương LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty Terralogic tạo điều kiện cho em có hội thực tập cơng ty Chỉ thời gian ngắn, nhờ dẫn nhiệt tình anh/chị mentor team, anh chị senior, em tiếp thu kiến thức quan trọng để làm hồn chỉnh số phần mềm, website theo đúng, đầy đủ quy trình Chân thành cảm ơn anh/chị mentor bỏ nhiều thời gian, công sức để hướng dẫn chúng em hoàn thành đợt thực tập Đặc biệt cảm ơn anh Quintus Dương, training UI/UX, hướng dẫn, giúp đỡ cho chúng em tận tình khó khăn cơng việc, đến khó khăn việc làm quen với môi trường Cũng xin cảm ơn thầy khoa Cơng nghệ phần mềm nhiệt tình hỗ trợ, tạo điều kiện em làm báo cáo Hà Văn Dương NHẬN XÉT CỦA KHOA Hà Văn Dương MỤC LỤC MỤC LỤC Chương 1: Giới thiệu công ty thực tập Giới thiệu công ty Terralogic Sản phẩm công ty 7 Chương 2: Nội dung thực tập Tìm hiểu công ty kỹ công ty Nghiên cứu kỹ thuật Thực project Lịch làm việc 8 11 11 Chương 3: Chi tiết project Training Task Lighthouse Agog 13 13 15 17 TÀI LIỆU THAM KHẢO TỔNG KẾT 20 21 Hà Văn Dương Chương 1: Giới thiệu công ty thực tập Giới thiệu cơng ty Terralogic Terralogic, có trụ sở Thung lũng Silicon, Hoa Kỳ công ty dịch vụ Kỹ thuật & CNTT Với 1.000 nhân viên ba trung tâm phát triển Hoa Kỳ, Ấn Độ Việt Nam cung cấp giải pháp tồn diện tiết kiệm chi phí, mở rộng linh hoạt Công ty phục vụ khách hàng tồn cầu, số có người tiên phong công nghệ nhà lãnh đạo ngành Nhóm nịng cốt chúng tơi bao gồm kỹ sư chuyên gia miền có kinh nghiệm hiểu biết vững Tính di động, Ứng dụng, Mạng & Truyền thông Hệ thống nhúng Công ty xây dựng điều sức tưởng tượng mong muốn trở thành tổ chức yêu thích năm tới Theo đó, nguồn nhân lực coi viên ngọc quý Terralogic mang đến môi trường làm việc động, phát triển chuyên môn sở vật chất cao cấp Các kỹ sư chúng tơi có hội làm việc với khách hàng nước làm việc chỗ Nhật Bản, Châu Âu Hoa Kỳ Sản phẩm công ty Là công ty dịch vụ công nghệ 12 năm với 1000 mạnh, nhà cung cấp giải pháp công nghệ 360 độ, từ lên ý tưởng sản phẩm hoàn thiện sản phẩm Hơn công ty chuyên cung cấp dịch vụ CNTT cung cấp giải pháp như: Thiết kế giao diện người dùng, Phát triển ứng dụng, dịch vụ đám mây, dịch vụ an ninh mạng, dịch vụ CNTT,… Hà Văn Dương Chương 2: Nội dung thực tập Đợt thực tập với vị trí “UX/UI Designer” nhằm mục đích giúp sinh viên thực tập đào tạo toàn diện thiết kế trải nghiệm & giao diện người dùng, đồng thời rèn luyện kỹ mềm làm việc nhóm, thuyết trình, giao tiếp Tại cơng ty, sinh viên có hội học tập, khám phá làm việc môi trường phát triển sản phẩm chun nghiệp Tìm hiểu cơng ty kỹ công ty Thời gian : ngày Nội dung : Giới thiệu công ty, cách tổ chức công ty Được nghe người phụ trách giới thiệu cơng ty, q trình thành lập phát triên (như nhắc đến trên), quy trình làm việc từ cao xuống thấp, cách thức tổ chức cơng ty Ngồi ra, thực tập sinh cịn giới thiệu cách thức làm việc công ty thời gian làm, quy định cần phải tuân thủ, cách sử dụng email công việc… Kết : Hiểu thêm công ty Terralogic, trình thành lập phát triển Có thêm kỹ việc sử dụng email công việc, làm việc có kế hoạch, có kỷ luật, có trách nhiệm Nghiên cứu kỹ thuật 2.1 Các công cụ làm việc Thời gian : ngày Nội dung : Tìm hiểu cơng cụ sử dụng trình làm việc Trong thời gian này, mentor hướng dẫn thực tập sinh tìm hiểu cơng cụ giúp ích cho cơng việc sau Một số phần mềm số ● Figma: ứng dụng web cộng tác dành cho thiết kế giao diện, với tính ngoại tuyến bổ sung kích hoạt ứng dụng máy tính để bàn dành cho macOS Windows ● Google Chat: Công cụ trao đổi công việc, meeting 2.2 Tìm hiểu Material Design System design system khác Thời gian : ngày Nội dung : Đọc tài liệu hướng dẫn tìm hiểu Material Design System số design system khác (Ant Design System, Shopify Design System,…) - Định nghĩa Design System: Hà Văn Dương Design System chủ yếu sưu tập quy luật, nguyên tắc, ràng buộc áp dụng thiết kế code. Ba thuộc tính phục vụ chức riêng biệt, tính thống tính hệ thống từ button đến ứng dụng đơn lẻ ● Quy tắc: Phải có tín hiệu văn trực quan để CTA ● Ràng buộc: Chỉ có ba loại – chính, phụ mặc định ● Nguyên tắc: Nên sử dụng cho tương tác người dùng cụ thể - Material Design System: Material Design hệ thống thiết kế Google tạo để giúp nhóm xây dựng trải nghiệm kỹ thuật số chất lượng cao cho Android, iOS, Flutter web Được lấy cảm hứng từ giới vật chất kết cấu chúng, bao gồm cách chúng phản chiếu ánh sáng đổ bóng Material Design xây dựng dựa phương pháp thiết kế in ấn — kiểu chữ, lưới, không gian, tỷ lệ, màu sắc hình ảnh — để tạo hệ thống phân cấp, ý nghĩa tiêu điểm khiến người xem đắm chìm trải nghiệm Ngồi cịn dựa trên: ● Nền tảng UX: Những tảng màu sắc, loại, hình dáng tùy chỉnh để phù hợp ● Source code mở: Để hỗ trợ việc xây dựng sản phẩm nhanh hơn, dễ dàng đa tảng Để sử dụng Material Design hiệu hệ thống thiết kế tổ chức thành ba phần chính: tảng, kiểu dáng thành phần Mỗi phần bao gồm hướng dẫn thiết kế công cụ để giúp bạn tùy chỉnh xây dựng với Material Design ● Nền tảng tùy chỉnh: Khả truy cập, bố cục, trạng thái tương tác, design token, v.v ● Phong cách: Áp dụng màu sắc, loại, biểu tượng, chuyển động hình dạng có hệ thống ● Components: Các thành phần giao diện người dùng tùy chỉnh, từ menu đến nút đến hộp thoại Thực : Hà Văn Dương - Tham gia đầy đủ buổi training công ty Làm thực hành, đúc kết, hệ thống hoá kiến thức học Kết : - 2.3 Hiểu cách hệ thống chuẩn chỉnh trông nào, thiết kế sao, bao gồm phần Biết thêm số quy tắc việc thiết kế cho chuẩn, dễ nhìn, tiện lợi để tạo Training Tasks Nội dung: Các kiến thức thiết kế giao diện người dùng để làm giao diện đa tảng thiết bị ● Khái niệm thiết kế giao diện người dùng Nắm khái niệm thiết kế giao diện người dùng, q trình khơng thể thiếu để tạo sản phẩm mang đến người dùng Các ưu điểm khuyết điểm thường mắc phải thiết kế giao diện ● Style Guides Làm để truyền thơng thương hiệu đến với người dùng Đó Style Guide, thứ tập trung chủ yếu vào phong cách Chúng bao gồm màu sắc, font chữ, logo thuộc tính thương hiệu ● Design System Design System chủ yếu sưu tập quy luật, nguyên tắc, ràng buộc áp dụng thiết kế code Ba thuộc tính phục vụ chức riêng biệt, tính thống tính hệ thống ● Thiết kế giao diện đa thiết bị Học cách quy luật thiết kế nhiều thiết bị khác mobile, tablet, laptop,… Cách áp dụng autolayout constraints để thiết kế cách tối ưu nhất, … ● Sketch Sketch phác thảo nhanh UI, nhằm ghi lại ý tưởng nhanh chức Mục đích Sketch để capture nhanh ý tưởng lúc tư brainstorm với ● Wireframe Hà Văn Dương 10 Là bố cục giao diện người dùng, khơng q chi tiết thể rõ luồng thao tác người dùng (user flow) cấu trúc nhóm thơng tin có UI ● Mockup Mockup chi tiết Wireframe về: màu sắc, vị trí field, kích cỡ, hình ảnh, font chữ, đường kẻ, phân lơ, phân luồng, chí validation trường liệu ● Prototype Nhìn bên ngồi, Prototype giống Mockup Những điều làm Prototype trở nên thú vị khả tương tác Với Prototype, người dùng hồn tồn tương tác trực tiếp với như: nhấn nút, kéo thả, trượt lên, trượt xuống, mở popup, Điều giúp khách hàng hình dung rõ ràng sản phẩm mà họ nhận Thực : ● Tham gia đầy đủ buổi training ● Làm tập thực hành yêu cầu ● Tìm kiếm tài liệu mạng để tìm hiểu thêm Kết : ● Hiểu khái niệm thiết kế giao diện người dùng ● Đã thực trang web Thực project Sau tuần đọc tài liệu mày mò thực hành, thực tập sinh nắm kiến thức Figma, giao diện & trải nghiệm người dùng Trong tuần tiếp theo, thực tập sinh áp dụng kiến thức học để thực thực dự án thực tế, task mentor từ phía cơng ty đưa Lịch làm việc Tuần 1,2 Cơng việc Người hướng dẫn - Tìm hiểu công ty, Quintus Dương cách tổ chức công Mức độ hoàn thành Nhận xét người hướng dẫn Hà Văn Dương 11 ty - Làm quen với công cụ quản lý công ty - Học cách trao đổi, làm việc qua Google Chat - Tìm hiểu Material Design System 5,6 7,8 - Thực Training Quintus Dương Task - Đọc tài liệu liên quan đến process công ty - Tiếp cận kiến thức Quintus Dương Trải nghiệm người dùng - Tiếp cận kiến thức Giao diện người dùng - Hỗ trợ dự án Elton Lê LightHouse việc Quintus Dương thiết kế giao diện người dùng - Hỗ trợ dự án Agog Jesu Dennis việc thiết kế giao Mahesh P diện người dùng Quintus Dương Hà Văn Dương 12 Chương 3: Chi tiết project Training Task Sản phẩm trang web thiết kế lại cho công ty chuyên làm giáo dục để giúp cho công ty thể thân có tiếng nói cá nhân nhiều hơn, sử dụng người ghé thăm trang web 1.1 Yêu cầu ● Hoàn thành giao diện thiết bị Laptop ● Moodboard để thấy rõ concept design direction Ngoài ra, moodboard sử dụng để giải thích nguyên nhân đằng sau việc sử dụng yếu tố màu sắc, phông chữ,… ● Bộ Style Guide bao gồm màu sắc, phông chữ,… trình bày cách chuẩn ● Giao diện Trang chủ 1.2 Danh sách giao diện Moodboard Giao diện Web Hà Văn Dương 13 1.3 Thực ● Thực tập sinh: Hà Văn Dương ● Và giúp đỡ tận tình anh Quintus Dương 1.4 Kế hoạch thực ● Giai đoạn 1: Nhận yêu cầu tiến hành thấu hiểu vấn đề ● Giai đoạn 2: Tiến hành tìm kiếm nghiên cứu câu chuyện đằng sau brand ● Giai đoạn 3: Tiến hành nghiên cứu tham khảo giao diện từ nguồn Behance, Dribble,… để lấy ý tưởng ● Giai đoạn 4: Tiến hành xây dựng Style Guide Moodboard Hà Văn Dương 14 ● Giai đoạn 5: Thiết kế giao diện web theo yêu cầu theo concept đưa ● Giai đoạn 6: Đánh giá chỉnh sửa để hoàn thiện task 1.5 Kết đạt ● Hoàn thành Training Task Mentor yêu cầu ● Nhận xét, góp ý, đúc kết kinh nghiệm cho cấc task Lighthouse Lighthouse Learning, nhóm Giáo dục Mầm non & K-12 hàng đầu Ấn Độ Nhóm chúng tơi cam kết xây dựng tảng vững kỹ thời đại cho hệ tương lai với mục tiêu lấy học sinh làm trung tâm, phù hợp với mạng lưới 1.200 trường mầm non 44 trường phổ thông Lighthouse Learning Group mang lại niềm vui học tập cho 150.000 trẻ em ngày sử dụng lực lượng lao động tài gồm 10.000 người văn phòng sở 2.1 u cầu ● Hồn thành giao diện thiết bị Laptop ● Thiết kế giao diện cho ứng dụng desktop dựa wireframe có sẵn Cũng dựa màu sắc, phơng chữ, components, yếu tố khác để thuận tiện việc sửa chữa, phát triển trình development ● Giao diện flow Parent Communication Parent Help&Support ứng dụng 2.2 Danh sách giao diện Giao diện flow Parent Communication Hà Văn Dương 15 Giao diện flow Parent Help&Support 2.3 Thực ● Thực tập sinh: Hà Văn Dương ● Và giúp đỡ anh Quintus Dương, Elton Lê 2.4 Kế hoạch thực ● Giai đoạn 1: Nhận yêu cầu tiến hành thấu hiểu vấn đề ● Giai đoạn 2: Tiến hành tìm hiểu dự án cơng ty thiết kế cho họ ● Giai đoạn 3: Tiến hành nghiên cứu design system, components,… có sẵn dự án Hà Văn Dương 16 ● Giai đoạn 4: Tiến hành thiết kế hình dựa wireframe nhận, dựa giao, phản hồi có vấn đề, thắc mắc ● Giai đoạn 6: Báo cáo lại vấn đề gặp phải đánh giá chỉnh sửa để hoàn thiện task 2.5 Kết đạt ● Hoàn thành Notification flow Mentor yêu cầu ● Hoàn thành task Mentor đưa suốt q trình tham gia, đóng góp cho dự án ● Nhận xét, góp ý, đúc kết kinh nghiệm cho task AGOG AGOG giải pháp tổng hợp kết nối người gửi hàng với người vận chuyển tảng Nền tảng giải pháp để tìm kiếm dịch vụ vận chuyển di chuyển Nó cung cấp phần mềm vận chuyển tùy chỉnh cho người gửi hàng, người môi giới vận chuyển hàng hóa, người vận chuyển dịch vụ vận chuyển theo yêu cầu khác Nó hoạt động tảng B2B, B2C C2C cho dịch vụ hậu cần 3.1 Yêu cầu ● Hoàn thành giao diện thiết bị Laptop, điện thoại ● Thiết kế giao diện cho ứng dụng desktop dựa wireframe có sẵn Cũng dựa màu sắc, phông chữ, components, yếu tố khác để thuận tiện việc sửa chữa, phát triển trình development ● Thiết kế responsive dựa desktop Cũng dựa màu sắc, phông chữ, components, yếu tố khác để thuận tiện việc sửa chữa, phát triển trình development ● Giao diện flow Emergency Service ứng dụng 3.2 Danh sách giao diện Hà Văn Dương 17 Giao diện Emergency Service Flow 3.3 Thực ● Thực tập sinh: Hà Văn Dương Hà Văn Dương 18 ● Và hỗ trợ Quintus Dương, Jesu Dennis, Mahesh P 3.4 Kế hoạch thực ` ● Giai đoạn 1: Nhận yêu cầu tiến hành thấu hiểu vấn đề ● Giai đoạn 2: Tiến hành tìm hiểu dự án cơng ty thiết kế cho họ ● Giai đoạn 3: Tiến hành nghiên cứu design system, components,… có sẵn dự án ● Giai đoạn 4: Tiến hành thiết kế hình dựa wireframe nhận, dựa giao, phản hồi có vấn đề, thắc mắc ● Giai đoạn 6: Báo cáo lại vấn đề gặp phải đánh giá chỉnh sửa để hoàn thiện task 3.5 Kết đạt ● Hoàn thành flow yêu cầu ● Hoàn thành task đưa suốt trình tham gia, đóng góp cho dự án ● Nhận xét, góp ý, đúc kết kinh nghiệm cho task Hà Văn Dương 19 TÀI LIỆU THAM KHẢO For Tools: https://www.figma.com/ For Chatting & Management: https://workspace.google.com/products/chat/ For Font: https://fonts.google.com/ https://fonts.adobe.com/ For graphics: https://www.freepik.com/ Hà Văn Dương 20 TỔNG KẾT Như vậy, vòng vài tháng ngắn ngủi, em kịp tìm hiểu quy trình UI/UX team tham gia vào dự án vô thú vụ Chân thành cảm ơn giúp đỡ anh/chị mentor senior Terralogic, để em hoàn thành tập Hà Văn Dương ... làm giao diện đa tảng thiết bị ● Khái niệm thiết kế giao diện người dùng Nắm khái niệm thiết kế giao diện người dùng, q trình khơng thể thiếu để tạo sản phẩm mang đến người dùng Các ưu điểm khuyết... sản phẩm nguyên lý, nguyên tắc thiết kế. Sau ba năm học tập trường, mong muốn có thêm kinh nghiệm thực tế, muốn trở thành Nhà thiết kế giao diện & trải nghiệm người dùng môi trường chuyên nghiệp... sinh viên thực tập đào tạo tồn diện thiết kế trải nghiệm & giao diện người dùng, đồng thời rèn luyện kỹ mềm làm việc nhóm, thuyết trình, giao tiếp Tại cơng ty, sinh viên có hội học tập, khám