Báo Cáo Thực Tập Thiết Kế Giao Diện & Trải Nghiệm Người Dùng (Uiux Design).Docx

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[.]

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

LỜI MỞ ĐẦU

Ngày nay, thiết kế giao diện và trải nghiệm người dùng là một trong những công việc không thể thiếu khi phát triển một sản phẩm công nghệ Việc các website, ứng dụng trên mobile ra đời ngày một nhiều đã thúc đẩy nhu cầu thiết kế một bộ giao diện và trải nghiệm trên sản phẩm được tốt nhất nhằm đảm bảo tính cạnh tranh cũng như giữ chân người dùng sử dụng sản phẩm

Từ đó, kích thích sự phát triển của công nghệ thông tin trong nước và thế giới

Cùng với xu thế phát triển của thế giới, Việt Nam cũng không phải ngoại lệ Ngành UI/UX Designer tại Việt Nam đã và đang phát triển mạnh mẽ, để hòa nhập với những công ty hàng đầu trên thế giới Bên cạnh với xu thế thời đại, UI/UX cũng đang dần giúp các công ty tạo nên những giá trị tốt hơn, hoàn thiện hơn bao giờ hết

UI (viết tắt của User Interface) dùng để mô tả giao diện người dùng, bao gồm những yếu tố mà người dùng tiếp xúc với trang web hoặc ứng dụng đó Trong khi đó, UX (viết tắt của User Experience) chính là trải nghiệm của người dùng Nói cách khác, đây là cách thức mà người dùng tương tác với những yếu tố UI được tạo ra Cả hai yếu tố UI UX đều rất quan trọng bởi tính tương trợ của chúng sẽ ảnh hưởng trực tiếp tới lên quá trình sử dụng sản phẩm và cảm nhận của người dùng Tuy vậy, vai trò của UI UX lại không hề giống nhau trên nhiều khía cạnh, từ cả quá trình phát triển sản phẩm cho tới những nguyên lý, nguyên tắc thiết kế. 

Sau hơn ba năm học tập trên trường, do mong muốn có thêm kinh nghiệm thực tế, cũng như muốn được trở thành một Nhà thiết kế giao diện & trải nghiệm người dùng trong một môi trường chuyên nghiệp Vì vậy, em quyết định chọn Terralogic -  một môi trường lý tưởng, hiện đại, chuyên nghiệp, với những dự án ở nhiều nơi trên khắp thế giới ở nhiều ngành nghề, lĩnh vực khác nhau - là nơi sẽ giúp em thực hiện được dự định này

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ó cơ hội được thực tập tại công ty

Chỉ trong một thời gian ngắn, nhưng nhờ sự chỉ dẫn nhiệt tình của các anh/chị mentor trong team, cũng như những anh chị senior, em đã tiếp thu được những kiến thức quan trọng để

có thể làm được hoàn chỉnh một số phần mềm, website theo đúng, đầy đủ quy trình Chân thành cảm ơn các anh/chị mentor đã bỏ ra 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 này

Đặ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 cả những khó khăn trong công việc, đến những khó khăn việc làm quen với môi trường mới

Cũng xin cảm ơn thầy cô trong khoa Công nghệ phần mềm đã nhiệt tình hỗ trợ, tạo điều kiện em làm bài báo cáo này

<Hà Văn Dương>

<TpHCM, 26/12/2022>

NHẬN XÉT CỦA KHOA

MỤC LỤC

Chương 1: Giới thiệu công ty thực tập 7

Chương 2: Nội dung thực tập 8

1 Tìm hiểu công ty và các kỹ năng cơ bản trong công ty 8

Chương 3: Chi tiết về project 13

Chương 1: Giới thiệu công ty thực tập

1 Giới thiệu công ty Terralogic

Terralogic, có trụ sở tại Thung lũng Silicon, Hoa Kỳ là một công ty dịch vụ Kỹ thuật

& CNTT Với 1.000 nhân viên và ba trung tâm phát triển tại Hoa Kỳ, Ấn Độ và Việt Nam cung cấp các giải pháp toàn diện tiết kiệm chi phí, có thể mở rộng và linh hoạt

Công ty phục vụ các khách hàng toàn cầu, trong số đó có những người tiên phong về công nghệ và các nhà lãnh đạo trong ngành Nhóm nòng cốt của chúng tôi bao gồm các kỹ sư và chuyên gia miền có kinh nghiệm và hiểu biết vững chắc về Tính di động, Ứng dụng, Mạng & Truyền thông và Hệ thống nhúng

Công ty đang xây dựng những điều ngoài sức tưởng tượng và mong muốn trở thành

tổ chức được yêu thích nhất trong những năm tới Theo đó, nguồn nhân lực được coi

là viên ngọc quý của chúng tôi Terralogic mang đến môi trường làm việc năng động, phát triển chuyên môn và cơ sở vật chất cao cấp Các kỹ sư của chúng tôi có

cơ hội làm việc với khách hàng nước ngoài cũng như làm việc tại chỗ ở Nhật Bản, Châu Âu và Hoa Kỳ

2 Sản phẩm của công ty

Là một công ty dịch vụ công nghệ trong 12 năm với hơn 1000 thế mạnh, chúng tôi là nhà cung cấp giải pháp công nghệ 360 độ, ngay từ khi lên ý tưởng sản phẩm cho đến khi hoàn thiện sản phẩm

Hơn là một công ty chuyên cung cấp dịch vụ CNTT chúng tôi còn cung cấp các 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,…

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 được đào tạo toàn diện về thiết kế trải nghiệm & giao diện người dùng, đồng thời rèn luyện những kỹ năng mềm như làm việc nhóm, thuyết trình, giao tiếp Tại công ty, sinh viên có cơ hội được học tập, khám phá và làm việc trong một môi trường phát triển sản phẩm chuyên nghiệp

1 Tìm hiểu công ty và các kỹ năng cơ bản trong công ty

Thời gian : 1 ngày

Nội dung : Giới thiệu về công ty, cách tổ chức của công ty

Được nghe người phụ trách giới thiệu về công ty, quá trình thành lập và 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ủa công ty

Ngoài ra, thực tập sinh còn được giới thiệu về cách thức làm việc trong công ty như thời gian đi làm, các quy định cần phải tuân thủ, cách sử dụng email trong công việc…

Kết quả : Hiểu thêm về công ty Terralogic, quá trình thành lập và phát triển Có thêm các

kỹ năng về việc sử dụng email trong công việc, làm việc có kế hoạch, có kỷ luật, có trách nhiệm hơn

2 Nghiên cứu kỹ thuật

2.1 Các công cụ làm việc

Thời gian : 2 ngày

Nội dung : Tìm hiểu về các công cụ sẽ được sử dụng trong quá 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 về các công cụ

sẽ giúp ích cho trong công việc sau này Một số phần mềm trong số đó như

● Figma: một ứng dụng web có thể cộng tác dành cho thiết kế giao diện, với các tính năng ngoại tuyến bổ sung được kích hoạt bởi các ứng dụng máy tính để bàn dành cho macOS và Windows

● Google Chat: Công cụ trao đổi công việc, meeting

2.2 Tìm hiểu các Material Design System và các design system khác

Thời gian : 7 ngày

Nội dung : Đọc tài liệu hướng dẫn và tìm hiểu Material Design System và một số

design system khác (Ant Design System, Shopify Design System,…)

- Định nghĩa về Design System:

Design System chủ yếu là bộ sưu tập các quy luật, nguyên tắc, ràng buộc áp dụng trong thiết kế và code. Ba thuộc tính này phục vụ các chức năng riêng biệt, tính thống nhất và tính hệ thống từ button đến các ứng dụng đơn lẻ

● Quy tắc: Phải có tín hiệu hoặc văn bản trực quan để chỉ ra CTA

● Ràng buộc: Chỉ có ba loại duy nhất – chính, phụ và mặc định.

● Nguyên tắc: Nên được sử dụng cho tương tác người dùng cụ thể

- Material Design System:

Material Design là một hệ thống thiết kế do Google tạo ra để giúp các nhóm xây dựng trải nghiệm kỹ thuật số chất lượng cao cho Android, iOS, Flutter và web Được lấy cảm hứng từ thế giới vật chất và kết cấu của chúng, bao gồm cả cách chúng phản chiếu ánh sáng và đổ bóng Material Design được xây dựng dựa trên các phương pháp thiết kế in ấn — kiểu chữ, lưới, không gian, tỷ lệ, màu sắc và hình ảnh — để tạo hệ thống phân cấp, ý nghĩa và tiêu điểm khiến người xem đắm chìm trong trải nghiệm Ngoài ra còn dựa trên:

● Nền tảng về UX: Những nền tảng như màu sắc, loại, và hình dáng đã được tùy chỉnh để phù hợp hơn

● Source code mở: Để hỗ trợ việc xây dựng sản phẩm nhanh hơn, dễ dàng hơn ở đa nền tảng

Để sử dụng Material Design hiệu quả hệ thống thiết kế được tổ chức thành ba phần chính: nền tảng, kiểu dáng và thành phần Mỗi phần bao gồm hướng dẫn thiết kế và các công cụ để giúp bạn tùy chỉnh và xây dựng với Material Design

● Nền tảng và tùy chỉnh: Khả năng 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 và hình dạng

có hệ thống

● Components: Các thành phần giao diện người dùng có thể tùy chỉnh, từ menu đến nút đến hộp thoại

Thực hiện :

- Tham gia đầy đủ các buổi training của công ty.

- Làm các bài thực hành, đúc kết, hệ thống hoá kiến thức đã học

Kết quả :

- Hiểu cách 1 hệ thống chuẩn chỉnh sẽ trông như thế nào, được thiết kế ra sao, bao gồm các phần nào

- Biết thêm một số quy tắc trong việc thiết kế sao cho đúng chuẩn, dễ nhìn, tiện lợi

để tạo ra

2.3 Training Tasks

Nội dung: Các kiến thức cơ bản về thiết kế giao diện người dùng để có thể làm ra các

giao diện trên đa nền tảng thiết bị

● Khái niệm cơ bản về thiết kế giao diện người dùng

Nắm được các khái niệm cơ bản về thiết kế giao diện người dùng, là một quá trình không thể thiếu để tạo ra sản phẩm mang đến người dùng Các ưu điểm và khuyết điểm thường mắc phải khi thiết kế giao diện

● Style Guides

Làm thế nào để có thể truyền thông được thương hiệu của mình đến với người dùng Đó chính là 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 và thuộc tính thương hiệu

● Design System

Design System chủ yếu là bộ sưu tập các quy luật, nguyên tắc, ràng buộc áp dụng trong thiết kế và code Ba thuộc tính này phục vụ các chức năng riêng biệt, tính thống nhất và tính hệ thống

● Thiết kế giao diện đa thiết bị

Học cách và quy luật thiết kế trên nhiều thiết bị khác nhau như mobile, tablet, laptop,… Cách áp dụng autolayout và constraints để thiết kế một cách tối ưu nhất,

…

● Sketch

Sketch là bản phác thảo nhanh UI, nhằm ghi lại ý tưởng nhanh về một chức năng nào đó Mục đích của Sketch là để capture nhanh những ý tưởng lúc tư duy một mình hoặc đang brainstorm với nhau

● Wireframe

Là bố cục của giao diện người dùng, mặc dù không quá chi tiết nhưng nó thể hiện

rõ được luồng thao tác của người dùng (user flow) và cấu trúc các nhóm thông tin

có trên UI đó

● Mockup

Mockup chi tiết hơn 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, thậm chí là validation của các trường dữ liệu

● Prototype

Nhìn bên ngoài, Prototype khá giống Mockup Những điều làm Prototype trở nên thú vị hơn là khả năng tương tác của nó Với Prototype, người dùng hoàn toàn có thể tương tác trực tiếp với nó như: nhấn nút, kéo thả, trượt lên, trượt xuống, mở popup, Điều này sẽ giúp khách hàng hình dung rõ ràng hơn về sản phẩm mà họ

sẽ nhận được

Thực hiện :

● Tham gia đầy đủ các buổi training

● Làm các bài tập thực hành được yêu cầu

● Tìm kiếm tài liệu trên mạng để tìm hiểu thêm

Kết quả :

● Hiểu được những khái niệm cơ bản về thiết kế giao diện người dùng

● Đã thực hiện được 1 trang web cơ bản

3 Thực hiện project

Sau hơn 3 tuần đọc tài liệu và mày mò thực hành, thực tập sinh đã nắm được những kiến thức cơ bản về 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 những kiến thức đã học để thực hiện thực hiện những dự án thực tế, những task do mentor cũng như từ phía công ty đưa ra

4 Lịch làm việc

Tuần Công việc Người hướng dẫn

Mức độ hoàn thành

Nhận xét của người hướng dẫn

1,2 - Tìm hiểu về công ty,

cách tổ chức của công Quintus Dương

- Làm quen với các

công cụ quản lý trong

công ty

- Học cách trao đổi, làm

việc qua Google Chat

- Tìm hiểu về Material

Design System

3

- Thực hiện Training

Task

- Đọc tài liệu liên quan

đến process của công ty

Quintus Dương

4

- Tiếp cận kiến thức về

Trải nghiệm người

dùng

- Tiếp cận kiến thức về

Giao diện người dùng

Quintus Dương

5,6

- Hỗ trợ dự án

LightHouse trong việc

thiết kế giao diện người

dùng

Elton Lê Quintus Dương

7,8

- Hỗ trợ dự án Agog

trong việc thiết kế giao

diện người dùng

Jesu Dennis Mahesh P Quintus Dương

Chương 3: Chi tiết về project

1 Training Task

Sản phẩm là một trang web được thiết kế lại cho công ty chuyên làm về giáo dục để giúp cho công ty thể hiện bản thân cũng như có tiếng nói cá nhân nhiều hơn, được sử dụng bởi những người ghé thăm trang web

1.1 Yêu cầu

● Hoàn thành giao diện trên thiết bị chính là Laptop

● Moodboard để có thể thấy rõ hơn về concept cũng như design direction Ngoài ra, moodboard cũng được sử dụng để giải thích nguyên nhân đằng sau việc tại sao sử dụng những yếu tố như màu sắc, phông chữ,…

● Bộ Style Guide bao gồm màu sắc, phông chữ,… được trình bày một cách chuẩn chỉ

● Giao diện Trang chủ mới

1.2 Danh sách giao diện

Moodboard

Giao diện Web

1.3 Thực hiện

● Thực tập sinh: Hà Văn Dương

● Và sự giúp đỡ tận tình của anh Quintus Dương

1.4 Kế hoạch thực hiện

● Giai đoạn 1: Nhận các yêu cầu và tiến hành thấu hiểu vấn đề

● Giai đoạn 2: Tiến hành tìm kiếm và nghiên cứu câu chuyện đằng sau của brand

● Giai đoạn 3: Tiến hành nghiên cứu và tham khảo giao diện từ các nguồn như Behance, Dribble,… để lấy ý tưởng

● Giai đoạn 4: Tiến hành xây dựng Style Guide và Moodboard

● Giai đoạn 5: Thiết kế giao diện web theo yêu cầu cũng như theo concept đã được đưa ra

● Giai đoạn 6: Đánh giá và chỉnh sửa để hoàn thiện task

1.5 Kết quả đạt được

● Hoàn thành Training Task đã được Mentor yêu cầu

● Nhận xét, góp ý, đúc kết kinh nghiệm cho cấc task tiếp theo

2 Lighthouse

Lighthouse Learning, một trong những nhóm Giáo dục Mầm non & K-12 hàng đầu của

Ấn Độ Nhóm của chúng tôi cam kết xây dựng một nền tảng vững chắc và các kỹ năng thời đại mới cho các thế hệ tương lai với các mục tiêu lấy học sinh làm trung tâm, phù hợp với mạng lưới hơn 1.200 trường mầm non và 44 trường phổ thông Lighthouse Learning Group mang lại niềm vui học tập cho hơn 150.000 trẻ em mỗi ngày và sử dụng lực lượng lao động tài năng gồm hơn 10.000 người tại các văn phòng và cơ sở của mình

2.1 Yêu cầu

● Hoàn thành giao diện trên thiết bị chính là Laptop

● Thiết kế giao diện cho ứng dụng trên desktop dựa trên wireframe đã có sẵn Cũng như dựa trên các màu sắc, phông chữ, components, và các yếu tố khác để thuận tiện hơn trong việc sửa chữa, phát triển và trong quá trình development

● Giao diện của flow Parent Communication và Parent Help&Support trong ứng dụng

2.2 Danh sách giao diện

Giao diện flow Parent Communication

Giao diện flow Parent Help&Support

2.3 Thực hiện

● Thực tập sinh: Hà Văn Dương

● Và sự giúp đỡ của anh Quintus Dương, Elton Lê

2.4 Kế hoạch thực hiện

● Giai đoạn 1: Nhận các yêu cầu và tiến hành thấu hiểu vấn đề

● Giai đoạn 2: Tiến hành tìm hiểu về dự án về công ty mình đang thiết kế cho họ

● Giai đoạn 3: Tiến hành nghiên cứu design system, components,… đã có sẵn của

dự án

● Giai đoạn 4: Tiến hành thiết kế các màn hình dựa trên wireframe được nhận, dựa trên được giao, cũng như phản hồi nếu có vấn đề, thắc mắc

● Giai đoạn 6: Báo cáo lại vấn đề gặp phải cũng như đánh giá và chỉnh sửa để hoàn thiện task

2.5 Kết quả đạt được

● Hoàn thành Notification flow đã được Mentor yêu cầu

● Hoàn thành các task được Mentor đưa ra trong suốt quá trình tham gia, đóng góp cho dự án

● Nhận xét, góp ý, đúc kết kinh nghiệm cho các task tiếp theo

3 AGOG

AGOG là một 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 trong cùng một nền tảng Nền tảng này là một giải pháp để tìm kiếm các dịch vụ vận chuyển khi đang di chuyển Nó cung cấp phần mềm vận chuyển có thể 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 và các dịch vụ vận chuyển theo yêu cầu khác Nó hoạt động như một nền tảng B2B, B2C và C2C cho các dịch vụ hậu cần

3.1 Yêu cầu

● Hoàn thành giao diện trên 2 thiết bị chính là Laptop, điện thoại

● Thiết kế giao diện cho ứng dụng trên desktop dựa trên wireframe đã có sẵn Cũng như dựa trên các màu sắc, phông chữ, components, và các yếu tố khác để thuận tiện hơn trong việc sửa chữa, phát triển và trong quá trình development

● Thiết kế bản responsive dựa trên bản desktop Cũng như dựa trên các màu sắc, phông chữ, components, và các yếu tố khác để thuận tiện hơn trong việc sửa chữa, phát triển và trong quá trình development

● Giao diện của flow Emergency Service trong ứng dụng

3.2 Danh sách giao diện