Nghiên Cứu Về Typography Trong Thiết Kế Giao Diện Người Dùng

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

Chuyên ngành

Thiết kế giao diện

Người đăng

Ẩn danh

Thể loại

Đồ án tốt nghiệp

2023

86
2
0

Phí lưu trữ

30 Point

Mục lục chi tiết

LỜI CAM ĐOAN

LỜI CẢM ƠN

1. CHƯƠNG 1: TỔNG QUAN VỀ TYPOGRAPHY VÀ 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.2. Các nguyên tắc cơ bản của typography

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

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

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

1.4.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

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

1.5. Tiểu kết chương 1

2. CHƯƠNG 2: NGHIÊN CỨU VỀ ỨNG DỤNG “GOM”

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.2. Nghiên cứu các ứng dụng đã có trên thị trường

2.3. Nghiên cứu về ứng dụng “GOM”

2.3.1. Giới thiệu về ứng dụng

2.3.2. Xác định người dùng mục tiêu của ứng dụng

2.3.3. Danh sách chức năng

2.3.4. Kiến trúc thông tin

2.3.5. Luồng người dùng

2.4. Tiểu kết chương 2

3. CHƯƠNG 3: THIẾT KẾ GIAO DIỆN ỨNG DỤNG DI ĐỘNG GOM

3.1. Thiết kế wireframe

3.1.1. Logo hoàn thiện

3.1.2. Quy chuẩn logo

3.1.3. Khoảng vào nhấn

3.1.4. Logo trên các nền màu

3.1.5. UD Style được

3.1.6. Hệ thống Web

3.1.7. Thiết kế giao diện trực quan

3.1.8. Tiểu kết chương 3

DANH MỤC TÀI LIỆU THAM KHẢO

Tóm tắt

I. Tổng Quan Về Nghiên Cứu Typography Trong Thiết Kế Giao Diện Ứng Dụng Di Động

Nghiên cứu về typography trong thiết kế giao diện ứng dụng di động là một lĩnh vực quan trọng, ảnh hưởng đến trải nghiệm người dùng. Typography không chỉ là việc chọn kiểu chữ mà còn là cách sắp xếp và trình bày thông tin. Việc áp dụng đúng typography giúp tăng cường khả năng đọc và hiểu nội dung, từ đó nâng cao trải nghiệm người dùng. Trong bối cảnh công nghệ số phát triển mạnh mẽ, việc nghiên cứu và ứng dụng typography trong thiết kế giao diện trở nên cần thiết hơn bao giờ hết.

1.1. Khái Niệm Về Typography Và Vai Trò Trong Thiết Kế

Khái niệm typography được hiểu là nghệ thuật và kỹ thuật sắp xếp chữ. Typography đóng vai trò quan trọng trong việc tạo ra sự hấp dẫn cho giao diện người dùng. Nó giúp truyền tải thông điệp một cách rõ ràng và hiệu quả, từ đó nâng cao trải nghiệm người dùng.

1.2. Lịch Sử Phát Triển Typography Trong Thiết Kế

Lịch sử typography bắt đầu từ thế kỷ 11 với sự phát minh của chữ khắc. Qua nhiều thế kỷ, typography đã phát triển mạnh mẽ, từ chữ khắc gỗ đến các kiểu chữ hiện đại. Sự phát triển này đã tạo ra nhiều phong cách chữ khác nhau, phục vụ cho nhu cầu truyền thông và thiết kế.

II. Vấn Đề Và Thách Thức Trong Typography Ứng Dụng Di Động

Mặc dù typography có vai trò quan trọng, nhưng vẫn tồn tại nhiều thách thức trong việc áp dụng nó vào thiết kế giao diện ứng dụng di động. Các vấn đề như độ phân giải màn hình, kích thước chữ và khoảng cách giữa các ký tự có thể ảnh hưởng đến khả năng đọc. Việc lựa chọn kiểu chữ phù hợp cũng là một thách thức lớn, đặc biệt khi phải đảm bảo tính thẩm mỹ và khả năng tương tác.

2.1. Độ Phân Giải Màn Hình Và Ảnh Hưởng Đến Typography

Độ phân giải màn hình ảnh hưởng trực tiếp đến cách mà typography được hiển thị. Các thiết bị với độ phân giải thấp có thể làm giảm chất lượng hiển thị của chữ, gây khó khăn cho người dùng trong việc đọc nội dung.

2.2. Kích Thước Chữ Và Tính Dễ Đọc

Kích thước chữ là yếu tố quan trọng trong typography. Chữ quá nhỏ có thể khiến người dùng khó đọc, trong khi chữ quá lớn có thể làm mất cân đối giao diện. Việc tìm ra kích thước chữ tối ưu là một thách thức lớn trong thiết kế.

III. Phương Pháp Tối Ưu Hóa Typography Trong Thiết Kế Giao Diện

Để tối ưu hóa typography trong thiết kế giao diện ứng dụng di động, cần áp dụng một số phương pháp hiệu quả. Việc lựa chọn kiểu chữ phù hợp, điều chỉnh khoảng cách giữa các ký tự và sử dụng màu sắc hợp lý là những yếu tố quan trọng. Ngoài ra, việc thử nghiệm và thu thập phản hồi từ người dùng cũng giúp cải thiện thiết kế.

3.1. Lựa Chọn Kiểu Chữ Phù Hợp

Lựa chọn kiểu chữ phù hợp là bước đầu tiên trong việc tối ưu hóa typography. Kiểu chữ cần phải dễ đọc và phù hợp với nội dung của ứng dụng. Các kiểu chữ sans-serif thường được ưa chuộng trong thiết kế ứng dụng di động.

3.2. Điều Chỉnh Khoảng Cách Giữa Các Ký Tự

Khoảng cách giữa các ký tự (letter-spacing) có thể ảnh hưởng đến khả năng đọc. Việc điều chỉnh khoảng cách này giúp tạo ra sự thoải mái cho người đọc, đồng thời làm cho giao diện trở nên hài hòa hơn.

IV. Ứng Dụng Thực Tiễn Của Typography Trong Thiết Kế Giao Diện Ứng Dụng GOM

Ứng dụng GOM là một ví dụ điển hình cho việc áp dụng typography trong thiết kế giao diện. GOM không chỉ tập trung vào việc phân loại rác thải mà còn chú trọng đến trải nghiệm người dùng thông qua việc sử dụng typography hiệu quả. Giao diện của GOM được thiết kế để dễ dàng sử dụng, với các thông điệp rõ ràng và hấp dẫn.

4.1. Thiết Kế Giao Diện Thân Thiện Với Người Dùng

Giao diện của GOM được thiết kế với mục tiêu tạo ra trải nghiệm thân thiện cho người dùng. Typography được sử dụng để làm nổi bật các thông tin quan trọng, giúp người dùng dễ dàng tiếp cận và hiểu nội dung.

4.2. Tăng Cường Tương Tác Thông Qua Typography

Việc sử dụng typography hợp lý không chỉ giúp truyền tải thông điệp mà còn tăng cường sự tương tác của người dùng với ứng dụng. Các nút bấm và thông báo được thiết kế rõ ràng, dễ nhận diện, từ đó khuyến khích người dùng tham gia vào quá trình phân loại rác.

V. Kết Luận Về Tương Lai Của Typography Trong Thiết Kế Giao Diện

Tương lai của typography trong thiết kế giao diện ứng dụng di động hứa hẹn sẽ tiếp tục phát triển mạnh mẽ. Với sự tiến bộ của công nghệ, các nhà thiết kế sẽ có nhiều công cụ và phương pháp mới để tối ưu hóa typography. Việc nghiên cứu và áp dụng typography sẽ không chỉ giúp cải thiện trải nghiệm người dùng mà còn góp phần vào việc nâng cao hiệu quả truyền thông.

5.1. Xu Hướng Mới Trong Typography

Xu hướng mới trong typography bao gồm việc sử dụng các kiểu chữ động và tương tác. Điều này không chỉ tạo ra sự mới mẻ mà còn giúp người dùng cảm thấy thú vị hơn khi sử dụng ứng dụng.

5.2. Tác Động Của Công Nghệ Đến Typography

Công nghệ sẽ tiếp tục ảnh hưởng đến cách mà typography được áp dụng trong thiết kế. Các công cụ thiết kế mới sẽ giúp các nhà thiết kế dễ dàng hơn trong việc tạo ra các kiểu chữ độc đáo và hấp dẫn.

11/07/2025

Trích đoạn nội dung tài liệu

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 Tổng quan về typography 1.1 Lược sử hình thành và khái niệm về typography 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.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ất hiện vào khoảng thế kỷ 11. Bi Sheng (990 — 1051), một người Trung Quốc, đã phát minh 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ều biế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 ấn nhiề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ác nhà 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 được thiế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 typography hiệ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 tay củ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ùng hiện nay như Garamond, Bodoni. đã được thiết kế cách đây hàng trăm năm, và bản thân cá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.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ình thứ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.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.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ự). Character chí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ên tính nhận diện cho 1 font chữ. Typography character cau thành bởi một số thành phan co bản.

Dưới đây là các thành phần cơ bản của một character. DOUBLE STORY EAR Gi 2 ARM 1 LINK BOWL CROSSBAR AXIS Q Loop ASCENDER SHOULDER EYE 1 CHIN ° SPINE SERIF STEM SPUR FINIAL SWASH APERTURE DOT COUNTER CROTCH © R FLAG TAIL OVERSHOOT ]ARC OF STEM LEG | 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ột mẫ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ét thườ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 A CAP LINE MEAN LINE CAP HEIGHT X-HEIGHT BASELINE _—. DESCENDER LINE DESCENT LEADING BASELINE 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ước point (PostScript Point Scale) được sửa đổi từ thang đo kích thước point của Mỹ, bao gồm các đơn vị đo: inch, pica va point. Inch là đơn vị đo tiêu chuan ở Mỹ. Pica thường được dù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.2 mm) 6 picas = 72 points = 1 inch (2.5 cm) — 1POINT 1 point = 0.35 mm) 12 points = 1 pica = 0.2 mm) —Ì 72 POINTS 72 points = 6 picas = 1 inch (2. 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ích thướ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ái hoa 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àn hì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ả.

Nội dung được bảo vệ bản quyền — Tải xuống đầy đủ

Tài liệu "Nghiên Cứu Typography Trong Thiết Kế Giao Diện Ứng Dụng Di Động" cung cấp cái nhìn sâu sắc về vai trò của typography trong thiết kế giao diện ứng dụng di động. Nó nhấn mạnh tầm quan trọng của việc lựa chọn kiểu chữ, kích thước và khoảng cách giữa các ký tự để tạo ra trải nghiệm người dùng tốt hơn. Bằng cách áp dụng các nguyên tắc typography hợp lý, các nhà thiết kế có thể cải thiện khả năng đọc và tương tác của người dùng, từ đó nâng cao hiệu suất của ứng dụng.

Để mở rộng kiến thức của bạn về thiết kế web và ứng dụng, bạn có thể tham khảo thêm tài liệu Báo cáo môn nhập môn công nghệ phần mềm đề tài xây dựng website nghe nhạc trực tuyến, nơi bạn sẽ tìm thấy hướng dẫn chi tiết về xây dựng website. Ngoài ra, tài liệu Xây dựng website kinh doanh thời trang sử dụng reactjs và spring boot cũng sẽ giúp bạn hiểu rõ hơn về việc áp dụng công nghệ hiện đại trong thiết kế web. Cuối cùng, tài liệu Đồ án cuối kỳ phát triển web kinh doanh đề tài xây dựng website bán thực phẩm sẽ cung cấp cho bạn những giải pháp kinh doanh hiệu quả thông qua thiết kế web. Những tài liệu này sẽ là cơ hội tuyệt vời để bạn khám phá sâu hơn về lĩnh vực thiết kế và phát triển ứng dụng.