Phân cấp thị giác typography trong UI | Typography hierarchy in UI Design

Tổng quan:

• Phương pháp nghiên cứu: từ kiến thức trên internet
• Mục đích nghiên cứu: thấy rõ tầm quan trọng của phân cấp thị giác Typography trong UI design
• Đối tượng hướng tới: Developer, UI designer, UX Designer, Product designer
• Thời gian nghiên cứu: 3 ngày
• Người thực hiện: Xang Chọng

-------------------------------------------------------------------------------------
Con người đọc gần như toàn thời gian, không chỉ ở những quyển sách hay tạp chí, mà còn thông qua hàng tấn thông tin trên Internet, hay trên những biển quảng cáo giăng khắp các con đường, các khu vực giao thông công cộng hoặc các cửa hàng mua sắm. Tuy nhiên, chỉ có một số ít “đọc giả” có thể thực sự hiểu được công sức và thời gian để tạo ra một dòng chữ là như thế nào. Khi chúng ta đọc một bản thảo nào đó một cách thoải mái và thư giãn, thì đó là nhờ công của designer. Việc sắp xếp các con chữ và chọn đúng kiểu font một cách thẩm mỹ là một trong những ưu tiên hàng đầu của các designer. Để tạo ra được một UI hiệu quả và một UX rõ ràng, hầu hết designer cần phải học một số điều cơ bản trong ngành khoa học về Typography. Và bài viết hôm nay sẽ thống kê những điều cơ bản đó, mà đối với bất kỳ một designer chuyên nghiệp cũng nên nắm rõ và áp dụng được trong công việc.

_Trích trong “ Typography in UI: Guide for Beginners”

Nguồn: linhtran201.wordpress.com​

Typography là gì?

Typography là từ ghép bởi "Typo" "và graphic" để mô tả nghệ thuật sắp đặt và kỹ thuật ghép chữ trong in ấn. Khái niệm về Typography đã có từ rất lâu với cách trình bày bản in của người châu Âu hay cách viết thư pháp của người Trung Hoa.

Về cơ bản Typography là sự kết hợp khéo léo nghệ thuật giữa typefaces, font size, line length, leading (line spacing), letter-spacing (tracking). Nhằm đem lại cho người xem cảm giác dễ đọc nhất, nổi bật nội dung, và truyền tải được ý đồ của người thiết kế tới người đọc.

Typography trong UI Design.
“Web Design is 95% Typography” - Oliver Reichenstein.

Cho thấy rằng typography trong thiết kế UI đóng góp 1 vai trò quan trọng để truyền đạt thông tin tới người dùng. Trong khi tối ưu hóa kiểu chữ bao gồm tối đa hóa khả năng đọc, khả năng truy cập và cân bằng đồ họa, phần lớn là về khả năng sử dụng. Khi xem xét tương tác của người dùng với một kiểu chữ trên màn hình, một nhà thiết kế buộc phải đối đầu với các yếu tố bổ sung như cân bằng, đặt ra, phân cấp và cấu trúc. Cuối cùng, mục tiêu là giảm và loại bỏ bất kỳ rào cản nào giữa người xem và giao diện.

Tobias Frere-Jones - nhà thiết kế nổi tiếng người Mỹ và người tạo ra font Gotham - lưu ý rằng: “Tất cả văn bản đều cần kiểu chữ dễ đọc. Nhưng đặc biệt là ở các giao diện, mắt chúng ta cần phông chữ hợp tác hơn là chống lại ”

Điều gì tạo nên một giao diện UI dễ đọc?

Phân cấp typography ( Typography hierarchy) tạo ra điều ấy, nó tạo ra sự phân cấp thị giác đáp ứng nhu cầu dễ đọc, scan thông tin một cách nhanh chóng, đâu là thông tin quan trọng đâu là key chính cần nắm bắt trong một giao diện người dùng. Vậy phân cấp thị giác là làm gì?

Cũng giống như các thành phần design khác, typography cũng nên được cấu trúc rõ ràng. Và Typographic Hierarchy là một hệ thống được dùng để tổ chức, sắp xếp nội dung văn bản một cách tốt nhất cho nhận thức của người dùng, trước hết thông qua việc thay đổi và kết hợp giữa các kiểu chữ và font chữ. Mục đích của nó là tạo ra sự tương phản giữa phần văn bản có ý nghĩa nhất, nổi bật nhất, cần được nhận ra trước tiên so với các thành phần thông thường khác. Sự tương phản này được tạo ra bởi việc thiết lập các thành phần của typography, bao gồm kiểu chữ, font, kích thước, màu sắc cũng như cách căn lề.

Typographic hierarchy là gì?


Sao chép nội dung là một phần quan trọng của bất kỳ thiết kế giao diện người dùng nào. Đó là lý do tại sao hệ thống phân cấp hình ảnh thường rất phụ thuộc vào kiểu chữ. Các chuyên gia đã quyết định nhấn mạnh tầm quan trọng của việc trình bày bản sao bằng cách tạo ra một hệ thống phân cấp hình ảnh riêng biệt được gọi là hệ thống phân cấp typographic.

Hệ thống này nhằm mục đích tổ chức nội dung giống nhau theo cách tốt nhất cho nhận thức của người dùng. Nhà thiết kế sửa đổi và kết hợp phông chữ để xây dựng sự tương phản giữa các yếu tố giống nhau có ý nghĩa và nổi bật nhất cần được chú ý đến thông tin văn bản đầu tiên và thông thường. Các phông chữ được sửa đổi bằng cách điều chỉnh kích thước, màu sắc và gia đình cũng như sự liên kết của chúng.

Typographic hierarchy được thể hiện với những kiểu văn bản cơ bản được dùng trong UI design. Đó là Tiêu đề chính, Tiêu đề phụ, nội dung, thành phần gọi ra sự kiện, chú thích, và những thứ khác nữa. Các thành phần văn bản này được chia thành những lớp riêng biệt trong design : Primary – Hạng 1, Secondary – Hạng 2 và Tertiary – Hạng 3.

Các thành phần thuộc Hạng 1 của nội dung văn bản bao gồm thành phần lớn nhất của văn bản, như là Tiêu đề chính. Nó có nhiệm vụ thu hút người dùng đến với sản phẩm. Hạng 2 bao gồm các thành phần của văn bản có thể dễ dàng scan được. Nó bao gồm các Tiêu đề phụ và chú thích, mà giúp cho người dùng có thể nhanh chóng xác định và điều hướng đến các nội dung trong văn bản. Và Hạng 3 bao gồm các thành phần như là nội dung văn bản cũng như các thành phần còn lại. Chúng thường được thể hiện dưới các dạng chữ bé hơn nhưng vẫn đủ để đọc một cách rõ ràng. Ba lớp Typography này hỗ trợ người dùng có thể tiếp thu nội dung vẵn bản một cách dần dần, từng bước một mà không cần tốn công chỉ dẫn bởi sản phẩm kỹ thuật số.

The primary level: Nó bao gồm các loại tiêu đề lớn. Cấp chính nhằm cung cấp cho người dùng thông tin cốt lõi cũng như thu hút sự chú ý của mọi người vào sản phẩm.

The secondary level: Đây là loại phần tử sao chép cần được quét dễ dàng. Chúng thường liên quan đến các tiêu đề phụ và phụ đề giúp người dùng nhanh chóng điều hướng qua nội dung.

The tertiary level: Nội dung văn bản và một số dữ liệu bổ sung sẽ tạo cấp độ ba. Các nhà thiết kế thường áp dụng loại tương đối nhỏ nhưng nó vẫn có thể đọc được đủ.

Vì nội dung bản sao thường là nguồn thông tin chính trong giao diện người dùng nên các nhà thiết kế cần trình bày dữ liệu dần dần. Bằng cách phân đoạn các phần tử sao chép vào các trình thiết kế cấp độ khác nhau giúp người dùng dễ dàng chuyển từ một bản sao này sang bản khác và nhận thông tin theo đúng thứ tự.

Một điều nữa cần lưu ý là trong khi tạo kiểu chữ cho các sản phẩm di động, các nhà thiết kế được khuyến nghị giữ số lượng các lớp trong vòng hai. Vấn đề là màn hình di động nhỏ không cung cấp đủ không gian cho ba cấp độ. Đó là lý do tại sao các yếu tố của một cấp độ thứ cấp như các phân nhóm bước sang một bên để làm cho giao diện người dùng di động trông rõ ràng.

Cách xây dựng hệ thống Typographic hierarchy.

Hãy tìm hiểu điều gì giúp các nhà thiết kế thiết lập phân cấp trực quan hiệu quả của các thành phần giao diện người dùng.

Kích thước

Một trong những cách phổ biến nhất để nhìn mọi thứ trực quan hơn đó là kích thước. Nó bắt nguồn từ tâm trí con người rằng những thứ to lớn bằng cách nào đó quan trọng hơn những cái nhỏ. Đó là lý do tại sao sự chú ý của người dùng tự động đi trước với những từ lớn hoặc hình ảnh lớn.

Nhà thiết kế cần phải phân biệt mức độ ý nghĩa cho từng yếu tố nội dung và dựa trên dữ liệu này biến đổi các thành phần thành lớn và nhỏ.

Màu


Màu sắc có tác động lớn đến nhận thức của người dùng, lý do tại sao nó trở thành một công cụ hiệu quả để tạo phân cấp hình ảnh.

Màu sắc có hệ thống phân cấp của riêng chúng được xác định bởi sức mạnh của ảnh hưởng lên tâm trí của người dùng. Có các màu đậm như đỏ, cam và đen có thể dễ dàng thu hút sự chú ý. Mặt khác, có màu sắc yếu hoặc mềm, như màu trắng và kem làm việc tốt hơn làm nền.

Sử dụng các thiết kế với màu sắc khác nhau có thể hỗ trợ một hệ thống phân cấp nhỏ của các phần tử giao diện người dùng. Ví dụ, các nút CTA có màu đậm sẽ chắc chắn là điều đầu tiên mà người dùng nhìn thấy nếu các phần tử giao diện người dùng khác được tạo ra trong một bảng màu mềm hơn.

Tương phản


Hệ thống phân cấp dựa trên độ tương phản. Một yếu tố tương phản với nhau và đó là cách người dùng có thể thấy sự khác biệt giữa các yếu tố nội dung. Độ tương phản có thể được tạo thông qua các khác biệt trực quan bao gồm kích thước, màu sắc và kiểu. Tuy nhiên, chúng tôi khuyên bạn nên giữ độ tương phản cân bằng sao cho một đối tượng không hoàn toàn che khuất những người khác.

Không gian âm


Có thể có nhiều thành phần trong giao diện người dùng và để làm cho chúng trở nên đáng chú ý cho mắt các nhà thiết kế, cần phải cung cấp cho họ một số không gian riêng tư. Không gian âm, hoặc khoảng trắng, là vùng giữa các phần tử trong một thành phần thiết kế. Một số nhà thiết kế thường không nghĩ về không gian màu trắng như là một thành phần của thiết kế vẫn còn các chuyên gia áp dụng nó như một công cụ hữu ích giúp xây dựng một thành phần thích hợp. Một lượng không gian âm đúng giữa các yếu tố sẽ giúp người dùng chú ý và cảm nhận từng người trong số họ.

Sự tiệm cận

Phân cấp hình ảnh được xây dựng dựa trên nguyên tắc Gestalt, do đó, nhà thiết kế chú ý sâu đến sự gần gũi của các yếu tố giao diện người dùng. Khi mọi người có xu hướng thống nhất các yếu tố hình ảnh thành các nhóm, các thành phần giao diện người dùng cần được đặt theo cách đó để chúng có thể được phân loại. Nếu một số yếu tố được đặt trong khoảng cách nhất định, người dùng sẽ tự động cảm nhận chúng như một nhóm. Nhà thiết kế có thể sử dụng khoảng cách gần như một công cụ giúp phân chia nội dung thành các danh mục phụ.

Lặp lại

Nếu mọi người nhận thấy rằng một số yếu tố trông giống nhau, họ có thể tự động hợp nhất chúng thành một nhóm. Đó là cách lặp lại hoạt động. Các nhà thiết kế lặp lại một số mẫu cho các đối tượng khác nhau có mục đích để người dùng có thể thống nhất chúng. Ví dụ: một trang web có số lượng bản sao nội dung tuyệt vời tại một trang có thể làm nổi bật các câu quan trọng nhất bằng một màu khác. Nhìn thấy các câu trong màu này, đôi mắt của chúng ta có thể đi theo từ điểm mấu chốt này đến điểm quan trọng khác.

Phân cấp hình ảnh là nền tảng của kiến trúc thông tin hiệu quả. Khi các yếu tố giao diện người dùng được cấu trúc và sắp xếp, mọi người thích sử dụng một sản phẩm và sẽ hiệu quả hơn trong việc giải quyết các vấn đề của họ. Hơn nữa, hệ thống phân cấp hình ảnh mạnh mẽ cải thiện hệ thống định vị vì mọi người có thể định hướng tốt hơn trong một sản phẩm.

Nghĩ cho người dùng


Chúng ta không chỉ thiết kế cho đẹp, chúng phải dùng được. Phông chữ bạn sẽ sử dụng cần phải linh hoạt. Phông chữ của bạn nên cung cấp nhiều độ “dày”, một loạt các ký hiệu đặc biệt và nó cần phải hiển thị rất tốt không chỉ trên võng mạc. Điều quan trọng là phải chú ý đến khía cạnh này để người dùng của bạn sẽ không bị thiếu hiểu biết của bạn. Typography tốt là "rõ ràng" cho người đọc typography xấu thì gây ức chế người đọc.

Hiểu được những gì làm cho các chữ cái có thể đọc được cho chúng ta cái nhìn tổng thể tốt hơn về những gì chúng ta nên tìm kiếm khi chọn một phông chữ cho giao diện người dùng của chúng ta.

Tính dễ đọc (Legibility)

Tính rõ ràng là thước đo mức độ dễ dàng để phân biệt một chữ cái với một chữ cái khác trong một kiểu chữ cụ thể. Đó là kiểu chữ nhỏ tập trung vào kiểu chữ, chữ cái và chi tiết. Đương nhiên, đây là một trong những yếu tố thiết yếu nhất. Không phải tất cả các kiểu chữ đều được tạo với tính dễ đọc như một chức năng thiết kế chính. Vấn đề phổ biến nhất là thiếu sự phân biệt giữa vốn I và chữ thường l. Bạn cần phải tránh loại phông chữ này vì mọi người sẽ gặp sự cố khi đọc chúng trên màn hình nhỏ.

X-height

95% các chữ cái chúng tôi đọc là chữ thường. Tỷ lệ chữ cái lớn hơn giữa chữ hoa và chữ thường có xu hướng dẫn đến một kiểu chữ dễ đọc hơn.

Counters

Chúng tôi cũng có khoảng trắng trong các chữ cái. Ví dụ: xem “o” “u” “d”. Những không gian này được gọi là counters và các chuyên gia về typographic tin rằng nó giúp chúng ta dễ dàng nhận ra các chữ cái.

Weight

Kiểu chữ mảnh hơn thường dễ đọc hơn kiểu chữ dày hơn. Nó liên quan đến “counter” và cho phép các hình dạng ký tự không được sửa đổi.

“Độ dày nét đặc trưng tốt nhất là khoảng 18% x-height.”

Wide proportion (Tỷ lệ rộng)

Chiều rộng của một ký tự liên quan đến chiều cao của nó được mô tả là tỷ lệ. Nói chung, bạn muốn có một chữ rộng hơn một chữ cái hẹp để nhận dạng chữ tốt hơn và nhờ đó dễ đọc hơn.

Giãn cách chữ (Letter spacing)

Không có cách nào tối ưu để tính toán khoảng cách chữ cái nhưng hầu hết kích thước văn bản càng lớn bạn càng có ít khoảng cách chữ cái. Kiểu chữ sẽ xuất hiện quá mở và bạn cần điều chỉnh khoảng cách theo cách thủ công. Đối với thiết kế giao diện người dùng, nó thường áp dụng cho tiêu đề.

Khả năng đọc (Readability)

Khả năng đọc là về trải nghiệm đọc tổng thể. Chúng tôi có thể dễ dàng scan bố cục văn bản, phân biệt tiêu đề, phân nhóm, đoạn và khối. Đó là kiểu chữ vĩ mô, giúp tạo ra văn bản hấp dẫn hơn để làm cho nó trở nên kích thích đọc. Nó thực sự là một nghệ thuật tương phản, màu sắc, kích thước, thành phần và các chi tiết nhỏ dẫn đến trải nghiệm đọc tốt hơn.

Serif vs Sans Serif


Lịch sử cho chúng ta biết rằng serifs dễ đọc hơn. Chúng được sử dụng trong in ấn trong một thời gian dài và chúng thực sự cải thiện trải nghiệm đọc cho các khối văn bản lớn. Serif cho phép mắt chảy dễ dàng hơn trên văn bản.

Câu chuyện khác trên web và thiết bị di động. Có một số sans-serifs có thể đọc được và trạng thái hiện tại của thiết kế trực quan thích dạng chữ đơn giản hơn. Trên web và đặc biệt trên thiết bị di động, chúng tôi thấy nhiều sans-serif hơn. Hơn nữa màn hình không phải là giấy và thông thường chúng tôi không đọc các văn bản dài trên web. Đặc biệt là trong các ứng dụng.


Tất cả phụ thuộc vào dự án của bạn và cách người dùng sẽ sử dụng nội dung của bạn. Ví dụ trên Medium, chúng tôi dùng serif bởi vì hầu hết bạn sẽ đọc một cái gì đó lâu hơn. Đó là một cách tiếp cận thiết kế tốt.

Line height

Tôi khuyên bạn nên sử dụng tỷ lệ vàng.

Nhân kích thước chữ của bạn với 1.618 và bạn sẽ nhận được chiều cao dòng hoàn hảo.

Tính toán tại đây - http://jsbin.com/todidu/1/

Nếu bạn có nhiều kinh nghiệm hơn thì bạn có thể điều chỉnh thủ công kết quả này. Tất nhiên, có những trường hợp ngoại lệ của quy tắc này và bạn luôn có thể phá vỡ quy tắc này nếu cần thiết.


Chiều rộng khối văn bản

Các khối văn bản quá rộng sẽ khiến đôi mắt của chúng ta gặp khó khăn khi tìm dòng văn bản tiếp theo. Nếu các đường quá hẹp, mắt sẽ cần phải nhảy từ dòng này sang hàng khác để thường xuyên phá vỡ nhịp đọc.

Tâm trí tiềm thức của chúng ta được tràn đầy sinh lực khi nhảy lên dòng tiếp theo (miễn là nó không thường xuyên như vậy).

Để tiếp thêm sinh lực cho độc giả của bạn và giữ chân họ, dòng văn bản của bạn phải có từ 50 đến 75 ký tự.


Phân cách

Cách tốt để chia nội dung thành các phần là sử dụng dấu phân cách. Phổ biến nhất là dùng dòng kẻ. Đó là công cụ tinh tế nhưng vẫn đóng một vai trò lớn trong khả năng đọc.

Một cách khác là sử dụng các thẻ phổ biến ngay bây giờ. Chúng thực sự tốt khi nội dung bên trong không liên quan. Tuyệt vời cho ngón tay cái di động và lớn nhưng cũng cải thiện khả năng quét bố cục của chúng tôi.


Tổng kết
Typography hierarchy mang lại một trải nghiệm đọc tốt hơn cho người dùng trên các sản phẩm digital, UI design. Để làm tốt được điều này và giữ chân độc giả cần phải có sự nghiên cứu sâu sắc đầy sự thấu cảm và áp dụng thuần thục, linh hoạt các quy tắc về typography cũng như hierarchy trong thiết kế.
--------------------------------------------------------------------------------------

Nguồn tham khảo:

• https://techtalk.vn/typography-trong-ui-tu-chua-biet-den-hieu-ro.html
• https://linhtran201.wordpress.com/2017/06/10/phan-cap-thi-giac-trong-thiet-ke/
• https://blog.prototypr.io/how-to-use-typography-in-ui-design-ce045fa4ff2e
• https://www.mockplus.com/blog/post/ui-visual-hierarchy
• https://uxplanet.org/visual-hierarchy-effective-ui-content-organization-4a11a244b9e3
• https://www.coderex.co/8-pro-typography-tips-ui-designers/
• https://www.awwwards.com/improving-ui-design-through-better-typography.html
• https://blog.prototypr.io/how-to-use-typography-in-ui-design-ce045fa4ff2e

Tác giả: Xang Chọng​