Những hình ảnh chấm là một xu hướng mới trong Thiết kế Web?


8

Gần đây tôi đã nhận thấy rằng một số trang web tôi truy cập thường xuyên đang áp dụng một xu hướng mới và kỳ lạ trong Thiết kế Web: "các hình ảnh chấm". Không chắc chắn để gọi nó là gì. Có vẻ như một mẫu các chấm được đặt cách đều đặn được xếp một cách có chủ ý lên trên tất cả các hình thu nhỏ, hoặc đôi khi đó là một mẫu lưới ánh sáng thay vì các chấm, nhưng giao diện cuối thì tương tự nhau. Nó trông giống như một bức tranh hoà sắc phần nào.

Cá nhân tôi thấy hiệu ứng khủng khiếp và lúc đầu tôi nghĩ rằng kết xuất hình ảnh trình duyệt của tôi bị lỗi, nhưng tôi đã thử 3 trình duyệt khác nhau và tôi vẫn có thể thấy mô hình. Hình như nó đã được dự định.

Trên thực tế, một trong những trang web đã từng làm điều đó đã quay trở lại với hình ảnh thông thường. Đó là một trang web báo chí và tôi nghi ngờ họ nhận được một loạt các cuộc gọi hỏi tại sao các bức ảnh của họ bị rối tung và đảo ngược quyết định sau một vài tháng.

Có ai nghe hoặc thấy điều này trước đây?

Liên kết ví dụ: http://www.linkedin.com/today/se/editorspicks


1
làm thế nào về một số ví dụ?
Dan Hanly

Xin lỗi tôi có ý định đăng một, tôi chỉ cập nhật câu hỏi của tôi.
md1337

3
Không, đó không phải là một xu hướng mới.
DA01

1
Đáng lưu ý rằng nó có thể gây ra hiệu ứng moire gây mất tập trung khi hình ảnh được thu nhỏ, ví dụ như trên trình duyệt điện thoại thông minh.
e100

1
Tôi không thấy nó ...
Alex

Câu trả lời:


13

Trước đây, tôi đã thấy hiệu ứng này được sử dụng để tăng cường tính năng của hình ảnh. Liên kết bạn đã đăng dường như đang làm điều đó một cách không cần thiết.

Xem http://demo.grandpixels.com/?theme=linguini

Văn bản trên hình ảnh thanh trượt chính thực sự bật vì lớp phủ kiểu lưới / chấm làm tối và làm mờ hình ảnh một chút, làm cho văn bản màu trắng dường như thậm chí còn trắng và rõ ràng hơn.

Các hình ảnh trên liên kết của tôi trông rất tuyệt và hình ảnh lớp phủ phục vụ mục đích khá rõ ràng và đó là để tăng cường thông điệp của văn bản; một cái gì đó nó làm khá tốt.

nhập mô tả hình ảnh ở đây

Không có lớp phủ lưới, văn bản màu trắng sẽ hòa vào phô mai phía sau.
Họ cần một phong cách sẽ hoạt động cho bất kỳ hình ảnh nào phía sau, sáng hay tối và để văn bản không bị mất tác động khi hiển thị trên bất kỳ hình nền nào.

Ví dụ Linkedin của bạn cho thấy nó không nên được sử dụng.
Thường xuyên hơn không, Thiết kế đồ họa là một môn khoa học hơn là một nghệ thuật và các hiệu ứng như thế này không nên được sử dụng vì "chúng trông đẹp", chúng nên được sử dụng vì mục đích rõ ràng đã được xác định cho việc sử dụng và nó được sử dụng là hợp lý trong bối cảnh của trang.


Mẹo tuyệt vời về cách lớp phủ lưới giúp văn bản nổi bật so với hình ảnh.
jhocking

Tôi có thể thấy việc sử dụng trong các trường hợp hạn chế như trong ví dụ của bạn. Nếu không, nó chỉ là một mánh lới quảng cáo. Tôi thực sự tò mò khi tôi bắt đầu thấy điều này trên các trang web ngày càng nhiều gần đây và tôi nghĩ rằng có một số loại xu hướng xây dựng. Hy vọng rằng nó sẽ chết đi nhanh chóng. Là một lưu ý phụ thân thiện Tôi thấy việc triển khai kỹ thuật của bạn không tối ưu, nó khá chậm vì bạn sử dụng nền 2x2 lặp đi lặp lại và nó gây ra nhiều căng thẳng cho trình duyệt để hiển thị. Tôi sẽ tăng kích thước lớp phủ đáng kể và bạn sẽ thấy sự cải thiện rất lớn trong phản hồi cuộn trang.
md1337

Chúc mừng. Tuy nhiên, nó không phải của tôi, tôi chỉ tìm thấy nó trên web;)
Dan Hanly

5

Lớp phủ mẫu là một công cụ thiết kế hữu ích và nó có thể phục vụ một vài mục đích. Như đã đề cập trước đây, nó có thể giúp phân tách trực quan các yếu tố đồ họa trên trang, nhưng nó cũng giúp ẩn các tạo phẩm nén không hoàn hảo / jpeg trong các hình ảnh độ phân giải thấp hơn được phủ ngoài để lấp đầy màn hình HD (1920 x 1080).

Đôi khi tôi sẽ sử dụng một lớp phủ mẫu để thống nhất sự xuất hiện của một bộ sưu tập hình ảnh. Nếu tôi có 6 hình ảnh được chụp thực sự tốt và 3 hình ảnh không tốt lắm, việc đặt một lớp phủ mô hình lên chúng sẽ giúp chúng vượt ra ngoài và làm cho quá trình chuyển đổi giữa hình ảnh tốt và xấu trở nên kém ấn tượng.

Dưới đây là một ví dụ mà tôi nghĩ rằng lớp phủ mô hình hoạt động khá tốt mặc dù tôi cá rằng bạn sẽ có một thời gian khó khăn để thuyết phục các nhiếp ảnh gia ban đầu rằng đó là một cải tiến. :) http://goo.gl/d0OYOO


2

Hiệu quả thực sự đến từ những ngày đầu tối ưu hóa web.

Hiệu ứng chấm chấm sẽ được áp dụng cho các hình ảnh được nén nhiều đến mức chúng bắt đầu tạo tác. "Lưới chấm" sẽ ẩn các tạo tác này và làm cho hình ảnh dường như ít bị nén hơn.

Sau đó nó lan truyền như một hiệu ứng bình thường, và như Daniel nói, nó có thể tạo hoặc phá vỡ một hình ảnh. Nếu nó được sử dụng đúng (như với hầu hết các hiệu ứng khác), bạn có thể nhận được kết quả tuyệt vời.


1

Tôi nghĩ trong trường hợp ví dụ của bạn, nó đã được thực hiện để che khuất các hình ảnh một chút.

Tôi cũng nghĩ rằng đó là một sự trở lại với phong cách trước đây.


1

Lý do là để che giấu độ phân giải thấp của hình ảnh. Sử dụng hình ảnh có độ phân giải thấp có thể cải thiện thời gian tải trang web và khiến Google hài lòng. Vì vậy, từ góc độ SEO, xu hướng của nó.


0

Tôi không thể biết đó có phải là xu hướng hay không. Nhưng nếu nó - và giải thích của tôi phù hợp với hiệu ứng idended (đề cập đến ví dụ Pick Linkedin biên tập viên của bạn), tôi nghĩ rằng nó là một khái niệm thú vị mà chỉ có thể giữ một số trọng lượng, không chỉ là lông tơ.

Rất có thể, điều này có thể là một chút căng thẳng, nhưng đối với tôi, có vẻ như những gì họ có thể đang cố gắng đạt được là để báo hiệu rằng hình ảnh này dẫn đến nội dung / bài viết nằm ở nơi khác (ví dụ như bên ngoài trang web; ). Gần như thể bạn đang 'nhìn trộm' qua một cửa sổ nhỏ, đến một nơi khác - thêm độ sâu (một lớp khác), từ quan điểm khả dụng có thể thực sự chứng minh tiềm năng trong những bối cảnh nhất định.

Tôi sẽ thừa nhận tôi không chắc chắn về việc thực hiện trong ví dụ bạn đã đưa ra; hiệu ứng không hoạt động tối ưu trên một nửa hình ảnh (vấn đề chính là khái niệm này không thể hiện tốt như nhau đối với hình ảnh không phải là ảnh).

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.