Цвет шрифта и цвет фона

Вариации Сочетания Текста И Фонового Изображения В Веб-Дизайне И Photoshop

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

О популярности метода наложения текста на фоновое изображение можно говорить и не наговориться. Достаточно открыть номинации на лучший сайт дня/недели/месяца на Awwwards или cssdesignawards и увидеть собственными глазами многообразие фантазии веб-дизайнеров. Если присмотреться, то можно увидеть и гораздо большее. Где-то дополнительно использовались градиенты, затемнения, эффекты шрифта, а иногда при, казалось бы, похожих фотографиях текст размещается в разных местах. И дело здесь вовсе не в погоне за уникальностью.

На изображении может быть что угодно. Но что представляет собой ваш пользовательский интерфейс? Сможет ли эффект наложения всегда быть читаемым? Разумеется, ни одни веб-дизайнер не хочет, чтобы посетители или заказчик напрягали зрение и долго думали: «что же там написано-то»? И это тем более важно, если вы создаете дизайн сайта/приложения для смартфона. На маленьких экранах и текст-то маленький, а значит, и читать его сложнее. А если вокруг еще и картиночек много, то и совсем может приключиться беда.

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

Текст и изображения в веб-дизайне

А теперь стоит обратить внимание на некоторые моменты этих сайтов: laferme, storymarketing, foster-designs, Article Cards

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

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

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

Эффект холста

Холст представляет собой твердый полупрозрачный градиент, находящийся между изображением и текстом. В таком варианте текст может быть всегда белым, а градиент на холсте может быть от 40% непрозрачности от черного к белому (или прозрачному). Но опять же, это дело личного вкуса. Хотя именно 40% непрозрачности от черного к белому/прозрачному работает наилучшим образом. В таких композициях можно увидеть, что изображение плавно замирает, текст обретает больше контраста и становится доступным для чтения. Для примера, мы создали и 30% и 69% непрозрачности. Вид, конечно, оставляет ждать лучшего.

  • Простое и популярное решение
  • Улучшенная контрастность текста
  • Едва заметные изменения в общей конструкции
  • Резкие градиенты могут разрушить привлекательность изображения
  • Можно слишком сильно затонировать фон и суть его будет не видна

Безусловно, использование холста популярно, особенно если градиент накладывается только на половину всего изображения. Но существуют и иные способы.

Тонирование

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

  • Полезно для больших заголовков, текстовых блоков, которые размещаются на всей площади изображения
  • Когда в приоритете текст, а не фоновая фотография
  • Изображение скрывается целиком
  • Фоновое изображение вообще может быть уменьшено, словно существует только для эстетики

Цветовые наложения

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

Какой цвет выбрать? Зависит от бренда. Но опять же, суть в том, чтобы текст был видим и четок.

Мягкие градиенты

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

Сравните два градиента и поймете, о чем идет речь.

  • Лучший вариант акцента на цвете бренда (если его уместно использовать)
  • Однотонная часть градиента лучше подчеркивает текст
  • Не подходит для фотографий с людьми, фауной, поскольку черты лиц и мордочек плохо узнаются. Они скрываются за общей тонировкой и плохо различимы.

Размытие

Эффект размытия по Гауссу позволяет смягчить изображение и сделать текст более видимым. Те, кто обладают iPhone, уже знакомы с такой техникой. В дизайне iOS размытие используется для обозначения глубины. В то время как в Android используется тень для обозначения глубины (высоты).

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

  • Помогает уменьшить значимость изображения
  • Текст проще выделить на фоне фотографии
  • Изображение полностью приносится в жертву удобству чтения
  • Не решается проблема с подбором цвета для текста
  • Не задействуются цвета бренда; нет соответствия большинству общепринятых стилей

Выделение текста

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

Черное и белое

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

Эффект Glitch

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

Попробуем просто найти красивое оформление текста и, возможно, даже незаурядное.

Открываем наше изображение, создаем слой-копию и немного осветляем с помощью Корректирующего слоя «Цветовой тон/Насыщенность». Если изображение и без того светлое, то можно особо и не осветлять.

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

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

Теперь создадим еще один пустой слой и разместим его между текстом и фоном. Выделим его на панели слоев, зажимаем Ctrl + ЛКМ по слою с текстом. У нас на экране появится выделение букв. Выбираем темно-серый цвет и, будучи на новом пустом слое, заливаем контур.

Активируем инструмент Перемещение и с помощью стрелок на клавиатуре немного двигаем наш слой в желаемую сторону. Открываем Фильтр -> Размытие – > Размытие по Гауссу и размываем нашу тень так, чтобы явной она не была. Но наличие её все же нужно для придания глубины. Можно сделать совершенно плоское изображение, но оно «потеряется».

Создаем еще один слой и размещаем между тенью и фоном. Рисуем на нем серый прямоугольник с закругленными углами.

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

Теперь выделяем на панели слоев слои с тенью, текстом и текстурой и делаем общую копию трех слоем (Ctrl+J). Много тени, понимаем, но иначе пока нельзя. Потом уберем.

Выделяем только два слоя (Море и Фон копия 8), выбираем инструмент Выделение. Выделяем часть буквы или, может, часть всего слова, переходим на инструмент Перемещение и с помощью стрелок на клавиатуре сдвигаем часть рисунка по направлению тени. Если сдвинуть в противоположную сторону у вас получится сильное затенение. Если тень отключить – сольется. А так получается разбитый текст.

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

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

Существует много сайтов с эффектом Glitch, хотя они и являются по большей части авторскими: wmnvm, oxtral, michaelvillar, jigsaw, bobby

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

Выводы

Мы рассмотрели разные методы, которые делают текст читабельным и не жертвуют при этом фоновым изображением. Даже в случае с разбивкой текста (Glitch), его (текст) можно понять, а морские волны и пену – разглядеть и узнать.

Хороший дизайн – продуманный дизайн. Дизайн, что обладает сбалансированными эстетическими визуальными эффектами, удобством и ясностью. Но и этого порой недостаточно. Может быть очень красиво, но непонятно, неприятно. Как вы видели, есть идеи смешивать разные виды, сочетать разные методы и привносить что-то новое. Вашему воображению нет предела.

Главное – правильные акценты и легкость эффекта. Даже если вы создаете текст, сквозь который видно фоновую фотографию, разбивка или добавление эффекта рваности должны быть воздушными. Любой стиль дизайна не обладает тяжеловесностью. Четкостью – да, контрастом – да, но не перегрузкой фотоэффектов. Даже наш эффект при малом размере смотрится понятно, четко и легко, ибо разрывы и тени неяркие и не «тяжелые».

Цвет и фон

В этой статье мы рассмотрим свойства CSS , связанные с цветом. Прочитав ее, вы узнаете:

  • как на веб-странице изменить цвет текста;
  • как добавить цвет или изображение для фона;
  • как добавить тени;
  • как изменять прозрачность.

Цвет текста

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

Указание названия цвета

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

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

Шестнадцать названий цветов, которые можно использовать в CSS

Чтобы изменить цвет всех заголовков на коричневый, нужно ввести:

Заголовок отображается коричневым цветом

Шестнадцатеричные обозначения

Шестнадцать цветов — это мало, если учесть, что большинство мониторов могут отображать шестнадцать миллионов цветов. Но представьте, если бы нужно было задать название каждому из шестнадцати миллионов оттенков …

К счастью, в CSS предусмотрено несколько способов выбора цвета. Первый способ — шестнадцатеричное значение. Вот как выглядит название цвета в шестнадцатеричном формате: #FF5A28 . Это комбинация букв и цифр, которые указывают цвет.

Всегда нужно начинать с указания символа хэша (#) , за которым следует шесть букв или цифр от 0 до 9 и от A до F .

Эти буквы или цифры работают парами. Первые две цифры указывают количество красного, две следующие — зеленого, а две последние — голубого. Смешивая эти значения ( которые являются компонентами Red-Green-Blue в цвете ), можно получить любой цвет.

Таким образом, #000000 соответствует черному цвету, а #FFFFFF — белому.

Некоторые графические программы, такие как Photoshop , Gimp и Paint.NET , позволяют указывать цвета в шестнадцатеричном формате.

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

При этом допускается сокращенная запись: можно указать цвет с помощью только трех символов. Например: #FA3 эквивалентно #FFAA33 .

Метод RGB

Red-Green-Blue , сокращенно обозначаемый как « RGB ». Как и в шестнадцатеричном коде, чтобы выбрать цвет, необходимо определить количество красного, зеленого и синего.

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

  1. Зайдите в меню « Пуск », найдите в нем программу Paint и запустите ее.
  2. Перейдите в раздел « Редактировать цвета », как показано на рисунке, приведенном ниже.
  3. Откроется окно. В поле справа переместите ползунки, чтобы выбрать нужный цвет. Предположим, нужно вывести заголовки

розовым цветом. Выберите цвет в окне, как показано на рисунке, приведенном ниже.

  • Обратите внимание на соответствующие значения Red-Green-Blue , указанные в правом нижнем углу окна. Введите эти значения в том же порядке в CSS .
  • Изменение цвета в Paint

    Выбор цвета в Paint

    Чтобы использовать метод RGB , нужно ввести rgb ( Red, Green, Blue ), заменив « Red, Green, Blue » соответствующими числами в диапазоне от 0 до 255 .

    Цвет фона

    Чтобы указать цвет фона html-страницы , используйте свойство CSS background-color. Оно используется так же, как и свойство color, другими словами, можно ввести название цвета, его шестнадцатеричное значение или RGB .

    Чтобы указать цвет фона для веб-страницы, необходимо работать с html-тегом

    Рассмотрите приведенный ниже код CSS :

    Результат работы этого кода простой html страницы с фоном:

    Белый текст на черном фоне

    CSS и наследование

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

    Если я применил черный цвет фона и белый цвет текста к тегу

    , все заголовки и абзацы также будут иметь черный фон и белый текст… Это называется наследованием: теги, которые находятся внутри другого тега, « наследуют » его свойства.

    Это также отображено в названии « CSS », что переводится как « Каскадные таблицы стилей ». Свойства CSS наследуются в каскаде: если вы задаете стиль элементу, все его дочерние элементы будут иметь тот же стиль.

    Это означает, что весь текст моей веб-страницы обязательно будет белым?

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

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

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

    Пример наследования с тегом

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

    Например, существует тег

    , который используется для выделения определенных слов. Давайте используем его здесь:

    По умолчанию текст отображается на желтом фоне. Можно изменить это с помощью CSS :

    Красный цвет фона применяется к тексту тега

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

    Красный выделенный текст на черном фоне

    Тот же принцип применим ко всем HTML-тегам и свойствам CSS . Если вы скажете:

    • Текст абзацев у меня отображается шрифтом с размером 1,2em ;
    • Важные тексты (

    ) у меня отображается шрифтом с размером 1,4 em .

    … то можете подумать, что возникнет конфликт. Если важный текст является частью абзаца, шрифтом какого размера он должен отображаться? 1,2 em или 1,4 em ? CSS решит, что наиболее специфичное объявление имеет приоритет: поскольку

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

    Фоновые изображения

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

    Как сделать изображение фоном страницы в html

    Свойство, используемое для указания фонового изображения ( в каком-то смысле его можно назвать тегом фона html-страницы ) — background-image . В качестве значения необходимо указать url(«nom_de_l_image.png») . Например:

    В результате мы получим:

    Фоновое изображение страницы

    Адрес, указывающий местоположение фонового изображения, может быть записан как абсолютный адрес ( http: // … ) или как относительный ( fond.png ).

    Будьте внимательны при указании относительных адресов в файле CSS . Адрес изображения должен быть указан относительно файла .css , а не относительно файла .html . Чтобы упростить ситуацию, советую размещать фоновое изображение в той же папке, что и файл .css .

    Параметры фонового изображения

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

    background-attachment: прикрепление фона

    Свойство CSS background-attachment используется для « закрепления » фона. Полученный эффект позволяет сделать так, чтобы фон « прокручивался » вместе с текстом. Доступны два значения:

    • fixed : фоновое изображение остается закрепленным;
    • scroll : фоновое изображение прокручивается вместе с текстом ( значение по умолчанию ).

    background-repeat: повторение фона

    По умолчанию фоновое изображение повторяется в виде мозаики ( таким образом, фон html-страницы распространяется на весь экран ). Вы можете изменить это с помощью свойства background-repeat:

    • no-repeat : фон не будет повторяться. Изображение будет размещено на странице в одном экземпляре.
    • repeat-x : изображение будет повторяться только в первой строке, горизонтально.
    • repeat-y : изображение будет повторяться только в первом столбце по вертикали.
    • repeat : фон будет повторяться в виде мозаики (значение по умолчанию).

    background-position: положение фона

    Также можно указать позицию фонового изображения с помощью background-position . Это свойство полезно только в комбинации с background-repeat: no-repeat ; ( фон, который не повторяется ).

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

    … фон будет сдвинут на 30 пикселей левее и 50 пикселей выше. Также можно использовать следующие значения:

    • top : вверху;
    • bottom : внизу;
    • left : слева;
    • center : по центру;
    • right : справа.

    Их можно комбинировать. Например, чтобы разместить фоновое изображение в правом верхнем углу, нужно ввести:

    Если я хочу отображать солнце в качестве фонового изображения ( следующий рисунок ), только один раз ( no-repeat ), всегда видимым ( fixed ) и расположенным в правом верхнем углу ( top right ), то следует написать следующий код фона html-страницы :

    Солнце в качестве фонового изображения в правом верхнем углу

    Сочетание свойств

    Если вы применяете к фону много свойств, то можно использовать своего рода « супер-свойство », называемое background . Его значение может сочетать в себе несколько ранее рассмотренных свойств: background-image , background -repeat , background-attachment и background-position .

    Таким образом, можно написать:

    Это первое « супер-свойство », которое я вам показываю, но будут и другие. Вы должны знать следующее:

    1. Порядок значений не важен. Можно комбинировать значения в любом порядке.
    2. Не нужно вводить все значения. Поэтому, если не хотите вводить fixed, можно удалить его.

    Несколько фоновых изображений

    Начиная с CSS3 , можно указывать для элемента несколько фоновых изображений. Для этого разделите их объявления запятой:

    Первое изображение из этого списка будет помещено поверх других ( рисунок, приведенный ниже ). Порядок объявления изображений имеет значение: если вы поменяете местами солнце и снег в приведенном выше коде CSS , то больше не увидите солнца.

    Несколько фоновых изображений

    Несколько фоновых изображений работают во всех браузерах кроме устаревших версий Internet Explorer , который распознает эту функцию, только начиная с версии 9 ( IE9 ).

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

    Прозрачность

    CSS позволяет легко изменять уровни прозрачности элементов. Для этого мы будем использовать свойство opacity и модель RGBa .

    Свойство opacity или как сделать фон страницы в html прозрачным

    Свойство opacity используется для указания уровня непрозрачности ( который является обратным для прозрачности ).

    • При значении 1 элемент будет полностью непрозрачным: это поведение по умолчанию.
    • При значении 0 элемент будет полностью прозрачным.

    Вам нужно выбрать значение от 0 до 1 . При значении 0,6 элемент будет на 60% непрозрачным, и вы сможете видеть сквозь него!

    Вот как это можно использовать:

    Вот пример, который даст представление о прозрачности.

    Прозрачный абзац

    Прозрачность работает во всех браузерах, включая Internet Explorer , начиная с версии IE9 и выше.

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

    Модель RGBa

    CSS3 предоставляет еще один способ изменения прозрачности: модель RGBa . Это RGB , которое мы рассматривали ранее, но с четвертым параметром: уровнем прозрачности ( альфа-каналом ). При значении 1 фон полностью непрозрачен. При значении менее 1 он становится прозрачным.

    Это обозначение распознают все современные браузеры, включая Internet Explorer ( начиная с версии IE9 и выше ). Для устаревших браузеров рекомендуется указывать стандартный код RGB , в дополнение к RGBa .

    Заключение

    Мы изменяем цвет текста с помощью свойства color , а цвет фона — с помощью background-color . Также его можно использовать как способ растянуть фон на всю html-страницу .

    Можно указать цвет, введя его имя ( например, black ), значение в шестнадцатеричном формате ( #FFC8D3 ) или указав код RGB ( rgb(250,25,118) ).

    Также можно добавить фоновое изображение с помощью свойства background-image , закрепить фоновое изображение, отобразить его как мозаичный рисунок и даже разместить в любом месте веб-страницы.

    Вы также можете сделать часть веб-страницы прозрачной с помощью свойства opacity или с помощью указания RGBa .

    Данная публикация представляет собой перевод статьи « Color and background » , подготовленной дружной командой проекта Интернет-технологии.ру

    Цвет шрифта и цвет фона

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

    Нажав кнопку “Принять и продолжить”, вы соглашаетесь с Политики конфиденциальности

    Попробуй обновленный Аудит сайта Serpstat

    How-to– Читать 9 минут –6 февраля 2019

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

    Для корпоративного сайта подойдут традиционные шрифты без засечек, например, Verdana или Aria, ассоциирующиеся со строгим деловым стилем:

    При выборе шрифта для сайта стоит следовать следующим рекомендациям:

      использовать не более четырех шрифтов на одной странице;

    пользоваться шрифтами без засечек (Sans-serif) для основного текста, так как на экране засечки затрудняют чтение;

    в печатной версии применять шрифты с засечками, поскольку они ассоциируются у читателей с надежностью и респектабельностью;

    для примеров программных кодов, инструкций или имитации машинописного текста использовать шрифты семейства Monospace;

    с помощью нестандартных шрифтов, например, Script и Fantasy, оформлять заголовки и делать акценты для привлечения внимания;

  • использовать для заголовков и призывов к действию более крупные размеры, чем обычный текст.
  • Шрифты Craft

    Шрифт на сайте — это часть вашего бренда, подумайте сначала о своем бренде выделите основные его качества и свойства.

    • На примере — упаковка мороженого, где владельцы хотят подчеркнуть натуральность мороженого. Подходят отлично шрифты с имитацией тиснений букв, каллиграфия, что-то ручное, домашнее, теплое по атмосфере:

    Handwritten

    Шрифты для бренда, имитирующие ручное написание, делают ощущения от него добрым, открытым и отзывчивым, на примере — корм для собак:

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

    Как альтернатива такие шрифты хорошо задают неформальное настроение.

    • бесплатный шрифт Amatic SC:

    Serif

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

    • из платных хорош Barrels:

    • из бесплатных — Merriweather:

    Sans Serif

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

    • из платных есть современный Gilroy:

    • из бесплатных есть Open Sans со множеством начертаний:

    Чтобы привлечь внимание пользователя к определенному тексту, применяются различные способы:

      изменение начертания — выделение жирным либо курсивным шрифтом;

  • цветовое выделение отдельных блоков информации или конверсионных элементов:
    • изменение цвета или размера шрифта.

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

    В мобильной версии необходимо использовать только одну колонку текста.

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

    Для подбора цветовых схем можно использовать онлайн-сервисы:

    • colorscheme.ru — генерирует цветовые сочетния с использованием правил колористики и создавая гармоничные сочетания из одного-четырех цветов:

    • color.adobe.com/ru — в данном сервисе также используется цветовой круг, на основе которого генерируются различные сочетания оттенков:

    Помимо правил колористики, при создании сайта веб-дизайнеры и маркетологи применяют знания в области психологии восприятия цвета.

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

    Рассмотрим основные оттенки и их признаки с точки зрения психологии, которые помогают определить, какие цвета выбрать для сайта:

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

    Психология текста: шрифт, цвет, форматирование

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

    К сожалению, текст имеет изначально присущую ему слабость: это статичная среда. Мы часто забываем, что все, что мы прочли — это просто различные комбинации конкретных букв алфавита (неважно, 26 их или 33), подчиняющиеся некоторым определенным правилам пунктуации и синтаксиса.

    По сравнению с относительно новыми средствами отображения данных (медиа), такими как фотография или видео, возможности текста крайне ограничены. Старая пословица гласит, что «Картина говорит сразу 1000 слов» (это, конечно, зависит от картины и художника!), но, как правило, это утверждение недалеко от истины. Фотография и видеозапись способны захватить, а затем показать зрителю ситуацию гораздо лаконичней, чем слова, фигурально выражаясь, «могли надеяться».

    Устойчивая популярность таких социальных сетей, как Instagram и Pinterest, наглядно свидетельствует о том, что люди находят визуальные медиа более подходящими для распространения своих повседневных впечатлений и ощущений. Даже Twitter начал выдвигать на первый план фотографии и видео, изменяя тем самым своей начальной текстовой сущности.

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

    Текст всегда был, есть и будет важнейшим компонентом формирования положительного пользовательского опыта. Но пользователи не хотят сталкиваться со «стеной контента», равно как и мы — маркетологи, копирайтеры, блоггеры — не хотим видеть в комментариях глумливую оценку наших трудов «нипрачел слишкаммногабукав» (в англоязычной сфере существует аналог этому выражению — аббревиатура TL;DR (too long; didn’t read), то есть «слишком длинно; не читается»).

    Надпись: «Стена текста. Слишком длинно; не читается»

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

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

    Будьте уверены — читатели заметят вашу информацию, ознакомятся с ней и запомнят ее.

    Персонализация шрифта

    Псевдонаучная дисциплина графология просуществовала около 200 лет. Ее адепты уверяли, что способны по почерку человека установить основные черты его личности и даже обнаружить неврологические проблемы пишущего.

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

    В 2001 году американская корпорация Lexmark, специализирующаяся на разработке и изготовлении устройств для печати и обработки изображений, наняла выдающегося психолога, доктора Арика Сигмана (Aric Sigman) для изучения того, как применяемый шрифт влияет на мнение, составляемое читателем электронного текста о его авторе.

    Результатом исследования стала статья «Психология шрифтов» (The Psychology of Fonts), содержавшая предположение Сигмана о том, что некоторые шрифты могут вполне ассоциироваться с конкретными знаменитыми персонами. 🙂

    Шрифт Shelley: Кайли Миноуг — «сексуальный котеночек»;

    Шрифт Courier: Иэн Бил (персонаж британской «мыльной оперы») — «скряга»;

    Шрифт Verdana: Ричард Брэнсон — «профессионал»;

    Шрифт Times: Анна Форд (жена Генри Форда ) — «благонадежность».

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

    Используйте конкретные шрифты в определенных ситуациях — например, устраиваясь на работу в компанию, занимающуюся консервативным, «традиционным» бизнесом (банковское дело, страхование), наберите резюме таким же «консервативным» шрифтом с засечками типа Times. Для более современной по роду деятельности отлично подойдет шрифт Verdana.

    «Консервативные» шрифты с засечками и ассоциации с ними: «надежный», «впечатляющий», «респектабельный», «авторитетный», «традиционный»

    Размер шрифта

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

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

    Цвет шрифта

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

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

    Цветовой акцент

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

    Понятно, что теперь, когда в распоряжении любого имеются 16 777 216 цветов, отображаемых на средней руки мониторе, мы можем раскрасить наш текст в любую, самую фантастическую гамму. Однако делать этого мы не будем — первое правило электронной верстки текста гласит: «читать, не страдая». С выполнением этого правила и связано повсеместное употребление доминирующей классической схемы, «как в типографии на бумаге».

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

    Захват внимания

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

    Эмоциональное воздействие цвета

    Цвета также несут мощные культурные ассоциации. В культурной парадигме западной цивилизации мы в самом общем приближении связываем зеленый цвет с удачей, красный — с неудачей. С отдельными цветами связаны устойчивые подсознательные реакции, что в целом может придать дополнительный смысл текстовому сообщению. Например, красный текст сообщения о неверно заполненном поле непременно привлечет внимание пользователя к совершенной ошибке, а зеленая галочка успокоит его: «все правильно сделал».

    Читабельность текста

    Помимо привлечения внимания, цвет может послужить еще одним отличным способом облегчить взаимодействие между писателем и читателем. Ниже приведен пример оригинального решения, по утверждению его авторов, увеличивающего скорость чтения электронного текста на 30%. За счет чего? — спросите вы.

    Ключами к хорошей типографике являются 2 понятия:

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

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

    Так вот, добавление цветового градиента — как на скриншоте ниже, — сделало переход от одной строки к другой легче для глаз: они безошибочно следуют по заданной траектории, что в результате ведет к возрастанию скорости чтения.

    Форматирование текста

    Ну и наконец — форматирование текста имеет огромное влияние на его читаемость (читабельность). Вспомним традиционные бумажные газеты с их многочисленными узкими колонками. Подобная верстка есть результат многолетних исследований, испытаний и уточнений. По словам эксперта по промышленному дизайну Боба Бейли (Bob Bailey, Ph. D., Civil Engineering) в статье в журнале UI Design Newsletter:

    Одно из лучших исследований по читабельности было проведено Тинкером (Tinker) и Патерсоном (Paterson) в 1929 году. Используя черный шрифт в 10 английских типографских пунктов (3,515 мм), отпечатанный на белой бумаге, исследователи обнаружили, что строка длиной от 3 до 3,5 дюймов (от 75 до 90 мм) дает самую высокую производительность чтения. Абзацы с длиной строки от 7,3 дюйма (185 мм) читались заметно медленней. Авторы предположили, что увеличение длины строки, , требует большего количества боковых движений глаз. Большая амплитуда движения взгляда по горизонтали во время чтения способствует тому, что читатель чаще теряет свое место чтения текста.

    Все это звучит очень логично. Снимите стресс с глаза читателя — и ваш контент мгновенно станет более читабельным.

    При публикации текста на целевой странице и в online в целом — в связи с увеличением расстояния от читателя до монитора, — длина строки может быть не столь компактной как в классической типографике: оптимальной считается длина в 4–5 дюймов (102–127 мм).

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

    Пробелы

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

    Вместо заключения

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

    • Размер имеет значение. Делайте логический акцент там, где необходимо.
    • Используйте шрифты, релевантные тону беседы, каковой вы хотите установить с целевой аудиторией.
    • Цвет в тексте может передавать подсознательное сообщение.
    • Цвет может быть применен для привлечения внимания к конкретному фрагменту текста.
    • Текст бесполезен, если он нечитабелен — помогите читателю логическим форматированием контента.

    Разумеется, все эти советы нуждаются в проверке .

    Правила использования цвета, шрифтов и изображений в шаблоне формы

    Примечание: Мы стараемся как можно оперативнее обеспечивать вас актуальными справочными материалами на вашем языке. Эта страница переведена автоматически, поэтому ее текст может содержать неточности и грамматические ошибки. Для нас важно, чтобы эта статья была вам полезна. Просим вас уделить пару секунд и сообщить, помогла ли она вам, с помощью кнопок внизу страницы. Для удобства также приводим ссылку на оригинал (на английском языке) .

    Разработчик формы важно сосредоточиться на внешний шаблона формы вид, а не просто как это работает. Ли вы добавляете заставки цвета или эмблему компании, Microsoft Office InfoPath предоставляет несколько способов создания процентов и визуально упорядочить информацию, чтобы привлекательным и облегчает работу пользователей с помощью шаблона формы.

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

    В этой статье представлены контрольных списков, которые помогут вам хранить структуры на правильном пути.

    В этой статье

    Контрольный список для использования цвет границы и заливка

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

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

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

    При использовании цвет при проектировании, учтите следующее.

    Не зависит от цвета отдельно для передачи важных сведений.

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

    Рассмотрим контраст цвета и фон.

    Убедитесь, что контрастность цветов высокая между фоном и на переднем плане шаблона формы. Например с помощью белом или сером фоне управления цветом или цвет ячейки таблицы белом или сером цвет шрифта.

    При использовании цвет фона шаблона формы проверьте отключен параметр Печать фоновых цветов и рисунков.

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

    Внимательно используйте заливка и границы.

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

    Убедитесь, что цвета выглядят хорошо при просмотре шаблона формы на разных мониторах.

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

    Быть конфиденциальных о том, что означает цвета различные действия в разных стран и регионов.

    Например, в некоторых стран и регионов, красный будет связана с смерти.

    Просмотрите список использования шрифты и форматирование шрифта

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

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

    1. на текст заголовка используется шрифт Arial 9 пунктов.

    2. для элемента управления текстом шрифт является Verdana 10 пунктов.

    При использовании различные шрифты и форматирование при проектировании шрифта, учтите следующее.

    Убедитесь, что текст видно на любые цвета фона или затененных областей.

    Текст — легче читать при наличии соответствующих контрастности между текстом и фон. Черный текст на белом фоне дает наибольшие контрастность. Облегченная текст на фоне темно-также высокой контрастностью.

    Убедитесь, что текст в форме не слишком мало.

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

    Внимательно используйте шрифты и эффекты шрифтов.

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

    Убедитесь, что он является удобным при просмотре в цветовые схемы высокой контрастности.

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

    Можно ли читаемым текста.

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

    Проверьте, при использовании эффекты шрифтов соответствующим образом.

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

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

    Изображения — еще один способ можно настроить и Добавление стиля в шаблон формы. Например включая логотип компании могут помочь оформление шаблона формы.

    При использовании изображения при проектировании, учтите следующее.

    Убедитесь, что изображения должным образом идентифицировать компанию или назначение шаблона формы.

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

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

    Убедитесь в том, что размер изображения и его расположение в шаблоне формы не мешать пользователям заполнении шаблона формы.

    Убедитесь, что сортировок, зависящих от изображения.

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

    Использование изображений с осторожностью.

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

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

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

    Убедитесь, что изображения будут сохранены в подходящем формате.

    Большими файлами изображений можно увеличить время, которое он принимает форму, чтобы открыть. Некоторые форматы файлов создают файлы, которые являются гораздо больше, чем другим пользователям. Например сохранить файл как точечный рисунок (расширение BMP) или значительно больше, чем тот же файл, сохраненный в виде файла JPEG, GIF или PNG файл Tagged Image File Format (TIFF). Формат JPEG обычно лучше всего подходит для других сложных изображения или фотографии. Формат GIF или PNG, часто бывают идеально подходит для рисунков, эмблемы, иллюстрации, диаграмм и схем.

    Убедитесь, что изображения не защищенный авторские права.

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

    Не зависит от изображений отдельно для передачи важных сведений.

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

    Белым по чёрному. Разгружаем глаза

    Все слышали выражение “чёрным по белому написано”. Пришло оно к нам из бумажного мира и как-бы утверждает, что именно это сочетание цветов для текста и фона дает наилучший контраст и читабельность. Предлагаю опровергнуть это предположение и чаще пользоваться противоположной цветовой схемой. В этой статье я не буду убеждать в целесообразности цветового решения “белым по чёрному” (и некоторые утверждения могут быть спорными). Цель этой статьи сделать обзор инструментов, которые позволяют быстро и удобно инвертировать яркие цвета в часто используемых приложениях с целью уменьшить нагрузку на глаза. А также предлагаю инвертировать упомянутое выражение и в эпоху ЖК дисплеев говорить “белым по чёрному написано напечатано”.

    Белый фон и чёрный текст по инерции сохранился во множестве приложениях, чтобы симулировать визуальное восприятие чернила на белой бумаге. Может быть, эффективность “чёрным по белому” и справедливо относительно бумаги (кстати, откуда на бумаге взялся именно черный и белый? 1 ), но когда речь идет о мониторах, то здесь уже нет бумаги и отраженного света. Большинство мониторов являются источниками света и белый фон может быть утомительным для глаз, поскольку белый цвет это максимум светового потока который излучает пиксель (при заданной яркости монитора). Соответственно суммарное световое излучение на глаза наибольшее при белом фоне. Как альтернативный вариант, многим более приятна и менее утомительная противоположная схема — белый текст на чёрном фоне*, который суммарно излучает меньше света. Должен признать, что здесь не всё так просто с излучением, поскольку у человеческого зрения довольно сложный механизм и на восприятия света влияет много факторов как яркость дисплея, тип дисплея, расстояние, внешнее осветление, зрительная адаптация, хроматическая адаптация, а также индивидуальные психофизиологические особенности. Поэтому сравнение этих двух типов цветовых схем до сих пор довольно неоднозначный вопрос как для экспертов зрения, так и для графических дизайнеров, и сильно зависит от условий их использования.

    Хочу отметить, что все нижеприведенные приёмы переключения контраста менее утомительны для глаз при длительном чтении/написании текста. И это не зависит от крутости дизайна или личных предпочтений в цветах (см. эксперимент). В остальных ситуациях это не так важно.

    *А также, когда упоминаю “белым по чёрному” я не имею ввиду абсолютно белый и абсолютно чёрный (и не буду вдаваться в нюансы “чёрности”). Даже наоборот — не рекомендую использовать эти крайности. При слишком большом контрасте сильнее чувствуется рассеивание света в глазах и белые буквы начинают “расползаться” на чёрном фоне. Этот эффект хорошо иллюстрирует оптическая иллюзия иррадиации. Лучше выбирать градации серого (напр., светло серый на темно сером). Главное — удобный контраст. Наверное, правильнее было б называть эту схему ”светлым по темному”, но звучит как-то не очень.

    Браузер

    Chrome (Chromium)

    High Contrast
    Более простое решение. Им иногда удобнее пользоваться чем Clearly (напр., на форумах). Есть возможность быстро создать исключение или задать схему по умолчанию.

    Для себя настроил следующим образом — горячие клавиши Alt+H, расширение включено (Enabled) постоянно, режим Normal установил по умолчанию, а для нужных сайтов включаю Inverted Color. Так я косвенным образом веду список сайтов, на которых инверсия включается автоматически и не нужно вручную переключать туда-сюда режимы.
    Существенный минус расширения в том, что цвет изображений также изменяется.

    К сожалению, сочетание клавиш (Shift+F11) нельзя поменять в настройках. Но если очень хочется, то можно копнуть исходники. У меня расширение находиться в:
    %LocalAppData%ChromiumUserDataDefaultExtensionsdjcfdncoelnlbldjfhinnjlhdjlikmph.4_0
    или просто в поиске найти highcontrast.js, довольно уникальное имя для файла. Далее делаем следующие изменения в файлах:
    highcontrast.js, строка 12, evt.keyCode == 122 меняем на нужный, и заодно если не нравится Shift, то evt.shiftKey меняем на evt.altKey или evt.ctrlKey.
    А также для внешности — в popup.js, строка 100 и в manifest.json, строка 8.

    Stylish
    Позволяет использовать на посещаемой странице произвольный стиль. Доступно множество готовых на userstyles.org. Минус в том, что их авторы не всегда вовремя обновляют стиль при изменениях на сайте. Полезные тёмные стили: Wikipedia, Google Search, Habrahabr, StackOverflow, YouTube, Facebook.
    предлагайте(или создавайте свои) тёмные стили для популярных сайтов, добавлю в список

    Theme
    Для того, что бы элементы интерфейса браузера не контрастировали с тёмной расцветкой содержимого страницы, лучше также выбрать какую-нибудь тёмную тему. У меня James White.

    Что мне не нравиться в Хроме, так это мелькание белого фона при прорисовке страницы. Насколько я понимаю, это происходить на уровне движка, и на пользовательском уровне изменить нельзя, даже если поменять цвета в ОС. Считаю, что на этом месте нужно кинуть камень в огород Хром разработчиков. Почему они цвет канваса определяют самостоятельно, а не берут из системных настроек ОС? То же самое касается Skype и ряда других “серьезных” приложений.

    Firefox

    Opera

    Internet Explorer

    С выбором разширений для этого браузера все грустно, ничего путевого не нашел. Но похоже, что цвета можно поменять следующим образом — Internet Options > Appearance: Colors, но перед тем надо отметить Accessibillity > Formatting: Ignore colors specified on webpages. Насколько хорошо работает не знаю, лично не пробовал.

    Обозреватель документов

    WinDjView
    Быстрый DjVu обозреватель с возможностями аннотации (только под Windows). Позволяет инвертировать цвет всего документа, включая скан/изображения:
    File > Settings (Ctrl+,) > Display: Invert Colors. Удобней читать во весь экран (Ctrl+L).

    Текстовый редактор

    Чтобы изменить цвет интерфейса:
    File > Options > General > User Interface options > Color Scheme: Black. Чтобы изменить цвет бумаги (фон), нужно менять цвета в ОС.
    Для старых версий офиса ничем не могу помочь.

    С инвертированием цветов в Google Docs отлично справляется chrome.google.com/webstore/detail/high-contrast/djcfdncoelnlbldjfhinnjlhdjlikmph>High Contrast и BlankYourMonitor. High Contrast немножко тормозит в больших документах. Есть другой вариант, это минималистичный стиль Write Room, который также убирает панель инструментов (при наведении курсора появляется назад).

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

    Среда разработки

    Visual Studio
    Расцветка меняется в настройках (Tools > Options > Environment > Fonts and Colors), но это может быть длительная процедура, поскольку тяжело подобрать подходящие цвета с первого раза.
    Есть более удобные решения для последних версий (2005/2008/2010/2012). Онлайн приложение Visual Studio Theme Generator генерирует конфигурационный файл (.vssettings) с выбраными цветами. А также сформировалось целое сообщество стилеводов на Studio Styles, где есть выбор среди множества готовых стилей.
    В любом случае, перед изменением цветов лучше сделайте бекап текущих настроек (Tools > Import and Export Settings), можно экспортировать исключительно цветовые параметры.

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

    Чтобы каждый раз не менять настройки студии, специально для изменения цветовой схемы было создано расширение Visual Studio Theme Editor (добавляет дополнительное меню Theme). В этом посте об использовании, хотя там все довольно интуитивно. Я использую тему Expression отсюда.

    Visual Studio 2012
    В этой версии разработчики наконец-то включили возможность изменения темы в стандартные настройки, среди которых есть и Dark Theme. Для этой студии также отдельно есть расширение Visual Studio 2012 Color Theme Editor. Зачем? Не знаю. Лично VS2012 еще не видел.

    Eclipse
    Цветовые возможности похожие с Visual Studio. Можно установить Eclipse Color Theme Plugin и использовать теми (.xml) для этого плагина. Или использовать конфигурационные файлы (.epf). Широкий выбор тем на Eclipse Color Themes. Делайте бекап настроек перед изменениями.

    Matlab
    Все цвета меняются вместе с цветами ОС (по крайней мере в Win7). Если отдельно от ОС, то есть инструкция для Dark theme for Matlab 2007. Эти же установки подходят для 2010 (предполагаю для других версий так же).

    Разное

    Тем, кому не хочется основательно менять цвета всех окон, предлагаю поменять хотя бы цвет taskbar, чтобы он не контрастировал с темным браузером или редактором (Control Panel > Appearance and Personalization > Personalization > Window Color). Остальные цвета находятся там же в Advanced appearance settings.
    В поиске по ключевым словам “dark theme” или “black theme” найдете множество сайтов с темами. Много качественных (не только для Windows) находятся на deviantART.
    Первое, что мне подошло это Dark Soft (использовал только стили, бинарные файлы (explorer.exe) не применял).

    Linux, MacOS, Windows 8, Windows XP
    Как работать со стилями этих ОС не знаком. Добавляйте в комментариях, будем пополнят список.

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

    Могу только предложить пользователям Opera Mobile не самое удобное решение — он умеет, как и его старший брат, накладывать произвольные стили.

    Еще бонус “белового на чёрном” для мобильных устройств в том, что такое сочетание потребляет меньше энергии (т.к. излучает меньше света). На сколько меньше? Не знаю. Подозреваю, что при длительном чтении весьма ощутимо. Было б интересно увидеть статистику.

    При чём здесь видео к чтению? А ни при чём 🙂
    на самом деле, тем, кто смотрят видео уроки и длительные туториалы, где в основном присутствует символьная и/или графическая информация на белом фоне, удобно сделать инверсию цвета. Я так делаю почти для всех курсов Coursera.
    Tools > Effects and Filter (Ctrl+E) > Video Effects > Colors > Negate colors. К сожаление горячих клавиш для эффектов нету, и это очень не удобно. Но можно автоматизировать при помощи макросов.

    Gmail
    В наличие есть несколько тёмных тем, они обозначаются чёрным треугольником на иконке. К сожалению, фон открытого письма остается белым. Думал исправить это стилем, но не нашел подходящего. Может кто-то из вас напишет такой стиль? Или по крайней мере обновит Gmail Dark Message Pane?

    Не уверен насколько MediaMonkey популярна, но кому-то должно пригодится — VitreousDark.

    Гигиена зрения

    Контрастность

    Как уже упоминалось выше, не используйте слишком сильный контраст (макс. белый на макс. чёрном). Контрастность ≠ читабельность. Светло серый на тёмно сером более комфортно воспринимается. Какая именно градация серого — подбирайте индивидуально.

    Контраст играет роль не только в изображении на дисплее, но и с окружающим миром. То есть, берите во внимание освещение в помещении и старайтесь избегать слишком сильного контраста между освещением и яркостью дисплея/цветов. Особенно это касается полуночников. Если уж работаете в темноте, переключитесь на тёмные цветовые схемы — глаза будут уставать гораздо меньше. Конраст между темной и свтелой темой в темном помещении может отличаться в 20 раз и больше!

    Расстояние

    Не забывайте о законе обратных квадратов. Если вы привыкли наклонятся к монитору, то при чтении увеличьте шрифт (Ctrl+) и отклонитесь хотя бы на 15см более назад. Это существенно уменьшит количество света излучаемого на глаза. Конечно у монитора слишком большая площадь, чтобы считать его точечным источником света и применять к нему этот закон. Но как показывает простой эксперимент — при не слишком ярком окружающем освещении, отклонившись назад с расстояния 55см к 75см, освещение от монитора уменьшается в 1.5 раза (а в темноте и то больше). Рекомендуемое расстояние от монитора — 50-70см.

    Перерывы

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

    Мне исключительно понравилось приложение Workrave. Настраивается на разные промежутки времени и разные по длине паузы (напр., 3 коротких через каждых 15мин., 1 длинная каждый час). Умеет блокировать систему на определенное время без возможности отмены, что очень мотивирует встать с рабочего места 🙂 Имеет много маленьких удобностей в настройках. Например, за несколько секунд перед блокировкой выскакивает предупреждение и если уж сильно заняты и сейчас не до паузы, то просто продолжаете работать — приложение заметить активность (клавиатуры, мыши) и отменит блокировку. Также самостоятельно определяет когда вы сами делаете перерыв и сбрасывает свой таймер.

    Упражнения

    Подозреваю, что большинству читателям знакомы симптомы компьютерного зрительного синдрома такие как спазм аккомодации (псевдомиопия, ложная близорукость) или сухой глаз. В сети достаточно информации как предотвратить эти расстройства путём различных упражнений и гимнастики для глаз. Главное регулярно их делать, хотя бы несколько раз на день. Хочу отдельно отметить 2 типа.

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

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

    Эксперимент

    20 см вперед ближе к монитору.
    Яркость дисплея. В условиях без осветления проводил измерения дважды — с максимальной яркостью дисплея и, соответственно, — минимальной.
    Результаты измерений. Все данные свёл в одну таблицу. Для сравнения использовал соотношение между освещённостями в разных условиях. Как видно с таблицы при „среднем“ освещении отклонившись назад, освещённость уменьшается в 1.5 раза. А в темноте, если использовать темную схему, то освещённость уменьшается в 25 раз.
    Disclaimer! Результаты эксперимент не претендуют на универсальность выводов, так как эксперимент делался “на коленке”. Но смею предположить, что похожие результаты будут наблюдаться у множества повседневных ситуациях.

    Вот и всё. Надеюсь изложенный здесь материал кому-то пригодиться и поможет хоть немного разгрузить глаза.

    ¹В прошлом большинство бумаги делалось с древесины или растений, в которых содержится целлюлоза и/или лигнин. Именно эти вещества придают бумаге желтоватый цвет, который со временем научились отбеливать. Лигнин также источник ванильного аромата старых книг. А чернила (само слово уже намекает на цвет) уже делались чёрными для лучшей контрастности. В древности сажа была основным сырьем для чернил, потом долгое время были популярны чернила из дубовых орехов.

    Читайте также:  Мох на газоне – как избавиться быстро и просто, эффективные способы + фото
    Ссылка на основную публикацию