Какой эффект будет иметь оттенок серого на UX?

Я думаю о разработке веб-сайта, который не будет иметь никакого цвета, кроме черного, серого и белого (включая ссылки).

Будет ли отсутствие цветов, таких как синий, зеленый и т. д. повлиять на пользовательский опыт моего дизайна? Если да, то как?

78 голосов | спросил user4662 17 Maypm11 2011, 22:42:21

10 ответов


115
  

Я думаю о разработке веб-сайта   которые не будут иметь никакого цвета, кроме   черный, серый и белый.

Могу ли я спросить, какое обоснование стоит за этим решением? Причина, о которой я прошу, заключается в том, что я не думаю, что чистый B /G /W подходит для большинства коммерческих проектов, если клиентская марка не подходит к этой схеме. Поэтому, прежде чем вы решите пойти с этим маршрутом, убедитесь, что ваше дизайнерское решение соответствует тому, что вы делаете.

Сказав это, сайты B /W могут быть красивыми!

Из-за недостатка цветов некоторые элементы могут потерять свое типичное преимущество. Поэтому вам нужно учитывать их, когда дело касается стилизации:

Текстовые ссылки

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

Кнопки

Большинство минималистских B /W-сайтов имеют «плоский» интерфейс. Таким образом, ваши типичные трехмерные пузырьковые кнопки могут не выглядеть правильно с общим дизайном. Если вы хотите повеселиться, возможно, используйте «плоскую» тень. Таким образом, вы поддерживаете согласованность дизайна и достигаете доступности на кнопках.

<сильный> читаемость

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

Изображения

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

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


Есть несколько методов, которые вы можете использовать, когда дело доходит до черно-белых моделей:

Белое пространство и группировка :

www.rodrigogalindez.com

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

Белый как цвет

метро галерея

ClearType Press

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

Полужирная фотография

 Subtraction.com

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

Серый имеет температуру

cool gray # e8ecec теплый серый # ecece8 mikemcquade.com/

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

Использовать шаблоны

 Ошибочная мудрость

Просто потому, что вы застряли в нескольких сплошных цветах, чтобы не играть, это не значит, что сайт должен быть голым. Вы можете использовать тонкие геометрические узоры, чтобысайт более визуально. Конечно, используйте его соответствующим образом, чтобы он не отвлекал. http://www.squidfingers.com/patterns/ имеет некоторые отличные геометрические шаблоны, которые могут быть легко преобразуется в шкалу серого.


Вот несколько хороших сайтов, которые демонстрируют минималистские проекты B /W. (не все проекты чистые B /W, хотя)

ответил Jin 18 Mayam11 2011, 06:50:07
6

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

Было бы здорово увидеть, с чем вы столкнулись!

ответил Phil 18 Mayam11 2011, 00:05:41
6

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

Изменить: простой, но очень чистый и гладко выглядящий сайт Блог Jin Yang

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

ответил Matt Rockwell 17 Maypm11 2011, 22:44:40
4

Это определенно повлияет на работу пользователя. Я бы не сказал, что это плохо. Но это повлияет на опыт с точки зрения внешнего вида. Может быть, фильм noir или какой-то пуристский баухаус? Например, черно-белые фотографии всегда предлагают «Я старый». В зависимости от стиля вы будете использовать эти «цвета». Это наверняка вызовет вызов, и вы должны поделиться результатами. :)

Постарайтесь быть очень последовательными с проектированием активных элементов. Например, ссылки, кнопки и т. Д. Поскольку вы не используете цвета, вам нужен визуальный язык, который работает с черным и белым и все еще кричит пользователю: «Эй, используй меня, я активен».

ответил erikrojo 17 Maypm11 2011, 22:54:53
4

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

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

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

Фактически, диапазон оттенков может использоваться в дизайне, но они ничего не делают по сравнению с диапазоном значений для направления визуального потока. Биологически только 2 градуса всего нашего поля зрения могут обнаруживать оттенок. Остальная часть обнаруживает свет, темный цвет и узор.

Дело в том, что пользователь быстро научится не следить за полной боковой панелью ярких, ярких цветов. Свидетельством тому является тот, кто был в сети во время бума dot-com.

ответил ashley 18 Mayam11 2011, 07:21:43
3

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

Цвет стал «дешевым» в современной печати и в основном в веб-дизайне, поэтому это заставило дизайнеров думать, что они не могут достичь тех же (или, может быть, лучших) результатов, используя монохромные макеты. По правде говоря, если вы достаточно талантливы, вам не понадобятся цвета, чтобы передать ваше сообщение в дизайне сайта. Цвета могут усилить коннотативное сообщение, которое вы пытаетесь доставить, но опять же - если дизайн хорошо, но вне - цвета будут действовать только как энхансеры и не влияют на основное сообщение. Это также может послужить основанием для рассмотрения возможности создания конструктора real для вашего сайта. Дизайн - это не только шрифты и макет. Любой парень, который видел достаточно сайтов /печати и имеет немного здравого смысла, может копировать материал здесь и там. Для передачи одного и того же сообщения обычно требуется немного больше знаний /понимания, таких как монохромный сайт.

В другой теме вы можете заметить, что # e8ecec и # ecece8 (упомянутые в одном из предыдущих ответов) на самом деле не являются оттенками серого. Чтобы быть истинными оттенками серого, они должны иметь одинаковые значения для каждого из трех основных цветов в Интернете.

# ecece8 - это оттенок синего, а # e8ecec - оттенок красного. True grays будет следовать шаблону #xxyyzz, где xx == yy == zz.

ответил Luis 18 Mayam11 2011, 08:00:17
2

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

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

Время для изучения вокруг.

ответил Poyi 18 Mayam11 2011, 01:51:07
2

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

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

У вас также могут быть разные таблицы стилей, чтобы дать пользователям IE синие ссылки и пользователи Mac (у которых уже есть монохромный интерфейс) серый вид.

ответил ʍǝɥʇɐɯ 18 Maypm11 2011, 17:37:28
0

Мне лично понравился B & amp; W (читай: оттенки серого) с небольшими посыпками пастелей для бликов; потому что, если ваша страница в основном в оттенках серого, становится намного легче привлечь внимание к конкретным элементам, поместив эти блики в цвет. С другой стороны, яркое выделение на полноцветной странице или выделение B & amp; W на полноцветной странице гораздо легче пропустить.

ответил Lie Ryan 18 Maypm11 2011, 15:18:52
0

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

Я также использую черный фон как «высокую контрастность», чтобы пользователям было проще быстро находить данные, а глаза их больше отдыхали.

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

введите описание изображения здесь>> </p></div>
					 
						<div class=

ответил Frank R. 25 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowTue, 25 Sep 2012 09:19:14 +0400 2012, 09:19:14

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

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

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