7 luật để làm giao diện UI "tuyệt đỉnh" (Phần 4): Phương pháp nhấn mạnh chữ trên nền ảnh
UI
25
design
27
White

Vu Nhat Minh viết ngày 25/11/2015

Đây là phần 4 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ố 4: Nhấn mạnh chữ trên nền ảnh

Chỉ có một số phương pháp chắc chắn và hiệu quả để tạo hiệu ứng đẹp khi nhấn mạnh chữ trên nền ảnh. Dưới đây là 5 phương pháp, và "bonus" thêm 1 phương pháp đặc biệt nữa.

Nếu bạn muốn trở thành một UI designer giỏi, bạn sẽ phải học cách thể hiện chữ trên nền một tấm ảnh sao cho nổi bật và bắt mắt với người đọc. Dưới đây là những thao tác mà mọi designer giỏi đều làm rất tốt nhưng mọi designer dở đều không biết làm, hoặc đơn giản là không làm. Nếu bạn là trường hợp sau, thì bạn sẽ hiểu ra rất nhiều điều sau khi đọc bài này :).

Phương pháp 0: Đặt chữ trực tiếp lên trên ảnh

Tôi đã định không đưa phương pháp này vào đây. Tuy nhiên về lý thuyết thì vẫn có thể đặt chữ thẳng trực tiếp vào ảnh và có một giao diện tốt.

Otter

Cách làm này có một số vấn đề cần phải chú ý:

  • Ảnh cần phải là ảnh tối, và không được có nhiều điểm tương phản sáng tối.
  • Chữ cần phải là màu trắng. Tôi thách bạn tìm ra dù chỉ một ví dụ nào mà chữ không phài màu trắng đấy :)
  • Test giao diện của bạn trên tất cả mọi kích cỡ màn hình và cửa sổ để chắc chắn user sẽ cảm thấy dễ đọc.

Bạn hiểu và đã làm theo hết những điều bên trên rồi? Bây giờ thì không thay đổi chữ hoặc nền ảnh nữa. Và bạn sẽ có một giao diện tốt.

Bản thân tôi không nghĩ là tôi sẽ dùng chữ trực tiếp trên nền ảnh thế này cho các sản phẩm chuyên nghiệp của mình. Phương pháp này có thể tạo ra những hiệu ứng thực sự đẹp, nhưng hãy cẩn thận với các hiệu ứng đó. Dưới đây là Aquatilis, một đại diện cực kỳ ấn tượng cho phương pháp này.

Aquatilis
... click vào ảnh để đến trang chủ của Aquatilis ...

Phương pháp 1: Overlay cả tấm ảnh

Có lẽ đây sẽ là cách dễ nhất để đặt chữ trên nền ảnh. Nếu bức ảnh gốc của bạn không đủ tối, bạn có thể overlay toàn bộ tấm ảnh với một lớp trong suốt ngả màu đen. Đây là một ảnh overlay màu đen nằm trong xu hướng design gần đây
overlay
.. bộ lọc màu đen với độ trong suốt 35% ..

Nếu bạn dùng Firefox, hãy thử mở Firebug lên và bỏ hiệu ứng overlay đi, bạn sẽ thấy ảnh gốc rất sáng và có quá nhiều tương phản, không phù hợp để đặt chữ lên trên. Nhưng với bộ lọc overlay thì chẳng còn vấn đề nào nữa! Phương pháp này cũng có hiệu quả rất rõ với những ảnh đại diện hoặc ảnh nhỏ hơn

Thumbnails
... ảnh của website charity:water ...

Và trong khi overlay theo màu đen là đơn giản và dễ áp dụng nhất, bạn cũng có thể nâng cao hiệu ứng bằng cách overlay theo các màu sắc khác.
Colors

Phương pháp 2: Text-in-a-box

Cách này cực kỳ đơn giản và hiệu quả. Hãy tạo một hộp (box) nửa trong suốt màu đen, hình chữ nhật và đặt vào đó chữ màu trắng.
Nếu độ trong suốt của hộp là vừa đủ thì chữ của bạn sẽ dễ nhìn trên mọi ảnh nền bên dưới

Text-in-a-box
... mẫu Iphone concept của Miguel Oliva Márquez ...

hoặc dùng màu sắc, những hãy thật khôn ngoan và cẩn thận.

Text-in-a-color-box
... overlay màu hồng, mẫu của Mark Conlan ...

Phương pháp 3: Làm mờ ảnh

Một cách khác hiệu quả đến đáng ngạc nhiên là tạo ra chữ vào phẩn ảnh đã làm mờ. Chúng ta hãy xem cách mà Snapguide sử dụng cả overlay và làm mờ như thế nào.Hãy để ý rằng phần được làm mờ cũng tối hơn các phần khác.

Blur

IOS7 sử dụng phương pháp làm mờ này rất thường xuyên ...

IOS

... và Window 7 cũng không phải là ngoại lệ.

Window7

Bạn cũng có thể dùng vị trí out-focus có sẵn của tấm ảnh để đặt chữ, nhưng hãy cẩn thận vì làm thế sẽ nguy hiểm khi tấm ảnh được thay đổi, và chữ của bạn không còn nằm trên phần out-focus của tấm ảnh mới nữa.

Teehan + Lax

Google Wallet

Phương pháp 4: Floor Fade

Floor Fade có nghĩa là làm cho một phẩn ảnh ở phía dưới đáy ẩn đi (fade) và đặt chữ nền trắng lên trên đó. Đây là một cách làm quá tài tình, và tôi không biết có website nào làm như thế cho đến khi nhìn thấy trên Medium.

Floor Fade

Nếu chú ý quan sát kể cả khi đã để tâm đặc biệt, bạn sẽ thấy những Medium Collection được thể hiện bằng cách đặt chữ trắng trên nền một tấm ảnh như bình thường. Nhưng thực tế thì không đơn giản như thế. Có một lớp gradient từ giữa tấm ảnh (màu đen với độ trong là 0%) cho đến cuối tấm ảnh (màu đen với độ trong khoảng 20%).

Khó để nhận ra, nhưng lớp gradient đã được đặt ở đó một cách tinh tế và tăng hiệu quả về độ dễ nhìn một cách đáng kinh ngạc.

Cũng hãy để ý là ảnh của Medium Collection còn sử dụng một ít bóng phủ đối với chữ trắng để tăng độ dễ nhìn hơn nữa. Designer của Medium quả nhiên thực sự rất giỏi.
HIệu quả của hiệu ứng trên là Medium có thể tạo ra một kết quả dễ nhìn với bất cứ chữ nào và với bất cứ ảnh nào .

Còn một điểm nữa là, tại sao ảnh lại ẩn với màu đen ở dưới đáy ? Bạn còn nhớ Luật số 1: Ánh sáng đến từ bầu trời không? Để giao diện xuất hiện một cách tự nhiên nhất đối với mắt của con người, ảnh được tạo ra cùng với cảm giác được chiếu sáng từ phía trên, và vì thế tối dần ở phía đáy, giống như mọi vật chúng ta nhìn thấy trong cuộc sống thường ngày.

Cuối cùng , hãy xem The Floor Blur : kết hợp cả hiệu ứng làm mờ ảnh (phương pháp 3) và Floor Fade (phương pháp 4)

The Floor Blur

Phương pháp bonus: lưới cản sáng

Làm thế nào mà Elastica blog có một tiêu đề chữ trên nền các tấm ảnh mà

  • Không tối
  • Có khá nhiều tương phản

Phương pháp này hơi khó để nhận ra. Hãy xem ảnh dưới đây
Scrim1
Scrim2

Câu trả lời là: lưới cản sáng

Lưới cản sáng (scrim) là một dụng cụ dùng trong nghệ thuật nhiếp ảnh để làm ánh sáng trở nên mềm hơn. Bây giờ lưới cản sáng cũng trở thành một kỹ thuật áp dụng trong design để làm mềm một tấm ảnh, khiến cho chữ trên đó dễ nhìn hơn. Bạn hãy phóng to vào cách bức ảnh trên Elastica blog , bạn sẽ thấy điều gì đang xảy ra.
Zoom

Có một đường viền của một hộp xung quanh tiêu đề "145,000 Salesforce Users Come out to Celebrate…". Hộp này dễ thấy vì có màu sắc tương phản với màu xanh đậm của nền đằng sau, nơi mà có khá nhiều tương phản.

Đây có lẽ là cách khôn ngoan nhất tôi từng thấy và cũng chưa từng thấy ở một nơi nào khác. Hãy memo lại và có thể sẽ đến lúc bạn cần đến nó.

.. Phần sau: Kỹ thuật pop và un-pop...

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.
674 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
113 27
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 2 năm trước
113 27
White
86 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 hơn 2 năm trước
86 4
White
55 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 hơn 2 năm trước
55 5
Bài viết liên quan
White
55 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 hơn 2 năm trước
55 5
White
14 2
Lập trình viên “trình cao” thì nên đọc sách gì? Phần 1 Đầu tiên, xin hứng chịu gạch đá từ nhiều bạn rằng: developer thì cần gì phải đọc sách, code...
Huy Hoàng Phạm viết gần 2 năm trước
14 2
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


White
{{userFollowed ? 'Following' : 'Follow'}}
54 bài viết.
674 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á!