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

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

Note: Это третий пост в серии, посвященной принципам проектирования.Вы найдете первые два сообщения здесь:

• “ Принципы проектирования: визуальное восприятие и Принципы Gestalt ¹ ”
• “ Принципы проектирования: Пространство и фигура-фон Relationship ² ”

Примитивные Features

Как вы показываете контрастность и сходство между элементами?Ответ заключается в примитивных особенностей элементов .

Примитивные features ³ являются сущностные характеристики или атрибуты, которые элемент может иметь.Например, какой цвет элемент?Как он велик?Какую форму он

Эти элементы имеют различные примитивные черты — в данном случае, формы, цвета и текстуры .

Каждая из этих вещей взаимодействует что-то об элементе.Если заголовок больше, чем другой, то будем считать, больше рубрика является более важным.Мы могли бы рассмотреть элемент с формой, что это зубчатые и острые как опасный .

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

Давая визуально схожие характеристики с несколькими элементами, мы общаемся, что чем-то похож об элементах.Если два элемента на веб-странице, как красные круги, то это естественно для просмотра спросить, почему.Почему оба красные?Почемуоба круга?Скорее всего, вывод о том, что элементы, связанные с тем или иным образом за пределами, как они выглядят.Сходство элементов »означает, что они несут аналогичное сообщение .

Аналогично, применяя визуально различные характеристики для нескольких элементов, мы общаемся, что что-то изменилось об элементах и ​​сообщений, которые они несут .

Любое характеристика element ⁴ , которые могут быть изменены могут быть использованы, чтобы сделать элементы выглядят одинаковыми или разными.Несколько характеристики, однако, наиболее часто используются, чтобы показать сходство и контраст.В частности, нет порядка, а именно:

• Размер,
• Форма,
• Цвет,
• Значение,
• Текстура,
• Должность,
• Ориентация .

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

Примечание: В то время как примитивные черты Основной способ визуально показать контраст и сходство, у нас есть другие способы, чтобы показать как — Например, фактическое содержание, что элементы несут.Слова “остановить” и “перейти” контраст.Слова “остановить” и “прекратить” схожи.Изображения контрастируют с текстом;длинные параграфы контрастируют с коротких абзацев;и так далее .

Contrast

Человеческие существа проводной заметить разницу.Это механизм выживания, чтобы быстро отличить друга от чего-то, что хочет нас съесть.Будучи в состоянии быстро определить, что имеет жизненно важное значение для возвращения домой безопасно в пещеру ночью .

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

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

Различия, которые выделяются можете обеспечить emphasis ⁵ , выделяя важные элементы и информацию.Чем больше разница, тем больше контраст будет.Больше контраст, тем важнее элементпоявляются .

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

Если два элемента предназначены быть разными, идти большой с контрастом.Вы не хотите зрители усомниться в том, разница не случайно.Убедитесь, что контраст очевиден и четко намеренно.не оставляет места для непонимания.Не противопоставлять текст, который 16 пикселей с текстом, что это 15 пикселей.Люди не сразу заметите разницу и, как только они делают, это будет выглядеть как более ошибкой, чем сознательное решение .

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

Слишком много контраста может нарушить гармонию и единство в конструкции, что приводит к хаосу и путанице.Это может быть то, что вы после этого в определенной конструкции, но чаще всего это не так.Решите, какие несколько элементов нужно, чтобы выделиться и сделать их выглядят очень отличается от всего остального .

Контраст и Gestalt

Хотя каждый принцип гештальт о показе сходство и контраст в некотором роде, я хочу отметить два из них.Контраст имеет решающее значение для определения фигура-фон отношения и показывая господство и фокусное points ⁷ .

• Рисунок-groundОдин из первых вещей, которые мы делаем при просмотре состав, чтобы определить что фигура, а что это background ⁸ .Эта связь помогает установить контекст для всего остального в композиции.Рисунок и измельчают необходимо сопоставить друг с другом, либо зритель будет трудно определить, что есть что .
• Фокусное pointsЭти элементы притяжения и интереса.Они предназначены для отличаться от их ближайшего окружения.Контраст, что помогает им выделиться и привлечь внимание.Элемент, который выделяется больше всего в композиции доминирующим элементом.Элементы, которые выделяются в составе, но в меньшей степени являются координационные центры .

Контраст и сходство в работе: зеленые круги и оранжевые полосы похожи на другие зеленые круги и оранжевые баров, но они контрастируют сдруг с другом .

Similarity

Же механизм выживания, что позволяет нам быстро увидеть разницу также помогает нам увидеть, когда все то же самое.Это указывает нам, кто или что мы можем доверять, а к тому, что может быть опасно.Будучи в состоянии признать сходство почему люди отлично на поиск patterns ⁹ .Шаблоны помогают нам понять мир вокруг нас, обеспечивают контекст и сделать процесс обучения быстрым, чтобы точки что-то становится интуиции или инстинкта .

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

Сходство о показе соединение и показывая, что несколько элементов, связанных в некотором роде.Она приносит знакомство и последовательность в конструкции .

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

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

Более, что примитивные черты элементов выглядят одинаково, больше похожи они будут выглядеть и больше зрителей будет думать, что они то же самое.Они появляются сгруппированы и related ¹¹ в некотором роде, даже если только одна характеристика является общей;и чем больше они выглядят одинаково визуально, тем больше они будут восприниматься как один и тот же .

Мы использование сходство построить structure ¹² и рисунок.Любое сходство между двумя элементами в композиции означает структуру.Дополнительная сходство заполняет структуру и приводит к модели, текстуры и ритм .

Не все сигналы, которые показывают сходство равны.На рисунке ниже, вы бы сгруппировать предметы по форме или цвету?Видите ли вы группу кругов и один из квадратов, или вы видите один красный группу и одну синюю группу

Вы, наверное, заметили, цвет-первых, группировка элементов, как красный и синий.Это говорит о том, что цвет является сильным коммуникатором сходства, чем формы.Это не является абсолютным, однако.Например, кто-то с красно-зеленой цветовой слепоты не, скорее всего, заметите разницу между красными и зелеными объектов перед замечая формы этих объектов .

Сходство и Gestalt

Опять же, …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров