Избегание иллюстраций сетки Херманна

Я новичок в UX, и я пытаюсь создать страницу миниатюр изображений. Я придумал это:

ow!

Проблема заключается в том, что этот макет создает иллюстрацию Герман Грид . При взгляде на сетку большинство людей видят мерцающие черные точки в углах.

Может кто-нибудь предложить, как я могу изменить свой макет, чтобы избежать создания этой иллюзии?

141 голос | спросил dB' 12 MaramWed, 12 Mar 2014 07:12:29 +04002014-03-12T07:12:29+04:0007 2014, 07:12:29

5 ответов


138

Иллюзия вызвана яркими областями, возбуждающими нейроны сетчатки, в то время как окружающие темные области одновременно блокируют их, вызывая кровотечение (боковое торможение). Таким образом, идея состоит в том, чтобы уменьшить яркие области в углах, чтобы эти нейроны не возбуждались так сильно. Сближая изображения друг с другом, вы можете уменьшить иллюзию и использовать экранную недвижимость более эффективно.

closer_images

Вы можете уменьшить яркие области, удалив округленные углы на пересечениях. Это практически устраняет иллюзию.

without_corners

Вы можете экстраполировать из основной неврологической теории, чтобы создать другие возможные решения.

Уменьшение контраста за счет того, что фон темнее избегает противоречивого кровотечения между этими нейронами, что также устраняет иллюзию. (Извините за плохое редактирование в этом)

darker_background ​​

Вы также можете перемещать изображения достаточно далеко друг от друга, чтобы выйти из диапазона бокового торможения.

out_of_range

Конечно, не каждое решение будет хорошим UX.

ответил Matthew Piziak 12 MarpmWed, 12 Mar 2014 17:11:45 +04002014-03-12T17:11:45+04:0005 2014, 17:11:45
18

Как объясняет Франческа, проблема возникает, когда в сетке есть сильные контрастные цвета. В вашем случае: темные изображения и белый фон.

Эта страница описывает как проблема может быть решена при использовании таблиц стилей:

  

«Избегайте использования темных и тяжелых сеток».

Другое сообщение Я нашел обсуждение этого (и другая) оптическая иллюзия (ы) утверждает один и тот же ответ:

  

Иллюзия сетки Германа не будет работать, если есть низкий контраст   между цветами, участвующими в сетке. Как побочный элемент, вот почему   Excel имеет светло-голубые ячейки с белым фоном: нет   достаточно контраста между голубым и белым цветами   путайте визуальную систему, поэтому иллюзия не появляется.

Попробуйте рассмотреть другой цвет фона, например, мягкий серый или синий, чтобы облегчить контраст. Ослабление цвета на изображениях также поможет вам, если это приемлемое решение.

ответил GWv 12 MarpmWed, 12 Mar 2014 13:15:01 +04002014-03-12T13:15:01+04:0001 2014, 13:15:01
11

Контраст между белым фоном и темными краями является значительным фактором. Если вы не можете сами изменить цвета, попробуйте установить радиальный градиент прозрачности на каждом миниатюре, который исчезает до полной прозрачности на краю, вместо того, чтобы иметь жесткий край. См. эту страницу на градиентах в css для получения идей о том, как добиться этого эффекта.

ответил Franchesca 12 MarpmWed, 12 Mar 2014 13:00:06 +04002014-03-12T13:00:06+04:0001 2014, 13:00:06
5

В соответствии со статьей: Как иллюзия решетки Германа влияет на то, что Пользователи смотрят

  

Иллюзия сетки Германна возникает, когда сетка изображений имеет равную   поля более 2 пикселей. Пользователи будут видеть серые призрачные капли на   пересечения сетки. Но когда они сосредотачиваются на   пересечения, они ничего не видят.

В нем перечислены 4 способа избежать иллюзии в сетках изображений:

  1. 2 пиксельных поля - поля сетки 2 пикселя или менее
  2. Ragged marginins - выравнивание изображений разных размеров.
  3. Расширенные границы полей - увеличение полей строк выше, чем у столбцов.
  4. Цветной фон - установка сетки на цветной фон

См. статью для иллюстрации.

ответил Fluke 12 J0000006Europe/Moscow 2014, 15:37:31
2

Используйте другой цвет фона вместо белого, как черный b /c, кажется мне, что эффект, который вы описываете, будет менее распространен в темноте до светлого миража. Если изображения темного цвета, оставьте их с помощью световой границы (и отличным эффектом, как описано в некоторых других ответах).

ответил stackuser83 14 MarpmFri, 14 Mar 2014 20:12:13 +04002014-03-14T20:12:13+04:0008 2014, 20:12:13

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132