HỌC VIỆN NGÂN HÀNG

KHOA HỆ THỐNG THÔNG TIN QUẢN LÝ

BÁO CÁO CHUYÊN ĐỀ TỐT NGHIỆP

ĐỀ TÀI
THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG APP MOBILE
CHO HỌC SINH CHO TRƯỜNG MẦM NON HOA BAN

Giảng viên hướng dẫn : ThS. Giang Thị Thu Huyền

Sinh Viên Thực Tập : Phạm Trung Hiếu

Mã sinh viên : 22A4040180

Lớp : K22HTTTA

HÀ NỘI, NĂM 2023

 HỌC VIỆN NGÂN HÀNG

KHOA HỆ THỐNG THÔNG TIN QUẢN LÝ

BÁO CÁO CHUYÊN ĐỀ TỐT NGHIỆP

ĐỀ TÀI
THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG APP MOBILE
CHO HỌC SINH CHO TRƯỜNG MẦM NON HOA BAN

Giảng viên hướng dẫn : ThS. Giang Thị Thu

Huyền

Sinh viên thực hiện : Phạm Trung Hiếu

Mã sinh viên : 22A4040180

Lớp : K22HTTTA

2
HÀ NỘI, 2023

3
 LỜI CAM ĐOAN

Em xin cam đoan các thông tin, kết quả thu được trong bài báo cáo trên là kết quả của
quá trình nghiên cứu và tìm hiểu của em. Trong toàn bộ nội dung bài báo cáo được em
phỏng vấn và tổng hợp từ nhiều nguồn tài liệu, tất cả các tài liệu đều có nguồn gốc rõ ràng
và được cho phép sử dụng hợp pháp.

Em xin hoàn toàn chịu trách nhiệm với lời cam đoan của mình và xin chịu mọi hình
thức kỷ luật theo quy định nếu có vấn đề gian lận.

4
 LỜI CẢM ƠN

Lời đầu tiên em xin gửi lời cảm ơn sâu sắc nhất tới cô Giang Thị Thu Huyền. em cảm
ơn cô vì trong suốt quá trình chúng em thực hiện đề tài, cô đã luôn tận tình, định hướng và
hướng dẫn cho em để em có thể thực hiện đề tài này. em cũng xin được gửi lời cảm ơn đến
các thầy cô khoa Hệ thống thông tin quản lý đã tạo điều kiện thuận lợi cho nhóm chúng em
được học hỏi thêm nhiều kinh nghiệm, kiến thức áp dụng vào bài báo cáo.

Cảm ơn phòng điện toán Ngân hàng Agribank chi nhánh Hà Nội nói riêng và các cô
các chú cán bộ trong ngân hàng nói chung đã giúp em hoàn thiện bài chuyên đề một cách
hoàn hảo nhất.

Bên cạnh đó, em cũng xin được cảm ơn cô Dương Thị Hương – Hiệu trưởng trường
mầm non hoa ban cùng các cán bộ, giáo viên trong trường đã hỗ trợ tạo điều kiện cho chúng
em hoàn thành quá trình thực tập thuận lợi.

Trong quá trình thực hiện đề tài em khó tránh khỏi những sai sót, cũng như còn nhiều
thiết sót. em rất mong nhận được ý kiến đóng góp của cô để bài báo cáo của em có thể hoàn
thiện hơn

em xin trân thành cảm ơn!

5
 NHẬN XÉT
(Của cơ quan thực tập)
Về các mặt: Ý thức chấp hành nội quy, thái độ làm việc của sinh viên tại nơi thực tập; Tiến
độ, kết quả thực hiện công việc được giao; Tính thực tiễn và ứng dụng của đề tài…
…………………………………………………………………………………………..
…………………………………………………………………………………………..
…………………………………………………………………………………………..
…………………………………………………………………………………………..
…………………………………………………………………………………………..
…………………………………………………………………………………………..
…………………………………………………………………………………………..
…………………………………………………………………………………………..
…………………………………………………………………………………………..
…………………………………………………………………………………………..
…………………………………………………………………………………………..
…………………………………………………………………………………………..
…………………………………………………………………………………………..
…………………………………………………………………………………………..
…………………………………………………………………………………………..
…………………………………………………………………………………………..
…………………………………………………………………………………………..
Hà Nội, ngày tháng năm 2023
Người nhận xét
(Ký tên, đóng dấu)

6
 NHẬN XÉT
(Của giáo viên hướng dẫn)
Về các mặt: Mục đích của đề tài; Tính thời sự và ứng dụng của đề tài; Bố cục và hình thức
trình bầy đề tài; Kết quả thực hiện đề tài; Ý thức, thái độ của sinh viên trong quá trình thực
hiện đề tài.
…………………………………………………………………………………………..
…………………………………………………………………………………………..
…………………………………………………………………………………………..
…………………………………………………………………………………………..
…………………………………………………………………………………………..
…………………………………………………………………………………………..
…………………………………………………………………………………………..
…………………………………………………………………………………………..
…………………………………………………………………………………………..
…………………………………………………………………………………………..
…………………………………………………………………………………………..
…………………………………………………………………………………………..
…………………………………………………………………………………………..
…………………………………………………………………………………………..
…………………………………………………………………………………………..
Kết luận : …………...…………………………………………………………………..
Hà Nội, ngày tháng năm 2023
Giáo viên hướng dẫn
(Ký tên)

7
 MỤC LỤC
DANH MỤC CÁC CHỮ VIẾT TẮT.....................................................................................11

CHƯƠNG I: TỔNG QUAN CHUNG VỀ BÀI TOÁN.........................................................12

1. Giới thiệu chung về bài toán...........................................................................................12

1.1. Lý do chọn đề tài................................................................................................12

1.2. Mục tiêu của đề tài.............................................................................................12

1.3. Phạm vi nghiên cứu đề tài..................................................................................13

2. Giới thiệu chung về nhà trường..................................................................................13

2.1. Sơ lược về trường mầm non Hoa Ban................................................................13

2.2. Cơ cấu tổ chức....................................................................................................14

3. Giới thiệu dự án..........................................................................................................15

3.1. Mục đích thiết kế................................................................................................15

3.2. Tính năng nổi bật................................................................................................16

3.3. Các phần mềm sử dụng......................................................................................17

4. Tổng quan về giao diện người dùng (UI)...................................................................18

4.1. Khái niệm...........................................................................................................18

4.2. Quy trình thiết kế................................................................................................18

4.3. Các quy tắc quan trọng trong thiết kế (UI).........................................................19

5. Tổng quan về úng dụng..............................................................................................21

5.1. Sitemap...............................................................................................................21

5.2. Userflow.............................................................................................................22

5.3. Biểu đồ hoạt động các quy trình nghiệp vụ........................................................26

5.3.1. Biểu đồ hoạt động “Đăng nhập”..................................................................26

8
 5.3.2. Biểu đồ hoạt động “Thanh toán học phí”....................................................26

5.3.3. Biểu đồ hoạt động “Đặt câu hỏi và Đơn xin nghỉ học”...............................27

5.3.4. Biểu đồ hoạt động “Đổi mật khẩu”..............................................................27

5.4. Wireframes.........................................................................................................28

CHƯƠNG 2: XÂY DỰNG GIAO DIỆN NGƯỜI ĐÙNG (UI)............................................32

1. Design.........................................................................................................................32

2. Protopyte.....................................................................................................................37

CHƯƠNG 3: KẾT LUẬN......................................................................................................44

9
 DANH MỤC BẢNG BIỂU

Bảng 1: Cơ cấu tổ chức trường mầm non Hoa Ban...........................................................15

Bảng 2: Tính năng nổi bật.................................................................................................17

Bảng 3: Mô tả chi tiết........................................................................................................25

10
 DANH MỤC HÌNH ẢNH

Hình 1: Sitemap.................................................................................................................21

Hình 2: UserFlow..............................................................................................................22

Hình 3: Biểu đồ hoạt động “Đăng Nhập”..........................................................................26

Hình 4: Biểu đồ hoạt động “thanh toán học phí”...............................................................27

Hình 5: Biểu đồ hoạt động “Đặt câu hỏi và đơn xin nghỉ học”.........................................27

Hình 6: Biểu đồ hoạt động “Đổi mật khẩu”......................................................................28

Hình 7: WireFrame............................................................................................................28

Hình 8: WireFrames LogIn & LogUp...............................................................................29

Hình 9: WireFrames Giao diện trang home.......................................................................30

Hình 10: WireFrames Profile và Lịch thời gian biểu........................................................31

Hình 11: WireFrames Giao thanh toán..............................................................................31

Hình 12: WireFrames Giao diện câu hỏi, thời gian biểu và Kết quả học tập....................32

Hình 13: WireFrames Giao diện chức năng......................................................................32

Hình 14: Giao diện đăng nhập...........................................................................................33

Hình 15: Giao diện trang HOME.......................................................................................33

Hình 16: Giao diện thông tin cá nhân................................................................................34

Hình 17: Giao diện Attendance & holiday........................................................................34

Hình 18: Giao diện học phí và thanh toán online..............................................................35

Hình 19: Giao diện câu hỏi, thời gian biểu, kết quả..........................................................35

Hình 20: Giao diện bảng biểu và ảnh trên lớp...................................................................36

Hình 21: Giao diện Đặt câu hỏi và đơn xin nghỉ học........................................................36

Hình 22: Giao diện Sự kiện và chi tiết sự kiện..................................................................37

11
Hình 23: Giao diện hỗ trợ..................................................................................................37

Hình 24: Mối liên kết các protopyte trên figma.................................................................38

Hình 25: Protopye Login...................................................................................................38

Hình 26: Protopyte Profile.................................................................................................39

Hình 27: Protopye Thời gian biểu.....................................................................................39

Hình 28: Protopyte Học Phí...............................................................................................40

Hình 29: Protopyte Lịch Nghỉ Lễ......................................................................................40

Hình 30: Protopyte Kết Quả Học Tập...............................................................................41

Hình 31: Protopyte Bảng Biểu...........................................................................................41

Hình 32: Protopye Đặt Câu Hỏi.........................................................................................42

Hình 33: Protopye Đơn Xin Nghỉ......................................................................................42

Hình 34: Protopye Ảnh Trên Lớp......................................................................................43

Hình 35:Protopye Câu Hỏi Vui Nhộn...............................................................................43

Hình 36:Protopyte Sự Kiện................................................................................................44

Hình 37:Protopyte Đổi Mật Khẩu......................................................................................44

12
 DANH MỤC CÁC CHỮ VIẾT TẮT

Tên viết tắt Tên đầy đủ

UI Giao diện người dung

UX Trải ngiệm người dùng

13
 CHƯƠNG I: TỔNG QUAN CHUNG VỀ BÀI TOÁN

Tên đề tài: THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG APP MOBILE

CHO HỌC SINH CHO TRƯỜNG MẦM NON HOA BAN

1. Giới thiệu chung về bài toán

1.1. Lý do chọn đề tài

Công cuộc đổi mới căn bản và toàn diện nền giáo dục Việt Nam hiện nay chỉ có thể
thành công nếu huy động được sự tham gia của mọi cấp học, mọi đơn vị, cơ sở giáo dục và
toàn xã hội. Cấp học mầm non là cấp học đầu tiên và có vai trò đặc biệt trong quá trình hình
thành nhân cách cho thế hệ tương lai. Nếu ngay từ nơi đây, chất lượng chăm sóc nuôi dưỡng
và giáo dục trẻ mầm non được đảm bảo thì sẽ tạo nền tảng cho các quá quá trình phát triển
tiếp theo của mỗi đứa trẻ cũng như của cả một thế hệ. Đảng và nhà nước đã xác định lấy đổi
mới quản lý là khâu then chốt để đổi mới sự nghiệp giáo dục. Bởi lẽ hệ thống quản lý ở tầm
vĩ mô hay vi mô đều tác động trực tiếp đến chất lượng giáo dục, chất lượng nhà trường, chất
lượng sản phẩm giáo dục. Muốn đảm bảo chất lượng giáo dục, phải đảm bảo rằng hệ thống
quản lý thực sự có hiệu quả, có tầm nhìn, có chiến lược đúng đắn. Cùng với sự phát triển của
kỹ thuật số, sự ra đời của máy tính cá nhân, các website ứng dụng cũng được ra đời để giúp
cho hệ thống quản lý làm việc tốt hơn, cuộc sống của con người cũng dễ dàng và thú vị hơn.
Vì vậy, em quyết định chọn đề tài “THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG APP MOBILE
CHO HỌC SINH CHO TRƯỜNG MẦM NON HOA BAN”, một phần em hy vọng sản
phẩm của em hoàn thành sẽ giúp ích cho việc thiết kế ra một APP(ứng dụng) quản lý học
sinh với giao diện dễ sử dụng thích hợp với người dùng, thuận tiện trong việc quản lý thông
tin của học sinh và theo dõi được quá trình của học sinh.

1.2. Mục tiêu của đề tài

Để một app mobile để thuận tiện trong việc lưu trữ thông tin và theo dõi giám sát rõ
ràng lịch trình của học sinh, cũng như theo dõi được học phí, lưu trữ được những kỉ niệm
thời học sinh. Em đã thiết kế một giao diện người dùng cho đội ngũ phát triển, lập trình
thuận tiện trong việc xây dựng hoàn thiện ra một app mobile.
14
 1.3. Phạm vi nghiên cứu đề tài

Giao diện được xây dựng nhằm hỗ trợ phụ huynh có con em học ở trường mần non có
nhu cầu quản lý thông tin, theo dõi được quá trình học tập, lịch trình, thông báo từ nhà
trường cũng như tài chính của học sinh

Đối tượng phục vụ:

- Phụ huynh có con học tại trường mầm non.

- sinh viên nghiên cứu và thiết kế giao diện dựa trên figma và photoshop

2. Giới thiệu chung về nhà trường

2.1. Sơ lược về trường mầm non Hoa Ban

Tên trường: Trường Mầm non Hoa Ban

Tên trước đây: Trường Mầm non Mường Báng; Trường Mầm non Mường Báng

số 1.

Cơ quan chủ quản: Phòng Giáo dục và Đào tạo huyện Tủa Chùa

Tỉnh Điện Biên Họ và tên hiệu trưởng Dương Thị Hương

Huyện Tủa Chùa Điện thoại 0982691977

Đạt chuẩn Quốc Mức độ 1 Số điểm trường 6

gia

Năm thành lập 2001 Loại hình khác

trường

Công lập X Thuộc vùng khó khăn

Tư thục Thuộc vùng đặc biệt X

khó khăn

Dân lập Trường liên kết với

15
 nước ngoài

Nhà trường có 1 điểm trường chính đóng trên địa bàn Bản Ten Thị trấn Tủa Chùa,
huyện Tủa Chùa, tỉnh Điện Biên và 6 điểm trường lẻ: Háng Tơ Mang, Đông Phi, Đông Phi
1; Huổi Lếch; Tân Phong, Tiên Phong.

2.2. Cơ cấu tổ chức

STT Họ và tên Chức danh, chức vụ Nhiệm vụ

1 Dương Thị Hương Hiệu trưởng Chủ tịch HĐ

2 Phan Thị Hiền Phó hiệu trưởng Phó chủ tịch HĐ

3 Nguyễn Thị Thu Hà Phó hiệu trưởng Phó chủ tịch HĐ

4 Nguyễn Thị Thu Hằng Phó hiệu trưởng Phó chủ tịch HĐ

5 Lê Thị Lệ Hương GV – TP tổ mẫu giáo Thư ký hội đồng

6 Lương T.Phương Hằng GV – TP tổ mẫu giáo Ủy viên hội đồng

7 Vũ Thị Huyền GV – TP tổ nhà trẻ Ủy viên hội đồng

8 Lò Thị Mai GV – Bí thư ĐTN Ủy viên hội đồng

9 Nguyễn Văn Cường NV – TT tổ văn phòng Ủy viên hội đồng

10 Mai Thị Là GV – Trưởng ban TTND Ủy viên hội đồng

11 Nguyễn Hồng Hưởng Kế toán Ủy viên hội đồng

12 Ngô Thị Thanh Giáo viên Ủy viên hội đồng

13 Nguyễn Thị Dung Giáo viên Ủy viên hội đồng

16
 Bảng 1: Cơ cấu tổ chức trường mầm non Hoa Ban

Hiện nay trường có 20 nhóm lớp với tổng số 527 học sinh. Gồm 05 lớp nhà trẻ có 104
học sinh và 15 lớp mẫu giáo có 423 học sinh. Tổng số cán bộ quản lý, giáo viên, nhân viên
của trường là 45 đồng chí. Trong đó có 01 hiệu trưởng, 03 đồng chí phó hiệu trưởng, 36 giáo
viên, 05 nhân viên. Nhà trường có 03 tổ chuyên môn và 01 tổ văn phòng.

Điểm trường trung tâm có đầy đủ các phòng ban như: Phòng hiệu trưởng, phòng các
phó hiệu trưởng, văn phòng, phòng hành chính quản trị, phòng bảo vệ, phòng y tế, các công
trình vệ sinh cho cán bộ nhân viên, khu để xe cho cán bộ giáo viên, nhân viên, phụ huynh
học sinh. Có các phòng chức năng cho trẻ hoạt động: Phòng âm nhạc, phòng kidsmart, có
khu vực giáo dục thể chất.... Các điểm trường có đủ phòng học đảm bảo diện tích cho trẻ
hoạt động, các điểm trường đều có sân chơi lát bê tông, có đồ chơi ngoài trời, có tường bao
hàng rào, có cổng và biển trường đầy đủ theo quy định.

3. Giới thiệu dự án.

3.1. Mục đích thiết kế

Dự án thiết kế giao diện người dùng (UI) và trải nghiệm người dùng (UX) cho ứng
dụng quản lý học sinh mầm non là một dự án mang tính đột phá và đầy tiềm năng. Với sự
phát triển của công nghệ, việc quản lý học sinh mầm non trở nên dễ dàng hơn và ứng dụng
quản lý học sinh mầm non được thiết kế với mục đích giúp cho các bậc phụ huynh, giáo viên
và nhà trường có thể quản lý thông tin học sinh một cách nhanh chóng, tiện lợi và đơn giản.

Dự án sẽ tập trung vào việc thiết kế một giao diện đẹp mắt và thân thiện với người
dùng, giúp cho người dùng dễ dàng tương tác với ứng dụng và thực hiện các chức năng quản
lý học sinh như thêm mới học sinh, cập nhật thông tin, tạo danh sách lớp học, tạo báo cáo
tiến trình học tập và gửi thông báo cho phụ huynh. Hơn nữa, dự án cũng sẽ tập trung vào trải
nghiệm người dùng để đảm bảo rằng việc sử dụng ứng dụng là một trải nghiệm đơn giản, dễ
dàng và thuận tiện cho người dùng.

Với sự phát triển không ngừng của công nghệ và sự cần thiết của việc quản lý học
sinh mầm non, dự án này đang trở thành một trong những dự án tiên tiến và đầy triển vọng
trong lĩnh vực UI/UX và quản lý học sinh.
17
 3.2. Tính năng nổi bật

Ứng dụng quản lý học sinh dành cho phụ huynh là một công cụ hữu ích để giúp phụ
huynh quản lý thông tin học tập của con em mình một cách dễ dàng và tiện lợi. Các chức
năng chính của ứng dụng quản lý học sinh dành cho phụ huynh bao gồm:

Tên tính năng Nội dung tính năng

Xem thông tin học sinh cho phép phụ huynh xem thông tin cá
nhân của con em mình, bao gồm họ tên,
ngày tháng năm sinh, địa chỉ, số điện
thoại và thông tin liên hệ khác.

Theo dõi tiến trình học tập cho phép phụ huynh xem báo cáo tiến
trình học tập của con em mình, bao gồm
điểm số, thành tích và phản hồi từ giáo
viên.

Xem lịch học cho phép phụ huynh xem lịch học của
con em mình, bao gồm các môn học,
giáo viên phụ trách, thời gian và địa
điểm học.

Nhận thông báo từ giáo viên cho phép giáo viên và nhà trường gửi
thông báo đến phụ huynh về các hoạt
động học tập, sự kiện và thông tin khác.

Đăng ký hoạt động ngoại khóa cho phép phụ huynh đăng ký và theo dõi
các hoạt động ngoại khóa cho con em
mình, bao gồm các buổi học, chương
trình và sự kiện khác.

Xem ảnh hoạt động trên trường Phụ huynh có thể xem được những
khoảng khắc của con mình tại trường
18
 được thầy cô ghi lại

Các câu hỏi vui nhộn Giúp phụ huynh cho con em mình tham
gia các câu đố vui, để nâng cao khả năng
tư duy cho bé

Đóng học phí, quỹ online Phụ huynh có thể đóng các quỹ, học phí,
phụ phí online mà không cần phải đến
trường nộp học phí

Bảng 2: Tính năng nổi bật

Những chức năng này giúp phụ huynh có thể theo dõi tiến trình học tập của con em
mình một cách dễ dàng và nhanh chóng, cập nhật thông tin liên quan đến lịch học và các
hoạt động ngoại khóa, đồng thời giúp tạo ra một môi trường học tập chuyên nghiệp và hiệu
quả cho học sinh, giáo viên và phụ huynh.

3.3. Các phần mềm sử dụng

Figma là một công cụ thiết kế giao diện người dùng (UI) và trải nghiệm người dùng
UX) dựa trên web, được phát triển và cung cấp bởi Figma, Inc. Figma cho phép người
dùng tạo, thiết kế và chia sẻ các thiết kế giao diện người dùng cho các ứng dụng web và
di động.

Figma có nhiều tính năng hữu ích cho việc thiết kế giao diện, bao gồm khả năng tạo
ra các bản phác thảo (sketches), mô hình hóa (wireframes), bố cục (layouts) và các thiết
kế tùy chỉnh khác. Các tính năng này được tích hợp trực tiếp vào trình duyệt web, giúp
người dùng tiết kiệm thời gian và tiện lợi hơn khi làm việc.

Figma cũng cho phép người dùng làm việc cùng nhau trên cùng một thiết kế, cho
phép các nhà thiết kế và nhà phát triển cùng tương tác, thảo luận và đưa ra ý kiến. Các
thiết kế được lưu trữ trên đám mây, cho phép người dùng truy cập từ bất cứ đâu và bất cứ
thiết bị nào.

19
 Figma còn tích hợp nhiều công cụ khác như các plugin và thư viện để giúp người
dùng làm việc hiệu quả hơn. Với những tính năng ưu việt như vậy, Figma trở thành một
công cụ thiết kế giao diện rất được ưa chuộng trong cộng đồng thiết kế và phát triển ứng
dụng.

4. Tổng quan về giao diện người dùng (UI)

4.1. Khái niệm

Thiết kế giao diện người dung (UI) là việc thiết kế những trải nghiệm về mặt thẩm mỹ của
những giao diện kỹ thuật số, cụ thể là những chi tiết hình ảnh trực quan như nút bấm, menu
điều hướng và kiểu chữ. Điểm mấu chốt là ở vẻ ngoài và cảm giác mà giao diện mang lại và
liệu người dùng có một trải nghiệm mượt mà và dễ chịu cả về vẻ đẹp cũng như sử dụng của
website, app. Nói ngắn gọn, thiết kế UI là quá trình trong đó các nhà thiết kế và nhà phát
triển tạo ra những giao diện thân thiện với người dùng liên kết khách hàng với sản phẩm
hoặc dịch vụ của bạn.

4.2. Quy trình thiết kế

Tìm hiểu nhu cầu khách hàng

Với việc thiết kế lấy người dùng làm trung tâm (UX). UI chính là công cụ truyền tải
thông tin hiệu quả đến khách hàng. Do vậy, trước khi bắt tay thiết kế, hãy xem xét nhu cầu
về khách hàng. Từ yêu cầu, mục đích, ngân sách thực hiện và loại app phù hợp. Đảm bảo
khách hàng thực sự hài lòng với ý tưởng thiết kế của bạn.

Thiết lập ý tưởng

Khi đã có được khảo sát về nhu cầu của khách hàng. Bước tiếp theo là thiết lập ý
tưởng cho thiết kế mobile app. Bước này là tiền đề hết sức quan trọng trong quy trình thiết
kế app mobile. Thiết lập ứng dụng cụ thể, xác định được định hướng rõ ràng. Nếu có thay
đổi hay phát sinh phải xử lý ngay trong bước này.

Phác họa chi tiết hướng thiết kế app mobile

Khi đã thiết lập ý tưởng, bước tiếp theo là phác họa. Bạn cần lập một mô tả thật cụ
thể các chi tiết. Bao gồm màu sắc sử dụng, sắp xếp thông tin như thế nào, giao diện ra sao,
20
font chữ… Bạn có thể tham khảo các ý tưởng thiết kế app và giao diện app đang thịnh hành
nhất hiện nay và được nhiều người yêu thích.

Tiến hành thiết kế app mobile

Khi đã chuẩn bị xong. Giờ đây bạn chỉ việc bắt tay vào thiết kế ứng dụng. Quá trình
thiết kế mobile app trên iOS và Android cũng không khác nhau là mấy. Quan trọng là việc
bạn nắm được quy tắc thiết kế ra sao. Định hướng ứng dụng như thế nào để việc lập trình dễ
dàng hơn là được.

Hoàn thiện sản phẩm thiết kế app mobile

Bước cuối cùng trong quy trình thiết kế app mobile là hoàn thiện sản phẩm. Trước khi
đưa sản phẩm ra mắt người dùng. Bạn cần phải kiểm tra, test lại một cách kỹ lưỡng. Nếu
phát hiện lỗi phải xử lý kịp thời. Người sở hữu cũng cần có chiến lược phát triển cụ thể sản
phẩm. Biết khai thác và phát huy tối đa những ưu điểm của ứng dụng.

4.3. Các quy tắc quan trọng trong thiết kế (UI)

Có rất nhiều quy tắc và nguyên tắc quan trọng trong thiết kế giao diện người dùng (UI),
tuy nhiên dưới đây là một số quy tắc được coi là rất quan trọng để tạo ra giao diện dễ sử
dụng và hiệu quả:

- Sự đơn giản: Thiết kế giao diện phải đơn giản, trực quan và dễ hiểu. Người dùng
nên có thể sử dụng ứng dụng một cách tự nhiên và không gặp khó khăn trong việc
tìm kiếm chức năng cần sử dụng.

- Tập trung vào người dùng: Thiết kế giao diện phải được tập trung vào người dùng
và nhu cầu của họ. Người dùng nên được đặt vào trung tâm của quá trình thiết kế và
phát triển để đảm bảo rằng sản phẩm cuối cùng đáp ứng được nhu cầu của họ.

- Các đường viền: Thiết kế giao diện cần phải sử dụng đường viền, các phần tử và
màu sắc sao cho đẹp mắt, dễ nhìn và thu hút. Sự đồng nhất trong phong cách thiết
kế và sử dụng các phần tử đồ họa cũng là rất quan trọng.

21
- Sự tương phản: Thiết kế giao diện cần sử dụng sự tương phản giữa các phần tử để
đảm bảo tính trực quan và dễ hiểu. Sự tương phản có thể được tạo ra bằng cách sử
dụng màu sắc, kích thước hoặc các phần tử đồ họa khác.

- Khả năng phản hồi: Thiết kế giao diện cần phải cho phép người dùng biết được họ
đang làm gì và điều gì đang xảy ra trong quá trình sử dụng ứng dụng. Sự phản hồi
có thể được hiển thị bằng các thông báo, hiệu ứng hoặc các tiêu đề tương ứng.

- Dễ tiếp cận: Thiết kế giao diện cần phải được thiết kế sao cho dễ tiếp cận và sử
dụng. Người dùng cần có thể tìm thấy và truy cập các chức năng một cách dễ dàng,
và không cần phải đầu tư nhiều thời gian hoặc công sức trong việc tìm kiếm.

22
5. Tổng quan về úng dụng

5.1. Sitemap

Sitemap trong UI/UX là một phần mềm hoặc công cụ được sử dụng để thiết kế và
quản lý các trang web hoặc ứng dụng. Nó giúp cho người thiết kế định hình được cấu
trúc và lưu đồ của trang web hoặc ứng dụng, từ đó giúp cho người dùng dễ dàng tìm
thấy các nội dung hoặc chức năng mà họ cần.

Sitemap có thể được sử dụng để thiết kế và quản lý các trang web hoặc ứng dụng
bằng cách tạo ra một bản đồ trang web, cho phép người dùng xem các liên kết giữa
các trang và thứ tự của chúng. Nó giúp cho người thiết kế hoặc quản lý hiểu được cấu
trúc của trang web hoặc ứng dụng và xác định được trang chủ, các trang con và liên
kết giữa các trang.

23
Hình 1: Sitemap

24
 5.2. Userflow

UserFlow trong thiết kế website là quá trình mô tả cách mà người dùng tương tác với
trang web, từ lúc họ truy cập trang web cho đến khi hoàn tất mục đích của mình trên
trang đó. UserFlow là một phần quan trọng của thiết kế trải nghiệm người dùng (User
Experience Design - UX Design) và được sử dụng để hiểu rõ hơn về hành vi của người
dùng trên trang web.

Quá trình tạo UserFlow thường bắt đầu bằng việc định nghĩa mục đích của trang web và
những nhiệm vụ mà người dùng có thể thực hiện trên trang đó. Sau đó, các nhà thiết kế
sẽ tạo ra một loạt các bản vẽ hoặc sơ đồ biểu diễn quá trình tương tác giữa người dùng và
trang web, từ trang chủ đến các trang con và các tính năng khác trên trang.

25
Hình 2: UserFlow
26
Mô tả chi tiết

Mô tả
Đối tượng
STT Tên bước Điều kiện đầu
thực hiện Thực hiện
vào

Open Người sử
1 Khách hàng bật app lên
Mobile App dụng

Trang giới Hệ thống hiển thị giao diện đăng

2 Hệ thống
thiệu nhập

Bạn có nhớ Hệ thống hiển thị giao diện đăng

3.1 tài khoản Hệ thống nhập bao gồm: Có tài khoản,
mình không Quên Mật khẩu

Người sử dụng nếu có tài khoản

thì đăng nhập vào hệ thống, nếu
Người sử
3.2 Đăng nhập quên mật khẩu có thể vào phần
dụng
Quên mật khẩu để lấy lại mật
khẩu

Hệ thống sẽ xác thực tài khoản

nếu tài khoản:

- Sai(Fail) thông tin thì

Người sử dụng sẽ quay trở lại nhập lại
4 Xác thực Hệ thống phải đăng nhập và đăng nhập lại
vào hệ thống - Đúng(true) nếu thông
tin tài khoản hợp lệ thì
sẽ hiển thị giao diện
HOME app mobile

27
 Sau khi khách hàng đăng nhập
Sau khi đăng
vào hệ thống sẽ hiện ra trang
5 Home Hệ thống nhập vào hệ
HOME và các nút chức năng.
thống
Quá trình đăng nhập kết thúc

Hiển thị ra thông tin người học

Người sử
6 Profile sinh, và có thể chỉnh sửa, add
dụng
avt

Hiển thị ra form đóng học phí, ta

Người sử
7 Học phí có thể chọn 1 thông báo học phí
dụng
để đóng tiền

Người sử dụng sẽ chọn thể loại

câu hỏi cho các bé, rồi trả lời
câu hỏi trên app, các câu hỏi này
Câu hỏi vui Người sử
8 sẽ dựa vào các kiến thức trả em
nhộn dụng
được học trên trường để xây
dựng ra bộ câu hỏi phát triển IQ
cho bé

Thời gian Hệ thống sẽ hiển thị ra thông tin

9 Hệ thống
biểu các lịch học trong ngày

Người sử dụng có thể theo dõi

10 Lịch nghỉ lễ Hệ thống
lịch nghỉ lễ theo các tháng

11 Bảng biểu Người Sử Sau khi click vào Bảng biểu sẽ

dụng hiện ra tất cả các lịch học các
môn, muốn xem lịch học của
mỗi 1 thì ta sẽ chọn môn để

28
 xem.

Sẽ Hiển thị giao diện điểm của

Kết quả học Người sử
12 các môn của học sinh và thang
tập dụng
điểm

Người sử Hiển thị ra các ảnh trên lớp của

13 Ảnh trên lớp
dụng học sinh đó trên app

Hiển thị ra form đổi mật khẩu,

Đổi mật Người sử người sử dụng cần ghi đầy đủ
14
khẩu dụng thông tin vào đó để tiến hành đổi
mật khẩu

Hiển thị ra form điền thông tin

Đơn xin loại đơn xin nghỉ, form đặt câu
Người sử
15 nghỉ, đặt hỏi tùy theo người sử dụng
dụng
câu hỏi muốn nhằm mục đích gì và gửi
yêu cầu

Hiển thị ra form các sự kiện của

học sinh trên trường, để bố mẹ
Người sử
16 Sự kiện có thể theo dõi được các lịch
dụng
trình hoạt động ngoại khóa của
con mình

Bảng 3: Mô tả chi tiết

29
 5.3. Biểu đồ hoạt động các quy trình nghiệp vụ

5.3.1. Biểu đồ hoạt động “Đăng nhập”

Hình 3: Biểu đồ hoạt động “Đăng Nhập”

- Mô tả: Để đăng nhập vào giao diện của App thì ta cần mở App lên, tiếp theo bấm
vào phần đăng nhập, khi đó sẽ hiển thị ra giao diện đang nhập, từ lúc đó ta nhập tên
tài khoản và mật khẩu vào, tiếp đó hệ thống sẽ kiểm tra thông tin đăng nhập của
người dùng nếu sai thì sẽ yêu cầu đăng nhập lại – nếu đúng thì sẽ hiển thị thông báo
đăng nhập thành công và kết thúc

30
 5.3.2. Biểu đồ hoạt động “Thanh toán học phí”

Hình 4: Biểu đồ hoạt động “thanh toán học phí”

- Mô tả: để thanh toán học phí thì sau khi ta đăng nhập thành công vào App ta nhấp
vào biểu tượng học phí ở trên giao diện Home, khi đó hiện ra giao diện thông tin
học phí, tiếp đó người sử dụng cần chọn phiếu học phí cần thanh toán, khi đó hệ
thống sẽ hiển thị ra thông tin chi tiết học phí đó kèm theo đó là có 1 nút “Button” sẽ
hiện ra ở dưới bảng chi tiết học phí đó, nếu mà họ phí có thể thanh toán online thì sẽ
có chũ “Pay Now” còn nếu mà là thanh toán học phí tực tiếp thì sẽ hiện ra 1 nút
“button” có chữ Download PDF để xem thông tin học phí và mang đến trường để
nộp trực tiếp. sau khi thanh toán xong sẽ hiển thị ra phiếu thanh toán hóa đơn.

31
 5.3.3. Biểu đồ hoạt động “Đặt câu hỏi và Đơn xin nghỉ học”

Hình 5: Biểu đồ hoạt động “Đặt câu hỏi và đơn xin nghỉ học”

- Mô tả: để đặt câu hỏi và đơn xin nghỉ học thì người dùng cần đăng nhập vào App,
sau đó nhấp vào biểu tưởng “đặt câu hỏi” & “Đơn xin nghỉ” ở trên giao diện Home,
khi đó hệ thống sẽ hiện ra giao diện “Đặt câu hỏi” và “Đơn xin nghỉ” để người dùng
có thể nhập thông tin trên giao diện đó, sau khi người dùng nhập đầy đủ thông tin
vào form giao diện, hệ thống sẽ kiểm tra các thông tin điền có phù hợp không, nếu
không hợp lệ thì yêu cầu nhập lại còn hợp lệ thì nút “Gửi” sẽ phảt sáng lên và người
dùng có thể bấm vào đó để gửi thông tin đi.

32
 5.3.4. Biểu đồ hoạt động “Đổi mật khẩu”

Hình 6: Biểu đồ hoạt động “Đổi mật khẩu”

- Mô tả: Để đổi mật khẩu người dùng, thì người dùng cần đăng nhập vào App rồi
nhấp vào biểu tượng đổi mật khẩu ở dưới cùng giao diện Home của App. Khi đó
App sẽ hiện ra giao diện “Đổi mật khẩu” từ đó người dùng nhập các thông tin mà
giao diện yêu cầu. sau khi nhập đúng thông tin yêu cầu hợp lệ thì sẽ hiện ra nút
“Đổi mật khẩu” ở dưới giao diện và bấm “đổi mật khẩu” để đổi mật khẩu, còn nếu
không hợp lệ thì yêu cầu nhập lại

33
5.4. Wireframes

Hình 7: WireFrame

Hình 8: WireFrames LogIn & LogUp

34
Hình 9: WireFrames Giao diện trang home

35
Hình 10: WireFrames Profile và Lịch thời gian biểu

Hình 11: WireFrames Giao thanh toán

36
Hình 12: WireFrames Giao diện câu hỏi, thời gian biểu và Kết quả học tập

Hình 13: WireFrames Giao diện chức năng

37
 CHƯƠNG 2: XÂY DỰNG GIAO DIỆN NGƯỜI ĐÙNG (UI)
1. Design

Hình 14: Giao diện đăng nhập

Hình 15: Giao diện trang HOME

38
 Hình 16: Giao diện thông tin cá nhân

Hình 17: Giao diện Attendance & holiday.

39
 Hình 18: Giao diện học phí và thanh toán online

Hình 19: Giao diện câu hỏi, thời gian biểu, kết quả.

40
 Hình 20: Giao diện bảng biểu và ảnh trên lớp.

Hình 21: Giao diện Đặt câu hỏi và đơn xin nghỉ học

41
Hình 22: Giao diện Sự kiện và chi tiết sự kiện

Hình 23: Giao diện hỗ trợ

42
2. Protopyte

Hình 24: Mối liên kết các protopyte trên figma

Hình 25: Protopye Login

43
 Hình 26: Protopyte Profile

Hình 27: Protopye Thời gian biểu

44
 Hình 28: Protopyte Học Phí

Hình 29: Protopyte Lịch Nghỉ Lễ

45
Hình 30: Protopyte Kết Quả Học Tập

Hình 31: Protopyte Bảng Biểu

46
Hình 32: Protopye Đặt Câu Hỏi

Hình 33: Protopye Đơn Xin Nghỉ

47
 Hình 34: Protopye Ảnh Trên Lớp

Hình 35:Protopye Câu Hỏi Vui Nhộn

48
 Hình 36:Protopyte Sự Kiện

Hình 37:Protopyte Đổi Mật Khẩu

49
 CHƯƠNG 3: KẾT LUẬN

Tổng hợp lại, việc thiết kế giao diện UI/UX app mobile là một phần quan trọng trong
quá trình phát triển ứng dụng di động. Thiết kế giao diện đẹp, thân thiện với người dùng và
dễ sử dụng có thể giúp tăng tính tương tác và chuyển đổi trên ứng dụng. Để thiết kế một giao
diện UI/UX hiệu quả, cần tập trung vào nghiên cứu người dùng, thị trường và xu hướng thiết
kế mới nhất. Ngoài ra, cần thường xuyên cập nhật và đánh giá lại thiết kế để cải thiện trải
nghiệm người dùng và đáp ứng nhu cầu của thị trường. Sự kết hợp giữa tính thẩm mỹ và tính
chức năng sẽ tạo nên một giao diện UI/UX tốt cho ứng dụng di động.

50
Tài liệu tham khảo

1. https://nordiccoder.com/blog/user-flow-trong-user-experience-la-gi/

2. https://topdev.vn/blog/wireframe-la-gi/

3. Figma.com

4. https://maludesign.vn/ui-ux/app-design-cach-thiet-ke-giao-dien-phan-mem-ung-
dung-mobile-tot/

5. Pinterest.com

6. https://www.behance.net/

51