Nghiên cứu về Typography trong thiết kế giao diện người dùng và áp dụng vào thiết kế giao diện ứng dụng phân loại, thu gom rác thải "Gom"

Mục đích và nhiệm vụ nghiên cứu Đề tài được đưa ra với mục dich: Hiểu và áp dụng được kiến thức về typography vào thiết kế giao diện ứng dụng phân loại, thu gom rác thải GOM thân thiện,

BO THONG TIN VÀ TRUYEN THONG HỌC VIEN CONG NGHỆ BƯU CHÍNH VIỄN THONG

a

EE,

BAO CAO

ĐỎ AN TOT NGHIỆP

Dé tai: “NGHIEN CUU VE TYPOGRAPHY TRONG THIET KE GIAO DIEN

NGUOI DUNG VA AP DUNG VAO THIET KE GIAO DIEN UNG DUNG PHAN

LOẠI, THU GOM RAC THÁI “GOM””

Giảng viên hướng dẫn: Th.S Nguyễn Thị Kim Ngân

Sinh viên thực hiện: Lương Thị Xuân

Mã sinh viên: BI9DCPT250

Lớp: DI9TKDPT02 Hệ: Đại học chính quy

Hà Nội - 2023

LỜI CAM ĐOANTôi xin cam đoan rằng Đồ án tốt nghiệp “NGHIÊN CỨU VỀ TYPOGRAPHYTRONG THIẾT KE GIAO DIỆN NGƯỜI DUNG VA ÁP DỤNG VÀO THIET KEGIAO DIEN UNG DUNG PHAN LOẠI, THU GOM RAC THAI “GOM”” là công trìnhnghiên cứu của bản thân minh Những phan có sử dung tài liệu tham khảo có trong đồ án

đã được liệt kê và nêu rõ ra tại phần tài liệu tham khảo Đồng thời những số liệu hay kếtquả trình bày trong đồ án đều mang tính chất trung thực, không sao chép, đạo nhái

Nếu như sai tôi xin chịu hoàn toàn trách nhiệm và chịu tất cả các kỷ luật của bộmôn cũng như nhà trường đề ra

Sinh viên thực hiện

Lương Thị Xuân

LỜI CẢM ƠNTrong suốt chặng đường đại học, em không chỉ nhận được những kiến thức bổ ích

mà còn nhận được sự hỗ trợ, giúp đỡ của mọi người Em xin gửi lời cảm ơn chân thành

nhất đến những người đã đồng hành và hỗ trợ em trong suốt 4.5 năm vừa qua, đặc biệt làtrong quá trình thực hiện đồ án tốt nghiệp này

Đầu tiên và quan trọng nhất, em xin bày tỏ lòng biết ơn và gửi lời cảm ơn chânthành tới cô giáo ThS Nguyễn Thị Kim Ngân, người trực tiếp hướng dẫn em làm Đồ ántốt nghiệp Dai học Trong qua trình làm đồ án, cô đã quan tâm, động viên, tận tình hướngdẫn, giúp em giải quyết các vấn đề nảy sinh và hoàn thành đề tài đúng định hướng bandau Tuy nhiên sản phẩm chắc chắn van còn nhiều điểm hạn chế và thiếu sót, vì vậy em

kính mong tiếp tục nhận được góp ý từ cô và quý thay cô dé sản phẩm ở trạng thái tốt

nhất

Em cũng muốn này tỏ lòng biết ơn đến các thầy, cô giáo Khoa Đa phương tiện,Học viện Công nghệ Bưu chính Viễn thông, những người đã tận tình giảng dạy, truyền đạtcho em những kiến thức quý báu để phát triển các sản phẩm trong lĩnh vực đa phươngtiện Từ những kiến thức đó, em phát triển thêm vốn hiểu biết của mình dé hoàn thành dé

tài và vận dụng trong công việc sau này.

Cuối cùng xin được gửi lời cảm on tới gia đình, bạn bè, người thân luôn bên cạnh,

tạo điều kiện tốt nhất cho em trong suốt quá trình học tập trên giảng đường, động viên vàgiúp đỡ em đề em hoàn thành tốt đồ án này

Em xin chân thành cảm on!

Hà Nội ngày tháng năm 2023

Sinh viên thực hiện

Xuân Lương Thị Xuân

MO DAU eessssssssssssssssssssssssesssssssssssssscssssssssssssssesssssssssssssssessssssesssssssessssssessssssseesssssssessssseessn 1 CHUONG 1: TONG QUAN VE TYPOGRAPHY VA THIET KE GIAO DIEN

NGƯỜI DUNG TREN UNG DỤNG DI DONG ccssssssesssessssssesssecsesssessessscescsscsscsscanees 4

1.1 Tổng quan về typography sccsscssssssssesssssessecsecscsessncssssaccssesecsscsscacsscacescaeeacens 4

1.2 Tổng quan về thiết kế giao diện người dùng trên ứng dụng di động 19

1.2.2 Tổng quan về thiết kế giao diện người dùng trên ứng dung di động 231.3 Ảnh hưởng của typography trong thiết kế giao diện người dùng 26

1.3.2 Typography là một loại công cụ giao tiếp trực quan giúp truyền tải nội dung

giao diện theo thứ bậc rõ ràng, thiệt lập hệ thông phân câp - - - 5+ 5<+ 28

1.3.3 Typography ảnh hưởng đến khả năng nhận diện thương hiệu 281.4 Tiểu kết chương Ì -< << ©s©Ss£Es£Es£EssEssEsEEseEsesersersrsersrsersee 28

CHƯƠNG 2 NGHIÊN CỨU VE UNG DỤNG “GOM” 5- 55c scsecsesscscss 30

2.1 Tổng quan về tình hình phân loại, thu gom rác thải tại Việt Nam 30

2.1.1 Dac điểm, tình hình phân loại, thu gom rác thải tại Việt Nam 30

2.1.2 Nghiên cứu các ứng dụng đã có trên thị trường «+ <c++seecsss 31

2.2 Nghiên cứu về ứng dụng “GOM” c.csccssssssssscsssessesssssssessesssssssessessessceseeeeeeees 35

2.2.1 Giới thiệu về ứng dU ecceccccccccececsessesseseesessessesecsessesessestsesesseseseeseseees 35

2.2.2 _ Xác định người dùng mục tiêu của ứng dụng .- 52-5 cscS+cc+sseerses 35 2.2.3 Damnh sach 3ivà 1 44

2.2.4 _ Kiến trúc thông tite cccceccccccsessessessscsessessessssessessesssssssessessesscsssesesseseeeeaes 462.2.5 Luỗng người dùng -¿- 2 2+ 2tềEE2E121121271712112112111111121 11 E1 xe 462.3 Tiểu kết chương 2 s- << ©s<©cs©Ss£EseEsEseEtEteexsersetsrsersesersrsersere 49CHUONG 3: THIET KE GIAO DIỆN UNG DUNG DI ĐỘNG GOM 50

3.1 Thiết kế wireframe - << se << S99 S919 9e 2 e2 50

3.2 LOO Ứng ụng -s- - <5 5s Họ 0 0000 58

3.2.1 Logo hoản thiIỆn - - c3 321125113911191 1111111111 111 11111 1E vn kg kg 58

3.2.2 Quy chuẩn 1Og0 eeececceecssssessessessessssveseesessssussecsessessssussessessesssessessesiesesestees 58

DANH MỤC KÝ HIEU VÀ CHỮ VIET TAT Thuật ngữ, viết tắt Ý nghĩa

App: Application Ứng dụng

Mobile App: Mobile Application Ứng dụng di động

Context Ngữ cảnh

Paint point Diém dau

UI: User Interface Giao diện người dùng

Wireframe Khung day giao dién

Prototype Nguyén mau

Font Phong chữ

Letterform Mat chữ

Typeface Kiểu chữ

Type family Ho chit

DANH MUC CAC BANGBang 1 Một số thuật ngữ liên quan đến Typography ccccccccccescescessesseesvssesvesessesessesessesees 09

Bang 4 Đặc điểm hệ chữ Old style serif, Humanist seFjŸ 52- 52 ccccccccczcczrersseez 12

Bang 5 Danh sách chức năng ứng dụng ŒOÌM - c5 S133 ESsEirksssreessrks 44

DANH MỤC CÁC HÌNH VE

Chương 1

Hình 1.1 Lược sử hình thành TVDOBSTDHN cv E SE + SH key 4

Hình 1.3 Các đường gióng cơ bản CUA CHữY St ESS Sky &

Hình 1 4 Inch, pic Và DOHHÍ St E*S 19 1111111 1111111111111 11111111111 k1 kkt 9

Hình 1.5 Vi dụ về sự ảnh hưởng cua stroke weight tới tinh rõ rằng :cs-se¿ 15

Hình 1 7 Vi dụ về sự ảnh hưởng của độ tương phản của nên tới tính rõ rằng - 16 Hình 1 8 Khối văn bản có letterspacing quá rONG cccccccceccescessssssesvesveseesesvesessesessesvesesvees 17 Hình 1 9 Khối văn bản có letterspacing ép CNat ccccccccccceccesvessessesssessessessesvesessesessesessessees 17

Hình 1 11 Khối văn bản với khoảng leading quá rỘng -:©2+c5c2csccccszxcscce 18

Hình 1 13 Native đDJVS SG ST HS SH sence ee KTS KH tk kg khu 20 Hình 1 14 Web đDJS 2 S111 vE SE tk KTS KH KĐT khu 21 Finh 1 15 Fry brid Apops ccccccccccccccccceccceeeetececeeee cece eee e cence cenaeecnaeeenseeenseeeseaeessaeeenseeesnaeeenea 22

Hình 1 16 Vi dụ về sự sắp xếp cân bằng và không cân DANG cecceccccesesceesesvssesesesesessees 24Hình 1 17 Ung dụng nguyên tắc tương phản trong ViỆc XÓA 2-5ccccccscccsrszea 26

Chương 2

[0/1/5886/8./.1-.1€ 080Nn0n0nnnh.aŨ ố 31 Hình 2 2 Ứng dụng VECA - + + 5+2 2E12E1211211211211211211 1.1.1.1 re 32 Hình 2 3 Ứng dụng Grac.cecceccsccsssesssssvessessessessessesssssvessessessessessessssssessesiesesscevssessevseavssees 34

Hình 2 5 Câu hỏi về nhóm tHỔI : 5552cS5SttSESEttEEEEEttttEEErtttrrrrrrrrrererie 37 Hình 2 6 Câu hỏi về tình trạng hiện tại của người tham gia khảo sát - 37

Hình 2 7 Nơi vứt rác thải thưỜNg XHVÊN ST TH HH kh kh 38

Hình 2 8 Câu hỏi về việc phán loại rác thải trước khi vitt rÁC ccccccsc++sssss2 38Hình 2 9 Nơi người khảo sát thường bỏ rác tái ChE ccecccccecccsscescessessessesscsssessessessesesseseees 39Hình 2 10 Xác định các van dé phổ biến mà người dùng có thé gặp phải khi phân loại

Hình 2 12 Mức độ sử dụng ứng dụng di động trong các hoạt động hàng ngày 40

Hình 2 13 Ý định sử dụng ứng dụng theo dõi việc phân loại và thu gom rác thải 4IHình 2 14 Tinh năng mong muốn (nếu có) hỗ trợ việc phân loại rác thải - 4I

Hình 2 15 Chân dung người Aung Ì c- cc St S HH HH Hy ke 42 Hình 2 16 Chân dung người Aung - c LH HH HH HH ket 43

Hình 2 17 Chân dung người dùng ST tk HH HH He 44

Hình 2 19 Luong Đăng ký/ Đăng nhập/Quên mật khdti cccccccccccccccescescesseseeeseseesesesessees 4

Hình 2 24 Luông chức năng đặt lịch thu gom rác tại nhà eẶẰScSSsssevseeksseke 48

[;0/1/501.9079/18/1.8./)11 1.000nnnn na 49

Chương 3

Hình 3 1 Wireframe OnDOTdÌÏH S20 EESSt 1E SE ST KT khe 50

Hình 3 3 Wireframe Trang Chủ cv vn vS vay 52 Hình 3 4 Wireframe SCAN rác thải cv SE 11 v1 k1 x1 key 53

Hình 3 5 Wireframe Đặt lịch thu gom va tim kiếm địa điểm thu gom gân đây 34

Hình 3 7 Wireframe Cộng đông/Thử thách - 5-5 52C EEEEEEE2EEEEEEEEerrerrrei 56

Hình 3 8 Wireframe Tài KNOG ccecccecccecccetceetseeteeesceeeeeseeeseenseeessecsseceeessessesssesseeeenaeees 37

Hình 3 10 Quy chuẩn 100 ccccccccsscsscessessessessesssssessessessessessssiessessessetsessessissiestssesvesesesen 58

Hình 3 11 Khoảng cách AN fOÀN HT TH TH TT HH nhàng 59

Hình 3 13 Bang mau sử dung trong ứng dụng GOM uu ceecceeceece cece eeteeeeeteeeeeneeeeeeteetens 60

Hình 3 14 Kiéu chữ sử dung trong ứng dụng GOM ccccccceccsscesscsscesvessessessessesesesesesseseees 61Hình 3 15 Hệ thong lưới sử dung trong ứng dụng GOM.o.ccccccccsccsscsscssescssesseseesesvesesescees 62Hình 3 16 Hệ thong icon sử dụng trong ứng dụng QOM 2©52+e+cccsrzxersrzed 62

Hình 3 17 Components trong ứng dụng GOÌM -c Set ket 63

Hình 3 19 Giao điện (QnbOdFdÏHE c0 11311111 1111111111 1111 111191 k 1111k kg 65

Hình 3 21 Giao diện Trang ChỦ - cv ST HH TH kg key 67

Hinh PSNZÄ€/1///20 08,/./,.100nnnnềềẻố 68 Hình 3 23 Giao diện đặt lich thu ĐOIH SE SH HH HH tk ng ket 69

Hinh 3 24 Giao dién tim kiém dia diém thu 7 70Hình 3 25 Giao diện Cộng đồng/Thông tin xanh, 52-52 Se‡EeEeEEEEEEEEEerrrrerrei 71 Hình 3 26 Giao diện Cộng đồng/Thủử thihiocccccccccccccesscessssscssvessessessessessessesessesessesessesees 72

Hình 3 27 Giao diện tài KhOẲH 20111119911 v1 111 1 K1 111111111 1k kg KH 11k kg 73

MỞ ĐẦU

1 Lý do chọn đề tài

Môi trường đóng vai trò vô cùng quan trọng đối với sự tồn tại và phát triển của conngười Nó không chỉ cung cấp nguồn lực thiết yếu cho cuộc sống hàng ngày mà còn ảnhhưởng đến sức khỏe, tâm lý và chất lượng cuộc sống Tuy nhiên, con người đang đặt ra những áp lực lớn đối với môi trường thông qua hành vi tiêu thụ không bền vững, ô nhiễm

và biến đồi khí hậu Sự chủ quan trong việc bảo vệ môi trường trở thành trách nhiệm của

toàn bộ xã hội.

Hiện nay, Việt Nam đang thải ra môi trường khoảng 60.000 tấn rác sinh hoạt một ngày,

trong đó khoảng 60% là rác thải sinh hoạt đô thị Theo Bộ Tài nguyên và Môi trường, trên

70% lượng rác này được xử lý bang phương pháp chôn lap, trong đó chỉ có khoảng dưới20% là được chôn lap hợp vệ sinh Lượng rác chôn lap không hợp vệ sinh đang hàng ngàygây ô nhiễm cho môi trường đất, môi trường nước và không khí Vấn đề này trở nên đặcbiệt nghiêm trọng ở các thành phố lớn Ngoài ra, trong số 30% được xử lý bằng phươngpháp không chôn lấp thì cũng có đến 2/3 là được đốt tiêu hủy bằng các lò đốt rác thủcông, gây khói bụi ô nhiễm không khí Điều này cho thấy nguyên nhân chủ yếu dẫn đến

tình trạng ô nhiễm môi trường tại các khu đô thị là do rác thải sinh hoạt chưa được phân

loại, thu gom và xử lý theo đúng quy định.

Việc phân loại, thu gom rác thải một phần do chủ trương của nhà nước, của địaphương, nhưng xuất phát phải từ ý thức của mỗi cá nhân trong cộng đồng Việc phân loạirác thải cần phải bắt đầu tại nhà vì nó có thé mang lại lợi ích và giảm lượng rác thải đi vàobãi chôn lap Không những vậy, thời đại công nghệ số đang rat phát triển, đồng nghĩa vớiviệc các thiết bị di động ngày càng phô biến và chiếm một phan quan trọng trong cuộcsống con người Điều này thúc đây việc tạo ra các ứng dụng di động, tập trung vào việcgiáo dục va giới thiệu cho các cá nhân cách phân loại rác thải sinh hoạt có thể tái chế tại

nhà.

Mục tiêu của ứng dụng GOM là tạo ra một giao diện thân thiện và dễ sử dụng, kết hợptính thâm mỹ với khả năng tương tác hiệu quả Điều này có sự ảnh trực tiếp từtypography, bởi việc áp dụng typography có hiệu suất cao trong thiết kế giúp tối ưu hóagiao diện, làm cho thông điệp về quá trình phân loại rác trở nên rõ ràng và hấp dẫn Điềunày không chỉ làm tăng cường trải nghiệm người dùng mà còn thúc đây sự hiểu biết và

tham gia của họ trong quá trình phân loại và thu gom rac thải.

Chính vì những lý do trên, tác giả đã lựa chọn đề tài “Nghiên cứu về Typographytrong thiết kế giao diện người dùng và áp dụng vào thiết kế giao diện ứng dụng phân

loại, thu gom rác thai “GOM””.

2 Mục đích và nhiệm vụ nghiên cứu

Đề tài được đưa ra với mục dich:

Hiểu và áp dụng được kiến thức về typography vào thiết kế giao diện ứng dụng phân

loại, thu gom rác thải GOM thân thiện, dé dùng, tạo cho người dùng một trải nghiệm doc

dễ dàng và có hệ thông phân cấp thông tin rõ ràng.

Nhiệm vụ cia đề tài:

- _ Nghiên cứu tông quan về lý thuyết typography trong thiết kế giao diện người dùng.

- _ Nghiên cứu tông quan về giao diện người dùng trong ứng dụng di động

- _ Nghiên cứu tình hình phân loại, thu gom rác thải tại Việt Nam, nghiên cứu đối thủ

- Nghiên cứu người dùng, lên danh sách chức năng, kiến trức thông tin cho ứng

dụng GOM.

- Hoan thành thiết kế giao diện trực quan cho ứng dụng di động phân loại, thu gom

rác thải GOM.

3 Đối tượng và phạm vi nghiên cứu

Đối tượng nghiên cứu:

Lý thuyết về typography trong thiết kế giao diện người dùng, thiết kế giao diện người

dùng trên ứng dụng di động.

Phạm vi nghién cứu:

Về thời gian: Dé tài được thực hiện trong 10 tuần (từ tháng 10/2023 — tháng

12/2023).

- _ Về không gian: Nghiên cứu được thực hiện tại Việt Nam.

- _ Về nội dung: Đề tài tập trung nghiên cứu lý thuyết về typography trong thiết kế

giao diện người dùng trên ứng dụng di động Toàn bộ lý thuyết sẽ được áp dụngvào quá trình thiết kế ứng dụng di động phân loại, thu gom rác thải GOM

4 Phương pháp nghiên cứu

Phương pháp nghiên cứu định lượng Phương pháp điều tra bang bảng hỏi Day làphương pháp sử dụng bảng câu hỏi dưới dạng viết và câu trả lời tương ứng Tiến hành thuthập đữ liệu người dùng qua bảng khảo sát đã chuẩn bị trước từ đó nghiên cứu và tìm hiểuhành vi người sử dụng Bang hỏi là phương tiện dé lưu giữ thông tin, nó là cầu nỗi giữangười nghiên cứu và người trả lời, khiến cho câu trả lời trở nên khách quan Kết hợp giữacâu hỏi đóng và câu hỏi mở để thu thập thông tin một cách chính và có chiều sâu

Phương pháp thu thập dữ liệu thứ cấp: Nghiên cứu và phân tích các tài liệu liên quan

có san đến dé tài Tài liệu được thu thập, nghiên cứu từ nhiều nguồn khác nhau như: kết

quả nghiên cứu khoa học, các báo cáo, các công trình nghiên cứu trước đây va các tai liệu

có san đã được đăng tải trên báo, tạp chí, Day là một phương pháp tiết kiệm được chiphí, cho phép thu thập đữ liệu đa chiều và nhiều mặt

5 Ý nghĩa khoa học và thực tiễn của đề tài

Ý nghĩa khoa học:

Đề tài góp phần tổng quát kiến thức về typography trong thiết kế giao diện ngườidùng, thiết kế giao diện người dùng trên ứng dụng di động, và ảnh hưởng của typography

trong thiết kế người dùng trên ứng dụng di động Từ đó áp dụng thiết kế giao diện ứng

dụng phân loại, thu gom rác thải GOM.

Y nghĩa thực tiễn của dé tài:

Sản pham đầu ra của đề tài giải quyết những vấn đề thực tiễn của con người trong

việc phân loại, thu gom rác thải hiện nay Góp phân giảm lượng rác thải thải ra môi

trường từ chính các hộ gia đình.

6 Kết cấu đề tài

Bố cục đề tài được kết cầu thành 3 chương như sau:

Chương 1: Tổng quan về typography và thiết kế giao diện ứng dung di động

Chương 1 cung cấp lý thuyết tong quan về typography Bên cạnh đó, chương 1 cũng

nêu lên lý thuyêt tông quan về thiệt kê giao diện người dùng trên ứng dụng di động cùng

vai trò của typography trong thiệt kê giao diện người dùng trên ứng dung di động.

Chương 2: Nghiên cứu về ứng dụng phân loại, thu gom rác thải “GOM”

Chương 2 nghiên cứu tổng quan tình hình phân loại, thu gom rác thải tại Việt Nam,

phân tích các đôi thủ cảnh tranh từ đó tìm ra những điêm cân phát huy và hạn chê cho đê

tai Bên cạnh đó, chương cũng di sâu vào nghiên cứu người dùng, xây dựng chân dung

người dùng, kiên trúc thông tin và các chức năng ứng dụng cung câp đê giải quyêt vân đê

người dùng.

Chương 3: Thiết kế giao diện ứng dụng di động “GOM”

Kết hợp giữa lý thuyết chương 1 và kết quả phân tích chương 2, chương 3 đi sâu vào

thiệt kê giao diện ứng dụng di động GOM.

CHUONG 1: TONG QUAN VE TYPOGRAPHY VÀ THIẾT KE GIAO DIEN

NGUOI DUNG TREN UNG DUNG DI DONG

Chương | cung cấp lý thuyết tổng quan về typography Bên cạnh đó, chương 1 cũng

nêu lên lý thuyết tông quan vê thiệt kê giao diện người dùng trên ứng dung di động cùng vai trò của typography trong thiệt kê giao diện người dùng trên ứng dụng di động.

1.1 Tổng quan về typography

1.1.1 Lược sử hình thành và khái niệm về typography

1.1.1a Lược sử hình thành typography

Lược sử Typography

Thế kỷ Thế kỷ 1400s 1470s 1800s Thé ky Hién tai

11 13 20

L

Chữ khắc bằng Chữ khắc Johannes Cac typeface dau tién Giai đoạn những bộ chữ hiện đại được.

gach men bằng gỗ Gutenberg được thiết kế thiết kế và ứng dụng phố biến trong in ấn và kỹ thuật số

phát minh ra máy in mực

Created by Vudigital.co

Hình 1.1 Lược sử hình thành Typography (Nguồn: vudigital.co)

Lịch sử của chữ viết là một quá trình kéo dài hàng nghìn năm Việc ứng dụng typography được tông kết dưới những mốc thời gian quan trọng dưới đây:

Thế kỷ 11: Chữ khắc hay chữ di chuyển được (movable type) lần đầu tiên xuấthiện vào khoảng thế kỷ 11 Bi Sheng (990 — 1051), một người Trung Quốc, đã phátminh ra những hệ thống chữ khắc trên gạch men và có thê sắp xếp theo nhiều kiểu

in thủ công khác nhau Loại chữ khắc này rất phổ biến ở Trung Quốc với nhiềubiến thé vẫn được sử dụng đến tận thé kỷ 17

Thế kỷ 13: Khoảng 200 năm sau, một kỹ sư Trung Quốc khác là Wang Zhen đãchế tạo ra một kiểu chữ khắc làm từ gỗ Mặc dù chữ khắc trên gỗ thì sẽ được sửdụng lâu hơn chữ trên gạch men, nhưng điểm yếu của loại hình này là việc in ấnnhiều lần sẽ khiến mặt chữ bị mòn, buộc người in phải chạm khắc các mảnh gỗmới Cả hai phương pháp trên đều chỉ áp dụng trong phạm vi lãnh thổ Trung Quốc, chứ chưa phô biến trên thế giới.

Giai đoạn 1400s: Johannes Gutenberg (1400 — 1468) là người đã phát minh ra may

in và tạo ra chữ khắc làm từ hợp kim chì Cột mốc này mang tính cách mạng bởi vì

ở Châu Âu khi ấy, mọi văn bản đều được viết băng tay và vì thế những tập sách cógiá rat cao Công nghệ của Gutenberg vừa tiết kiệm chi phí lẫn thời gian, giúp cácnhà xuất bản có thê sản xuất hàng loạt bản in Quyền sách được in máy đầu tiên làmột quyền Kinh Thánh

Giai đoạn 1470 — 1800s: Đây là giai đoạn mà các bộ chữ hiện đại bắt đầu đượcthiết kế Nicolas Jenson, Claude Garamond, William Caslon, Firmin Didot, Giambattista Bodoni là những người đặt nền móng cho nghệ thuật typographyhiện đại Những kiểu chữ đầu tiên được lấy cảm hứng từ những văn bản viết taycủa người La Mã cổ đại

«Ổ Thế kỷ 20: Thời điểm này, công nghệ đã giúp việc tạo ra những bộ chữ trở nên dễ

dàng hon rất nhiều Frederic Goudy trở thành người thiết kế chữ (type designer) toàn thời gian đầu tiên vào năm 1920 Ông là người đã tao ra những kiểu chữ mang

tính đột phá như Copperplate Gothic, Kennerly Sau đó, Helvetica, Futura, Times

New Roman cũng lần lượt ra đời.

Vai trò của typography đã được định hình từ rất lâu Nhiều kiểu chữ được dùnghiện nay như Garamond, Bodoni đã được thiết kế cách đây hàng trăm năm, và bản thâncác ký tự cũng có mối liên hệ mật thiết với những tổ tiên “nguyên thuỷ” thời xa xưa của

mình.

1.1.1b Khái niệm về typography

“Typography là hình thức của ngôn ngữ” - Ellen Lupton (Lupton, 2004, bìa trong)

Từ Tiếng Hy Lạp, “typography” được ghép nối bởi túxoc — typos mang nghĩa “hìnhthức” và ypớeww — graphein nghĩa là “viết” Hiểu một cách đơn giản, typography là nghệthuật và kỹ thuật của việc sắp xếp chữ, làm cho ngôn ngữ, văn bản trở nên hấp dẫn hơn.

1.1.2 Cac nguyên tắc cơ bản của typography

Hiểu các nguyên tắc cơ bản về kiểu chữ bao gồm các thuộc tính tạo hình (các phần của kiểu chữ), phân loại họ chữ và các yếu tố ảnh hưởng tính dễ đọc và tính rõ ràng.

1.1.2a Các thuộc tính tạo hình của chữ

Typography được tạo nên từ thành phần chính là các character (ký tự) Characterchính là các chữ cái, chữ số, các dấu câu hay các biểu tượng tham chiếu Mỗi characterđược tạo nên bởi rất nhiều bộ phận va mỗi bộ phận khi mang một nét riêng sẽ tạo nêntính nhận diện cho 1 font chữ Typography character cau thành bởi một số thành phan cobản Dưới đây là các thành phần cơ bản của một character

TAIL ARC OF STEM TERMINAL DESCENDER

Hình 1.2 Các thành phan cấu tạo cơ bản của chữ.

(Nguồn: sách Design elements, typography fundamentals)

Các thành phan cấu tao cơ ban của chữ bao gồm:

Aperture (Độ mở): Độ mở của các chữ cái như C, S, A, E.

Apex (Đỉnh trên): Apex là điểm giao nhau của hai nét xiên hướng lên trên của mộtmẫu chữ

Arm (Tay chữ): Là nét phụ kéo dài theo phương ngang hoặc hướng lên trên từ nét

chính và kết thúc tự do.

Ascender: Là phan cao lên từ x-height của những chữ cái thấp.

Axis (Trục): Một yếu tổ vô cùng thiết yếu của chữ Trục của một chữ là trục của những nét của nó, đó là chiều của cây bút (mực) khi viết lên một chữ Các nétthường tiết lộ trục axis của một chữ

Bowl (Nét cung tròn/bụng chữ): Là phan cong kin cua kỷ tự bao quanh phan lòng

trong.

Vertex (Dinh dưới): Là điểm giao nhau của hai nét xiên hướng xuống dưới của

một mâu chữ.

Counterform (Vùng nén ký tự): Là các không gian âm bên trong và xung quanh

chữ.

Chin: Nối giữa cánh tay và nét vay của chữ G.

Crotch (Đáy chữ): Là vùng lòng trong nhọn, vốn là điểm giao nhau giữa hai nét

của một kỷ tự.

Crossbar (Thanh ngang): Là nét phụ nằm ngang noi giữa hai nét chính

Eye (Mat chữ): La vùng lòng trong nhỏ của ký tự e thường

Ear (Tai chữ): Là nét nhỏ có thể nhìn thấy trên chữ G viết thường, kéo dài ở bên

phải của nét cung tron.

Leg (Chân chữ): Là nét phụ kéo dài xuống phía dưới từ nét chính cho tới đường cơ

so và kết thục tự do.

Loop (Phan lòng chữ): Là phan cung tròn được tạo bởi nét số dưới dòng của chữ

G thường trong một sô kiêu chữ.

Link (Nét liên kết): Là nét kết nói giữa nét cung trong và phan vòng chữ của chữ G

thưởng.

Swash (Nét uốn lượn): Là một nét mở rộng có tính trang trí, đôi khi nhô ra khỏi

diém kêt thúc, thường thay ở các chữ dạng viết tay.

Spine (Xương sống chữ): Là nét chính cong của chữ S

Stem (Nét chỉnh): Là nét quan trọng trong một ký tự Nét chính có thé thang, xiên

hoặc cong Nhưng thường là nét thăng Chiếu rộng của nét chính thường được thay đôi dé thay đổi trọng lượng cua phông chữ.

Spur (Nét vay chữ): Là một phan nhỏ mở rộng nhô ra tại điểm noi giữa nét thang

và nét cong Thường thay ở chữ G, B, P, Q.

Shoulder (Vai chữ): là vùng chuyển tiếp của một nét từ cong sang thăng, nó cong

xuống phía dưới và sang phải.

Stroke (Nét chữ): Là bat kỳ đường nào xác định một ký tự Nét có thé thang hoặc

cong, đậm hoặc mảnh.

Serif (Chân chữ): Là phan mở rộng tại nét cuối của một chữ.

Tail (Đuôi chữ): Là nét nhỏ ở day chữ Q hoa.

Terminal (Nét cuối): Là phan cuối của một nét không kết thúc với chân chữ

ASCENDER LINE ASCENT

Hình 1.3 Các đường gióng cơ bản của chữ

(Nguon: sách Design elements, typography fundamentals)

Các đường gióng cơ ban của chữ gồm:

¢ Duong cơ sở (Baseline): Là đường ngang có thật hoặc tưởng tượng mà các chữ

cdi thăng hang năm trên do.

¢ - Khoảng cách dong (Leading): Là khoảng cách giữa các đường cơ sở.

¢ - Nét số trên dòng (Ascender line): Là phan kéo dài lên phía trên chiéu cao cơ sở (x

- height) cua một ky tự thường như b, d, ƒ, h, k, 1.

¢ Nét số dưới dòng (Descender line): Là phan kéo dài xuống dưới đường cơ sở

(baseline) cua một ky tự thường như}, g, p, q.

¢ Chiểu cao cơ sở (x height): Là khoảng cách giữa đường cơ sở của chữ và đỉnh của

phần chính các chữ cai thường.

¢ Chiều cao đỉnh (cap height): Là đường có thật hoặc tưởng tượng biểu thị chiều

cao của các chữ cai in hoa trên đường cơ sở (baseline) cho một kiêu chữ cụ thé.

¢ Đường trung bình (Mean line): Đánh dấu chiều cao hoặc điểm cao nhất của dang

chữ thường trừ đi phân số trên dòng và số dưới dòng

Đo lường kích thước chữ:

- Hệ thống đo lường kích thước chữ được sử dụng phổ biến là thang đo kích thướcpoint (PostScript Point Scale) được sửa đổi từ thang đo kích thước point của Mỹ, bao gồmcác đơn vị đo: inch, pica va point Inch là đơn vị đo tiêu chuan ở Mỹ Pica thường đượcdùng dé đo kích thước các dòng chữ, có giá trị chính xác bằng 1/6 của 1 inch, pica có théđược chia nhỏ hơn thành 12 point, là đơn vị được sử dụng thường xuyên nhất dé đo kích

thước và khoảng cách ký tự.

—Ì] 11NCH

—! 1PICA

—] 6PICAS

1 pica = 12 points = 0.166 inch (4.2 mm)

6 picas = 72 points = 1 inch (2.5 cm)

— 1POINT 1 point = 0.0138 inch (0.35 mm)

12 points = 1 pica = 0.166 inch (4.2 mm)

—Ì 72 POINTS 72 points = 6 picas = 1 inch (2.5 cm)

Hình 1 4 Inch, pica và point (Nguon: typography101.net)

¢ _ Khi dé cập đến kích thước point của một typeface, thường nói đến body size (kíchthước thân) của chữ Body size phải bao gồm due không gian dé chứa đầy đủ mọi chữ cáihoa và chữ cái thường, cộng thêm phần không gian mở rộng đề ngăn cho các ký tự liền kềchạm nhau Chiều cao kích thước thân bằng với kích thước point

« Px là chữ viết tắt của từ Pixel, là đơn vị điểm ảnh trên màn hình Một pixel tươngđương với một điểm trên màn hình máy tính, là đơn vị hiển thị nhỏ nhất trên màn hình Sốlượng điểm ảnh này phụ thuộc vào kích cỡ màn hình và độ phân giải (resolusion) của mànhình đó Kích thước của một điểm ảnh cũng phụ thuộc vào kích thước màn hình và độphân giải khác nhau thì không giống nhau

« Do chữ có thé được sử dụng linh động ở nhiều kích thước khác nhau, nên việc sửdụng các đơn vị đo tương đối dé đo kích thước sẽ rất hiệu quả Các đơn vị đo tương đốithường dùng để so sánh kích thước chữ ở một kích thước point được gọi là em (em

vuông), en (en vuông) vả rem.

1.1.2b Phân loại họ chữ

Typography là nghệ thuật sắp xếp chữ, làm cho ngôn ngữ, văn bản trở nên hấp dẫnhơn Nghệ thuật chữ bao gồm việc chọn các Font chữ, Font Style (dựa vào các phân loại kiểu chữ — Type Classification), cấu trúc sắp đặt (Type Setting), nhằm truyền đạt thôngđiệp, cảm xúc trong một ngữ cảnh cụ thé Khi nhắc đến Nghệ thuật chữ, có rất nhiều thuậtngữ được nhắc tới như: Typeface, Font, Type Style, Do những thuật ngữ này rất dễ gâynhằm lẫn, cần hiểu rõ dé phân biệt được chúng

Letterform Letterform (mặt chữ) được xây dựng từ sự kết hợp của các nét thăng và

nét cong.

Typeface Typeface (kiểu chữ) chỉ một tập hợp các letterform được thiết kế đặc

biệt dé hòa hợp với nhau.

Font (phông chit) chỉ một tập hợp bao gồm tất ca các ký tự của một

Type family | Type family (họ chit) là tập hợp chữ bao gồm 1 typeface cụ thé và tat

cả các kiêu chữ của typeface đó

Bang 1 Một số thuật ngữ liên quan đến Typography

Typeface là công cụ chính dé giao tiếp trực quan [1] Các typeface được phân vàocác hệ chữ (type family) phan ánh nguồn gốc lịch sử và đặc trưng về phong cách củachúng Có rất nhiều hệ chữ được phát minh, tuy nhiên, dưới đây chỉ ra các hệ chữ thường thay: Serif, Sans Serif, Script, Decorative, Display

* Vi dụ Hệ chữ Serif Typeface (các mặt chữ có chân) có những hệ nhỏ nằm trong

bao gồm: Transitional serif, Modern serif

Các nét chữ thường có một trục

chính thăng đứng, trục nét cong cóthể nghiêng Sự tương phản về

trọng lượng thể hiện rõ nét hơn sovới kiểu Old style Các nét serif van

con ngoặc lại và nét serif trên thì nghiêng.

Arnhem - Fred Smeijers, 2002 Bonesana - Matthieu Cortat, 2009

MODERN SERIF

Giữa thé kỷ XVIII Cuối thé kỷ XVIII

Khi phát hành lan dau, những mặtchữ này được gọi là “cổ điển” Tuynhiên, ngay từ đâu, đây không phải làmột bản “nâng cấp” của Old style

mà là một kiểu hoàn toàn mới

Tương phản giữa nét dày và nét

mỏng thể hiện một cách rõ nét Trụccủa đường cong thi thang đứng, có ít

hoặc không có nét ngoặc Trong

hình dạng “quả bóng” hơn là hiệu ứng từ bút nét day.

Ambroise - Jean Francois Porchez,

2001

Carmen - Andreu Balius, 2007-2008

Bang 2 Dac diém hé chit Transitional serif va Modern serif

« Vi dụ Hệ chữ San Serif Typeface (các mặt chữ không chân) có những hệ nhỏ nam

trong bao gồm: Old style serif, Humanist serif, Grotesque, Geometric

hop, chữ “R” có nét cong nhẹ ở chân, chữ “G” luôn có nét vuông

GEOMETRIC SANS SERIF

Dang hình học don giản có anh

hưởng đến việc hình thành các mặtchữ này Những nét chữ có sự kết hợpchặt chẽ giữa nét đều và dạng hình

học Geometric thường khó đọc hơn

so voi Grotesque.

Agenda - Greg Thompson, 1993—

2000 Elido - Sibylle Hagmann, 2010

Bang 3 Dac diém hé chit Grotesque, Geometric

Độ tương | Thường có độ tương phản thấp Độ tương phản từ thấp đến trung

giữa nét dày và nét mỏng bình giữa nét dày và mỏng

Thường có hướng nghiêng (nhô lên | Thường có hướng nghiêng vừa phải

từ đường baseline, hướng mạnh về | (nhô lên từ đường baseline, hướngphía bên trải) mạnh về phía bên trái ở mức vừa

phai)

Centaur - Bruce Rogers, 1915 Aldus Nova - Hermann Zapf, Akira

Guardi - Reinhard Haus, 1986 Kobayashi, 2005

Bang 4 Dac diém hé chit Old style serif, Humanist serif

Qua thời gian, các mặt chữ đã trải qua những thay đổi về mặt tạo hình, phản ánhcác cải tiến về khả năng công nghệ, những biến chuyền chính trị - xã hội và sự thay đổi sở thích của công chúng Những biến đổi cấu trúc của các thành phần - bao gồm nét cuối, hướng nhấn nét, stroke weight, set width và x - height đã giúp phân biệt từng hệ chữ vớinhau Hình thức của một typeface có thể góp phần diễn tả tâm trạng, khơi gợi một ký ức,hoặc nhắc người xem hồi nhớ lại một thời kỳ lịch sử nào đó.

1.1.2c Các yếu tố ảnh hưởng đến tính rõ ràng và tính dễ đọcTính rõ ràng đề cập đến mức độ dễ dàng có thể nhận biết, phân biệt được các

letterform với nhau.

Tinh dé đọc đề cập mức độ dễ dàng của việc đọc và điều hướng | trang văn bản

Các yếu tô ảnh hưởng đến tính rõ ràng:

« Dang typeface: typeface ảnh hưởng trực tiếp đến tinh rõ ràng của thiết kế

Một số loại typeface có thé rõ ràng ở dạng chữ Display - các chữ khổ lớn và/hoặc

mang tính trang trí dùng dé thu hút sự chú ý, thường được dùng cho dòng tiêu đề (title),

phụ đề (heading) hoặc đề mục (headline) - thì lại thiếu rõ ràng khi sử dụng làm văn ban

nội dung (body text, text type - các đoạn văn bản dài hơn một vai từ).

- Tinh quen thuộc:

Tính quen thuộc đóng vai trò lớn, các typeface phổ biến và quen thuộc có thé déđọc hơn, mat ít thời gian đọc hơn so với những typeface ít quen thuộc

- Kiểu chữ:

Kiểu chữ là phiên bản đã được điều chỉnh của một typeface Văn bản có thể đặt ởkiểu italic (nghiêng), bold (đậm), ALL CAPS (IN HOA TAT CẢ CÁC KY TU), hay underline (gạch chân) Hầu hết những kiểu chữ này giúp ich cho việc nhấn mạnh, tuynhiên, các đoạn văn bản nội dung dai hiếm khi sử dụng một trong những kiểu chữ trên

- Màu sắc và độ đậm nhạt:

Mau sắc và độ đậm nhạt là công cụ thé hiện phong cách rất hiệu quả, giúp biểu lộ

tâm trạng, khơi gợi sự liên tưởng cũng như thu hút sự chú ý.

Modern serif ty

to-thir

ie s have a very high thick Modern serif typefaces have a very high

Oke cc f thick-to-thin stroke contrast Advances

in letterform making and printing

methods made possible.

making and printing methoc

Hình 1.5 Ví dụ về sự ảnh hưởng cua stroke weight tới tính rõ rang

Khi nhìn vào typeface có stroke weight ở mức cao (bên phải), các nét dày chèn vào

counter của ky tự khiến việc nhận diện chữ trở nên khó khăn hơn Mặt khác, typeface

có stroke weight ở mức rat nhỏ (bên trái) thi nét chữ cũng trở nên khó đọc, anh hưởng

đến tính rõ ràng của văn bản dài.

- D6 tương phản giữa các nét:

Đôi khi các nét của một letterform sẽ có độ dày khác nhau Mức độ tương phản

giữa nét dày nhất và mảnh nhất của một ký tự đều có thể gây ảnh hưởng tới tính rõ ràng

Nlodern serif typefaces have a very high thich-to-thin stroke contrast Advances in letterferm mahins, and printing methods made possible Nlodern serif typefaces have a very high thich- to-thin stroke contrast Advances in Ietterferm making and printing methods made possible.

Hình 1.6 Ví dụ về sự ảnh hưởng của độ tương phản tới tinh rõ rang Văn bản nội dung nếu được sử dụng với typeface có độ tương phản rất cao, sẽ tạo ra hiệu

ứng lóa mắt gây mỏi mắt cho thị giác người đọc.

- Kích thước point:

Kích thước point của ký tự tác động đến tính rõ ràng Với văn bản dùng chữDisplay, hầu hết typeface đều đạt mức tối ưu từ 14 point trở lên Với văn bản nội dung,kích thước point tối ưu nằm trong khoảng từ 8 - 12 point (có dai kích thước này là do sự

khác nhau giữa set width, cap height, x-height giữa các typeface có chung kích thước point).

- D6 tương phản giữa văn ban và nên:

Dé tăng tính rõ rang, cân dam bảo tạo ra đủ độ tương phản giữa văn bản và nên.

Hình 1 7 Ví dụ về sự ảnh hưởng cua độ tương phản của nên tới tính rỗ rang

Khi độ tương phản giữa văn bản và nên quá thấp, người đọc sẽ gặp khó khăn với việc

phân biệt các letterform từ nên.

Các yếu tô ảnh hưởng đến tính dễ đọc:

Chúng ta vừa xác thực răng chữ cái càng dé nhận biết thì càng rõ ràng Tuy nhiên,tính rõ ràng chỉ mô ta mức độ dé dang mà người đọc có thé nhận biết các ký tự hay từ cụthé, chứ không đề cập đến những yếu tố bé sung khác ảnh hưởng đến cách người đọc tìmthấy và tiếp nhận ý nghĩa từ các trang văn bản [2] Cách đặt các letterform trong mốitương quan với nhau có thé góp phan tăng hoặc giảm tính dé đọc của thiết kế.

những cách căn gióng được sử dụng thường xuyên:

Văn bản căn trái, văn bản căn hai lề đều thăng, văn bản căn phải, văn bản căn giữa.

Pham vi dong là độ dài của một dòng văn bản Phạm vi dòng lý tưởng cho bản in

của văn bản nội dung thường là từ 60 - 70 ky tự một dòng Trong môi trường kỹ thuật số, phạm vi dòng lý tưởng cho văn bản nội dung ở mức thấp hơn - khoảng 40 ký tự mỗi

dòng.

¢ Sứ dụng không gian âm trong layout:

Khi sắp xếp letterform, hình dạng và kích thước của không gian âm trở nên đặcbiệt quan trọng đối với cả tính dé đọc và tính rõ ràng Quyết định liên quan đến

letterspace hay tracking, kerning, và leading thường để lại tác động mạnh mẽ lên tính dễđọc của bắt cứ thiết kế nào có chứa văn bản.

- Letterspacing, tracking và kerning:

Letterspacing là khoảng cach giữa hai chữ cai trong 1 từ Thuật ngữ tracking va

kerning mô tả các cách cụ thé dùng dé điều chỉnh lettespace.

Tracking điều chỉnh khoảng cách giữa các ký tự trong một chuỗi hoặc khối văn

Hình 1 8 Khối văn bản có letterspacing quá rộng

VệtNam,tcthổishhoothèngngờythườngsẽđượcxủý/theo2céchrchônEphoặcđốt Tốtcảcócogirdctừđộchgiđếncntoèn,khóđếndễ,vôcơđếnhữucơ._ đều được

qwvềIngiồnxữi/:BÃIRÁC.Việcxửi/rúckhôngtrệtđổgôynênừhtợgthiếudốtđổchônlếpróc,khóiđốtcácbgrúcđộcẻhhưởngđếnmôitườngvùsứckhỏe,vùđặcbiệt

cócbõïócđóvễntồntghờgtrệurờmtrênTrdiĐết.

Hình 1 9 Khối văn bản có letterspacing ép chặt

Thông thường, mức letterspacing trung bình sé dé đọc và rõ ràng nhất, nhưng điềuquan trọng là letterspacing phải luôn nhất quán

Kerning: điều chỉnh khoảng cách giữa hai ký tự liền kề của chữ Kerning xảy rakhi letterspace giữa hai ký tự riêng biệt bị thay đôi Kerning cần thiết khi các letterformliền kề bị sắp xếp cạnh nhau không hợp ly, tạo ra một letterspace lớn hoặc nhỏ batthường Ở hình ví dụ bên dưới, các chữ cái ở phần After đã được di chuyên lại gần nhau hơn, lấn vào không gian của nhau Có điều này là do hình dạng đặc biệt của những chữcái đặc biệt này đã để lại một khoảng không gian âm lớn giữa chúng Kỹ thuật kerningkhiến các ký tự lấn vào không gian của nhau, đồng thời giúp việc đọc các ký tự khi ghép

thành từ hoàn chỉnh trở nên dễ dàng hơn.

Một leading (khoảng cách giữa các dòng chữ liên

tiếp) thích hợp đóng vai trò rat quan trọng đối cdi tính dễ đọc Khi các dòng xa nhau, người đọc có thể gặp khó khăn trong việc tìm kiếm dòng tiếp theo, đồng thời tốc độ đọc bị chậm lại.

Hình 1 11 Khéi văn bản với khoảng leading quá rộng

Khi các dòng quad gồn nhau, dòng kế tiếp sẽ cản

trở và khiến độc gid bị phân tan khỏi những thứ ma

họ đang cổ gắng đọc

Hình 1 12 Khối văn bản với khoảng leading được rút ngắn

° Khía cạnh sinh lý học của việc đọc:

Độ tập trung của mắt và sự dẫn mắt/sự điều hướng đọc

Hiểu được vấn đề sinh lý học trong cách chúng ta đọc có thể giúp tạo ra nhữngthiết kế phục vụ trải nghiệm công thái học của độc giả Mắt của chúng ta khi đọc văn bản

là một chuỗi trạng thái lướt mắt và tạm dừng Khi đọc qua các dòng của văn bản, chúng tanhận diện được những từ và letterform có hình dạng quen thuộc Sau đó, mắt sẽ nghỉ để

tập trung, trong khi não sẽ đồng hóa và biên dịch thông tin mới Mắt người thường có thêlướt nhanh qua đoạn văn bản dài 4 inch trước khi phải tập trung trở lại Thường mắt người

sẽ lướt đọc từ trái sang phải và từ trên xuống dưới Vì vậy, bất cứ hướng đọc hay layout nào đi ngược với lộ trình trên đều sẽ làm suy giảm tinh dé đọc.

Tính rõ ràng và tính đễ đọc đóng vai trò quan trọng trong việc truyền tải thôngđiệp Các chữ cái không rõ ràng có thể gây khó khăn trong việc nhận diện, điều này làmchậm quá trình đọc và gây ức chế Thiết kế phải thân thiện với người dùng dé có thé đọcđược, nghĩa là chúng phải dé định hướng và có xét đến trải nghiệm, thói quen đọc cũngnhư vấn đề sinh lý học của người dùng

1.2 Tong quan về thiết kế giao diện người dùng trên ứng dụng di động

1.2.1 Tổng quan về ứng dụng di động

Ứng dụng di động, hay còn được gọi là mobile app (app được viết tắt tiếng anh của

từ application), là các phần mềm được phát triển để chạy trên các thiết bị di động nhưđiện thoại di động, máy tính bảng, và thiết bị đeo thông minh [3]

Phân loại ứng dụng di động theo kỹ thuật phát triển:

* Native app: Là những ứng dụng được viết riêng cho một loại nền tảng.

Ưu điểm Nhược điểm

- _ Về mặt performance thì native app - Native app chỉ chạy trên một nền

chạy nhanh hơn mobile app tảng, không thé sử dụng lại trên các

nên tảng khác, điều này làm tăng chỉ

phí thực hiện.

\ - Viéc bảo tri hay nâng cap gây mat

- Vé tính nang, native app có kha năng Lee y Š ~ p8 ˆ

a thời gian Native app sẽ được cập

truy cập các phân cứng (như camera,

hat thu én và người di

GPS, thiét bi thu am ) ¬—._————phải tải xuống nhiều lần và cài đặt từ

các cửa hàng ứng dụng đề nhận

được các phiên bản cập nhật mới,

sửa lỗi hoặc thêm các tính năng mới

Hình 1 13 Native apps (Nguồn: amela.vn)

Web app: Web app hoạt động tương tự như native app nhưng được truy cập thông

qua trình duyệt web trên thiết bị di động của bạn

Được chạy trên bất kỳ điện thoại,

máy tính bảng với trình duyệt web

phù hợp Không cần cài đặt trên máy

Không chiếm dung lượng trên bộ nhớ

thiết bị, giúp việc bảo trì đễ dàng hơn

— chỉ cần đưa ban cập nhật trực tiếp

lên web Người dùng không cần tải

xuống bản cập nhật tại cửa hàng ứng

khác, có thể mang lại cho người

dùng những trải nghiệm khác nhau.

Luôn phải chạy online

WEB APPS

TECHNOLOGY USED

HTMLS5, CSS, JavaScript, Ruby, etc.

Web-based so Dependent ona

performs on all browser

devices

Needs an internet Easier to maintain connection

Users don’t run May not always integrate out of storage with device hardware

Hình 1 14 Web apps (Nguồn: amela.vn)

¢ Hybrid app: Kết hợp yếu tố Native va Web

- Uu điểm: Hybrid app có thể kết hợp điểm mạnh của ca native app va web app,

khai thác được trải nghiệm cao nhat của nên tảng.

- Nhược điểm: Hybird app có thể không đạt được tốc độ nhanh chóng, vốn là đặc

điểm nổi bật của native app

Certain features might

not be usable on devices

Hình 1 15 Hybrid apps (Nguồn: amela.vn)

Đặc trưng của ứng dụng di động:

Để thiết kế giao diện ứng dụng di động, người thiết kế cần có sự hiểu biết vềnhững đặc trưng và khả năng đáp ứng của thiết bị di động Ngày nay, công nghệ ngày càng phát triển, các thiết bị di động ra đời ngày càng hiện đại hơn, tính năng phong phú hơn và đáp ứng nhiều hơn mong muốn của người dùng Do vậy, người thiết kế cần phảilựa chọn thiết bị mục tiêu và khai thác triệt để khả năng đáp ứng của thiết bị đó

¢ - Kích thước màn hình linh hoạt:

Thiết bị di động với đặc điểm dé dàng mang theo nên kích thước của chúng đủ nhỏ.Điều này ảnh hưởng phan nào đến thiết kế Màn hình nhỏ sẽ làm giảm kha năng đọc của

người dùng, dobij gián đoạn khối lượng thông tin khi đi chuyển Vì vậy cần tối ưu lượng

thông tin, sắp xếp bô cục hợp lý.

Các yếu tố ảnh hưởng đến khả năng đọc của người dùng trên màn hình thiết bị nhỏ là:

Thị giác con người cho phép họ có khả năng đọc.

Kích thước nội dung hiển thị như văn bản, hình ảnh,

Số lượng ánh sáng tỏa ra từ bề mặt thiết bị (độ sáng)

¢ - Giới hạn năng lượng - pin

« C6 tích hợp cảm biến:

Các cảm biến trong điện thoại thông minh giúp chúng phục vụ nhiều hơn các tính

năng cho người dùng Một sô cảm biên phô biên ngày nay là: cảm biên ánh sáng, cảm biên định hướng, cảm biên chuyên động.

Cảm biến ánh sáng: được thực hiện dé mang lại một mức độ anh sáng phù hop

Điêu khiên hiên thị được tích hợp vào hệ điêu hành Điêu này rât quan trọng bởi nêu ảnh sang màn hình bị giảm có thê gây khó chịu cho người sử dụng, khó đọc nội dung và giảm nhận thức vê chat lượng màn hình.

Cảm biến định hướng: giúp người dùng có thé thay đổi định hướng thiết bị dé hiển

thị nội dung giúp dé đọc và thoải mái hon.

Cảm biến gia tốc: giúp phát hiện hướng và điều chỉnh màn hình phù hợp.

¢ Da phần có định vị: GPS là thiết bi dẫn đường phổ biến nhất trong nhiều thiết bị

« Co khả năng kết nối:

Mobile data: kết nối điện thoại sử dụng để gửi và nhận dữ liệu quan trọng qua

mạng không dây băng mạng điện thoại di động Van đê cân chú ý nhât đó là mobile data khiên người dùng tôn chi phi cao, hao tôn pin nhanh mà toc độ lại thâp so với các kết nôi khác.

Kết nối wifi: là kết nối điện thoại sử dụng để gửi và nhận dữ liệu qua một mạng

wifi Két nôi với một mang wifi có thê giúp giảm thiêu sử dung dit liệu di động của người dùng và kéo dai thời lượng pin của thiệt bị.

Bluetooth: cho phép người dùng trao đổi dit liệu giữa thiết bi di động với các thiết

bị phân cứng khác ở khoảng cách gân.

1.2.2 Tổng quan về thiết kế giao diện người dùng trên ứng dụng di động

Thiết kế giao diện người dùng (User Interface) là quá trình tạo ra giao diện trực

quan ma người dung sẽ tương tác khi sử dung một ứng dung, trang web, hoặc hệ thông.

Giao diện ứng dụng di động là tat cả những gi màn hình hién thị trên một thiết bi di

động Nó là nơi người dùng sử dụng đê tương tác với mọi thứ hiên thị trên màn hình băng các cách thao tác trên man hình cảm ứng.

Thiết kế giao diện người dùng trên ứng dụng di động là quá trình tạo ra và tổ chức

các yếu tố trực quan mà người dùng tương tác khi sử dụng ứng dụng trên thiết bị di động

như điện thoại thông minh hoặc máy tính bảng.

Những nguyên tắc khi thiết kế giao diện người dùng:

Các nguyên tắc thiết kế giao diện người dùng lấy cảm hứng từ các nguyên tắc hìnhthức trong nhận thức của con người, nhóm các yếu tố thiết kế thành các mẫu đơn giản màngười dùng có thê dễ dang làm theo dé đạt được mục tiêu của minh

5 nguyên tắc thiết kế giao diện người dùng trên ứng dụng di động thiết yếu:

- _ Hệ thống phân cấp:

Nguyên tắc phân cấp thông tin là phương pháp tổ chức và hiển thị thông tin saocho người dùng có thể dé dang tương tác và tiếp cận nội dung Hệ thống phân cap thôngtin thường sử dụng cấp độ khác nhau dé phân biệt độ quan trong của các mục thông tin,thường sử dụng kích thước, màu sắc, hoặc phông chữ đề làm nỗi bật Để tạo thứ sự phâncap rõ ràng, hãy sử dụng 2-3 kích thước kiểu chữ dé cho người dùng biết phần nội dung nào là quan trọng nhất hoặc ở cấp cao nhất trong kiến trúc thông tin nhỏ của trang Tỷ lệ cũng có thé giúp xác định hệ thống phân cấp trực quan, vì vậy hãy kết hợp nhiều tỷ lệ khác nhau cho các yếu tô thiết kế khác nhau của bạn.

¢ Su cân bằng:

Cân bang là nguyên tắc chi phối cách chúng ta phân b6 đồng đều các yếu tố củamột thiết kế Các thiết kế cân bang có xu hướng mang lại vẻ điềm tĩnh, ôn định và tựnhiên, trong khi các thiết kế mất cân bằng khiến chúng ta cảm thấy khó chịu

Cân bằng Không cân bằng

Hình 1 16 Vi dụ về sự sắp xếp cân bang và không cân bang

Các thiết kế cân bằng có vẻ ồn định, trong khi các thiết kế không cân bằng có vẻ thiếu bên vững và thiếu tự nhiên.

‹«ồ Ty lệ:

Tỷ lệ mô tả kích thước tương đối của các phần tử trong một thiết kế Bằng cách sửdụng ty lệ dé làm cho một phan tử lớn hơn các phan tử khác xuất hiện cùng với nó, điềunày giúp nhắn mạnh Không chỉ có thé làm nỗi bật một yếu tố theo cách này - mà còn cóthé sử dụng ty lệ để tạo cảm giác về chiều sâu (vì các vật thé ở gần có vẻ lớn hơn đối vớimắt người) Tỷ lệ phóng đại của hình ảnh cũng tạo thêm mức độ thú vị và kịch tính nhất

định cho chúng.

¢ Dinh luật Gestalt:

Gestalt đề cập đến xu hướng nhận thức tông thé của tat cả các bộ phận thay vi cácyếu tố riêng lẻ của chúng ta Mắt và não con người cảm nhận được một hình dạng thốngnhất theo một cách khác với cách chúng cảm nhận từng phan riêng lẻ của những hìnhdạng đó [4] Đặc biệt, chúng ta có xu hướng cảm nhận hình dạng tổng thé của một vật thé

trước khi cảm nhận các chỉ tiết (đường nét, họa tiết, ) của vật thê đó.

Định luật Gestalt gồm các nguyên tắc sau:

Nguyên tắc đồng bộ: Nguyên tắc này đề xuất rằng con người có xu hướng hiểu thế giới xung quanh dưới dạng tổ chức và đơn giản hóa, thay vì phức tạp.

Nguyên tắc gần kề: Nguyên tắc này mô tả cách con người có xu hướng nhóm cácphần gần nhau lại với nhau, và nó tạo ra cảm giác của một đối tượng hoặc nhóm

Nguyên tắc khép kín: Nguyên tắc này mô tả cách con người có xu hướng hoànthiện hình ảnh hoặc hình dạng, ngay cả khi một sỐ phần của nó bị che khuất hoặc thiếu

Nguyên tắc chính — phụ: Nguyên tắc này mô tả cách não bộ lọc thông tin thànhhình dang (figure) và nền (ground), giúp con người nhận biết đối tượng một cách rõ ràng

Nguyên tắc liên tục: Nguyên tắc này nói về việc con người có xu hướng kết nối cácyếu tô có liên kết với nhau thành một đường hoặc một dãy chuyền động liên tục

Today, 7 hours behind

Hình 1 17 Ung dung nguyên tắc twong phan trong việc xóa (Nguồn: interaction-design.org)

1.3 Ảnh hưởng của typography trong thiết kế giao diện người dùng

1.3.1 Typography ảnh hưởng đến khả năng đọc

Một trong những tác động chính của kiểu chữ trong thiết kế giao diện người dùng

là ảnh hưởng của nó đến khả năng đọc Khả năng đọc là mức độ dé dang mà người đọc cóthé hiểu được một văn bản viết

Một trong những điều đầu tiên cần xem xét là kích thước màn hình di động củathiết bi di động Vì màn hình trên thiết bị di động nhỏ hơn nên việc trình bày thông tin cóthể khó khăn hơn và yêu cầu thiết kế trải nghiệm người dùng tốt Do đó, việc chọn kích thước phông chữ phù hợp rất quan trọng vì nó ảnh hưởng đến không gian nó sẽ chiếmtrên màn hình thiết bị di động Một số lưu ý giúp tăng khả năng đọc trên ứng dụng di

động:

Kích thước chữ toi thiểu:

Về mặt kiểu chữ trên thiết bị đi động, kích thước thực sự quan trọng Một số người

có thể nghĩ rằng trên màn hình nhỏ, phông chữ nhỏ sẽ hoạt động tốt nhất Phông chữ nhỏtrên màn hình di động sáng có thé khiến mắt người dùng bi căng thang và dau dau Tấtnhiên, các thiết bị hiện đại cho phép thu phóng màn hình nhưng không phải lúc nào ngườidùng cũng thuận tiện khi phải tốn nhiều công sức không cần thiết Phông chữ trong giaodiện người dùng trên thiết bị di động phải đủ lớn để người dùng dễ đọc nhưng không quálớn dé lưu thứ bậc kiểu chữ

Theo tài liệu về hệ điều hành iOS của Apple và Android của Google, những hệđiều hành nổi tiếng và được tiêu chuẩn hóa nhất trong ngành, đưa ra kích thước chữ tốithiểu cho văn bản nội dung như sau: Theo Human Interface Guidelines của Apple, kíchthước tối thiêu cho văn bản là 17 pt Theo bộ Material Design của Google, kích thước tốithiểu cho văn bản là 16 pt Vẫn có thé sử dụng các kích thước nhỏ hon cho các chú thích.Tuy nhiên, nếu người dùng không thê đọc chúng, điều đó sẽ ảnh hưởng đến khả năng đọchiểu

Khuyến nghị: Không sử dụng cỡ chữ nhỏ hơn 16pt cho phần nội dung trong thiết

kế Kích thước phù hợp cho nội dung văn bản nằm trong khoảng từ 16 pt — 18 pt

Kích thước tiêu đề:

Trong thiết kế ứng dụng di động, tiêu đề phải được cân bằng hài hòa với các yếu tốthiết kế khác Yếu tố chính cần xem xét khi xác định kích thước tiêu dé là kích thước vănbản nội dung Tiêu đề phải dé phân biệt với các văn bản khác trong thiết kế và dé dàng

quét được.

Sự tương phản:

Độ tương phản giúp làm nổi bật các thành phần giao diện người dùng quan trọng cũng như đóng góp mức độ dé đọc của văn bản như mong muốn Độ tương phản có thé được tạo ra không chỉ thông qua màu sắc mà còn bằng kích thước phông chữ dé thiết lập

hệ thống phân cấp thị giác Vì vậy, cần đảm bảo răng văn bản được đặt trên hình ảnh có

đủ độ tương phản Thiết kế hai tùy chọn dé đặt văn bản trên nền sáng và tối.

Khoảng cách dòng:

So với màn hình máy tính, độ dài dòng trên thiết bị di động ít phức tap hơn Điều

mà người dùng gặp phải là mỏi mắt khi đọc văn bản dài hơn mức cần thiết Do đó, nên sử

dụng độ dai từ 50-75 ký tự Tuy nhiên, vì man hình di động nhỏ nên độ dài dòng không

thé được sử dụng rộng hơn, nên dùng khoảng từ 35 - 40 ký tự Do là ly do tại sao thànhphan văn bản nhiều dòng thường thấy trong ứng dụng dành cho thiết bị di động Nhờ đó,van đề mỏi mắt được loại bỏ Điều duy nhất cần can thận là đặt văn bản trong vùng an

toàn Dé dam bảo tính dé đọc, có thé cần chú ý đến khoảng cách giữa các chữ cái vì nóảnh hưởng đến độ dài dòng.

Việc lựa chọn kiểu chữ, cỡ chữ, khoảng cách dòng phi hợp dam bảo người dùng

dé đọc, hiểu nội dung hiển thị trên giao diện Kiểu chữ được thiết kế phù hợp sẽ cải thiện khả năng quét và hiểu thông tin nhanh chóng của người dùng, mang lại trải nghiệm người

dùng hiệu quả và thú vị hơn.

1.3.2 Typography là một loại công cụ giao tiếp trực quan giúp truyền tải nội dung

giao diện theo thứ bậc rõ ràng, thiết lập hệ thống phân cấp

Lựa chọn kiêu chữ cho giao diện đóng vai trò như một công cụ giao tiếp trực quan

Nó giúp người dùng tìm thấy thông tin họ cần một cách nhanh chóng Nó hướng dẫn đôimắt của họ khi họ điều hướng và tương tác với giao diện của bạn Bằng cách đó, bạn cóthé đảm bảo rằng nội dung quan trọng nhất sẽ nôi bật và hướng dẫn người dùng thực hiệnhành động một cách liền mạch [6]

Kiểu chữ hỗ trợ việc thiết lập hệ thống phân cấp trực quan, hướng dẫn sự chú ý củangười dùng va ưu tiên thông tin Bằng cách sử dụng các cỡ chữ, kiểu dáng và độ đậm nhạtkhác nhau, nhà thiết kế có thé nhắn mạnh các tiêu dé, tiêu đề phụ và các điểm chính quantrọng Cấu trúc phân cấp này giúp người dùng dễ dàng quét nội dung hơn và nhanh chóngtim thay những gi ho đang tìm kiếm

1.3.3 Typography ảnh hưởng đến khả năng nhận diện thương hiệu

Thương hiệu phải có phong cách kiêu chữ nhất quan Dé tạo ra hình ảnh thươnghiệu nhất quán, họ phải hiển thị các kiểu chữ được chỉ định ở mọi điểm của thiết kế Bởi

vì kiểu chữ là một phan của bộ nhận diện thương hiệu Trong thiết kế di động, phông chữ

và kiêu chữ tương tự cũng nên được sử dụng Một số lưu cho sự nhất quán: Không sửdụng quá nhiều kiểu chữ Sử dụng một hoặc hai kiểu chữ giúp thiết kế nhất quán và tối

giản.

Một chỉ tiết nhỏ có thé có tác động lớn; kiểu chữ có thé ảnh hưởng đến đối tượngmục tiêu, tông màu thương hiệu, độ tuổi và nhiều yếu tố khác Một thương hiệu nhắm đếnđối tượng trẻ hơn có thé chọn phông chữ hiện đại và độc đáo, trong khi một thương hiệutruyền thống hơn có thê chọn phông chữ cô điển và quen thuộc

1.4 Tiểu kết chương 1

Ở chương 1, tôi đã trình bày tổng quan về typography, tổng quan về thiết kế giaodiện người dùng trên ứng dụng di động và ảnh hưởng của typography trong thiết kế giao

diện người dùng trên ứng dụng di động.

Typography đóng một vai trò quan trọng và không thể phủ nhận trong thiết kế giao

diện ứng dụng di động Khả năng chọn lựa và sử dụng font chữ, kích thước, khoảng cách

giữa các phần tử văn bản không chỉ ảnh hưởng đến thẩm mỹ mà còn định hình trải

nghiệm người dùng Áp dụng nguyên tắc typography có thể mang lại những ảnh hưởngtích cực về mặt thị giác và tương tác Chúng giúp tạo ra một giao diện ứng dụng di động hài hòa, dễ đọc, và thậm chí là độc đáo, phản ánh đồng thời cảm nhận và giá tri của

CHƯƠNG 2 NGHIÊN CUU VE UNG DỤNG “GOM”

Qua quá trình tìm hiểu các lý thuyết ở chương 1, ở chương 2 này, tôi đi sâu hơn vào các vấn đề liên quan đến ứng dụng “GOM” Đầu tiên, tôi sẽ nghiên cứu về tình hìnhphân loại, thu gom rác thải tại Việt Nam, các ứng dụng đã có trên thị trường, đặc điểmngười dùng mục tiêu, từ đó đưa ra chân dung khách hàng kèm kiến trúc thông tin ứng

dụng.

2.1 Tổng quan về tình hình phân loại, thu gom rác thải tại Việt Nam

2.1.1 Đặc điểm, tình hình phân loại, thu gom rác thải tại Việt Nam

2.1.1a Thực trạng việc phân loại, thu gom rác thải hiện nay

- Bối cảnh: Với sự phát triển nhanh của xã hội hiện nay, chất thải được sinh ranhiều hơn Điều nay có nghĩa là một lượng lớn rác thải được tạo ra mỗi năm và sự tănglên của nó là không được mong đợi Phân loại và tái chế là điều cần thiết dé giảm nguồnchat thải Hầu hết các loại chất thải được tạo ra có thé được phân loại ngay tại nhà

- Hiện trạng: Theo số liệu thống kê của Bộ Tài nguyên và Môi trường, hiện nay,

lượng chat thai rắn sinh hoạt phat sinh trên cả nước là khoảng 60.000 tan/ngay Trong đó,khu vực đô thị 3 chiếm 60%; chỉ riêng 2 thành phố lớn là Hà Nội và TP H6 Chí Minh, mỗi ngày có từ 7.000 - 9.000 tan chat thải sinh hoạt Còn ở nhiều địa phương khác trên cảnước, lượng chat thải ran sinh hoạt phát sinh mỗi ngày cũng là 1 con số khá lớn, nhưngđáng chú ý hơn cả là tỷ lệ thu gom và tỷ lệ xử lý loại chất thải này vẫn chưa đạt 100%.Theo dự báo, đến năm 2025, tỷ lệ phát sinh chất thải rắn sinh hoạt tăng từ 10 - 16%/năm

Về van dé xử lý chat thải ran sinh hoạt, hiện nay, có trên 70% lượng chất thải được xử lýbằng phương thức chôn lap và chỉ có 15% trong đó được chôn lap hợp vệ sinh

2.1.1b Thực trạng việc xứ lý rác thải của người dân và chính quyền

Hiện nay phương pháp phố biến nhất mà nước ta sử dụng chủ yếu dé xử ly rác thải

vẫn là chôn lấp và đốt thủ công Cả nước hiện nay có hơn 660 bãi chôn lấp, nhưng trong

số đó chỉ có 120 bãi là hợp vệ sinh Điều này gây nên một mối lo ngại nghiêm trọng trong việc đối mặt với ô nhiễm môi trường.

Việt Nam hiện nay đang đặt ra mục tiêu xử lý rác thải đô thị vào năm 2025 đạt

90% và vào năm 2050 là 100% Đề đạt được mục tiêu này, đòi hỏi mỗi người dân phảichủ động trong vấn đề phân loại và vứt rác đúng nơi quy định, Nhà nước phải hoàn thiện

hệ thống pháp luật và đầu tư nghiên cứu nhiều hơn nữa về quy trình xử lý rác thải

Hình thức chôn lấp chất thải gây nguy hại không chỉ cho môi trường mà còn gâynguy hại cho cả tính mạng con người Chat thải hỗn hợp không được kiểm soát có thé làm

tinh trang ô nhiễm càng trở nên tram trong hơn Van dé rác thải là trách nhiệm chung của

mỗi người dân, cần có sự nỗ lực của các cá nhân dé quản ly rác thải đúng cách và tái chếrác thải Việc phân loại chất thải có thể cải thiện sự lưu thông của các chất thải và điều