Thiết Kế Giao Diện & Trải Nghiệm Người Dùng (Uxui Design) (Báo Cáo Thực Tập).Doc
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (500.36 KB, 23 trang )
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 (UX/UI DESIGN)
Công ty thực tập
: Long Van System Solution
Người phụ trách
: Mentor Phùng Hợp
Thực tập sinh
: Bùi Minh Thịnh
TP. Hồ Chí Minh, tháng 12 năm 2022
Bùi Minh Thịnh
Thực tập tốt nghiệp
2
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, UX/UI 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ả
q 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 Long Van System Solution - một môi
trường lý tưởng, hiện đại, chuyên nghiệp - là nơi sẽ giúp em thực hiện được dự định này.
Bùi Minh Thịnh
Thực tập tốt nghiệp
3
LỜI CẢM ƠN
Trân trọng gửi lời cảm ơn Công ty Long Van System Solution đã 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 anh mentor và các anh
chị trong team, em đã tiếp thu được những kiến thức quan trọng để có thể làm được một vài
công việc về UX/UI. Chân thành cảm ơn anh Mentor và các anh chị khác trong công ty đã bỏ ra
nhiều thời gian,công sức để hướng dẫn em hoàn thành đợt thực tập này.
Đặc biệt cảm ơn anh Phùng Hợp đã training UX/UI, hướng dẫn, giúp đỡ cho 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.
<Bùi Minh Thịnh>
<TpHCM, 12/12/2022>
Bùi Minh Thịnh
Thực tập tốt nghiệp
4
NHẬN XÉT CỦA KHOA
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
Bùi Minh Thịnh
Thực tập tốt nghiệp
5
MỤC LỤC
Chương 1: Giới thiêu công ty thực tập......................................................................................................6
1.
Giới thiệu công ty Long Van System Solution....................................................................................6
2.
Sản phẩm của công ty........................................................................................................................6
3.
Văn hố của cơng ty...........................................................................................................................7
4.
Một số khách hàng tiêu biểu..............................................................................................................7
Chương 2: Nội dung thực tập............................................................................................................9
1.
Tìm hiểu cơng ty và các kỹ năng cơ bản trong công ty......................................................................9
2.
Nghiên cứu kỹ thuật...........................................................................................................................9
2.1
2.2
2.3
2.4
Các công cụ quản lý cơng việc...........................................................................................................................9
Tìm hiểu về Figma...........................................................................................................................................10
Thiết kế giao diện người dùng.........................................................................................................................11
Thiết kế trải nghiệm người dùng......................................................................................................................12
3.
Thực hiện công việc..........................................................................................................................14
4.
Lịch làm việc....................................................................................................................................14
Chương 3: Chi tiết công việc............................................................................................................15
1.
Giao diện máy POS..........................................................................................................................15
1.1
1.2
1.3
1.4
1.5
2.
Yêu cầu............................................................................................................................................................15
Danh sách giao diện.........................................................................................................................................15
Thực hiện.........................................................................................................................................................17
Kế hoạch thực hiện..........................................................................................................................................17
Kết quả đạt được..............................................................................................................................................17
Giao diện ứng dụng chấm công........................................................................................................17
2.1
2.2
2.3
2.4
2.5
Yêu cầu............................................................................................................................................................17
Danh sách giao diện.........................................................................................................................................18
Thực hiện.........................................................................................................................................................19
Kế hoạch thực hiện..........................................................................................................................................19
Kết quả đạt được..............................................................................................................................................19
Chương 4: Tổng kết.........................................................................................................................20
1.
Kết quả thu được.............................................................................................................................20
2.
Những khó khăn gặp phải trong quá trình thực tập........................................................................20
3.
Gợi ý cho lộ trình phát triển tương lai.............................................................................................20
Bùi Minh Thịnh
Thực tập tốt nghiệp
6
4.
Cảm nhận về công ty................................................................................................................................20
Chương 1: Giới thiêu công ty thực tập
1. Giới thiệu công ty Long Van System Solution
Công ty Cổ phần Giải pháp Hệ thống Long Vân là một trong những công ty tiên
phong ở Việt Nam chuyên phát triển các ứng dụng trên nền tảng công nghệ điện tốn
đám mây, từ đó cung cấp các giải pháp dịch vụ liên quan cho khách hàng cá nhân và
doanh nghiệp.
Long Vân là đối tác của các nhà cung cấp công nghệ hàng đầu thế giới: NetApp,
Vmware, Cisco,… chúng tôi tự tin đem đến cho khách hàng những sản phẩm dịch vụ
chất lượng cao tạo thành từ những tinh hoa công nghệ trên thế giới.
Long Vân hiện với 2 văn phịng chính Nam & Bắc, Trung Tâm Kỹ Thuật, Data
center, sẵn sàng 24/7/365 trong việc hỗ trợ khách hàng nhanh chóng - nhiệt tình của
bộ phận kỹ thuật, cũng như sự hướng dẫn - tư vấn về dịch vụ một cách chuyên
nghiệp của bộ phận kinh doanh, Long Vân hi vọng mang lại cho khách hàng và đối
tác sự tin cậy, an tâm và hài lòng nhất, đảm bảo cung cấp cho khách hàng những
dịch vụ tốt nhất với chi phí phù hợp theo từng nhu cầu và khả năng của khách hàng.
2. Sản phẩm của công ty
Công ty Cổ phần Giải pháp Hệ thống Long Vân chuyên trách phát triển các ứng
dụng trên nền tảng cơng nghệ điện tốn đám mây, từ đó cung cấp các giải pháp dịch
vụ liên quan cho khách hàng cá nhân và doanh nghiệp.
Bùi Minh Thịnh
Thực tập tốt nghiệp
7
Sứ mệnh của Long Vân là mang đến sự hài lòng cao nhất cho khách hàng, giúp
khách hàng đạt được các mục tiêu kinh doanh bằng cách đưa ra các giải pháp hệ
thống và phần mềm với công nghệ tiên tiến và ưu việt nhất từ nền tảng Cloud.
Nhờ những thỏa thuận hợp tác với các thương hiệu lớn, Long Vân liên kết được
những thương hiệu lớn trên toàn thế giới với các sản phẩm như Emobi Game,
Smedia, Gạch Việt Nhật, Saigon Flea Market,…
3. Văn hố của cơng ty
Văn hóa ở Long Vân được xây dựng dựa trên các giá trị cốt lõi như:
-
Luôn luôn ủng hộ lẫn nhau và sẵn sàng nỗ lực hơn nữa vì một mục tiêu chung
của đội / nhóm / cơng ty.
-
Ý chí cầu tiến, ln ln phấn đầu vì những mục tiêu xa hơn nữa.
-
Đóng góp phát triển nhóm ngay cả khi khơng thuộc trách nhiệm của bạn.
-
Suy nghĩ, quan tâm và hành động của bản thân
Thời gian làm việc từ thứ 2 đến thứ 6 (8h00 – 17h00) . Thời gian nghỉ trưa từ 12h00
đến 13h00, mọi nhân viên có thể ăn trưa, nghỉ ngơi trước khi bắt đầu công việc vào
buổi chiều. Đồ ăn nhẹ, nước uống, trà, cà phê, trái cây được miễn phí cho tất cả nhân
viên.
Nhân viên sau mỗi ngày làm việc được khuyến khích ghi chú lại thời gian, đầu mục
công việc đã làm trong một ngày trên hệ thống của công ty để đảm bảo dự án đang
được thực hiện một cách tốt nhất.
Bùi Minh Thịnh
Thực tập tốt nghiệp
8
4. Một số khách hàng tiêu biểu
Sứ mệnh của Long Vân là mang đến sự hài lòng cao nhất cho khách hàng, giúp khách
hàng đạt được các mục tiêu kinh doanh bằng cách đưa ra các giải pháp hệ thống và phần
mềm với công nghệ tiên tiến và ưu việt nhất từ nền tảng Cloud. Những khách hàng tiêu
biểu mà chúng tôi đã và đang phục vụ:
-
Emobi Game – Nhà phát triển game hàng đầu Việt Nam.
-
Kết quả xổ số - Trang web cung cấp kết quả xổ số với lượng truy cập cao nhất ở
Việt Nam.
-
Smedia - Công ty truyền thông hàng đầu trong việc cung cấp dịch vụ giá trị gia
tăng trên SMS.
-
Gạch Việt Nhật – Nhà cung ứng gạch trang trí uy tín và chất lượng.
-
Saigon Flea Market – Mơ hình chợ trời, chợ phiên thành cơng nhất ở Việt Nam.
-
Bóng Đá Net - Một trong những trang tin tức trực truyến về bóng đá uy tín nhất.
-
Oxygen - Một trong những nhà cung cấp dịch vụ quảng cáo cho các doanh
nghiệp vừa và nhỏ đáng tin cậy và chuyên nghiệp.
Bùi Minh Thịnh
Thực tập tốt nghiệp
9
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 chun 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, q 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 .
Ngồ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 Long Vân, 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ụ quản lý công việc
Thời gian : 1 ngày
Nội dung : Tìm hiểu về các cơng cụ sẽ được sử dụng trong q trình làm việc để quản
lý các cơng việc và tác vụ.
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ư Trello –
cơng cụ quản lý tasks dự án, Slack, Skype – công cụ liên lạc và trị chuyện trong q
trình làm việc, Phần mềm nội bộ công ty – công cụ quản lý nội dung công ty và tiến
độ công việc
Thực hiện : Thực hành sử dụng các phần mềm đã nêu trên.
Kết quả : Hiểu được cách sử dụng và quy tắc sử dụng công cụ, giúp dễ dàng kết hợp
các công cụ với nhau.
Bùi Minh Thịnh
Thực tập tốt nghiệp
10
2.2 Tìm hiểu về Figma
Thời gian : 7 ngày
Nội dung : Được training về cách sử dụng các tính năng trong công cụ, những kiến
thức quan trọng để tạo ra các hình khối, các frame, các chữ, màu sắc, các thuộc tính
của chúng, kết hợp với các widget và plugin để xây dựng các hình theo ý muốn.
- Hình khối
Các kiến thức cơ bản về việc tạo ra các hình như hình chữ nhật, hình ellipse, hình
tam giác, hình ngơi sao, đường thẳng, mũi tên, cách kết hợp giữa chúng thành các
selection để tạo ra một hình mới.
- Hình ảnh
Cách chèn hình ảnh và tuỳ chỉnh các thơng số của hình ảnh
- Màu sắc
Thực tập sinh sẽ được hướng dẫn về tư duy màu sắc, cách phối màu với nhau, các
thông số trong màu sắc như saturation, hue, tint, opacity,…
- Font chữ
Cung cấp các nguồn để sử dụng font chữ, các khái niệm, thông số của font chữ
như typeface, baseline, glyph,…
- Layer
Cung cấp các tuỳ chọn thuộc tính của layer như Pass through, Normal, Lighten,
Darken,…
- Widget
Tìm hiểu các widget phổ biến để giúp tăng tốc độ thiết kế.
- Quản lý bộ nhớ
Mentor hướng dẫn thực tập sinh cách quản lý các thư mục, file trong figma về các
bài tập và các task sau này.
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ả :
-
Nâng cao kỹ năng thiết kế với Figma.
Ngoài ra còn được 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.
Bùi Minh Thịnh
Thực tập tốt nghiệp
11
2.3 Thiết kế giao diện người dùng
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 q 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 auto layout và contraints để 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
Bùi Minh Thịnh
Thực tập tốt nghiệp
12
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 ngồ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 hồn tồ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 trainning.
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 vài giao diện người dùng mẫu trên các trang mạng xã hội.
2.4 Thiết kế trải nghiệm người dùng
Nội dung : Các kỹ thuật, quy luật để tạo ra một trải nghiệm tốt khi sử dụng giao diện
của người dùng.
-
Định nghĩa về Trải nghiệm người dùng:
Thiết kế trải nghiệm người dùng (UXD) là quá trình nâng cao sự hài lòng của
người dùng với sản phẩm bằng cách cải thiện khả năng sử dụng, khả năng truy
cập và sự hài lòng khi tương tác với sản phẩm.
-
Tầm quan trọng của thiết kế trải nghiệm người dùng:
Thiết kế trải nghiệm người dùng tốt không chỉ làm nổi bật và nâng tầm sản phẩm
của bạn, mà nó cịn trở thành một phần quan trọng trong việc xây dựng và phát
triển sự tin tưởng của khách hàng.
Một sản phẩm tuyệt vời hoặc nội dung hấp dẫn mà khơng có trải nghiệm người
dùng hấp dẫn có thể ảnh hưởng đến khả năng đạt được mục tiêu kinh doanh.
Bùi Minh Thịnh
Thực tập tốt nghiệp
13
-
Phương pháp tiếp cận tốt nhất để thiết kế trải nghiệm người dùng: Thiết kế lấy
người dùng làm trung tâm (Human – Centered Design - HCD):
Yếu tố chính của sự thành công nằm trong việc bạn đặt người dùng ở trung tâm
của quá trình thiết kế. Cách tiếp cận này cho phép bạn tạo ra các thiết kế sạch sẽ,
đơn giản, trực quan, linh hoạt và hấp dẫn, đồng thời cung cấp trải nghiệm tuyệt
vời cho người dùng và do đó có thể phân biệt bạn với đối thủ cạnh tranh của bạn.
Quy trình thiết kế trải nghiệm người dùng:
- Understand - Hiểu: Để cung cấp
một giải pháp, trước tiên bạn cần
hiểu vấn đề để sau đó có thể giải
quyết vấn đề.
- Research - nghiên cứu: Nghiên
cứu là chìa khố quan trọng trong
việc thiết kế trải nghiệm.
- Sketch - phác thảo: Vẽ bản phác
thảo bằng giấy, các dòng bảng
trắng và các khung hình để chia
sẻ ý tưởng của bạn với các bên
liên quan.
- Design - thiết kế: Biến các mơ
hình ban đầu và wireframes thành
hình ảnh tuyệt đẹp với theme và
style áp dụng cho chúng với các
thông số kỹ thuật.
- Implement - thực hiện: Nhóm
phát triển xây dựng chức năng
back-end trước tiên và kết nối nó với giao diện người dùng khi họ nhận được các
đồ tạo tác thiết kế.
- Evaluate - đánh giá; Khi tính năng sản phẩm được triển khai, sản phẩm cuối
cùng được đánh giá dựa trên một số yếu tố được đề ra.
Thực hiện :
-
Tham gia đầy đủ các buổi training.
Bùi Minh Thịnh
Thực tập tốt nghiệp
14
-
Tạo ra những nội dung theo mẫu như User Stories, Userflow, User Personas,...
Kết quả:
-
Đã có thể nắm được các kiến thức về thiết kế trải nghiệm người dùng.
-
Đã có thể tạo ra các User Stories, User Personas, Userflow,… theo các yêu cầu từ
Mentor.
3. Thực hiện công việc
Sau hai tháng được training và 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 giữa tháng thứ hai, trainer đã
hướng dẫn thực tập sinh áp dụng những kiến thức đã học để thực hiện các task từ phía
cơng ty đưa ra.
Chi tiết các task sẽ được nói ở phần sau.
4. Lịch làm việc
Tuần
1
2
-
3
4
5
6
7
8
-
Cơng việc
Tìm hiểu về cơng ty, cách tổ chức của công ty.
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 skype, slack.
Tìm hiểu về Figma.
Tìm hiểu cách làm việc với các team khác trong
công ty.
Thực hành sử dụng công cụ Figma theo các mẫu
có sẵn trên các trang mạng xã hội về thiết kế.
Tìếp cận kiến thức về Giao diện người dùng.
Tìếp cận kiến thức về Trải nghiệm người dùng.
Làm quen với các yêu cầu khách hàng giả đình.
Thực hành và áp dụng kiến thức về Giao diện
người dùng trên các bài tập mà Mentor đưa ra.
Thực hành và áp dụng kiến thức về Trải nghiệm
người dùng trên các bài tập mà Mentor đưa ra.
Đúc kết kinh nghiệm và trình bày ở buổi Meeting
Thiết kế giao diện máy POS
Đúc kết kinh nghiệm và trình bày ở buổi Meeting
Thiết kế giao diện ứng dụng chấm cơng
Đúc kết kinh nghiệm và trình bày ở buổi Meeting
Chuẩn bị tài liệu để báo cáo thực tập.
Tham dự buổi workshop định hướng của công ty
Người hướng dẫn
Anh Phùng Hợp
Anh Phùng Hợp
Anh Phùng Hợp
Anh Phùng Hợp
Anh Phùng Hợp
Anh Phùng Hợp
Anh Phùng Hợp
Anh Phùng Hợp
Bùi Minh Thịnh
Thực tập tốt nghiệp
-
trước khi tốt nghiệp.
Củng cố kiến thức qua đợt thực tập.
Người hướng dẫn đánh giá và nhận xét.
Bản thân rút kinh nghiệm, tự đánh giá và khắc
phục khuyết điểm trên những sản phẩm đã tạo ra.
Gửi lời cảm ơn và chia tay quý công ty.
15
Bùi Minh Thịnh
Thực tập tốt nghiệp
16
Chương 3: Chi tiết công việc
1. Giao diện máy POS
Sản phẩm được thiết kế để giúp cho hoạt động buôn bán Cloud của công ty, được sử
dụng bởi những người quản lý hàng trong kho và những người giới thiệu sản phẩm đến
với khách hàng tại các cửa hàng trực tiếp.
1.1 Yêu cầu
-
Hoàn thành giao diện trên 2 thiết bị chính là Laptop và Mobile
-
Giao diện xác thực tài khoản bao gồm trang Đăng nhập và Quên mật khẩu.
-
Giao diện Trang chủ giúp điều hướng sang các trang khác.
-
Giao diện Báo cáo thống kê giúp xem lại doanh thu cửa hàng và thống kê các đơn
hàng qua ngày, tháng, năm.
-
Giao diện Quản lý bán hàng giúp người dùng tìm kiếm các sản phẩm đang có
trong cửa hàng, thêm vào giỏ hàng và tiến hành thanh tốn, bên cạnh đó hệ thống
cũng liệt kê các chi tiết thanh tốn như phí vận chuyển, phí trước thuế, chiết
khấu,... lưu thơng tin của khách hàng đã mua hàng, thanh toán qua QR code,…
-
Giao diện Quản lý đơn hàng giúp quản lý các đơn hàng đã được khách hàng đặt
trong hệ thống, xem các thông tin, danh sách sản phẩm đã mua trong đơn hàng,
tình trạng vận chuyển, ghi chú,…
-
Giao diện Quản lý khách hàng giúp xem thông tin của những khách hàng đã mua
hàng tại cửa hàng để tiện lợi cho những lần mua hàng tiếp theo cũng như thống
kê.
1.2 Danh sách giao diện
Bùi Minh Thịnh
Thực tập tốt nghiệp
17
Giao diện Responsive Website
Giao diện Mobile
Bùi Minh Thịnh
Thực tập tốt nghiệp
18
1.3 Thực hiện
-
Thực tập sinh: Bùi Minh Thịnh.
-
Và sự giúp đỡ tận tình của anh Phùng Hợp.
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 viết Userstories, Userflow,…
-
Giai đoạn 3: Tiến hành nghiên cứu và tham khảo giao diện từ Moodboard.
-
Giai đoạn 4: Tiến hành xây dựng Design System và Sketch, vẽ Wireframe.
-
Giai đoạn 5: Thiết kế các giao diện theo từng chức năng.
-
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 các 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. Giao diện ứng dụng chấm công
Sản phẩm được thiết kế để giúp cho các nhân viên trong công ty quản lý được thời gian
làm việc, chấm công làm việc để tính lương bổng, quản lý lịch làm việc của cơng ty,…
2.1 u cầu
-
Hồn thành giao diện trên thiết bị chính là Mobile
-
Giao diện Chấm cơng gồm trang chính và các trạng thái thay đổi dựa trên thời
gian hiện tại.
-
Giao diện Quét QR để giúp nhân viên quét mã chấm công khi đến công ty làm
việc.
-
Giao diện Thông báo hiển thị các thông báo về lịch làm việc, nhắc nhở ca làm,
ngày nghỉ,…
Bùi Minh Thịnh
Thực tập tốt nghiệp
19
-
Giao diện Thống kê chấm công giúp xem được tổng thời gian đã làm việc, số giờ
nghỉ, số giờ đi trễ, về sớm, quên checkin, checkout,… theo từng mốc thời gian đã
chọn.
-
Giao diện Lịch sử chấm công để xem thông tin những lần đã chấm công vào làm
và tan làm.
-
Giao diện Chi tiết chấm công giúp xem được thời gian chấm cơng, địa điểm đã
chấm cơng cũng như phịng ban, trụ sở,…
-
Giao diện Lịch chi tiết của nhân viên giúp nhân viên xem được lịch làm việc của
mình, tránh các trường hợp đi làm vào ngày nghỉ, ngày làm việc từ xa,…
2.2 Danh sách giao diện
Bùi Minh Thịnh
Thực tập tốt nghiệp
20
2.3 Thực hiện
-
Thực tập sinh: Bùi Minh Thịnh
-
Và sự giúp đỡ tận tình của anh Phùng Hợp
2.4 Kế hoạch thực hiện
-
Giai đoạn 1: Nhận các yêu cầu và viết Userstories, Userflow,…
-
Giai đoạn 2: Tiến hành nghiên cứu và tham khảo giao diện từ Moodboard.
-
Giai đoạn 3: Tiến hành xây dựng Design System và vẽ Wireframe.
-
Giai đoạn 4: Thiết kế các giao diện theo từng chức năng.
-
Giai đoạn 5: Gắn tương tác và giao diện.
-
Giai đoạn 6: Đánh giá và chỉnh sửa để hoàn thiện task.
2.5 Kết quả đạt được
-
Hoàn thành các 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.
Bùi Minh Thịnh
Thực tập tốt nghiệp
