7 luật để làm giao diện UI "tuyệt đỉnh" (Phần 5): Kỹ thuật pop và un-pop
UI
25
design
29
White

Vu Nhat Minh viết ngày 29/05/2017

Đây là phần 5 của một series chuyên về thiết kế UI. Bạn nên đọc các phần trước trước khi bắt đầu đọc phần này.

Luật số 5: Kỹ thuật pop và un-pop

Thiết kế chữ sao cho đẹp và dễ nhìn thì thường dùng những đặc tính tương phản, ví dụ như kích cỡ to đi cùng với kiểu dáng nhẹ nhàng.

Theo quan điểm của tôi thì thiết kế chữ là một trong những phần khó nhất của việc thiết kế UI. Để tạo hiệu ứng nổi bật cho chữ thì bạn có thể dùng những thuộc tính dưới đây

  • Kích cỡ (to hay nhỏ)
  • Màu sắc (màu nhiều tương phản hay ít tương phản, màu sáng hay màu tối)
  • Độ đậm của font (đậm hay mảnh)
  • Viết hoa (viết thường toàn bộ, VIẾT HOA TOÀN BỘ, Viết Hoa Chữ Cái Đầu )
  • Viết in nghiêng
  • Khoảng cách giữa các chữ
  • Margin (mặc dù đây không phải là thuộc tính của chữ, nhưng có thể dùng để gây ấn tượng nên để vào đây)

Có một vài phương pháp nữa để gây ấn tượng với người đọc, nhưng không hay được sử dụng và tôi cũng không thể khuyên bạn sử dụng như là:

  • Gạch chân. Chữ gạch chân ngày nay chỉ mang ý nghĩa là một link, và bạn không nên thể hiện một ý nghĩa khác nữa.
  • Chữ với màu nền. Không phổ biến nhưng trang web 37signals đã từng sử dụng một thời gian cho những link của họ
  • Chữ bị gạch ngang. Đừng dùng những thứ từ những năm 90s như thế!

Theo kinh nghiệm cá nhân của tôi thì, khi có một dòng chữ mà dường như không thể tìm ra cách thiết kế sao cho đúng đắn, thì thường không phải vì chưa thử viết hoa hoặc làm tối đi, mà là do chúng ta chưa tìm ra cách kết hợp cho những đặc tính tương phản với nhau.

Up-pop và down-pop

Bạn có thể chia tất cả các thể loại thiết kế chữ vào 2 nhóm

  • Thiết kế làm tăng tính hiện diện của chữ: To, đậm, viết hoa, v.v...
  • Thiết kế làm giảm tính hiện diện của chữ: Nhỏ, ít tương phản, ít margin, v.v...

Chúng ta sẽ gọi đó là "up-pop" và "down-pop", theo cách gọi ưa thích của giới designer. Chúng ta sẽ không gọi một cách nhàm chán kiểu như là "độ nặng về thị giác" :)

Material Design

Có rất nhiều đặc tính up-pop ở trong chữ "Material Design": cỡ lớn, độ tương phản caofont rất đậm.

Footer

Chữ ở dưới footer này thì ngược lại, cực kỳ down-pop: nhỏ, ít tương phảnfont rất mảnh.

Và bây giờ là phần quan trọng:

TIêu đề của page là phần duy nhất đi với toàn bộ các thuộc tính up-pop. Tất cả mọi thứ khác, cần cả up-pop và down-pop.

Nếu cần phải nhấn mạnh một thành phần nào đó trong trang web, hãy dùng cả up-pop và down-pop. Như thế sẽ ngăn nó trở nên quá nổi trội nhưng lại giữ được độ nhấn về thị giác.

Blu

Thiết kế này của trang web Blu Homes là cực kỳ hoàn hảo. Tiêu đề rất lớn, nhưng chữ cần nhấn mạnh thì được viết thường. Nếu lại dùng một thuộc tính up-pop để nhấn mạnh thì sẽ là quá nổi trội.

Blu

Những con số ở đây hướng mắt bạn trực tiếp vào màu sắc và các khoảng cách cân chỉnh. Nhưng hãy lưu ý là chúng cũng down-pop với một font rất mảnh và ít tương phản hơn màu đen.
Chữ bên dưới con số thì ngược lại, tuy nhỏmàu xám, nhưng lại được viết hoafont rất đậm.

Ở đây tất cả đều là nghệ thuật về sự cân bằng.

Contents Magazine

Contents Magazine là một case study rất tốt về up-pop và down-pop:

  • TIêu đề bài viết là thứ duy nhất không in nghiêng. Trong trường hợp này, Font đậm cùng với in thẳng là cách hiệu quả nhất để thu hút mắt nhìn của người đọc.
  • Tên tác giả được in đậm và trở nên nột bật hơn chữ "by" đằng trước.
  • Chữ "ALREADY OUT" trở nên nhỏ bé, tuy nhiên nó được viết hoa, khoảng cách giữa chữ được nới rộng cùng với margin hào phóng xung quanh. Bạn sẽ nhìn thấy nó vào đúng khoảnh khắc mắt bạn chạm đến nó.

Selected và hovered

Thiết kế chữ được chọn (selected) và chữ đang năm dưới con trỏ chuột (hovered) là bài học tiếp theo, và vì thế cũng khó hơn.

Thông thường thì thay đổi kích cỡ, viết hoa hoặc tăng độ đậm font sẽ thay đổi mất độ rộng của khoảng chứa chữ, và vì thế làm hỏng thiết kế. Như vậy những hiệu ứng có thể sử dụng còn lại là:

  • Màu sắc chữ
  • Màu nền
  • Bóng phủ
  • Gạch dưới
  • HIệu ứng (raising, lowering, v.v...)

Có một cách dễ làm và hiệu quả: đổi chữ màu trắng thành chữ có màu, hoặc đổi chữ có màu ngược trở lại màu trắng và làm tối nền xung quanh.

Selected and Hovered

Nhìn vào hình trên bạn sẽ thấy, phần được select đổi thành chữ trắng trên một nền tối hơn và trở nên rất tương phản.

Tôi sẽ nhắc lại với bạn một lần, thiết kế chữ là phần rất khó.

Cứ mỗi lần tôi nghĩ "Có khi cái chữ này không thể làm cho đẹp được" thì đó là tôi đã sai. Đơn giản là cần phải làm tốt hơn nữa, và cần phải thử nhiều thêm nữa.

Vì thế tôi có một lời khuyên dành cho bạn: nếu như chữ của bạn trông vẫn chưa được đẹp thì đừng lo lắng vội. Nó có thể trở nên đẹp nếu bạn làm tốt hơn nữa. Hãy tiếp tục thử và làm chính chúng ta giỏi lên trước hết...

... Phần sau: Chỉ dùng những font tốt ...

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Vu Nhat Minh

54 bài viết.
777 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
120 30
Nếu bạn thường vào trang mua sắm của amazon, chắc sẽ chẳng lạ gì với menu Shop by Department. Tốc độ hiển thị nội dung của menu là tức thì so với d...
Vu Nhat Minh viết gần 3 năm trước
120 30
White
93 4
Lời người dịch Người dịch là một developer , sau khi tìm đọc được bài viết này bằng bản gốc tiếng Anh đã cảm thấy như được "khai sáng" về khả năng...
Vu Nhat Minh viết 3 năm trước
93 4
White
62 5
Đây là phần cuối của một series chuyên về thiết kế UI. Bạn nên đọc (Link) trước khi bắt đầu đọc phần này. Luật số 7: "Ăn trộm" như là một nghệ sỹ...
Vu Nhat Minh viết gần 3 năm trước
62 5
Bài viết liên quan
White
62 5
Đây là phần cuối của một series chuyên về thiết kế UI. Bạn nên đọc (Link) trước khi bắt đầu đọc phần này. Luật số 7: "Ăn trộm" như là một nghệ sỹ...
Vu Nhat Minh viết gần 3 năm trước
62 5
White
9 1
Đón đọc những bài viết đặc sắc ở blog https://giaosucan.blogspot.com (Ảnh) Dựa trên một câu chuyện có thật, tuy nhiên tên nhân vật đã được thay đ...
Giaosucan viết hơn 1 năm trước
9 1
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
54 bài viết.
777 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!