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


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 của giáo viên hướng dẫn:
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
Điểm: (Bằng chữ và bằng số):…………………………………………………….
TP.HCM, ngày
tháng
năm 20
Giáo viên
(Ký và 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 của giáo viên phản biện:
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
Điểm bằng số:..............................................................................................................
Điểm bằng chữ:...........................................................................................................
TP.HCM, ngày
tháng
năm 20
GIÁO VIÊN PHẢN BIỆN
(Ký và 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 cũng như tất cả các bạn sinh viên thuộc chuyên ngành Công nghệ phần mềm
trong 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 này lời cảm ơn sâu sắc nhất.
Trong quá trình học tập, cũng như là trong quá trình làm đồ án mơn học, khó tránh
khỏi sai sót, rất mong thầy bỏ qua. Đồng thời do trình độ lý luận cũng như kinh
nghiệm thực tiễn còn hạn chế nên bài báo cáo khơng thể tránh khỏi những thiếu sót,
chúng em rất mong nhận được ý kiến đóng góp của thầy cơ để chúng em học thêm
được nhiều kinh nghiệm và sẽ hoàn thành tốt hơn bài các báo cáo sắp tới.
Chúng em xin chân thành cảm ơn!


LỜI MỞ ĐẦU
Việc xây dựng các ứng dụng để phục vụ cho các nhu cầu riêng của các tôt
chức,công ty,thậm chí các cá nhân,ngày nay,khơng lấy gì làm xa lạ. Thời thế đã thay
đổi! UI/UX đã phức tạp và phát triển hơn rất nhiều. Và những giao diện đơn giản và
hiệu quả trong vài năm trước đây có thể đã trở thành vơ ích ở thời điểm hiện tại khi
vạn ngày càng phải “dè chừng” với các khách hàng khó tính về mặt thẩm mỹ.Nếu là
một người làm UI/UX chắc hẳn bạn cũng biết UI/UX liên tục phát triển không ngừng
để đáp ứng nhu cầu cho những khách hàng kể cả những khách hàng coi trọng về mặt
thẩm mỹ của ứng dụng hay một trang web. Và những trang web hay ứng dụng hiện
nay đa phần phải cần có sự hổ trợ của UI/UX để tạo ra một giao diện đẹp mắt và lôi
cuốn người xem.
Sử dụng UI/UX để thiết kế giao diện cho một sản phâm như ứng dụng hoạt giao
diện của một trang web là phương pháp hiệu quả và tiện lợi.trở thành nhu cầu tất yếu
trong lĩnh vực thiết kế giao diện.Hình thức trình bày trên ứng dụng đó chính là UI, và

hiểu được các thao tác của người dùng trải nghiệm lại là UX. Người thiết kế giao diện
app phải thật sự tinh tế và gần như người đó đã có tồn bộ trải nghiệm và hiểu rõ về
hệ thống đó. Với ý tưởng đó,dưới sự hướng dẫ tận tình của 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”


8

CHƯƠNG 1: Giới thiệu và tổng quan về UI/UX
1. UI/UX là gì, tìm hiểu về cộng nghệ thiết kế UI/UX.

1.1. UI/UX là gì.
Cơng nghệ thiết kế UI, UX là một trong các công nghệ thiết kế web phổ biến
được nhiều công ty, sử dụng để làm web cho các doanh nghiệp. Đây cũng là xu
hướng thiết kế web được đánh giá sẽ tiếp tục được ưa chuộng và phát triển trong
năm 2018.
UI/UX là khái niệm bạn sẽ gặp khá nhiều khi tìm hiểu về lĩnh vực thiết kế
website, viết web chuyên nghiệp. Trong đó, “UI” là cụm từ đại diện cho thiết kế
website “Giao diện người dùng” và “UX” có thể hiểu là “Trải nghiệm người dùng”.
Hai khái niệm này luôn đi đôi và song hành cùng nhau, trở thành tiêu chuẩn quan
trọng để đánh giá các website bất kì.
Trong nhiều sản phẩm website đã thực hiện, phần lớn các khách hàng đều thẩm
định xem trang web của mình có đạt tiêu chuẩn về UI/UX khơng, sau đó mới xem
đến các chức năng 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, ít bug, hạn chế crash.

1.1 Công nghệ thiết kế UX/UI

Trong thời buổi cuộc cách mạng công nghiệp 4.0 bùng nổ, các xu hướng tập
trung vào trải nghiệm người dùng luôn được ưu tiên và đề cao, không chỉ trong



9

ngành công nghiệp thiết kế web mà gần như phổ biến ở mọi lĩnh vực kinh doanh
khác như các thiết bị cơng nghệ, đồ dùng trong gia đình, các thiết kế in ấn…
Những gì cần thiết kế có thể nằm trong rất nhiều lĩnh vực, như thiết kế công
nghiệp (xe, nội thất…) tới in ấn (tạp chí, và các ẩn phẩm…) tới công nghệ (webstie,
mobile) và rất nhiều lĩnh vực khác. Những công ty công nghệ ngày càng nhiều và
phải tập trung tạo ra những giao diện cho người dùng, và đương nhiên những kiểu
công việc mới được tạo ra. Các chức danh như UX (thiết kế trải nghiệm) hay UI
Designer khá rắc rối để hiểu rõ ngay cả với những người thiết kế làm trong các lĩnh
vực khác.
Nào hãy cùng ráng sức để hiểu được công việc đằng sau mỗi chức danh của
ngành cơng nghệ máy tính này.
1.1.1. UI là gì.

Giao diện người dùng trong giao diện người dùng trong giao diện người
dùng là viết tắt của giao diện người dùng, giao diện người dùng là giao diện đồ
họa của ứng dụng. Nó bao gồm các nút mà người dùng nhấp vào, văn bản họ
đọc, hình ảnh, thanh trượt, trường nhập văn bản và tất cả các mục còn lại mà
người dùng tương tác. Điều này bao gồm bố cục màn hình, chuyển tiếp, hình
động giao diện và mọi tương tác vi mô. Bất kỳ loại yếu tố trực quan, tương tác
hoặc hoạt hình đều phải được thiết kế.
Cơng việc này thuộc về các nhà thiết kế UI. Họ quyết định ứng dụng sẽ
trông như thế nào. Họ phải chọn cách phối màu và hình dạng nút - độ rộng của
dịng và phơng chữ được sử dụng cho văn bản. Các nhà thiết kế giao diện người
dùng tạo ra giao diện của 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
này ra sao. Một vấn đề về thiết kế khơng chỉ có một câu trả lời hợp lý. UX
designer tìm nhiều cách để tiếp cận nhằm giải quyết một vấn đề cụ thể của
người dùng. Nhiệm vụ chính của UX designer là chắc chắn rằng quy trình logic
của sản phẩm đi từ bước này tới bước kế tiếp.
Một cách mà một người UX Designer hay làm là đóng vai một 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 ra những
khối hình, chữ, màu sắc.. họ xác định và lặp lại để tạo ra một cách trải nghiệm
“Tốt nhất”. Một dự án ví dụ là việc tạo ra một quy trình tiếp cận cho một người
dùng mới.
" Xác định các mẫu sẽ dùng, các quy trình người dùng làm tác vụ, và nhận
diện UI. Tương tác với các kịch bản, người dùng cuối cùng, tương tác với các
mẫu thử, đưa các màn 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 và người thiết kế thẩm mỹ để tạo ra một hình ảnh nhận diện của
Twitter tương ứng với các tính năng. Phát triển và duy trì các cơng cụ thiết kế,


11

mockup và những thứ cụ thể nếu cần. – Một mô tả công việc của chức danh UX
Desigenr tại Twitter –"

1.3 Mơ tả UX
Những thứ có thể thấy: Wireframe của các màn hình, kịch bản, sitemap.
Cơng cụ: Photoshop, Sketch, Illustrator, Fireworks, Invision.
Không như những người thiết kế UX những người dành thời gian cho việc

tạo ra cảm xúc tổng quan cho sản phẩm, người thiết kế UI dành nhiều thời giờ
cho cái gọi là lay out – hay là sắp xếp bố cục. Họ với vai trò của một thiết kế, và
chăm chút từng màn hình để chắc chắn rằng giao diện người dùng đang tương
tác, bổ trợ cho con đường mà người thiết kế UX đã vạch ra.
Ví dụ như một người UI tạo ra một màn hình trình bày số liệu họ sẽ cân
nhắc việc để những thứ quan trọng ở trên cùng, hay quyết định là nó sẽ là một
kiểu ảnh trượt hoặc người dùng sẽ tự điều khiển để giúp họ có cái nhìn trực
quan với các biểu đồ.
Người thiết kế UI cũng chịu trách nhiệm cụ thể cho việc tạo ra một mẫu quy
chuẩn thiết kế nhằm giúp cho thiết kế có chung một ngơn ngữ trong suốt các
quá trình của sản phẩm. Duy trì tính thống nhất với các yếu tố hình ảnh và xác


12

định các hành vi như làm thế nào để hiển thị thơng báo lỗi, tình trạng cảnh
báo…
"Tạo ra ý tưởng và thực hiện chúng theo ngơn ngữ hình ảnh
của Airbnb.com. Tạo và nâng cấp những trang quy chuẩn kiểu mẫu.
- Mô tả UI Design Job tại Airbnb -”
Ranh giới giữa UI và UX khá mờ nhạt và không thiếu những công ty kết
hợp
cả hai chức danh này lại.

1.4 Các công cụ

Cơng cụ:PTS,Sketch,Illustrator,Fireworks.
Bạn có thể nghe những câu: “Chỗ Login và Signup nên để ở phía trên bên
phải”.
Một người thiết kế hình ảnh là một trong người làm việc với những hình

ảnh. Nếu bạn hỏi một người khơng phải thiết kế điều một người thiết kế làm,
đây có lẽ là câu trả lời của họ. Visual Designer không phải là việc làm sao để
các màn hình liên kết tới nơi khác, không phải việc làm sao người dùng tương
tác với sản phẩm.


13

Thay vào đó, họ tập trung vào việc tạo ra những icon đẹp đẽ, các yếu tố đẹp
đẽ và chọn ra một phơng chữ phù hợp. Người thiết kế hình ảnh chăm sóc những
thứ nhỏ nhất và muốn làm điều đó họ phải zoom lên gấp 4x tới 8x trong PTS.
"Tạo ra những thiết kế hình ảnh chất lượng cao – từ ý tưởng tới thành phẩm,
có thể sử dụng cho desktop, web, mobile với mọi độ phân giải. Tạo ra các bộ
hình ảnh cho một thương hiệu, tăng cường ngôn ngữ, giới thiệu cái đẹp vào
trong sản phẩm.
- Mô tả công việc Visual Designer tại Google -”
Cũng phổ biến việc người UI Designer làm cả việc này – tạo ra những bộ
hình ảnh hồn hảo tới từng pixel. Nhiều công ty không chia rành mạch hai công
việc với thiết kế.
Cơng cụ:PTS.Sketch.
Bạn có thể nghe: “Tắt Kerning (khoảng cách) và nút nên dịch 1px qua bên
trái”.
Bạn còn nhớ những chuyển động nhịp nhàng khi bạn kéo để refresh trong
ứng dụng mail của iPhone? Đó chính là cơng việc của motion designer. Khơng
như những người thiết kế hình ảnh, những người hay làm việc với những yếu tố
tính, những người làm chuyển động tạo ra những hoạt động của một ứng dụng.
Họ sáng tạo ra những gì giao diện sẽ chuyển động khi người dùng tương
tác. Ví dụ như menu sẽ ẩn đi thế nào, nó dùng hiệu ứng gì, những nút sẽ hiện lên
làm sao. Khi mọi thứ hoạt động tốt, các chuyển động trở thành một phần quan
trọng trong giao diện người dùng khi tạo ra những chất kết dính người dùng với

sản phẩm.
“Chuyên nghiệp trong thiết kế đồ hoạ, đồ hoạ động, nghệ thuật số, nhạy
cảm với chữ và màu sắc, nhận thức tổng quan về chất liệu/ vật liệu, và hiểu biết
cơ cấu chuyển động. Có kiến thức về iOS, OsX, PTS và Ai, cũng như quen
thuộc với phần mềm Director, Quartz Compser, 3D modeling, đồ hoạ động.
– Mô tả chức danh Interaction Designer tại Apple –".


14

1.4 Thiết kế logo
Công cụ: After Effect, Core Composer, Flash, Origami.
Bạn có thể nghe thấy họ nói: “Menu nên ease-in từ phía trái vào khoảng
800ms”.
1.1.2 UX là gì.
Thiết kế UX (User eXperience) hay còn gọi là thiết kế trải nghiệm người
dùng là 1 quy trình tạo nên trải nghiệm đáp ứng được 3 yếu tố sau đây dành cho
người dùng: giúp người dùng đạt được mục đích mong muốn khi sử dụng sản
phẩm - một cách dễ dàng - với cảm giác thích thú khi sử dụng.
Tại sao thiết kế UX trở nên quan trọng
Ngày nay việc tạo nên bất cứ sản phẩm ứng dụng số nào phục vụ cho người
dùng đều ko q khó so với trước kia, vì vậy để cạnh tranh với các dịch vụ/ sản
phẩm khác nhau trên thị trường thì trải nghiệm người dùng là yếu tố quyết định
sự thành công và lôi kéo người dùng sử dụng dịch vụ/ sản phẩm.
Ứng dụng dành cho người dùng trên nền tảng của ứng dụng này được xác
định bởi cách họ tương tác với người dùng. Là trải nghiệm trơn tru và trực quan
hoặc lộn xộn và khó hiểu? Điều hướng ứng dụng có cảm thấy hợp lý hay nó


15


cảm thấy độc đoán? Việc tương tác với ứng dụng có mang lại cho mọi người
cảm giác rằng họ hồn thành hiệu quả các nhiệm vụ mà họ đặt ra để đạt được
hoặc nó có cảm giác như một cuộc đấu tranh không? Trải nghiệm người dùng
được xác định bởi mức độ dễ hay khó khi tương tác với các yếu tố giao diện
người dùng mà các nhà thiết kế UI đã tạo.

1.5 Một số tính năng của UX
Vì vậy, các nhà thiết kế UX cũng quan tâm đến giao diện người dùng ứng
dụng, và đây là lý do khiến mọi người nhầm lẫn về sự khác biệt giữa hai người.
Nhưng trong khi các nhà thiết kế UI được giao nhiệm vụ quyết định giao diện
người dùng sẽ trông như thế nào, các nhà thiết kế UX chịu trách nhiệm xác
định cách giao diện người dùng hoạt động.
Họ xác định cấu trúc của giao diện và chức năng. Cách thức tổ chức và
cách tất cả các bộ phận liên quan đến nhau. Nói tóm lại, họ thiết kế cách thức
giao diện hoạt động. Nếu nó hoạt động tốt và cảm thấy liền mạch, người dùng
sẽ có trải nghiệm tốt. Nhưng nếu điều hướng phức tạp hoặc khơng trực quan,
thì có thể trải nghiệm người dùng tệ hại. Các nhà thiết kế UX làm việc để tránh
kịch bản thứ hai.
Thiết kế trong chân khơng dẫn đến kết quả ít hơn lý tưởng.
Có một số phân tích lặp đi lặp lại liên quan đến thiết kế UX. Các nhà thiết
kế UX sẽ tạo kết xuất khung dây của các tương tác giao diện của họ và nhận
phản hồi của người dùng. Họ tích hợp điều này vào thiết kế của họ. Điều quan


16

trọng đối với các nhà thiết kế UX là có một sự hiểu biết tồn diện về cách
người dùng thích tương tác với các ứng dụng của họ.
Họ làm việc với nhau như thế nào.

Vì vậy, một nhà thiết kế UX quyết định cách giao diện người dùng hoạt
động trong khi nhà thiết kế UI quyết định giao diện người dùng trơng như thế
nào. Đây là một q trình hợp tác và hai nhóm thiết kế có xu hướng làm việc
chặt chẽ với nhau. Vì nhóm UX đang xử lý dòng chảy của ứng dụng, cách tất
cả các nút điều hướng bạn qua các tác vụ của bạn và cách giao diện phục vụ
hiệu quả nhu cầu của người dùng thơng tin, nhóm UI đang làm việc về cách tất
cả các yếu tố giao diện này sẽ xuất hiện trên màn hình.
Hãy để nói rằng tại một số điểm trong q trình thiết kế, nó đã quyết định
rằng các nút phụ cần được thêm vào một màn hình nhất định. Điều này sẽ thay
đổi cách các nút sẽ cần phải được tổ chức và có thể yêu cầu thay đổi hình dạng
hoặc kích thước của chúng. Nhóm UX sẽ xác định cách tốt nhất để bố trí các
nút trong khi các nhóm UI điều chỉnh thiết kế của họ để phù hợp với bố cục
mới. Giao tiếp và cộng tác liên tục giữa các nhà thiết kế UI và UX giúp đảm
bảo rằng giao diện người dùng cuối cùng trông tốt nhất có thể, đồng thời hoạt
động hiệu quả và trực quan.
Nghiên cứu là chính
Nghiên cứu là rất quan trọng đối với cả nhà thiết kế UI và UX. Điều quan
trọng đối với cả hai ngành là thu thập càng nhiều thông tin tốt càng tốt để hỗ trợ
họ chế tạo các thiết kế phù hợp và cả hai đều theo một cách tiếp cận tương tự.
Cả hai sẽ nghiên cứu những gì người dùng muốn. Những gì họ mong đợi từ
các ứng dụng sắp xếp được phát triển. Nghiên cứu này thường lặp đi lặp lại,
liên quan đến các phiên sử dụng, trong đó người dùng thực sẽ tương tác với các
phiên bản thu nhỏ của chức năng nhất định hoặc thiết kế hình ảnh đang được
thử nghiệm để xác định xem các nhà thiết kế có đang đi theo con đường phù
hợp hay khơng. Phản hồi được tích hợp với mỗi lần lặp.
Quá trình này liên quan đến việc tạo các nguyên mẫu có độ trung thực thấp,
như kết xuất khung dây của các thành phần giao diện để đánh giá phản hồi của
người dùng một cách nghiêm ngặt đối với chức năng đang được thử nghiệm.



17

Điều này cũng có thể liên quan đến các nguyên mẫu trực quan nhanh và thử
nghiệm A / B của các phiên bản có thể khác nhau về giao diện để xác định giao
diện nào mà người dùng thích.

1.6 Những so sánh
Trong mọi trường hợp, nghiên cứu giúp hướng dẫn các bước mà các nhà
thiết kế thực hiện khi họ xây dựng đóng góp của mình. Tuy nhiên, các nhà thiết
kế UI và UX thơng tin đang tìm kiếm rất khác nhau.
Nghiên cứu về thiết kế giao diện người dùng
Các nhà thiết kế giao diện người dùng cần đảm bảo ngơn ngữ hình ảnh họ
chọn phù hợp với lớp ứng dụng mà họ viết. Họ đang cố gắng dự đoán sự mong
đợi của người dùng. Nếu nhóm của bạn đang thiết kế một ứng dụng du lịch,
điều đó rất quan trọng để nghiên cứu cách các ứng dụng du lịch khác đã được
phát triển trong quá khứ. Những cái nào làm việc? Những cái nào đã khơng?
Có những bài học thiết kế để học hỏi từ công việc mà những người khác đã làm
trước đây.
Nghiên cứu có thể chỉ ra rằng mọi người thích các biểu tượng được phác
thảo thay vì hình đậm. Đây là một tốc ký trực quan mà mọi người cảm thấy
thoải mái và thích thú. Các nhà thiết kế UI sau đó sẽ làm tốt để kết hợp bài học
đó.


18

Tính thẩm mỹ chính xác mà họ chọn tùy thuộc vào họ, nhưng các quy tắc
cơ bản về cơ bản, hay nhu cầu phù hợp với mong đợi của người dùng, là điều
mà các nhà thiết kế bỏ qua có nguy cơ.
Khơng phải nói rằng rủi ro nên được thực hiện. Các nhà thiết kế UI muốn

các thiết kế giao diện của họ nổi bật và đáng nhớ. Nhưng điều này phải được
cân bằng với việc đảm bảo mọi người nhận ra mục đích của các yếu tố bạn đặt
trên màn hình.
Nghiên cứu cho thiết kế UX
Thiết kế UX đặc biệt quan tâm đến sự mong đợi của người dùng. Tất cả
những trải nghiệm và tương tác mà người dùng đã có với mọi ứng dụng mà họ
đã sử dụng trong cuộc sống đã giúp đặt kỳ vọng của họ về cách các giao diện
được cho là hoạt động. Nếu một nhà thiết kế UX không quen thuộc với những
kỳ vọng này, họ có thể vơ tình thiết kế một tương tác giao diện có vẻ hợp lý với
họ nhưng phá vỡ các quy ước thường được chấp nhận. Người dùng khơng thích
giống như khi một giao diện hoạt động rất khác so với họ mong đợi và điều này
có thể ảnh hưởng tiêu cực đến trải nghiệm của họ.
Nếu một nhà thiết kế UX quyết định làm điều gì đó khác biệt, họ cần phải
có một lý do rất chính đáng, bởi vì phá vỡ một hành vi dự kiến được đào tạo
sâu sẽ có khả năng khiến mọi người thường xuyên làm sai.
Ví dụ, hầu hết mọi người đều cảm thấy thoải mái với ý tưởng rằng bạn
nhấp hai lần vào một tệp để mở tệp và một lần để chọn nó. Đây là một hành vi
giao diện đã tồn tại gần như miễn là đã có giao diện người dùng đồ họa.
Một người UX Research là một nhà vô địch của những nhu cầu thuộc về
người dùng. Mục tiêu của những người làm nghiên cứu là trả lời hai câu hỏi “Ai
là người dùng của chúng ta” và “Người dùng muốn gì”. Đặc biệt, vai trị này
bao gồm phỏng vấn người dùng, nghiên cứu dữ liệu thị trường.
Thiết kế là một quá trình lặp đi lặp lại liên tục. Những nhà nghiên cứu tham
gia những quá trình này bằng việc tạo ra những bản test A/B (cái này hay cái
kia) để thử xem phương án nào thoả mãn người dùng nhất. Những người nghiên
cứu UX thường có mặt tại những cơng ty lớn, nơi họ có thể tiếp cận những dữ
liệu vô cùng lớn để dựa vào đó đưa ra những tín hiệu cần thiết.


19


“Làm việc gần gũi với nhóm sản xuất để nhận diện các chủ đề cần nghiên
cứu. Nghiên cứu thiết kế để xác định hành vi và thái độ của người dùng. Tiến
hành nghiên cứu sử dụng phương pháp định tính và một tập hợp con của các
phương pháp định lượng (trời ơi), giống như các bài thăm dị (survey).
– Mơ tả công việc UX Research tai Facebook –"
UXD cũng thường làm luôn trong trách UX Research
Chuyển giao:Dữ liệu người dung,kết quả test A/B.
Cơng cụ:Mic,Giấy,Tài liệu.
Bạn có thể nghe thấy:”Từ các nghiên cứu của chúng tơi,người dụng cụ thể
là…”
Front-End D có tránh nghiệm tạo ra bộ mặt trên giao diện dựa trên bản thiết
kế tĩnh. Thông thường, UID tạo ra một bản thiết kế tĩnh và đưa nó tới người
Front-End, những người sẽ làm việc với nó, cung cấp các trải nghiệm. Front-end
cịn có tránh nhiệm viết code cho cả những chuyển động tương tác mà người
làm đồ hoạ động đã mơ tả.
Cơng cụ:Css,Html,JavaScript.
Bạn có thể hay nghe thấy:”Tơi sử dụng lưới 960px với 12 cột”.
Thiết kế sản phẩm là người hiểu hết các phần công việc được thiết kế trong
một sản phẩm. Nhiệm vụ của người này không được mô tả một cách rõ ràng ở
các công ty. Một người thiết kế sản phẩm có thể biết chút về front-end coding,
nghiên cứu người dùng, giao diện, đồ hoạ…
Từ công đoạn nghiên cứu, phác thảo cho tới luc hoàn thành, người thiết kế
sản phẩm ở đó và xác định những vấn đề tiềm năng, tạo các quy chuẩn sau đó
thiết kế, kiểm thử, tạo ra các phương án. Một số công ty muốn có một người để
hài hồ những người trong nhóm thiết kế của họ, ux, ui, research, visual
design…
Một số công ty chỉ đơn giản là dùng “UX designer” hay là “Designer” để
gọi chung cho mọi việc. Đọc các mô tả công việc tuyển dụng là một cách tốt
nhất để nhận ra các cơng việc trong một team design có thể làm.

“Thực hiện những khía cạnh của thiết kế: Tương tác, hình ảnh, sản phẩm,
prototyping. Tạo những bản mock hồn hảo và code cho những tính năng mới
cho cả web và mobile (Siêu Designer….). – Product Designer tại Pinterest –".


20

“Tôi đang kiếm mottoj người thiết kế”.
Đây là một câu nói phổ biến đối với các Startup. Họ đang tìm một ai đó có
thể làm mọi thứ đã được mơ tả như ở trên. Một muốn một ai đó làm giao diện
đẹp, biết test A/B, làm chuyển động, và cả code front-end. Đó là những thứ “đặc
biệt” một cơng ty nhỏ cần.
Ranh giới giữa mỗi vai trị trên khơng rõ ràng. Một vài người UXD được
mong đợi có thể làm tương tác, và UI thì cũng có thể làm những yếu tố nhỏ
nhất. Cách tốt nhất để tìm được đúng người là mơ tả chính xác điều bạn mong
đợi, phù hợp với quy trình của cơng ty và đặt chức danh cho vị trí đó hợp lý.
1.2. Sự khác nhau giữa UI và UX.

1.7 Những thành phần trong UX
Trong lĩnh vực thiết kế sáng tạo và công nghệ ngày nay, thuật ngữ “UI”
(Giao diện người dùng) và “UX” (Trải nghiệm người dùng) được sử dụng nhiều
hơn bao giờ hết. Nhìn chung, chúng đề cập đến những ý tưởng đã có từ rất lâu
trước khi các thuật ngữ viết tắt này ra đời.
Đây chỉ là những thuật ngữ viết tắt. Không may là các thuật ngữ này đã
nhanh chóng trở thành các từ thông dụng nguy hiểm bởi một số trường hợp sử
dụng khơng chính xác đã gây ra nhầm lẫn cho các nhà thiết kế, người tìm việc
và các chuyên gia phát triển sản phẩm.
Việc tìm hiểu sự giống nhau, khác nhau và mối liên hệ giữa chúng là điều
hoàn toàn cần thiết.
UI khác hoàn toàn UX



21

Sai lầm phổ biến nhất mà bạn thường thấy tại nơi làm việc, trong các cuộc
họp khách hàng, danh sách công việc và yêu cầu công việc là việc kết hợp hoặc
sử dụng lại các điều khoản sẵn có.
Có rất nhiều trường hợp kỳ vọng khơng chính xác khi cho rằng một nhà
thiết kế UI phải hiểu hoặc tập trung công việc vào thiết kế UX bởi họ làm việc
trực tiếp với người sử dụng.
Thực tế là UI không phải là UX. Rắc rối có thể là do cả hai đều viết tắt bắt
đầu bằng chữ “U”. Và cũng nhiều khả năng là do một số các kỹ năng thiết lập
trùng lặp của cả hai. Chắc chắn là chúng có liên quan đến nhau và trong thực tế
có rất nhiều designer có kiến thức và kinh nghiệm trong cả hai lĩnh vực.
Tuy nhiên, bất chấp các kỹ năng thiết lập trùng lặp, hai lĩnh vực này hoàn
toàn khác nhau, nhất là phạm vi và mục tiêu tổng thể. UI tập trung vào các yếu
tố trải nghiệm với người sử dụng về cơ bản, các phương pháp và kỹ thuật đầu
ra, đầu vào.
UI tập hợp các phương pháp tiếp cận và cho phép người sử dụng trải
nghiệm với một hệ thống. Nó khơng có hướng dẫn cụ thể làm thế nào người sử
dụng có thể phản ứng lại, nhớ và sử dụng hệ thống.
Những vấn đề như vậy làm chúng ta nghĩ đến UX. Nhưng đừng ngốc như
vậy! UX chỉ là các kết quả cuối cùng của UI. Thay vào đó, tôi thường so sánh
UX như bản chất của một thương hiệu.
Bản chất của thương hiệu là trải nghiệm tổng thể của một người với một
công ty hoặc tổ chức. UX là mục tiêu. Không chỉ là mục tiêu chung mà còn là
mục tiêu sản phẩm hay mục tiêu trải nghiệm với một tổ chức.
Khi trải nghiệm tốt, người ta có xu hướng mong muốn hoặc suy nghĩ tích
cực hơn. UX quyết định tồn bộ thành cơng. Trong thực tế, trải nghiệm mới là
tất cả chứ không phải là sản phẩm.

Cuối mỗi ngày, chúng ta lại lưu vào bộ nhớ. Như chúng ta đều biết, bộ nhớ
con người đáng kinh ngạc nhưng nó khơng hồn hảo. Từng chi tiết góp phần tạo
nên trải nghiệm cho người sử dụng nhưng khi bộ não già đi, việc nhớ chi tiết sản
phẩm sẽ trở nên lệch lạc.


22

UX chứa nhiều thông tin hơn UI nhưng vẫn phát triển dựa trên những chi
tiết nhỏ nhất. Sự hiểu biết này là tài sản quý giá nhất cho bất cứ ai trong việc
phát triển sản phẩm.
UI là một công cụ
UI là một trong những công cụ xử lý mạnh nhất trong việc sắp xếp các yếu
tố UX. Tại sao? Đơn giản, giao diện là phương pháp xúc tác và hiện hữu mà
người dùng có thể trải nghiệm với chúng tơi.
UI là cơng cụ bổ trợ. Đây là lời giải thích tốt nhất cho lý do tại sao hai thuật
ngữ này được thường xuyên sử dụng thay thế cho nhau hoặc kết hợp làm một.
Sử dụng không đúng thuật ngữ rất nguy hiểm
Sự truyền đạt thông tin rất phức tạp và dễ gây nhầm lẫn. Phát triển rõ ràng
và chuyên môn hóa các thuật ngữ sẽ dễ dàng hơn việc truyền đạt thơng tin.
Nhưng điều gì sẽ xảy ra nếu khơng thống nhất các thuật ngữ?
Điều gì sẽ xảy ra nếu tơi nói “Dùng một ốc vít” nghĩa là dùng một khối kim
loại hình xoắn ốc để lắp ráp sản phẩm nhưng bạn lại nghĩ là giá đỡ hoặc chất kết
dính? Các sản phẩm cũng có những vấn đề nghiêm trọng tương tự.
Giao diện và trải nghiệm không giống nhau. Tuy nhiên, ảnh hưởng của
chúng khá mạnh mẽ. Lãng phí thời gian và tiền bạc chỉ để tập trung vào cách sử
dụng cho chính xác.
Kết quả, sẽ lãng phí thời gian và tiền bạc của công ty hoặc làm cho sản
phẩm thất bại. Áp dụng khơng đúng các khái niệm có thể gây thảm họa.
Tìm kiếm nhà thiết kế phù hợp

Một trong những điều không phổ biến nhưng thật sự cần thiết đối với một
thiết kế UI và UX là danh sách các cơng việc và u cầu. Khó để xác định một
ứng cử viên tuyệt vời chuyên ngành thiết kế giao diện và trải nghiệm.
Nhưng càng khó để thuê được người có kỹ năng và tập trung vào chun
mơn thiết kế. Rất tốn kém khi thuê một chuyên gia, thậm chí khơng giải quyết
được vấn đề mà bạn gặp phải.
Thường xuyên mô tả yêu cầu công việc và trách nhiệm cho công việc thiết
kế UI cũng như trách nhiệm và kỳ vọng ở một nhà thiết kế UX.
Có trách nhiệm với các vấn đề


23

Dù là nhà thiết kế UI hoặc UX, vẫn có các yếu tố của thiết kế. Thiết kế là
một giải pháp giải quyết các vấn đề. Xác định vai trò càng rõ ràng và dễ hiểu,
càng dễ giải quyết vấn đề, đề xuất giải pháp và thực thi.
Trong trường hợp của UI và UX, vấn đề thường gặp trong tình huống mà
trách nhiệm thiết kế giao diện và trải nghiệm chỉ do một designer đảm nhiệm và
designer không thể kiểm sốt cả hai.
Thật khó khăn khi phải tự giải quyết vấn đề mà bạn khơng biết. Một UI
designer có khả năng tạo ra các thiết kế tương tác, các biểu tượng, màu sắc, text
và một số yếu tố nhằm giải quyết các vấn đề có liên quan trực tiếp đến người
dùng.
Tất cả những yếu tố này cũng ảnh hưởng đến UX nhưng chỉ một phần. UX
bị ảnh hưởng bởi mô phỏng marketing, tốc độ, hiệu suất, màu sắc, hỗ trợ khách
hàng, kỳ vọng thiết lập, tiếp cận tài chính… và tất cả những ý tưởng bạn có.
Thực tế và khơng cơng bằng mà nói thì các UI designer có trách nhiệm với
tất cả những thứ này và nhiều hơn nữa. Điều đó khơng có nghĩa là các UX
designer khơng thể làm được.
Nếu tình huống đảo ngược lại, các UX designer cũng sẽ gặp khó khăn tương

tự. Để một nhà thiết kế có thể giải quyết vấn đề liên quan đến trải nghiệm với
người dùng, họ phải có khả năng kích hoạt, thay đổi hiệu ứng, triển khai và
quyết định kiểm soát các trải nghiệm.
Mục tiêu và giải pháp của các designer là hiểu về các sai sót. Nó khơng giúp
cho designer có thể giải quyết tất cả các lĩnh vực. Nó là cơng cụ và khả năng
giải quyết vấn đề. Và khơng phải designer nào cũng có thể thuần thục cả hai.
Thực tế, một người xây dựng mà khơng có cơng cụ cũng giống như người
khơng có khả năng hoặc kiến thức.
Kết luận
Bước đầu tiên để đi đến thành công là phải hiểu được vấn đề. Hiểu được sự
khác nhau giữa UI và UX.
Chọn đúng người cho công việc đơn giản là nắm được phương pháp để tiếp
cận vấn đề, hiểu đúng thuật ngữ UI và UX là cách đơn giản để có thể truyền đạt
thơng tin, để giải quyết vấn đề, thiết kế và trải nghiệm với người dùng tốt hơn.


24

CHƯƠNG 2: Cài đặt phần mềm và thiết kế giao diện cho ứng
dụng
1.Cài đặt phần mềm
1.1 Giới thiệu các phần mềm sử dụng để thiết kế giao diện cho ứng dụng
Japanese Phrases.
Japanese Phrases là một ứng dụng đơn giản giúp người dùng có thể học được
những câu nói giao tiếp hằng ngày với tiếng Nhật
Giao diện đơn gian nhưng không kém phần đẹp mắt, thân thiện và dể dàng sử
dụng.
Để thiết kế giao diện cho một ứng dụng đơn giản như Japanese Phrases thì
chúng ta cần phải cài đặt những phần mềm như sau.
• Adobe Photoshop

• Android Studio
• Genymotion
- Đầu tiên sẽ giới thiệu sơ lược về phần mềm Adobe Photoshop.
Adobe Photoshop (thường được gọi là Photoshop) là một phần mềm chỉnh
sửa đồ họa được phát triển và phát hành bởi hãng Adobe Systems ra đời vào
năm 1988 trên hệ máy Macintosh. Photoshop được đánh giá là phần mềm dẫn
đầu thị trường về sửa ảnh bitmap và được coi là chuẩn cho các ngành liên quan
tới chỉnh sửa ảnh. Từ phiên bản Photoshop 7.0 ra đời năm 2002, Photoshop đã
làm lên một cuộc cách mạng về ảnh bitmap. Phiên bản mới nhất hiện nay là
Adobe Photoshop CC.
Ngồi khả năng chính là chỉnh sửa ảnh cho các ấn phẩm, Photoshop còn được
sử dụng trong các hoạt động như thiết kế trang web, vẽ các loại tranh (matte
painting và nhiều thể loại khác), vẽ texture cho các chương trình 3D... gần như
là mọi hoạt động liên quan đến ảnh bitmap.
Adobe Photoshop có khả năng tương thích với hầu hết các chương trình đồ họa
khác của Adobe như Adobe Illustrator, Adobe Premiere, After After
Effects và Adobe Encore.


25

1.8 Adobe Photoshop cc 2018

Về phần mềm Adobe Photoshop chúng ta sẽ dùng nó để thiết kế những hình
ảnh,icon để phục vụ cho việc giao diện của ứng dụng.
- Tiếp theo là phần mềm Android Studio.
Android Studio là một phầm mềm bao gồm các bộ công cụ khác nhau dùng để
phát triển ứng dụng chạy trên thiết bị sử dụng hệ điều hành Android như các
loại điện thoại smartphone, các tablet... Android Studio được đóng gói với một
bộ code editor, debugger, các công cụ performance tool và một hệ thống

build/deploy (trong đó có trình giả lập simulator để giả lập môi trường của thiết
bị điện thoại hoặc tablet trên máy tính) cho phép các lập trình viên có thể nhanh
chóng phát triển các ứng dụng từ đơn giản tới phức tạp.