11 kiểu ảo ảnh thị giác trong thiết kế trực quan

Trong những năm với cương vị là nhà phong cách thiết kế mẫu sản phẩm, đã nhiều lần tôi ngỡ ngàng khi phải thao tác với những hình ảnh khiến tôi cảm thấy 😲 😕 😳 😡 😱

Tôi viết bài báo này nhằm giúp bạn hiểu ra những lí do tại sao những thứ thường ngày này có thể khiến bạn bối rối. Bạn có thể không nhận ra điều này ngay từ đầu, nhưng rất nhiều những kĩ thuật mà bạn tình cờ sử dụng khi làm interface, logo hay những minh họa đều là các hiệu ứng ảo ảnh thị giác.

Thôi không nói vòng vo nữa, dưới đây là 11 kiểu ảo ảnh thị giác mà bạn hoàn toàn có thể liên tục gặp phải khi làm một nhà phong cách thiết kế trực quan .

1. Ảo ảnh tam giác chia hai

Bắt lấy 1 điểm, điểm nào cũng được, tôi thách bạn đó .

Căn chỉnh hình tam giác dựa vào trọng tâm

Hình ảnh hoàn toàn có thể đánh lừa bạn, đặt biệt là những hình ảnh có hình dạng phức tạp và không phù hợp. Không phải toàn bộ những hình ảnh chung một bộ đều có tính đối xứng, độ px hoàn hảo nhất hay duy trì đồng điệu 1 tỉ lệ. Một số hình ảnh cần phải được chỉnh sửa trực tiếp, đặc biệt quan trọng là nút “ play ” đáng sợ !
Việc đặt một hình tam giác vào một khung hình chứa cạnh thẳng hoặc cong hoàn toàn có thể làm cho nó trở nên không được thuận mắt. Lý do là vì có một loại hiệu ứng mang tên Ảo ảnh tam giác chia hai. Tâm của khối tam giác được thống kê giám sát dựa vào khung bọc tối thiểu. Cho nên nếu bạn định đặt một dấu chấm ngay tại trung điểm đường cao của một tam giác đều, thì nó sẽ trông giống như được đặt ngay phía trên của trung điểm đường cao .

Phiên bản nào tam giác đặt ở chính giữa theo toán học?

Có 2 thuyết lý giải cho loại ảo giác mê hoặc này :

  • Tỉ lệ không cân bằng.

Ảo ảnh chứa những điểm làm ngày càng tăng kích cỡ trông thấy của những vật thể lớn, ví dụ như tam giác đều hoàn toàn có thể được coi như là hình chiếu phẳng của một con đường, đỉnh chóp của nó là phần đường dài vô tận và phần đáy giống như phần đường gần tất cả chúng ta nhất .

  • Trọng tâm/tâm của hình.

Nếu một người quan sát được nhu yếu tìm điểm chính giữa, thì anh ta sẽ tìm trọng tâm để làm thế nào phân tách phần trên và phần dưới bằng nhau. Trọng tâm của một tam giác đều nằm ngay bên dưới điểm chính giữa, và vật chứng cho thấy những người quan sát thường đưa ra những điểm sao cho thật cân đối giữa hai điểm đó .
Để cho tam giác nằm ngay chính giữa trong một khung hình chứa, bạn cần phải tìm ra trọng tâm của tam giác bằng cách tìm giao điểm của những đường cấu thành bởi đỉnh của tam giác và trung điểm cạnh đối lập. Dưới đây là công thức bạn hoàn toàn có thể sử dụng :

Công thức tìm trọng tâm của tam giác

À mà tôi chỉ đùa thôi, tôi viết bài này đâu phải để chỉ cho những bạn những công thức hình học đâu 💥 ( nhưng công thức vẫn đúng đấy nhé ) .
Trọng tâm hoàn toàn có thể được tính bằng 1/3 khoảng cách từ cạnh đến đỉnh đối lập. Công thức này cũng hoàn toàn có thể vận dụng trong nhiều hình học khác .

2. Ảo ảnh ngang – dọc

Nó có phải là hình chữ nhật không ? Hay là một đường phẳng ? Không … Nó là hình vuông vắn đấy ? !

Ảo ảnh Vertical Horizontal

Hình vuông là một khối quan trọng trong bất kỳ hệ thống thiết kế nào, như thẻ Material Design, bài đăng trên Facebook, bài Pinterest và những bức ảnh Dribbble .
Sau khi sử dụng ứng dụng Sketch để chỉnh sửa hình vuông vắn, bạn hoàn toàn có thể phải kiểm tra lại xem nó có đều hay không. Nếu bạn nhìn kĩ hơn, những cạnh đứng ( vertical ) có vẻ như dài hơn những cạnh ngang ( horizontal ). Cứ như thể hình vuông vắn này trở thành một hình chữ nhật vậy ! Nhưng thật ra, nó là một hình vuông vắn 1 : 1 tuyệt vời. Đây được coi là Ảo ảnh ngang – dọc .

Hình ảnh trong bài đăng Facebook là hình vuông 1:1

Điều mê hoặc ở đây là những người đến từ những nền văn hóa truyền thống khác nhau cũng như giới tính khác nhau sẽ nhìn ảo ảnh này theo những cách khác nhau. Những người sống ở những thành thị sẽ có xu thế chịu tác động ảnh hưởng nhiều hơn là những sống ở vùng nông thôn. Bởi vì những người ở nông thôn thường sống trong những ngôi nhà hình tròn trụ .

3. Ảo ảnh Mach bands

Nếu một cái bóng ảo đổ trên một mặt phẳng, nó có gây ra ảo ảnh không ?

Ảo ảnh Mach bands

Đăt những hình có cùng màu gần nhau là một xu thế phổ cập trong suốt kỉ nguyên phong cách thiết kế phẳng. Nếu nhìn kĩ hơn, bạn sẽ nhận ra cái bóng ảo giữa hai đường viền của mỗi dãy màu tương phản. Ảo ảnh này được gọi là Ảo ảnh Mach bands. Thật sự hình ảnh không được thêm bất kỳ cái bóng gì, nó chỉ là cách mà mắt tất cả chúng ta nhìn thấy mà thôi !

Bóng xuất hiện giữa những đường viền của mỗi hàng

Lời lý giải cho sự Open của hiệu ứng này là do sự ức chế bên – lateral inhibition, nghĩa là những vùng màu tối sẽ tối hơn và những vùng màu sáng trở nên sáng hơn .
Mặc dù hiệu ứng này Open không nhiều trong giới phong cách thiết kế hình ảnh, để vật chứng sự tác động ảnh hưởng của nó, Mach bands hoàn toàn có thể mang lại “ ứng dụng tốt ” so với bác sĩ nha khoa. Chụp X-quang cho răng hoàn toàn có thể tạo ra hình ảnh trắng đen để sử dụng cho việc nghiên cứu và phân tích những tín hiệu đau răng không bình thường. Mach bands hoàn toàn có thể được dùng để đưa ra những chẩn đoán sơ bộ nếu chưa có chuẩn đoán chính thức .

4. Ảo ảnh Hering

Nó có thật đấy ! ! !

Ảo ảnh Hering

Đã khi nào bạn phát hiện một logo với những đường kẻ mỏng mảnh hay một ảnh nền chứa nhiều những chấm nhỏ li ti hoạt động khi bạn kéo lên kéo xuống hay chưa ? Hay bạn đã xem một đoạn video trên TV hiển thị những đường kẻ lượn sóng ? Nếu có thì đó là do một hiệu ứng có tên là Moiré, đó là khi hai kiểu lưới hòa vào nhau tạo ra những hoạt động ảo khi chúng chuyển dời. Trong trường hợp này, hai kiểu lưới là những hình ảnh và màn hình hiển thị sẽ thay đổi liên tục để tạo ra ảo ảnh .

Lăn chuột lên và xuống để xem hiệu ứng

Thật sự nó là một hiệu ứng tuyệt vời, mặt dù thực chất Moiré không phải là một ảo ảnh, nó chỉ là hiệu ứng giao thoa. Ví dụ logo của Sonos sử dụng phối hợp kiểu Moiré, ảo ảnh Hering và ảo ảnh hoạt động. Kĩ thuật này khá thông dụng trong hội đồng Op Art .

5. Hermann Grid

Xuất hiện hay biến mất ? ? ?

Hermann Grid

Ảo ảnh lưới Hermann khá thông dụng và có thế tìm thấy trong những hình có bố cục tổng quan chứa lưới những hình vuông vắn được đặt lên một khung nền tương phản. Nhìn trực diện vào bất kể hình vuông vắn nào cũng sẽ tạo ra những đốm màu tại phần giao nhau của những hình vuông vắn. Nhưng khi nhìn vào phần giao nhau đó thì những đốm màu sẽ biến mất .

Các đốm màu xuất hiện khi bạn nhìn thẳng vào các hình vuông

Lý do cho hiệu ứng này là do sự ức chế bên. Nói một cách đơn thuần, tất cả chúng ta hoàn toàn có thể hiểu là một nơron kích thích sẽ làm giảm hoạt động giải trí của những nơron lân cận .

6. Ảo ảnh tương phản đồng bộ 

Hai phần hình vuông vắn bị tách rời này là cùng màu phải không ? Hmm …

Ảo ảnh tương phản đồng bộ

Đặt hai vật thể có cùng sắc tố lên hai phần nền tương phản nhau có thế khiến cho chúng trở nên khác màu nhau. Hiện tượng này được gọi là Ảo ảnh tương phản đồng nhất. Trong giới phong cách thiết kế hình ảnh, hiệu ứng này sẽ khác nhau tùy vào mỗi người .

Màu chữ ở hai bên là hoàn toàn giống nhau nhưng nhìn bằng mắt thì ta không thấy như vậy

Thật không may là không có một giả thuyết chắn chắn nào lý giải cho việc tại sao ảo ảnh này lại Open, nhưng có rất nhiều bài điều tra và nghiên cứu suy đoán về việc này. Sự ức chế bên – nền tảng lý giải cho Hermann Grid và Mach bands – hoàn toàn có thể được xem là một lí do .

7. Ảo ảnh Munker-White

Tôi có nhìn nhầm ? 👀

Ảo ảnh Munker-White

Ảo ảnh này không rõ ràng lắm, nhưng rất mê hoặc ! Bạn hãy nhìn vào ảnh động phía trên, khối màu bên trái có vẻ như sáng hơn khối màu bên phải. Bật mí nhé, thật ra hai khối màu này có cùng độ sáng đấy. 😲

Lí do để lý giải loại ảo ảnh này là … bạn đã đoán được rồi đấy, chính là sự ức chế bên .

8. Ảo ảnh Water Colour

Sự đánh lừa dựa trên độ tương phản !

Ảo ảnh Water Colour

Có những lúc tôi đóng khung một hình ảnh và sau đó tự hỏi mình rằng, “ Tôi đã đổi màu nền khi nào vậy ? ”. Nếu bạn nhìn kĩ hơn, bạn sẽ thấy vùng màu nhạt sẽ sáng hơn so với màu của khung viền. Bạn hoàn toàn có thể quá bất ngờ khi biết rằng vùng sáng hơn đó thật ra là màu trắng !
Hiện tượng này, được biết với cái tên Ảo ảnh Water colour, dựa vào sự tích hợp giữa sự chói màu và độ tương phản của những đường mức được xếp theo thứ tự để tạo ra hiệu ứng lan tỏa .

Vùng màu trắng bên trong cái nút dường như sáng hơn so với màu của đường viền

Tôi phải thừa nhận rằng loại ảo ảnh này khiến tôi lúng túng đôi lần đến nỗi mà tôi phải lấy bảng màu ra để so sánh .

9. Ảo ảnh Jastrow

Kích thước có phải là yếu tố ?

Ảo ảnh Jastrow

Khi vẽ hoặc phong cách thiết kế một logo, bất kể nó là dạng hình hay chữ thì đều cần có những kích cỡ lớn nhỏ khác nhau. Loại ảo ảnh này Open khi ta thao tác với những hình ảnh có đường cong. Hai vật thể trông như không cùng kích cỡ với nhau nhưng khi đặt gần lại, thì chúng lại có cùng một kích cỡ ! Thật điên rồ ha ?

Ảo ảnh này được tìm thấy trong quá trình thiết kế, khi một phần đường cong trông như nhỏ hơn so với phần còn lại.

Điều này sao hoàn toàn có thể xảy ra được cơ chứ ? À thì đây được gọi là Ảo ảnh Jastrow và không có bất kể một định nghĩa nào cho việc tất cả chúng ta nhìn hai đường cong cùng kích cỡ lại hóa ra khác nhau. Lời lý giải là bộ não tất cả chúng ta sẽ trở nên “ lúng túng ” khi nhìn thấy những đường cong trong những kích cỡ khác nhau. Nói cách khác, phần đường cong ngắn sẽ khiến cho phần đường cong dài trông dài hơn, và ngược lại, phần dài khiến phần ngắn trông ngắn hơn nữa .

10. Ảo ảnh Cornsweet

Nhìn thấy sai sai sao đó .

Ảo ảnh Cornsweet

Cùng với ảo ảnh tương phản đồng điệu và ảo ảnh Mach Bands, ảo ảnh Cornsweet vận dụng đặc thù màu nóng lạnh và đường chính giữa để khiến cho một phần của bức hình trông có vẻ như tối màu hơn phần còn lại. Nhưng thật ra, hai phần đó cùng màu ! Bạn hoàn toàn có thể thấy rằng hai phần này sẽ có màu giống nhau nếu được đặt song song .

Mỗi hình kim cương đều có cùng màu nhưng chúng trông như tối dần (nhìn từ đỉnh xuống tới đáy)

Loại ảo ảnh này tạo ra một hiệu ứng tương tự như như hai ảo ảnh vừa nêu trên nhưng thật ra chúng khác nhau ở hai điều sau đây :

  • Đối với ví dụ của ảo ảnh Mach bands, hiệu ứng này chỉ được nhìn thấy ở khu vực xung quanh phần viền của mỗi hình. Còn đối với ảo ảnh Cornsweet, ta sẽ thấy nó ảnh hưởng lên toàn bộ hình.
  • Đối với ảo ảnh Cornsweet, phần sáng màu hơn sẽ trông có vẻ sáng hơn và phần tối sẽ tối hơn. Đây là sự đối lập của các hiệu ứng tương phản thông thường.

11. Ảo ảnh Muller-Lyer

Typo-loco !

Vượt qua khỏi sự nhận thức thị giác

Typographers sẽ hiểu rằng để vẽ thủ công bằng tay một font chữ cần dựa vào trực giác hơn là tư duy logic. Việc đo đạc và giám sát mỗi chữ cái dựa vào số đo chiều cao của chúng hoàn toàn có thể khiến cho hàng loạt dòng chữ trở nên không đều nếu nhìn bằng mắt thường. Một điều thường thấy trong nghệ thuật và thẩm mỹ Typography là tính vượt quá khuôn khổ – overshooting. Nói cho dễ hiểu, thì overshooting là một quy trình chỉnh sửa lại mỗi kí tự để tạo ra sự cân đối khi nhìn bằng mắt thường .

Nếu không sử dụng kĩ thuật overshooting, chữ ‘e’ trong Linkedin và chữ ‘z’ trong Amazon sẽ trông như không thuận mắt lắm.

Nhìn vào những logo nổi tiếng phía trên, một vài kí tự không nằm ngay ngắn theo đường chuẩn. Những typographers phải dùng mắt thường để điều chỉnh mỗi cặp chữ để đạt được kết quả tối ưu.

Nhưng tại sao chúng ta lại cần “overshoot” trong typography?

Lý do mà overshooting cần được chăm sóc là do một loại ảo ảnh thị giác mang tên ảo ảnh Muller-Lyer. Hiện tượng này nói rằng việc đặt một hình chữ V ở cuối mỗi phần hoàn toàn có thể làm cho phần đó trông như ngắn hơn hoặc dài ra tùy theo hướng đặt chữ V. Loại ảo ảnh cổ xưa này chứng tỏ được sự bất tuyệt đối của trực giác của con người. Tuyệt vời chứ ? ? ?

Nguồn: Balraj Chana – 11 Optical Illusions Found in Visual Design

Leave a Comment

Your email address will not be published. Required fields are marked *