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

Đâ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.

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

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

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.

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

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

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.

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

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

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.

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.

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)

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

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.

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