Подробно об ошибке IIS 7.5 — 404.11

Описание ошибки:

Ошибка HTTP 404.11 — Not Found

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

Подробные сведения об ошибке

Модуль	RequestFilteringModule
Уведомление	BeginRequest
Обработчик	StaticFile
Код ошибки	0x00000000

Запрашиваемый URL-адрес	http://nc.sch34.ru:80/%d0%a3%d0%a7%d0%95%d0%91%d0%9d%d0%98%d0%9a%d0%98/5-9%20%d0%9a%d0%9b%d0%90%d0%a1%d0%a1/7/izo_2017.pdf
Физический путь	C:\Program Files\NetCity2\Web\%d0%a3%d0%a7%d0%95%d0%91%d0%9d%d0%98%d0%9a%d0%98\5-9%20%d0%9a%d0%9b%d0%90%d0%a1%d0%a1\7\izo_2017.pdf
Способ входа	Пока не определено
Пользователь, выполнивший вход	Пока не определено

Наиболее вероятные причины:

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

Что можно предпринять:

• Проверьте настройку configuration/system.webServer/security/requestFiltering@allowDoubleEscaping в файлах applicationhost.config или web.config

Ссылки и дополнительные сведения… Это средство безопасности. Изменять его параметры можно лишь в том случае, если вы до конца понимаете последствия своих действий. Перед тем как изменить это значение, вам следует провести трассировку в сети, дабы удостовериться в том, что данный запрос не является злонамеренным. Если сервер допускает последовательности двойного преобразования символов, измените настройку configuration/system.webServer/security/requestFiltering@allowDoubleEscaping. Причиной этого может быть неверный URL-адрес, направленный на сервер злонамеренным пользователем.

Дополнительные сведения…»

Искусство. 8 класс. 4 урок. Тема «Цвет — элемент композиционного творчества» | План-конспект урока по изобразительному искусству (ИЗО, класс) на тему:

Искусство 8 класс

4 урок

Тема: Цвет – элемент композиционного творчества

Цели:

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

Ход урока

1. Организационный момент. Постановка темы

(у учащихся на партах находятся квадраты 12 цветов)

Задание: а) разделите их на группы

                 б) постройте цветовой круг

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

Тема: Цвет — элемент композиционного творчества

2. Работа по теме урока

а) Значение цветов (работа по группам)

Красный

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

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

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

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

Оранжевый

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

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

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

 Желтый

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

 В Бразилии этот цвет — символ отчаяния, а в сочетании с фиолетовым — символ болезни; у мусульман Сирии — символ смерти. В Китае, наоборот, желтый цвет очень популярен, так как он является символом империи и великолепия. Для русского человека желтый цвет — это знак разлуки и измены.

Желтый помогает принимать новые идеи и точки зрения других людей. Это цвет оптимизма.

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

 Зеленый

Насыщенный, спокойный, свежий, нежный, умиротворяющий, живой. Действует успокаивающе. Он символизирует мир, покой, любовь, спасение.

 Зеленый цвет любят в Мексике, Австралии, Ирландии и Египте. В Китае зеленый цвет символизирует роскошную жизнь и молодость; в Индии — мир и надежду.

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

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

 Голубой

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

Голубой цвет для китайцев — один из траурных цветов; в Индии — символ правдивости; в Бразилии — символ печали.

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

Психология: помогает при негативных психических состояниях: застенчивость, страх говорить, плохие отношения.

 Синий

Он тяжелый, строгий, таинственный, чистый. Первое чувство, которое он вызывает, — это чувство настороженности. Синий цвет символизирует вселенную, космос.

Успокаивающий цвет. Он способствует физическому  расслаблению, создает атмосферу безопасности и доверия.

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

 Фиолетовый

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

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

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

 Психология: помогает при негативных психических состояниях: невроз, потеря веры, отчаяние, потеря самоуважения.

 Белый

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

Это цвет радости и праздника.

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

 Черный

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

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

б) Группировка цветов

Основные цвета: желтый, красный, синий

Дополнительные цвета: противоположные в цветовом круге

Ахроматические цвета: черный, белый и все серые (от самого темного до самого светлого). Это так называемые нейтральные цвета

Хроматические цвета — все цвета, кроме черного, белого и серых, то есть красный, желтый, синий, зеленый, розовый, голубой, малиновый, бирюзовый и т. п.

3. Практичекая работа

а) теоретический материал

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

б) Создайте композицию из 2 — 3 прямоугольников, 3 — 4 прямоугольников и небольшого цветного кружка, который должен стать доминантой в композиции. Постарайтесь добиться эмоционально-цветового преображения плоскости (ее зрительного «расширения», «замкнутости» и т.д.).

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

г) анализ выполненных работ: соответствие поставленной задачи, цветовое решение, творческий подход

4. Домашнее задание

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

5. Итог урока

Какое значение для человека имеет цвет?

Может ли цвет «управлять» человеческими эмоциями? Как этот факт используют художники?

Система подбора цветов для интерфейса. Фундамент. Часть 2

Создание доступной цветовой системы с нуля

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

Давайте вспомним основы.

Доступность

Необходимо соблюдать Рекомендации по обеспечению доступности веб-контента (WCAG) 2.0 и целевой уровень AA из раздела 1.4.3, чтобы визуальное представление текста и изображений с текстом имело коэффициент контрастности не менее 4,5 : 1.

Это позволит с уверенностью использовать систему и улучшит юзабилити продукта.

Системность

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

Масштабируемость

Масштабируемость станет неотъемлемым свойством цветовой системы, которая использует стандартизированные методы именования и генерации тона. Это позволит системе масштабироваться с ростом потребностей .

Строительные блоки

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

1. Тональная шкала
2. Именование
3. Тон
4. Развитие тональности
5. Руководство по масштабированию

Тональная шкала

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

Мой подход к определению тональной шкалы состоял в том, чтобы начать с середины и найти средний тон для серого цвета. После этого я расширил этот тон до обеих крайностей, добавив к нему оттенок/тень ( tint/shade) с шагом 20%. В результате получилась шкала с 11 тонами и 10 шагами, как показано ниже.

Шкала оттенков серого

Как вы могли заметить, тон, который я установил в качестве средней точки (#757575), не является идеальным средне-серым в цветовом пространстве sRGB, то есть #808080. Почему можете спросить вы? А что на самом деле такое средний тон серого? – спрошу я в ответ. Как и со многими вещами, вряд ли есть однозначный ответ. Ведь в зависимости от используемой цветовой модели, средняя точка для каждого цвета будет отличаться по тону.

Средний тон серого цвета в соответствии с 3 разными цветовыми моделями

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

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

Серый-50 (#757575) достигает коэффициента контрастности 4,5 : 1 или выше, когда используется на фоне белого или черного цветов. Это соответствует уровню AA стандартов доступности WCAG для минимального контраста.

10-ступенчатая шкала дает очень классный эффект. Любые 2 тона с 5-ступенчатым зазором дают коэффициент контрастности

4,5 : 1 или выше.

Каждые 5 шагов дают контрастность, большую или равную 4,5 : 1

Это делает систему предсказуемой.

Именование

11 сгенерированных ранее тонов логически соответствуют нашей схеме числового именования, с весом 0–100. Поскольку тоны также включают в себя белый и черный, мы можем исключить их, чтобы получить 9 тонов серого. В результате получается шкала от 10 до 90 для каждой палитры.

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

Например, если я использую серый-10 для фона, я знаю, что серый-50 не пройдет тест контрастности, так как это всего лишь 4 шага от серый-10. Таким образом, ближайший доступный тон – это серый-60. Точно так же на темном фоне, скажем, серый-80, доступным будет текст с цветом серый-30.

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

Apple Music | слева: оригинальные цвета приложения, справа: подправленные элементы для соответствия уровню AA

Тон                          

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

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

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

Когда тон постоянен, изменения светлоты или насыщенности создадут

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

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

Светимость

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

Тон vs светимость

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

среднего серого тона #757575.`

Нормализированная светимость для тона серый-50

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

Выбор

Я выбрал следующие 5 тонов для своей цветовой системы:

Цветовое колесо, отображающее градусы º для выбранных тонов

По часовой стрелке: красный (0º), желтый (43º), зеленый (99º), синий (204º) и фиолетовый (269º).

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

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

Важно сначала найти средний тон, который будет следовать тому же принципу, установленному в этой системе. При использовании он должен иметь коэффициент контрастности 4,5 : 1 или выше как на белом, так и на черном фоне. Colorable легко справится с этой задачей. Это удивительно простой веб-сайт, созданный Brent Jackson. Он позволяет вам создавать тона с помощью

цветовой системы HSL и отображать их контрастность для выбранного цвета фона в режиме реального времени.

Сперва я разработал средний тон для выбранного фиолетового тона (269º), установив насыщенность на 1,00 и светлоту на 0,50. Когда мы проверяем коэффициент контрастности для белого и черного фона, мы понимаем, что этот тон находится далеко от середины, которую мы ищем.

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

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

Я проделал это упражнение со всеми выбранными тонами и подобрал тон-50 для каждого.

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

Развитие тональности

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

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

Скриншот Visual Studio Code

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

Скриншот Sketch

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

Есть несколько методов, которые позволяют предсказуемо развивать тональность.

• Смешивание оттенков и теней
• Использование David Johnstone’s swatch and gradient generator
• Использование сайта Colorable для ручного поиска тонов, равных заранее определенному контрасту

Оттенок и тень

Оттенок (tint) получается путем смешивания тона с различным количеством белого, тогда как тень (shade) получается путем смешивания его с черным. Именно этот метод я использовал для разработки тональной шкалы серого. Для генерации 11 полных тонов, начиная с середины (Tone-50), я каждый шаг смешал с ним 20% белого / черного. Давайте применим этот метод, чтобы найти тональность для фиолетового.

Развитие тональности при помощи метода оттенков и теней

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

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

Использование Swatch generator

Есть еще более простой способ развития тональности. Благодаря David Johnstone, я могу просто ввести нужный тон, а также черный и белый, чтобы сайт сгенерировал определенное количество образцов, охватывающих эти 3 тона. В моем случае всего 11 тонов.

Выбор цвета и градиента Lch and Lab от David Johnstone

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

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

Развитие тональности на основе контраста

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

Colorable позволил мне ввести свой средний тон в качестве обоих цветов, а затем просто переместить ползунок светлоты вверх или вниз, чтобы найти следующий тон на шкале с контрастностью приблизительно 1,35: 1.

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

С помощью Colorable можно найти последовательные тона от фиолтетовый-50, изменив ползунок светлоты до контраста 1,35: 1

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

Ниже представлена ​​фиолетовая палитра, разработанная с использованием всех 3 методов. Можете ли вы сказать, где какой метод?

Сравнение палитры фиолетового, сделанной при помощи 3 упомянутых выше методов

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

Палитра

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

Полная система

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

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

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

Рекомендации по масштабированию

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

Разработка 4 новых тонов между белым и серым-10 с использованием метода оттенка

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

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

Мы можем разработать акцентные тона и просто добавить суффикс в нашу схему именования, например, фиолетовый-40A, где A обозначает акцент (Accent). Этот тон фиолетового должен иметь такой же коэффициент контрастности, как  фиолетовый-40.

Разработка фиолетового-40A, в качестве акцентного цвета для альтернативной палитры

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

Вывод

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

Отдельное спасибо Noor за помощь в написании статьи.

Спасибо моим коллегам из KeepTruckin. Без их поддержки у меня не было бы мотивации двигаться вперед. ❤

Подписывайтесь на автора в Instagram и Facebook. Вы также можете связаться с ним на LinkedIn.

Методы построения гибкой цветовой палитры для вашей дизайн-системы

Дисклеймер: в данной статье будут использоваться следующие термины и их переводы:

color palette — «цветовая палитра»;  color theme — «цветовая тема»; практически то же, что и color ramp — «схема цветовых переходов», «схема переходов» и иногда просто «схема».

Если вам покажется, что перевод можно улучшить — пишите на [email protected], поговорим.

Mineral UI  это open source дизайн-система, которая создается компанией CA Technologies и будет использоваться во всех наших продуктах. Цвет — это центральный строительный блок любой дизайн-системы; кроме того, именно цвет оказался одной из самых сложных проблем в дизайне, с которыми мы когда-либо сталкивались, в особенности из-за большого количества требований к себе:

• У Mineral есть встроенные по умолчанию функции обеспечения доступности — вся наша работа с цветом должна осуществляться согласно требованиям WCAG 2.1 по контрасту уровня соответствии АА.

• Mineral предназначена для последовательного моделирования, и схемы цветовых переходов (color ramps) в ней можно заменять в любое время. Значения в схеме перехода (но не значения отдельных цветов) применяются к каждому элементу интерфейса. Например, цвет синий-60 должен восприниматься таким же по контрастности как красный-60 или бирюзовый-60.
  

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

• Цвет используется, чтобы показать статус. Множество продуктов компании CA Technologies используется чтобы описать и/или сообщить о различных статусах — ошибках, развитии истории, доступности маршрутизатора и т.д. Цвет — это важный инструмент для моментальной передачи значения, поэтому у нас есть несколько вариантов UI-компонентов, которые служат основополагающими концепциями в нашей системе. Эти цветные элементы интерфейса должны гармонично сочетаться со всеми нашими цветовыми схемами.

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

Новые схемы цветовых переходов (color ramps), описанные в этой статье, используются на сайте mineral-ui.com. Если вам хочется попробовать их у себя — взгляните на наши дизайн ассеты.

mineral-ui.com

Mineral UI это open source дизайн-система, построенная на библиотеке React, и созданная для разработки привлекательных продуктов. Это апогей совместной работы дизайнеров и разработчиков, который предоставляет командам возможность быстрее реализовывать высококачественные продукты.

Ретроспективный обзор

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

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

Взято из Plasma Design System. Основные элементы, такие как цвет, сложно поменять позже.

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

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

• Тематическая гармония: в каждой цветовой теме должно быть одно значение тона.
  

• Четкие контрольные точки цвета (hue breakpoints): у нас многие продукты продаются модулями или наборами, поэтому цвета должны быть настолько похожи, чтобы восприниматься как цветовая «семья», но в то же время достаточно ясно давать понять юзеру, что есть разные модули в рамках одной семьи.
  

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

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

• Доступность: наша цель — чувствовать уверенность в том, что каждый получает положительный опыт, используя наш продукт. Mineral поддерживает средний уровень цветового контраста (АА). Визуальное представление текста должно осуществляться с коэффициентом контрастности 4,5:1 в каждом из компонентов пользовательского интерфейса.

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

Мы провели глубокий анализ других тематических цветовых палитр, использующих схемы цветовых переходов —  исследовали палитры IBM Design, Material Design и Open-Color. (Заметка: Если вам интересно изучение других дизайн-систем, можно начать с Adele от UXPin). Цель исследования заключалась не в том, чтобы скопипастить их идеи, а скорее в том, чтобы «заглянуть за кулисы» и понять, каким образом принимаются решения по выбору того или иного цвета.

В процессе исследования мы фокусировались на следующем:

• Тон (Hue): Используется ли в каждой цветовой палитре одно значение тона? Или же значение тона меняется в пределах одной схемы цветовых переходов?

• Паттерн: подчиняется ли выбор значений какому-либо правилу? Если такое правило существует, применимо ли оно для других палитр?
  

• Насыщенность и яркость (светлота): Как работают насыщенность и яркость, когда каждое значение уменьшается или увеличивается в пределах схемы цветовых переходов?

RGB, HSB, HSL, или HEX?

Работа с моделями цветового пространства — это сложная тема, заслуживающая отдельной статьи. Но вкратце, вот, что важно: в этих примерах я работаю с моделью HSB (Hue, Saturation, Brightness — тон, насыщенность, яркость), потому что этот подборщик цветов — один из самых удобных для пользователя, он идеально подходит для изучения  и настройки цвета. Тем не менее, HSB (360 × 100 × 100 = 3 600 000 цветов) может выразить только около 21,5% цветового пространства модели RGB (256 × 256 × 256 = 16 777 216 цветов).

HSB — хороший инструмент для изучения цвета, но чтобы избежать проблем с рендерингом между различными интерпретаторами (браузерами, программным обеспечением для проектирования, дисплеями и т. д.), окончательное определение цвета наиболее точно записывается как значения в RGB или HEX. Еще одно важное замечание: HSL и HSB — это две разные модели, имеющие разные принципы, и их не следует путать. Примеры в этой статье приведены в HSB.

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

IBM Design

Цветовая палитра IBM использует весь спектр насыщенности и яркости, но было сложно определить единое правило, которому бы подчинялись разные схемы цветовых переходов. Возьмем Зеленый (см. ниже) — у IBM широко сдвигается значение тона между 78 и 120, — может быть сложно последовательно воспроизвести и управлять такими значениями при работе с другими цветами. В IBM явно ценят доступность, потому что коэффициент контрастности они раз за разом ставят на 4,5:1 или выше, когда значение равно 50 или выше.

https://www.ibm.com/design/language/resources/color-library

Material Design

Значения в Material Design быстро изменяют свое направление на графике, когда  значение достигает 500. У некоторых цветов могут быть проблемы с доступностью, потому что некоторые базовые цвета оказываются ярче, чем цвета на других позициях в палитре. Конечно, проблема может быть решена путем изменения цвета текста при переключении тем (например, использовать черный цвет текста вместо белого), но наша цель — найти решение, с которым всегда будет хорошо работать один определённый цвет текста.

https://material.io/guidelines/style/color.html#color-color-palette

 

Open Color

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

https://yeun.github.io/open-color/

 

Анализ

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

• В Open Color прослеживается наиболее определяемый паттерн, палитра была разработана так, чтобы её масштаб легко менялся при добавлении других цветов.

• Интересно, что в большинстве цветовых палитр тональный сдвиг используется для определения значений цвета на схеме цветовых переходов — особенно у IBM.

Дизайн цветовой палитры

Система тем в Mineral содержит серую схему (она используется во многих темах) и ещё несколько тематических схем. Когда мы говорим о «цветовой палитре», мы имеем в виду тематические схемы.

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

Как определить смену в теме за три простых шага

1. Базовый цвет: базовый цвет — доминирующий цвет в темах; это тот цвет, который будет использоваться в основном в элементах интерфейса. Тема-60 всегда является базовым цветом для светлых шаблонов (белый текст на цвете темы), а тема-50 — базовым цветом для темных шаблонов тем (черный текст на цвете темы). Коэффициент контрастности этих двух цветов всегда 4,5:1 или выше.
2. Цвета рядом с базовыми: эти цвета будут использованы в ховерах, активных и фокусных состояниях базового цвета в элементах действия, таких как кнопки, ссылки и элементы форм.
3. Начальные и конечные цвета: эти цвета чаще всего используются как акцентные фоновые цвета, либо для добавления визуальной массы элементу интерфейса, как в светлых, так и в тёмных темах. Например, тема-10 (светлая) или тема-100 (темная) могут использоваться в качестве фона для выбранных элементов в выпадающем меню или в строке таблицы.

Метод для создания первой версии палитры

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

Мы начали с выбора базового цвета. Это решение может быть весьма произвольным, хотя мы целенаправленно искали цвета высокой насыщенности с коэффициентом контрастности 4,5:1 или выше. Здесь мы еще думали, что у нас не будет темной темы, и что цвет текста будет меняться через код с черного на белый и обратно в зависимости от контрастности.

В то же время мы выбрали конечные точки схемы переходов — цвета со светлыми (тема-10) и темными (тема-100) значениями. Светлые цвета имеют яркость от 90 до 100, а темные цвета — от 20 до 30. Палитры цветов темы-10 значительно менее насыщены, чем цвета темы-100.

После определения этих ключевых значений (10, 60, 100), основные цвета каждой темы стали очевидными.

Примечание: сравните цвета первой версии с цветами второй.

Первое заметное отличие — это отсутствие некоторых цветов. Так и есть: лимонный, желтый и оранжевый исчезли, и появился бронзовый цвет. Вот почему:

• Лимонный цвет исчез, потому что в команде решили убрать код, который менял цвет текста в зависимости от контраста (для упрощения). Если бы мы настраивали контрастность лимонный цвет на 4,5:1 с белым текстом, этот цвет уже не был бы похож на цвет лимона (скорее на цвет гусиной какашки).

• С желтым одинаково сложно сделать контрастную цветовую тему. Если коэффициент контраста желтого цвета больше, чем 4,5:1, он будет выглядеть как тот бронзовый цвет, что у нас уже есть.

• Нам написали о том, что оранжевый, используемый для статуса «Предупреждение» в нашей теме, легко путали со статусом «Опасность» (Красный). Бронза появилась на свет как компромиссный способ обеспечить некоторое визуальное расстояние от вариантов «Предупреждение» и «Опасность».

Возвращаясь к методу первой версии:

Теперь пришло время нарисовать кривую цвета и распределить оставшиеся образцы по схеме. Цель — сделать гладкое изогнутое распределение. Каждый паттерн кривой будет немного отличаться, в зависимости от локации ключевого цвета (10, 60, 100).

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

Вот несколько примеров из палитры первой версии:

 

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

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

1. Темы Teal (бирюзовая), Slate (синевато-серая) и Dusk (сумеречная), у которых относительно низкая насыщенность, визуально отличаются от тем с высокой насыщенностью. Когда эти темы размещали на серой схеме, лежащей в основе системы, они выглядели странно.
2. Мы преобразовали цветовую палитру в оттенки серого — и оказалось, что нет равного прироста у каждого значения в темах, поэтому перемена мест по признаку «значение-значение» в рамках одной темы (например, синего-10 и зеленого-10) в некоторых случаях создавала сомнительные результаты в плане визуальной составляющей и контраста.

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

Aaron Sagray (@asagray) обнаружил эту проблему во время проверки значений серого.

После того, как мы обнаружили эти трудности, у нас появилось основание для новой гипотезы: можем ли мы создать систему, которая поддерживает равномерные контрастные переходы между соседствующими (от тема-10 до темы-20 и т. д.) цветами на каждой схеме переходов?

Давайте выкопаем материалы предыдущих исследований из других дизайн-систем и посмотрим, решили ли они эту проблему:

У Material Design и Open Color в разных темах значения серого тона не одинаковы для каждого уровня выборки в схеме цветовых переходов. У IBM получше, с последовательной на вид паттерном в серой палитре (но и тут не идеально в плане значений, зеленый, например, кажется ярче остальных)

Интересненько…

Чтобы изучить значения серого, я воспользовался приложением Sketch, в котором можно манипулировать цветами, и Фотошопом с его проверенными значениями преобразования в HSB. 

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

• Каковы преимущества наличия последовательных значений серого?

• Возможно ли создать систему с точно такими же значениями серого, как у отдельно взятого цвета, во всех темах?

На первый вопрос трудно ответить, пока не попробуешь реальные UI сценарии. На второй вопрос ответить немного легче.

Вторая версия: Обновление цветовой палитры

Когда мы решили исправить проблему последовательности значений контрастности, мы также решили проработать просьбу, единую почти для всех наших бизнес-единиц: темная тема, которая обычно используется для HUDs (Heads Up Displays) в Operations Centers и других средах мониторинга. В первом варианте цветовой палитры использовались сверхнасыщенные цвета на темном конце схемы перехода. Когда мы разместили эти цвета на черном фоне, они выглядели неуместно.

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

1. Создать серый паттерн

Как показано на этой диаграмме, «простым» решением может быть увеличение значений с использованием равномерного интервала между каждым значением. Я задал яркость 95% для темы-10 и 15% для темы-100. Для каждого шага мы уменьшали яркость на 9% по мере увеличения значений темы.

После тестирования некоторых ключевых цветов нашей системы мы поняли, что этот подход хорош для начала, но все же не идеален.

Рассмотрим тему-60: значение яркости составляет 50%, что не соответствует среднему уровню (AA), так как соотношение контрастности составляет 3,95:1. Этот результат заставил нас попробовать более проработанный паттерн «горная вершина»:

Мы поставили яркость темы-10 на 95%, яркость темы-60 на 45% и яркость темы-100 на 15%. Затем мы пробовали разные последовательности непоследовательных  увеличений значений, которые вместе на графике выглядели как «рост, пик и падение» и обнаружили, что если значения повышались одинаково, более низкие или более высокие значения значительно отличались от таковых в середине.

2. Создание цветового паттерна

У нас есть серая схема переходов, которая работает со всеми темами — теперь можно обратить внимание на тон и насыщенность.

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

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

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

Мой монитор довольно-таки большой и широкий 😉

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

Мы упростили себе работу, записав каждое значение цвета в одном месте — так делать особенно удобно, когда есть вероятность, что другим людям нужно будет ссылаться на вашу работу. На этом этапе мы также решили, что было бы неплохо записать точное значение RGB или HEX для разработки. Мы решили использовать HEX.

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

Конвертируем в оттенки серого

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

Заключение

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

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

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

 

Особая благодарность:

Быстрые и простые решения для цвета

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

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

Больше статей о цвете:

Цветная графика

Рисование цветом | Наталья Гриценко

1. Пятновое монохромное ежедневное рисование ограниченным количеством тонов

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

2. Ежедневное рисование на выбранную тему
Рисуем цветом, как умеем. Без ограничений, но с учетом опыта предыдущей недели — обобщаем по тону.
Задача недели: попробовать цветные материалы, которые есть в распоряжении. Примериться, посмешивать, понять, что нравится, что получается. В конце недели выбираем тему для серии: отбираем перспективное из сделанного и выбираем материал.

3. Развитие набросков
Развиваем перспективные наброски в серию. Работаем над композицией — рисуем с разных ракурсов, уточняем формат, дорисовываем недостающие кадры для серии.

4. Цветовые схемы
Завершаем работу над композициями и подбираем разные цветовые схемы. Используем опыт «соседнего» курса. Делаем минимум три варианта. С цветом работаем по представлению, чтобы лучше раскрыть замысел.

5. Пятая неделя
Исполняем серию.

Материалы
• Плотная белая бумага формата А4 (ватман подойдёт), около 30 листов
• Цветная бумага, чем больше разнообразных цветов, тем лучше (вырезки из журналов тоже могут подойти, если однотонные, без текстуры и градиентов, с мелкой текстурой)
• Клей-карандаш
• Острый макетный нож . Например, нож цанговый со сменными лезвиями.
• Коврик для резки ножом, или фанерная доска для резки или планшет из оргалита
• Краски — темпера или гуашь (если гуашь, то белила лучше всё равно темперные), основные цвета, 7-8 штук. Акварель возможна, если вы умеете ей работать.
• Кисти, колонок или синтетика, потолще (например №6) и потоньше (например №3).
• Две емкости для воды
• Тряпки или салфетки чтобы вытирать кисти
• Цветные карандаши мягкие акварельные или обычные из детского набора. Главное свойство — хорошо ложатся на бумагу, дают плотный и сочный цвет, хорошо смешиваются друг с другом. Достаточно коробки 6-12 цветов, не больше.
• Черный, белый и серые карандаши — не простой графитный, а цветной — акварельный, мягкий. Белый и серый карандаши — лучшие помощники. Они приглушают и обобщают шумные участки цветной работы, не меняя цвета.
• Опционально. Цветные карандаши сложных цветов (продаются поштучно в магазинах художественных товаров). Например, песочный, хаки, бледно-голубой. сизо-фиолетовый. В магазине они кажутся невзрачными, блеклыми или бледными. На бумаге — прекрасны и натуральны. Остро заточите, соберите карандаши разных цветов в пары и тройки. Пусть они будут в чем-то антагонистами: темный и светлый, теплый и холодный, яркий и спокойный. Например, оранжевый и темно-зеленый, голубой и рыже-коричневый.

Виртуально и реально,. или «Интернет-ресурс» для всех и каждого!

В эпоху ИКТ трудно переоценить и невозможно недооценивать роль Интернета в процессе образования, воспитания, продуктивного общения и обмена передовым педагогическим опытом. Поэтому в модель Всероссийского конкурса «Учитель года России» включено отдельное испытание, которое так и называется – «Интернет-ресурс».

Глобальная паутина относится к тем изобретениям, которые люди создали, но пока не поняли до конца. Во многом потому, что Сеть подвержена постоянным изменениям, каждую секунду появляются новые интернет-ресурсы, модифицируются онлайн-сервисы и службы, появляются новые пользователи и сообщества по интересам. Изначально Интернет был лишь инструментом передачи цифровых данных с одного компьютера размером с комнату на другой, в настоящее время трансформировался в доступное и многообразное средство самовыражения, реализации всех своих идей и задумок. Казалось бы, сеть Интернет нематериальна, но при этом она постоянно мутирует, растет, ежесекундно усложняется. Она несет и блага, и беды, и мы только сейчас начинаем осознавать степень ее влияния на наш мир.Интернет – это крупнейший в истории эксперимент, который после своего начала не останавливается ни на секунду. Каждое мгновение сотни миллионов людей создают и потребляют в онлайн-пространстве невообразимые объемы информации, и пространство это фактически не имеет границ, в рамках которых действовали бы национальные законы. Благодаря новым возможностям для свободного перемещения информации возник уже хорошо знакомый нам сложный виртуальный ландшафт. Только представьте, сколько сайтов вы посетили, сколько сообщений электронной почтой отправили, сколько историй прочитали в Интернете, сколько нашли интересных методических разработок и решений, сколько посмотрели видеофайлов! Все это Интернет – крупнейшее в мире самоуправляемое пространство. И то, каким в будущем будет это пространство, решать нам и нашим ученикам, тем, кто ежедневно приходит в школу учиться. Умение грамотно работать с информацией – задача для учителей не только информатики, это должно стать задачей каждого учителя.Коммуникационные технологии распространяются по всему земному шару с беспрецедентно высокой скоростью. В первом десятилетии XXI века число людей, имеющих доступ к Интернету, во всем мире значительно выросло с первоначальных 350 миллионов (данные для 2000 г. Estimated Internet Users, ITU World Telecommunication  Indicators) до более 2,7 миллиарда человек (данные на 23 декабря 2013 года, ITU, Strategy and Policy Unit, 9). Эти технологии встретишь в самом отдаленном уголке планеты.Массовое распространение Интернета  в учебных заведениях привело к одной из наиболее поразительных социальных, культурных и политических трансформаций в истории нашей страны, и сейчас в отличие от былых времен мы сталкиваемся с поистине глобальными переменами. Никогда прежде у учителей не появлялось столько возможностей: общаться с коллегами, принимать участие в совместных дискуссиях, находясь на огромном расстоянии друг от друга, повышать квалификацию на онлайн-курсах, не выходя из дома, создавать и использовать в своей работе собственное информационное пространство при помощи своего собственного интернет-ресурса. И хотя эта технологическая революция, конечно же, не первая в истории человечества, она качественно отличается от предыдущих – впервые любой из нас может не только создавать электронную информацию, но и хранить ее в собственном медиапространстве, распространять ее в режиме реального времени, не привлекая посредников. Но в то же время важно понимать, что информационно-коммуникационные технологии как таковые не панацея от всех проблем в образовании, хотя их разумное использование может изменить мир к лучшему. Компьютеры и педагог станут делить между собой всё больше обязанностей в зависимости от того, у кого какие задачи получается лучше решать. Человеческий интеллект используется для выработки суждений, принятия интуитивных решений, анализа нюансов и уникального межличностного общения, которое не способен заменить ни один компьютер. Компьютерная мощь необходима для хранения гигантских объемов информации, бесконечно быстрых вычислений и действий, недоступных человеку. Компьютеры помогают нам анализировать огромные массивы данных, занимаются сложными вычислениями, но задача их использования по-прежнему решается человеком. Информационно-коммуникационные технологии лишь средство для достижения поставленных целей.Современный человек, а особенно учащийся  в школе, который каждый день сталкивается с информационно-коммуникационными технологиями, уже живет как бы в двух различных мирах одновременно – в виртуальном и реальном мире. Причем очевидные плюсы виртуального мира не позволяют полностью от него отказаться. Доступ к информации без географических и языковых барьеров, мгновенный обмен сообщениями и участие в обсуждениях на любую тему доступны в том месте, где нам удобно. При этом в реальном мире мы постоянно сталкиваемся с ограничителями – расстояние, время, языковой барьер и т. д. Важно, чтобы учитель сумел понять, как виртуальный мир может улучшить, ухудшить или изменить мир реальный. Иногда эти миры ограничивают друг друга, иногда вступают в противоречия, а порой один из них усиливает, ускоряет или обостряет явления другого. Информационные технологии столь же повсеместны, как электричество. Они уже настолько обыденны и настолько пронизывают нашу с вами повседневную жизнь, что нашим ученикам трудно понять, как мы могли жить без них раньше.«Информация по определению доступна всем»Это утверждение, высказанное Стюартом Брэндом (редактор Whole Earth Catalog, 1984 г.), до сих пор является одним из ключевых утверждений среди сторонников общедоступности и свободного распространения информации. Человеческая цивилизация основана на совокупности результатов нашей интеллектуальной деятельности, следовательно, правильным является как можно более тщательно фиксировать эти результаты, чтобы обеспечить информацией следующие поколения людей. Задача учителя –  делать информацию о своем предмете максимально доступной для своих учеников, для этого в наибольшей степени подходит сеть Интернет, но, начиная работать с ней, педагог сталкивается с рядом проблем и препятствий. Как найти нужную информацию? Как отправить сообщение по электронной почте? Как создать свой собственный интернет-ресурс? Как организовать дискуссию учеников не только в классе, но и в цифровом пространстве? Это далеко не полный перечень вопросов, которые задает себе учитель в самом начале работы с Глобальной сетью.Большинство людей очень смутно представляют себе, как функционирует Интернет, и во многих случаях это нормально. Чтобы свободно чувствовать себя в виртуальном мире, необязательно понимать внутреннюю архитектуру Сети и знать, для чего нужна хэш-функция. Но перед тем как начать обсуждать, как происходит взаимодействие пользователя и сети Интернет, имеет смысл определить некоторые базовые понятия, чтобы легче было воспринимать дальнейший текст.Изначально Интернет задумывался как сеть сетей, то есть огромная децентрализованная паутина компьютерных систем, предназначенная для передачи информации с использованием стандартных протоколов. То, что видит конечный пользователь, например сайты и веб-приложения, – это лишь «флора» и «фауна» Интернета. За этим стоят миллионы машин, с невероятной скоростью передающих, обрабатывающих и принимающих пакеты данных по сетевым кабелям. Все, с чем мы сталкиваемся онлайн, и все, что сами отправляем, – это в конечном счете лишь последовательность цифр, которые упакованы и отправлены по частям через несколько маршрутизаторов, расположенных в разных частях мира, а затем снова собраны в единое целое у получателя. Медиаконтент, который учитель использует на своем информационном ресурсе, проходит тысячи километров в реальном мире, прежде чем оказаться на рабочем столе ученика, но в виртуальном мире эти расстояния измеряются в один клик. Важно уделять внимание не только содержанию информации на сайте, но и делать удобным нахождение этой информации для любого пользователя.Учебник, рабочая тетрадь уже давно не единственный источник информации для ученика. Для подготовки к урокам как учитель, так и ученик использует сеть Интернет. В таком случае для учителя важно обеспечить своих учеников информацией, которая обладает следующими качественными свойствами: информация должна быть полезной, объективной, доступной, достоверной, полной, точной и актуальной. Среди всех качеств применительно к интернет-ресурсу я бы выделил полезность информации. Полезность может быть оценена исходя из нужд основных ее потребителей, то есть учеников, для решения ими конкретных учебных задач, коллег-учителей для обсуждения методических материалов и трансляции собственного опыта работы, родителей, которым необходима дополнительная информация о процессе обучения. Еще 10 лет назад единственным источником знаний, на который мог опираться учитель, была книга. Но они не всегда доступны, потому что это объект материального мира – можно потерять, забыть дома, испортить и т. п. Зачастую учащийся испытывал дефицит информации. Напротив, информация в виртуальном мире не привязана к какому-либо физическому объекту и постоянно копируется на различные носители.Переход от дефицита к изобилию означает, что, когда дело доходит до выбора того, что читать, смотреть и слушать, у современного человека гораздо больше вариантов, чем было у наших родителей или бабушек и дедушек. У учителя появляется возможность работать не только со своим собственным медиаконтентом, но и транслировать свою собственную персональную культуру. Но возможность выбора не всегда является гарантом появления лучших вариантов. Каждый учитель, который работает в сети Интернет и работает на своем собственном интернет-ресурсе, задает вопрос самому себе: что лучше – использовать готовый материал (статью, диаграмму, фотографии и т. п.) или создать свой собственный? Лучше всего использовать свой материал, но если это необходимо, то можно использовать и чужой материал с указанием ссылок на первоисточник, соблюдая культуру цитирования. Основные принципы проведения экспертизы информационного ресурса педагога на конкурсе «Учитель года-2014»Базовым браузером экспертизы школьных сайтов является Google Chrome. Конкурсантам рекомендуется в обязательном порядке проверить свои  информационные ресурсы через этот браузер. Сайты, некорректно отображающиеся в Google Chrome, могут быть проверены через другие браузеры (Mozilla Firefox, Opera, Яндекс-Браузер).Информационным ресурсом педагога, принимающего участие в конкурсе «Учитель года-2014», может быть интернет-сайт, блог или другой ресурс в сети Интернет, который отвечает критериям оценки и является инструментом отображения работы педагога в сети Интернет. Он может быть создан при помощи языка гипертекстовой разметки (HTML, CSS, JavaScript и т. п.) или при помощи системы управления содержимым сайта CMS (WordPress, Joomla!, Drupal и т. п.). Информационный ресурс может быть расположен на домене первого уровня (www.primer.ru) или быть частью другого домена, например школьного сайта (www.primer.school.ru) или образовательной сети.Если размещенные на сайте файлы (документы, изображения) недоступны либо нечитаемы, они расцениваются как отсутствующие. Рекомендуемые форматы для файлов представлены в таблице 1.Информация и информационные разделы, не размещенные на страницах сайта в явном виде (указанные в меню или подменю), могут быть не замечены экспертом и как следствие не засчитаны. Гиперссылки должны быть выделены другим цветом или быть отформатированы подчеркиванием. Допускаются ссылки как на внутренние страницы и файлы ресурса, так и на внешние интернет-ресурсы, включая документы с указанием авторских прав.Наличие раздела или подраздела, посвященного конкретному виду информации, повышает шансы получения по соответствующему критерию максимального балла. Например, все виды контактов/обратной связи, собранные в разделе «Контакты», будут оценены выше, чем те же контакты, разбросанные по сайту (что, разумеется, не исключает наличия контактов и в других разделах). В случае мультимедиаресурсов (видео, звук, текст) допускается дублирование информации, например, в соответствующем разделе и в тексте сообщений.Новостная лента может содержать мультимедийную информацию (видео, звуковые файлы, интерактивные элементы, текст и др.). При оценке новостных лент более высокий балл ставится за авторскую информацию от учителя (например, информация о проведенных мероприятиях, ходе выполнения лабораторной работы, экскурсиях и др.). Максимальный балл получит новостная лента, состоящая из своих новостей с частотой обновлений не реже одного раза в неделю (частота обновлений проверяется по «учебным» месяцам). Если на информационном ресурсе учителя есть и свои новости, и материалы с других сайтов, то рекомендуется указывать ссылки на оригинальный материал (ссылка на сайт, с которого вы взяли информацию). Желательно, чтобы материал можно было комментировать или имелась возможность высказать свое мнение о размещенном материале.Пустые, а также недостаточно заполненные разделы не засчитываются (например, если в разделе «Презентации к уроку» представлены только несколько работ учителя, тогда максимальный балл за раздел не засчитывается, участник получает половину от максимального балла за факт наличия информации о презентациях учителя).Сайт должен быть доступным для экспертной оценки. Если на момент проведения экспертизы сайт не работает либо заражен вредоносным/фишинговым ПО, повторная проверка сайта проводится не ранее чем через 2 дня, то есть информационный ресурс будет оценен членами экспертного жюри, но не позднее 1 сентября 2014 года. Если сайт сменил доменный адрес, тогда участник должен уведомить об этом членов жюри.Сайты не должны содержать рекламные баннеры и ссылки на сайты, которые не относятся к образовательным или научным ресурсам.Удобство использования информационного ресурса является одним из немаловажных параметров при оценке не только членами жюри, но и пользователями сайта. При этом учитываются следующие критерии, представленные в таблице 2.По умолчанию все страницы сайта должны открываться в том же окне (за исключением специальных окон для просмотра изображений или ссылок на сторонние ресурсы). Файлы, которые предназначены для скачивания, наоборот, должны открываться в отдельном окне (скачиваемый файл открывается либо в новом окне, либо в списке «Загрузки»). Если файл расположен в облачном хранилище (One Drive, Google Drive, Яндекс.Диск), то ссылка должна открываться в отдельном окне.Эксперты, выполняющие оценку интернет-ресурсов, не будут снижать балл за мигающие буквы, бегущие строки, переизбыток анимации, цветов и начертаний, но, как показывает опыт, все, что может помешать получению информации, негативно сказывается на восприятии информации. Весь текст должен быть хорошо читаемый.Выбор цветов текста и фона на веб-страницахЦветовая гамма должна отвечать целям сайта и обеспечивать разборчивость текста. Существуют две полярные цветовые схемы: позитивная (черный текст на белом фоне) и негативная (белый текст на черном фоне). В целом и та и другая схема обладают хорошей читабельностью, хотя иногда говорят, что негативная схема замедлят чтение из-за того, что способствует рассеянию внимания читателя. Большинство сайтов создаются по схемам, близким к традиционной позитивной. Для удобства чтения информации на информационном ресурсе очень важна правильно подобранная контрастность. Черный шрифт на белом фоне сильно напрягает глаза. Гораздо лучше выглядит темно-серый шрифт на светло-сером фоне. Многие профессиональные издательства печатают на бумаге с низкой степенью белизны и шрифтом с чернотой 60-80%. Ниже приведен список некоторых распространенных цветовых сочетаний в порядке ухудшения восприятия их пользователем:1) синий на белом;2) черный на желтом;3) зеленый на белом;4) черный на белом;5) зеленый на красном;6) красный на желтом;7) красный на белом;8) оранжевый на черном;9) черный на пурпурном;10)  оранжевый на белом;11)  красный на зеленом;С точки зрения привлечения внимания лучше воспринимаются черные буквы на желтом фоне, зеленые и красные – на белом. Вы можете использовать данные сочетания для размещения объявлений на сайте. Здесь особенно подходит красный цвет  как самый раздражительный для глаз. Нужно иметь в виду, что приведенные выше рекомендации достаточно условны, так как восприятие цветов и их сочетаний у разных людей отличается.  Фон веб-страниц Любой фоновый рисунок затрудняет восприятие текста. Если вы все-таки решились на его использование, делайте его минимально контрастным и желательно в однотонной цветовой гамме. Рекомендуется не размещать значительные блоки текста поверх фотографий, это затрудняет чтение текста.При подготовке информационного ресурса каждый участник конкурса может самостоятельно проверить свой ресурс по вопросам, касающимся внешнего вида, ответив на следующие вопросы: 1) Выдержаны ли цвета, шрифты, графика в едином стиле?2) Сбалансированы ли цвета дизайна страниц?3) Не вызывают ли цвета сайта чувство дискомфорта?4) Сбалансирован ли макет страницы и не перегружена ли она информацией (особенно это касается главных станиц)?5) Не мешает ли графика воспринимать информацию?6) Легко ли читается текст? Не сливается ли он с фоном?Все приведенные требования являются лишь одним из вариантов представления интернет-ресурса, все они носят рекомендательный характер.Критерии оценки информационных ресурсовЭксперты, участвующие в оценивании информационных ресурсов, выставляют баллы каждому из участников конкурса «Учитель года-2014» согласно установленному порядку и используя критерии, приведенные в таблице 3. Со списком членов жюри можно ознакомиться на официальном сайте конкурса www.teacher-of-russia.ru. ​Андрей СИДЕНКО, учитель информатики школы №29, с. Беляниново, Московская область, абсолютный победитель Всероссийского конкурса «Учитель года России-2013»

«ВЛИЯНИЕ УКИЁ-Э НА ХУДОЖЕСТВЕННЫЙ ЯЗЫК СТАНКОВОЙ ГРАФИКИ А.П. ОСТРОУМОВОЙ-ЛЕБЕДЕВОЙ 1900-20-Х ГГ.» (НА ПРИМЕРЕ САНКТ-ПЕТЕРБУРГСКОГО ЦИКЛА ГРАВЮР). Текст научной статьи по специальности «Искусствоведение»

Культура и искусство

Правильная ссылка на статью:

Титарева Д.С. — «Влияние укиё-э на художественный язык станковой графики А.П. Остроумовой-Лебедевой 1900-20-х гг.» (на примере Санкт-Петербургского цикла гравюр). // Культура и искусство. — 2021. — № 3. DOI: 10.7256/2454-0625.2021.3.32778 URL: https//nbpublish.com/Hbrary_read_article.php?id=32778

«Влияние укиё-э на художественный язык станковой графики А.П. Остроумовой-Лебедевой 1900-20-х гг.» (на примере Санкт-Петербургского цикла гравюр).

Титарева Диана Станиславовна

Научный сотрудник, Брянский областной художественный музейно-выставочный центр 241050, Россия, Брянская область, г. Брянск, ул. Емлютина, 39

И [email protected]

Статья из рубрики «Искусство и искусствознание»

DOI:

10.7256/2454-0625.2021.3.32778

Дата направления статьи в редакцию:

29-04-2020

Аннотация.

В статье рассмотрены и проанализированы ключевые произведения станковой графики А.П. Остроумовой-Лебедевой из Санкт-Петербургского цикла гравюр созданные в период с 1900-х по 1920-е гг., т. к. в этих работах больше всего прослеживается влияние укиё-э. Предметом исследования является проблема художественного своеобразия творческого языка и средства его выражения в произведениях художницы, поскольку А.П. Остроумова-Лебедева, как и многие русские художники рубежа XIX — XX вв. испытала влияние укиё-э на свое творчество. Но в отличие от большинства из них, она восприняла японскую ксилографию на более глубоком уровне. В связи с этим были рассмотрены работы обозначенного периода и проведен сравнительный анализ с гравюрами японских мастеров, посредством применения формально-стилистического метода. Такой подход является существенным, потому что только так можно понять, какую именно роль сыграли японские гравюры в становлении авторского художественного языка А.П. Остроумовой-Лебедевой. Новизна исследования заключается в том, что это одна из немногих попыток в российском искусствознании дать сравнительный анализ гравюр А.П. Остроумовой-Лебедевой и работ японских мастеров. В результате, можно заключить, что влияние укиё-э прослеживается как в композиционном решении, так и в использовании определенных «японских» мотивов в своих произведениях. Так же художница способствовала становлению гравюры как

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

Ключевые слова: Анна Петровна Остроумова-Лебедева, Утагава Хиросигэ, Александр Николаевич Бенуа, Джеймс Уистлер, укиё-э, поиск нового, ксилография, Санкт-Петербург, индивидуальный путь развития, японская художественна традиция

«Влияние укиё-э на художественный язык станковой графики А.П. Остроумовой-Лебедевой 1900-20-х гг.» (на примере Санкт-Петербургского цикла гравюр).

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

Существуют многочисленные исследования, посвященные творчеству А.П. Остроумовой-Лебедевой, в том числе затрагивающие влияние японской художественной традиции на произведения художницы. В большинстве из них отмечался такой прием как стилизация, когда художник обращается к особенностям художественного языка японцев и заимствует определенные черты в изображении посредством стилизации. [1, 2,3] Сложнее обстоит дело со сравнительной характеристикой гравюр А.П. Остроумовой-Лебедевой и японских мастеров, поскольку таких работ практически нет. Хотя применение формально-стилистического метода для более подробного выявления и рассмотрения различных аспектов влияния укиё-э [I] на художественный язык А.П. Остроумовой-Лебедевой было бы логично. Таким образом, цель данного исследования — рассмотреть и проанализировать наиболее значимые гравюры художницы из Санкт-Петербургского цикла, созданные в период 1900-1920-х гг., и провести сравнительный анализ рассмотренных работ с гравюрами японских мастеров. Такой подход является существенным, потому что только так можно понять, какую именно роль сыграли японские гравюры в становлении авторского художественного языка А.П. Остроумовой-Лебедевой.

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

В России, как и в Европе, пристальный интерес к японскому искусству обозначился на рубеже XIX — XX столетий.4 — впервые широко представляет русскому зрителю искусство Японии. И хотя нет прямых упоминаний о том, что А.П. Остроумова-Лебедева посетила данную выставку, подобное предположение уместно, поскольку в это время она активно интересовалась японским искусством, о чем

мы находим подтверждения в ее автобиографических записках. [5, стр 38]

Еще одним важным эпизодом стала выставка японских художников, организованная в 1896 г. С.Н. Китаевым (1864-1927). Именно после этого события начался настоящий

«японский выставочный бум», продлившийся до 1906 г. Вероятно, художница не сразу разглядела особенности японской гравюры, которые впоследствии станут ключевыми моментами во многих ее работах, но совершенно точно на тот момент времени она была потрясена новым миром. О своем впечатлении от выставки Анна Петровна писала в автобиографии: «Раньше я не знала японского искусства. Много часов я просиживала на выставке, очарованная небывалой прелестью форм и красок. Меня поражал острый реализм и упрощение, мир фантастичности и мистики. Их способность запечатлевать на бумаге мимолетные, мгновенные явления окружающей

природы». [5, стр 39]

Влияние первого источника пришлось на сложный период творчества художницы, после продолжительного кризиса в Академии художеств, где она училась с 1892 по 1900г. в мастерских В.В. Матэ (1856-1917), И.Е. Репина (1844-1930), К.А. Савицкого (1844-1905) и П.П. Чистякова (1832-1919). Анна Петровна не видела новых путей для развития и потому искала идеи вне академической школы. Второй источник особенно «проявил» себя в период учебы в Париже с 1898 по 1899 г., через знакомство с новым для нее искусством модерна и импрессионистов. Увиденное помогло воспринять основные идеи и новаторскую подачу художественной формы, которую впоследствии художница воплотит уже в ее собственных гравюрах. Тем не менее, по словам самой Анны Петровны, по-настоящему усвоить уроки японского искусства она смогла только в мастерской американского художника Джеймса Уистлера (1834-1903), также испытавшего серьезное влияние японских мастеров и имевшего немалую коллекцию их произведений. Именно ради работы в его мастерской А.П. Остроумова-Лебедева уехала в Париж. [7, стр 119]

В свое время Анне Петровне помогли в обретении решимости и яркого индивидуализма художники объединения «Мир Искусства», участником которого она стала позднее. Начало плодотворному сотрудничеству было положено в 1897 г., когда художница посетила их выставку, где ее поразило новаторство представленных работ и неистощимое творческое мышление их создателей. [5, стр 49] Закрепилось благотворное влияние личным знакомством художницы с А.Н. Бенуа (1870 — 1960), Е.Е. Лансере (1875 — 1946) и другими участниками объединения, которые на волне всеобщего интереса так же обращались к японской художественной традиции и имели собственные коллекции укиё-э. А.Н. Бенуа, как и Джеймс Уистлер, стал одним из первых, кто высоко оценил

собственные эксперименты Анны Петровны в гравюре. [5, стр 56]

Каждое из этих событий произошло в нужное время и подготовило определенные предпосылки для формирования творческих поисков и создания собственного художественного языка в гравюре А.П. Остроумовой-Лебедевой.

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

обучаясь в мастерской В.В. Матэ с 1889 по 1892г., где начался ее творческий путь как гравера. Сложившийся подход к этому виду искусства не устраивал А.П. Остроумову-Лебедеву, она интуитивно чувствовала потенциал гравюры и стремилась найти новый путь для нее.

Будучи во Франции, художница посещала различные музеи, частные собрания, в том числе выставки современных французских граверов О. Лепера (1849-1918) и Ф. Валлотона (1865-1925). Она хотела увидеть в них кардинально новый подход к ксилографии, иной взгляд, но была разочарована их стилем и подачей формы, хотя позднее художница отметит, что эти работы все-таки оказали на нее определенное влияние. [5′ стр 168]

Больше созвучных для себя идей А.П. Остроумова-Лебедева нашла в работах русских ведутистов XVIII — первой половины XIX вв. — Ф.Я. Алексеева (1753-1824), М.Н. Воробьева (1787-1855), С.Ф. Щедрина (1791-1830), как и в итальянских гравюрах XVI-XVII вв., и в дюреровских листах, увиденных ею в Париже. Изучение гравюр старых мастеров оказало сильное влияние на построение ее собственного граверного языка. У Дюрера (1471-1528) художница подметила виртуозность линии, итальянцы XVI в.

научили ее бархату мягких тонов camaieu. [8, стр 21] Вместе с тем, наиболее ярким открытием для А.П. Остроумовой-Лебедевой стала именно японская ксилография, увлечение которой было продолжительнее всего и оказало наибольшее влияние на творчество художницы. Это подтверждает в числе прочего ее собственная коллекция японской ксилографии, в состав которой вошло более 90 станковых ксилографий,

выполненных лучшими мастерами укиё-э. [9, стр 18-2°1 Благодаря грамотно подобранной коллекции художница не только смогла увидеть все основные этапы развития укиё-э, но и проследить изменения в стилистике и манере изображения различных жанров, что помогло глубже и продуктивнее понять японскую гравюру с профессиональной точки зрения. Анну Петровну влечет поэтичность гравюрных пейзажей японцев, как и кардинально иное отношение к плоскости и форме. Они изображают реальность особыми декоративными приемами, дающими в сумме более глубокое восприятие пейзажа и повседневной действительности. [5, стр 109]

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

бежит, и вся работа художника — удержать его в границах своей воли» [5, стр 117] А.П. Остроумова-Лебедева считала, что основное для ксилографии — это ее лаконичность, характерность, что делает ее особенно выразительной. Она приняла совет своего учителя Джеймса Уистлера обращать внимание на основные черты натуры и опустить тысячи оттенков, которые видит глаз человека. Подобный подход к процессу работы показателен и для творческого метода японских граверов, например, Утагава Хиросигэ (ШПЙЖ, 1797-1858), чьих работ в собрании художницы было больше половины. Оба художника всегда шли от натуры, начиная с многочисленных подготовительных рисунков, где автор подмечает ключевые особенности изображаемого пейзажа, отсекая все лишнее — формируя таким образом окончательный образ произведения. В процессе гравирования художница раскрывала для себя возможности линии, ее пластику, ритм и виртуозность, позднее добавляя цвет, часто идентичный гравюрам укиё-э, поскольку ей

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

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

Начиная с 1900-х гг., художница обращается к городскому пейзажу, в частности, к изображению Санкт-Петербурга и его окрестностей. В работах, рассмотренных ниже, хорошо заметно, что А.П. Остроумова-Лебедева плодотворно восприняла еще одну особенность японской художественной традиции, а именно — особое обращение с плоскостью. Для японских мастеров плоскость как реальная двухмерная поверхность и плоскостность как отсутствие иллюзорной объемности и сопутствующей ей светотени в изображении является более естественной основой двухмерного искусства графики, в отличие от западных мастеров, которые проявляли свое мастерство в умении создавать объемное изображение на плоскости листа. Именно «японский вариант» мы находим во многих произведениях А.П. Остроумовой-Лебедевой, этот прием во многом роднит ее гравюры с работами японских художников, даже там, где мы не находим прямых пересечений с укиё-э.

Подобный подход мы видим в ксилографии «Зимка» (1900), кроме этого, художница использовала традиционный японский прием, где действие происходит по центру плоскости листа, при этом обозначая глубину и границы пространства небольшими штрихами — таким образом не замыкая композицию, а оставляя простор для воображения зрителя. Смелость и легкость исполнения сродни ксилографии Утагавы Хиросигэ «Снежное утро на реке Сумида в провинции Мусаси» (1853), находящейся в ее коллекции. Но в отличие от японского художника, который лишь несколькими линиями набрасывает заснеженный вид, А.П. Остроумова-Лебедева передает образ голых деревьев и кустарников, непокрытых снегом, многочисленными черными линиями на белом фоне листа, что создает некую беспорядочность и нагроможденность в правой центральной части оттиска.

Один из наиболее характерных приемов японских художников — это изображение снегопада как россыпи на поверхности произведения в виде белых кружочков-точек на светло-сером небе, как например, в ксилографии Утагавы Хиросигэ «Станция Марико» (ок.1850) из серии «Пятьдесят три станции Токайдо», опять же находящейся в собрании А.П. Остроумовой-Лебедевой. Этот прием художница использует в более лирической и декоративной ксилографии «Летний сад» (1902). Как и Хиросигэ, художница применяет два цвета — черный, превращенный в целую гамму близких тонов, и оттенок «потухшего» желтого, обозначив закат зимнего дня. Она добивается этого при помощи четырех досок, при разных оттисках варьируя оттенки цветов. Выбор цвета повторяет общую серебристо-серую тональность листа. Интересно, что Анна Петровна использует, в отличие от предыдущей работы, европейское построение перспективы, обозначив глубину пространства не условными линиями, а реальными объектами — уходящей вглубь

сквера аллеей и виднеющимся на заднем плане зданием. Сочетание двух непохожих методов изображения делает эту работу по-особенному интересной.

На волне интереса к творчеству Утагавы Хиросигэ художница создает еще одно значимое для нас произведение, название которого говорит за себя — «Мыс Фиолент в Крыму (Подражание Хиросиге)» (1903). Его манеру исполнения гравюр она называла

упоительной, упоминая в частности листы из серии «Сто знаменитых видов Эдо». [5, стр 124 По всей вероятности, именно эту манеру она взяла за основу для создания своего произведения. В этой черной гравюре мы видим все характерные для японской ксилографии черты: построение формы линией, отсутствие перспективы как таковой и плоскость, превалирующую над объемом. Но, исполняя техническую сторону, А.П. Остроумова-Лебедева решила оставить европейские приемы гравирования, так как было много нюансов, начиная с выбора дерева для досок и заканчивая различностью красок для печати. Тем не менее, художница нашла способ добиться хороших результатов. [5. Стр 97]

В ксилографии «Адмиралтейство» (1904), она раскрыла декоративный потенциал линейного рисунка голых ветвей деревьев, и на следующем этапе — соединение голых веток со снегом в гравюре «Адмиралтейство под снегом» (1909). Схожее расположение главного героя — дерева в пространстве листа мы можем найти и в ксилографиях Хиросигэ «Плантации павловний в Акасаке» (1856) и «Клены в Мама, святилище Тэконы и мост Цугихаси» (1857) из серии «Сто знаменитых видов Эдо», которые также находились в коллекции художницы. Здесь заметен традиционный для японской художественной традиции прием — скрадывание пространственной глубины. Что касается покрытых снегом деревьев, то этот прием мы также видим во многих произведениях из коллекции японских ксилографий, принадлежащей А.П. Остроумовой-Лебедевой. Художница, вероятно, обращается к работе Утагава Хиросигэ II «Храм Тэндзин» (18621864) из серии «Живописные места Эдо», поскольку заметно схожесть в передаче несколькими линиями стволов деревьев и их снежных шапок, лишенных контура. Но, в отличие от Хиросигэ II, который изображает снег на фоне снега, А.П. Остроумова-Лебедева создает иной фон — оливково-бежевый, удачно передающий пасмурное зимнее небо Санкт-Петербурга. Построение перспективы и едва намеченные фигуры гуляющих людей сильно напоминают «Храм Тэндзин». Художница смещает акцент с пейзажа на величественную архитектуру Санкт-Петербурга, выполненную все в той же плоскостной манере, что и пейзаж. Несмотря на многочисленные обращения к японской гравюре, важно отметить, что такой подход к построению изображения напрямую делает отсылку к многочисленным натурным зарисовкам, благодаря которым А.П. Остроумова-Лебедева смогла выбрать наиболее лаконичный и характерный ракурс избранного пейзажа.

В последующих работах, в большинстве своем с 1910-х гг., заметно, что подражательный этап закончен, и А.П. Остроумова-Лебедева в гравюре идет своим путем, воспринимая только то, что созвучно ее собственному пониманию гравюры как полноценного вида графического искусства. Например, гравюры «Колонна Биржи и крепость» и «Нева сквозь колонны Биржи» из цикла «Большие Петербурги» (1908-1910). Здесь художницу интересует организованность архитектурных форм и их противопоставление открытому пространству, в частности — колоны Биржи и открытое пространство всего ансамбля стрелки Васильевского острова с определенного ракурса. Отсюда и тяга к строгой и спокойной симметричности, уравновешенности композиции и силуэту. А.П. Остроумова-Лебедева интересно подходит к композиционному построению, открывая дальние планы сквозь передний так, как видел бы перспективу обычный прохожий, задержавшийся на минуту у колон Биржи. Подобный прием мы видим в ксилографиях Утагавы Хиросигэ

«Плантации павловний в Акасаке» (1856) и «Клены в Мама, святилище Тэконы и мост Цугихаси» (1857), находившихся в коллекции художницы. Хиросигэ смещает взгляд зрителя с первого плана — деревьев, вырастающих из ниоткуда — на открывающийся в перспективе пейзаж с низкой линией горизонта. Также поступает и А.П. Остроумова-Лебедева, используя вместо деревьев колонны, а благодаря низкой линии горизонта можно ощутить себя сопричастным архитектурному пейзажу.

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

Подобный подход, но решенный уже более разнообразными средствами, мы видим в серии «Петербург в почтовой открытке начала XX в.», созданной примерно в тот же период. Здесь в построении композиции в большей степени заметно влияние русских ведутистов XVIII — первой половины XIX вв., особенно в работе «Ростральная колонна и Таможня» (1909) и «Санкт-Петербург. Биржа» (1908). Художница, как и большинство ведутистов, выбирает точку зрения так, чтобы на первом плане была Нева или один из каналов. Большую часть листа занимает небо, на фоне которого четко выделяются силуэты зданий или ростральных колонн. А.П. Остроумова-Лебедева, в отличие от своих коллег прошлой эпохи, использует цвет не для того, чтобы подчеркнуть архитектуру, а наоборот, сделать ее более упрощенной и плоскостной на обобщенном фоне. Основная идея художницы состояла скорее не в подчеркнутом величии города, как это было у ведутистов, а в создании наиболее характерного вида Петербурга. В этом стремлении, как и в использовании схожих декоративных приемов, художница все еще близка к я понс ким ма с те ра м.

В 1912 г. она исполнила большую серию черных гравюр, посвященных Санкт-Петербургу и вошедших в путеводитель авторства В.Я. Курбатова. В ксилографиях небольшого формата художница быстрыми уверенными линиями и изящными силуэтами, лишенными тяжеловесности, ярко и выразительно передала образ города. И хотя здесь чувствуется влияние японской ксилографии в линии или плоскостной манере изображения, но именно в этой серии можно увидеть существенные отличия от того, что художница создавала ранее, точнее говоря — ее собственное восприятие и подачу изображения. Так, например, ксилография «Чернышев мост», где Остроумова-Лебедева использует классический японский мотив снегопада, изобразив его белыми точками на черном фоне, но в конечном итоге у нее это выглядит иначе, более непринужденно, в то время как линия художницы не столь певуча и виртуозна, как у японских мастеров, а более тяжеловесна и громоздка.

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

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

Японские художники смотрели на мир иначе, чем европейские мастера, они искали внутренний дух видимых предметов, их суть и способ его выражения в произведении. Этого же пыталась добиться и А.П. Остроумова-Лебедева — найти наиболее характерный и яркий образ изображаемого ею пейзажа, лишенный подробностей и деталей. Сам характер рисунка несет отпечаток живого общения с природой, не теряя при этом «японское» отношение к плоскости произведения. Эти работы, как и предыдущие, композиционно подобны русской видовой гравюре XVIII- начало XIX вв., но с более обобщенными формами: даже изображение на первом плане, будь то барки или часть какого-либо здания, лишено идентичности и «играет» на общий образ города. Однако в этой серии появляется измельченность форм, не свойственная ее ранним работам. Это наиболее заметно в «Исаакиевском соборе в туманный день» и «Фонтанке». Строит форму здесь не плоскость или виртуозная линия, а быстрый и уверенный штрих. Дальний план становится еще более условным, как, например, в «Постройке Дворцового моста» или «Французской набережной». При взгляде на эти работы кажется, что создать их для художницы не составляло никакого труда — настолько они легки и незамысловаты, но, как известно, подобное впечатление скрывает немалый труд, годы работы с натурой. В сумме все эти особенности данной серии автолитографий дают понять, что А.П. Остроумова-Лебедева переходит к новым художественным поискам и более глубокой связи с современностью.

Рассматривая в хронологическом порядке некоторые работы художницы, в которых особенно заметно влияние укиё-э, мы видим, как неутомимо и настойчиво искала А.П. Остроумова-Лебедева свое творческое воплощение в гравюре. Художница освободила ее от роли репродукции, характерной для конца XIX в., доказав самостоятельность и эстетическую ценность гравюры как полноценного вида графического искусства. Она поставила перед собой задачу, ориентируясь на опыт японских мастеров, цветом обогатить черную, скупую форму гравюры, вывести ее таким образом на новый уровень. И эту задачу она осуществила. Анна Петровна в своем творчестве не раз обращалась к японским ксилографиям, находившимся в ее собрании. Это подтверждают многие гравюры, выполненные в период с 1900-х по 1920-е гг. Влияние японской художественной традиции прослеживается как в композиционном решении, так и в использовании определенных «японских» мотивов в изображении. А.П. Остроумова-Лебедева прониклась особым отношением к плоскости изображения, характерным для восточной художественной традиции в целом. С уверенностью можно сказать, что Анна Петровна многому научилась у японских мастеров, не только освоив техническую сторону создания ксилографии и позаимствовав некоторые особенности построения композиции, но и достигнув мастерства в передаче сути вещей через их характерность, иногда доводя реальные образы до символа. Именно это мы видим в гравюрах 1920-х гг.

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

Библиография

1. Zavyalova A.E. The world of art. Japonism. M.: 2014. s.19

2. Suslov V.A. P. Ostroumova-Lebedeva. L.: 1967. s.32

3. Bogdanov A.A. P. Ostroumova-Lebedeva. L.: 1976.s.47

4. Egorova A. Japanese art at the «Exhibition of objects presented to the Heir Tsesarevich …»: presentation and perception. // Art studies. -2019.-№2; URL: http: //artstudies.sias.ru/upload/isk/isk_2019_2_130-167_egorova.pdf (date of rotation: 4.01.2020)

5. Ostroumova-Lebedeva A.P. Autobiographical notes. T P 1900-1916, L., M.: 1945.s.38.39.

6. Voronova B.G. Collector Sergei Nikolaevich Kitaev. //Japanese engraving of the 18th-19th centuries from the collection of the Pushkin Museum im. A.S. Pushkin.-References.; URL: http:

//japaneseprints.ru/reference_materials/articles/kitaev/index.php (accessed date: 6.01.2020)

7. Anderson Ronald, Koval Anne. James McNeill Whistler: Beyond the Myth. New York 1995.s.119

8. Exhibition catalog: with explanatory text and 8 images. Cab. engravings of the Imperial Moscow and Rumyantsev Museum. Wood engravings by A. P. Ostroumova-Lebedeva. M., 1916.s. 21

9. Ostroumova-Lebedeva artist and collector. State Russian Museum. SPb., 2016, s. 1820.

10. Sarabyanov D.V. History of Russian art con. XlX-beg. XX centuries M., 1993. s.94-117

11. Graphics A.P. Ostroumova-Lebedeva. Engraving and watercolor.; comp. M.F. Kiselev. M., 1984. s.56

12. Ostroumova-Lebedeva A.P. Autobiographical notes. M., 1974. s.76-89

13. Konstantin Andreevich Somov. Letters. Diaries. The judgments of contemporaries M., 1979. s.47

14. Zavyalova A.E. The world of art. Japonism. M., 2014. s.34-57

15. Meyerhold V.E. Benoit Director. Articles. Letters. At 2 p.m. / V.E. Meyerhold. M., 1968. s.68

16. M.V. Dobuzhinsky. Flashbacks. M. 1987 s.48

17. Konshina N.D. «The influence of Japanese culture on Russian literature and painting of the late XlX-early XX centuries.» Dis. for a job. I am studying the degree of Cand. Culturologists S. 2006. s.12

18. Kornilov P. Poet of the city on the Neva // Artist. 1962, No. 10. P.36-41. s.36-41

19. Sinitsyn N.V. Engravings by Ostroumova-Lebedeva, monograph, 1964. s.12

20. Graphics A.P. Ostroumova-Lebedeva: Engravings and watercolors. [Album] / Auth. entry Art. and comp. M.F. Kiselev, M., 1984. s.8

21. Japanese art of the 7th-19th centuries M. 1959 (collection of articles) s.23-56

22. Konrad N.I. Essay on the history of the culture of medieval Japan of the 7th-16th centuries. M., 1980 s.68

23. Grigorieva T.P. Japanese art tradition. M. 1979 s.36,56,79

24. Gian Carlo Calza. Hiroshige: The Master of Natur. Venice. 2009 s.24

25. Voronova B.G. Japanese print of Ukiyo-e. M., 1967s.75

26. Nikolaev N.S. Artistic Culture of Japan of the 16th Century. M.1986 s.34-89

27. Nikolaeva N.S. Japan-Europe. Dialogue in art. Mid XVI-beginning of XX century. M., 1996.s. 24-56

28. Vinogradova I.A. The art of Japan. M., 1985.s.45-67

29. Vinogradova N. A. Traditional art of the East: a terminological dictionary. M., 1997s.65

30. East and Russian art at the end of the XIX beginning of the XX century. / comp. E.S. Lviv,sM.B. Mysina. M., 1978.s 54

Результаты процедуры рецензирования статьи

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

Со списком рецензентов издательства можно ознакомиться здесь.

Актуальность обращения к творчеству Александры Петровны Остроумовой-Лебедевой обусловлена ее значимой ролью в художественной культуре России первой половины ХХ века, прежде всего, — ее вкладом в дело возрождения и развития отечественной гравюры. Соответственно, исследование истоков ее творчества и понимание процессов, воздействовавших на формирование своеобразия ее художественного стиля необходимо как для осознания авторского почерка А.П. Остроумовой Лебедевой, так и для характеристики развития отечественной гравюры в целом. В представленной статье внимание сосредоточено на искусствоведческом анализе гравюр А.П. Остроумовой Лебедевой Санкт-Петербургского цикла (созданных в период 1900-1920-х гг.), в которых прослеживается эволюция художественного стиля автора — от освоения заимствованных элементов художественного языка (искусства укиё-э) до формирования на этой основе собственных художественных доминант творчества. Новизна статьи связана с сравнительным анализом гравюр А.П. Остроумовой-Лебедевой и работ японских мастеров в стиле укиё-э. В статье актуализируется внимание к оригинальности творческих подходов А.П. Остроумовой-Лебедевой на основе синтезе западных и восточных художественных направлений. Характеризуя интерес А.П. Остроумовой-Лебедевой к японской художественной традиции, автор статьи подробно описывает культурный контекст эпохи — «японский выставочный бум» (в том числе и после «восточного путешествия» цесаревича Николая) и формирование собственных коллекций укиё-э. При этом автор статьи подробно описывает совпавший с этим периодом ученический путь и становление А.П. Остроумовой-Лебедевой как художника. Автор подробно рассматривает, какие особенности техники японской ксилографии вобрала в свою работу А.П. Остроумова-Лебедева. Автор доказательно показывает влияние работ из собственной коллекции укиё-э, в частности — внимание Александры Петровны к работам Утагавы Хиросигэ. Особый интерес в статье представляет собственно сравнительных анализ конкретных гравюр А.П. Остроумовой-Лебедевой с конкретными работами японских мастеров и стилем укиё-э в целом. Искусствоведческий анализ Санкт-Петербургского цикла гравюр («Зимка», «Летний сад», «Адмиралтейство» и др.) через стилистику и технику укиё-э позволяет погрузиться в художественный контекст их написания с пониманием технических и содержательных поисков А.П. Остроумовой-Лебедевой. Через анализ гравюр автор статьи показывает эволюцию работы Остроумовой-Лебедевой с техникой укиё-э: работа с натурными зарисовками, плоскостью, особая трактовка перспективы, специфика цветовых оттенков. Автор статьи убедительно показывает, как авторское переосмысление традиций укиё-э подводит к оригинальности авторского языка в серии «Петербург», созданной в конце разбираемого периода. К замечаниям по статье отнесем следующие: 1. Описывая учебное становление А.П. Остроумовой-Лебедевой, автор статьи оставляет за рамками

повествования конкретные даты (годы обучения). Введение таких данных позволило бы читателю статьи лучше ориентироваться в биографии художницы. В частности, из текста статьи не совсем понятно в какие именно годы она была во Франции (а влияние французского импрессионизма автор статьи характеризует как один из важных источников стиля Остроумовой-Лебедевой). 2. Отдельно в статье упоминается учеба у Джеймса Уистлера, но не конкретизируется, что это происходило как раз во время пребывания в Париже, что также может внести небольшую путаницы в понимание внешних художественных воздействий на стиль Остроумовой-Лебедевой. 3. Автор не придерживается единообразия в оформлении некоторых сведений. В каких то случаях приводятся годы жизни деятелей искусств, в каких то нет; в отдельных случаях представлено написание фамилий на языке оригинала, но не везде (хотя написание на языке оригинала (за исключением японских мастеров), на взгляд рецензента, может быть излишним — например, нет такой необходимости при упоминании Дюрера). 4. К существенному замечанию относится неточность при упоминании русских ведутистов. Автор приводит сведения о русских художниках XVIII — первой половины XIX вв., но характеризует их как ведутистов XVII века (это представлено в нескольких разделах статьи), а также в некоторых случаях встречается опечатка в написании как «ведуистов». В целом, статья представляет интерес для читательской аудитории. Библиография соответствует содержанию. После внесения корректировок по отмеченным замечаниям, статья может быть рекомендована к публикации.

темных интерфейсов. Хорошее и плохое. Что можно и чего нельзя.

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

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

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

Большинство исследований показали, что темный текст на светлом фоне превосходит светлый текст на темном фоне, т.е.е., его легче читать. В одном известном исследовании «зрительная усталость» была значительно выше, когда испытуемые читали светлые символы на темном фоне по сравнению с темными символами на светлом фоне (Бауэр, Д., Бонакер, М., и Кавониус, К. Р., 1983).

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

Доисторические рисунки возрастом 30 000 лет в пещере Шове, Франция.

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

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

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

Компания Breitling выбрала черный фон, чтобы выделить дизайн своих часов.

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

Есть даже такие вещи, как синдром компьютерного зрения (CVS) и «глазной дискомфорт».Согласно исследованию, более 83 процентов американцев используют цифровые устройства более двух часов в день, при этом 60,5 процента сообщают, что испытывают симптомы цифрового перенапряжения глаз. (Передержанные глаза: дилемма цифровых устройств.)

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

Bloomberg Anywhere iOS Apps (Джереми Фуэрст).

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

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

Редактор кода ведущего разработчика Амина Шаха Гилани от Atom.

Пользовательские интерфейсы игрового приложения

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

Когда темный интерфейс работает хорошо

Большинство пользовательских интерфейсов, связанных с развлечениями (Smart TV, игровые консоли, приложения для ТВ и фильмов), как правило, имеют дизайн пользовательского интерфейса в темной тематике — не зря.Большинство мероприятий, связанных с развлечениями, происходит вечером, за ними наблюдают с расстояния 6-10 футов и наблюдают в тускло освещенных комнатах — другими словами, экран соответствует обстановке. Кроме того, красочный контент (например, обложки и промо) резко выделяется на темных пользовательских интерфейсах.

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

Hulu.

Netflix.

Приложение Apple iTunes.

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

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

Концепция дистанционного управления и диагностики автомобиля от Ramotion.

Темные пользовательские интерфейсы следует использовать только с разреженным, минимальным текстом и «фрагментированной» информацией с сильным акцентом на визуальные эффекты — свет на текст.Если используется текст, он должен сильно контрастировать с темным фоном — предпочтительно чисто белым или другим ярким цветом (не темно-серым) на черном фоне.

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

Когда темные интерфейсы не работают должным образом

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

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

В этом примере недостаточный контраст некоторых элементов пользовательского интерфейса влияет на пользовательский интерфейс. (Автор GUOHAO.W)

Вот реальный пример того, когда , а не использовали пользовательский интерфейс с темной тематикой: я был вовлечен в проект B2B SaaS, где генеральный директор был непреклонен, что для того, чтобы «отличаться от других», он хотел пойти с темный пользовательский интерфейс, который соответствовал бренду компании … для всей платформы. Для всего. После нескольких встреч и сплочения команды дизайнеров и менеджеров по продукту, стоящих за этим делом, мы смогли отговорить его от такого потенциально пагубного решения.

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

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

Пользовательские интерфейсы, аналитика и инфографика

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

Что можно и чего нельзя использовать при использовании темного интерфейса

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

Когда можно использовать темный интерфейс:

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

Когда лучше держаться подальше от темных интерфейсов:

• Когда много текста (читать на темном фоне затруднительно)
• Когда на экране много смешанного контента
• В случае приложений B2B с большим количеством форм, компонентов и виджетов
• Когда дизайн требует широкой цветовой гаммы

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

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

• • •

Дополнительная литература в блоге Toptal Design:

Светлый или Темный интерфейс? Советы по выбору правильной цветовой схемы для пользовательского интерфейса | by tubik

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

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

Читаемость и разборчивость

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

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

Значит ли это, что интерфейсы со светлым фоном более читабельны? Не всегда. Один из известных гуру дизайна пользовательского интерфейса Якоб Нильсен сказал: «Используйте цвета с высоким контрастом между текстом и фоном. Для оптимальной разборчивости требуется черный текст на белом фоне (так называемый позитивный текст). Белый текст на черном фоне (негативный текст) почти так же хорош. Хотя коэффициент контрастности такой же, как и для позитивного текста, перевернутая цветовая схема немного сбивает людей с толку и немного замедляет их чтение.Разборчивость в большей степени страдает в цветовых схемах, которые делают текст светлее чистого черного, особенно если фон сделан темнее, чем чистый белый ».

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

Museu Landing Страница

Тем не менее, некоторые научные исследования, проведенные еще в 1980-х годах, показывают, что для больших объемов текста светлый фон оказывается более эффективным выбором для большинства пользователей.Изучая, как работают рекламные носители, Д. Бауэр и К. Р. Кавониус поделились своими исследованиями в статье «Повышение четкости визуальных единиц отображения за счет изменения контраста» (1980). В частности, они обнаружили, что участники были на 26% точнее при чтении текста, когда он был выделен темными символами на светлом фоне.

Почему так? Джейсон Харрисон из Исследовательской группы сенсорного восприятия и взаимодействия (Университет Британской Колумбии) объясняет это явление следующим образом.Людям с астигматизмом (которые, по разным данным, составляют около 50% населения) сложнее воспринимать белый текст на черном, чем черный текст на белом. Частично это связано с уровнями освещенности. При ярком дисплее (белый фон) диафрагма закрывается чуть больше, уменьшая эффект «деформированной» линзы. На темном дисплее (черный фон) радужная оболочка открывается для получения большего количества света, а деформация линзы создает гораздо более размытый фокус на глазу. Итак, исходя из этого, если интерфейс представляет собой много копий и предполагает длительное чтение, светлый фон может показаться более удобным для пользователя.

Доступность

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

Четкость

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

Digital Agency Landing Страница

Отзывчивость

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

Среда

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

Календарь Bright Vibe

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

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

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

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

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

Vegan Recipe App

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

Темный интерфейс, белые вкладки для копии

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

Отслеживание полива

Предоставление пользователю возможности выбора цветовой схемы

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

Верхнее приложение

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

Темная сторона пользовательского интерфейса: преимущества темного фона

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

Визуальное восприятие: введение

Искусство и визуальное восприятие: психология творческого взгляда

Выбор цвета на веб-страницах: контраст и удобочитаемость

Правила темного веб-дизайна

Почему светлый текст на темном фоне — плохо idea

Когда использовать белый текст на темном фоне

Как и когда создавать веб-сайт с дизайном на черном фоне

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

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

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

Итак, без лишних слов, давайте исследуем эту черную материю дальше!

Немного о дизайне черного фона

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

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

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

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

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

На практике это звучит так:

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

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

В чем проблема с черным цветом?

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

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

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

Как видите, проблема с черным цветом фона вполне реальна.

Итак, есть ли место черному фону в дизайне?

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

• Сайты-портфолио,
• Сайты студии дизайна,
• Эксклюзивные презентации продуктов,
• Нетрадиционное содержание.

Советы по использованию черного цвета в дизайне

Перво-наперво: даже при использовании черного фона важно создать много «белого пространства», тоже, потому что черная поверхность визуально меньше. Белый фон также служит «разрывом», которого не хватает на темном фоне. Также важно более тщательно проверить удобство использования. По моему опыту, вы никогда не должны использовать легкий шрифт, и он всегда должен быть на 2 или 3 пикселя больше, чем тот же шрифт на белом фоне.

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

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

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

Идея подкрашивать основной цвет исходит от природы, где очень трудно увидеть оттенки # 000000 и #ffffff (не только из-за формата).

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

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

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

.

• выделенные секции,
• Верхний / нижний колонтитул / навигация,
• Комментарии,
• Всплывающие окна.

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

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

Заключение

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

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

Это пока что от меня! Надеюсь, этот пост помог вам и продемонстрировал несколько хороших примеров для всех любителей дизайна.

Соответственно использовались примеры:

• https://www.apple.com/mac-pro/,
• http://www.formigari.it/,
• https://uppertodo.com/,
• https://www.spotify.com/,
• http: //culture.basicagency.com /,
• https://ninjatune.net/2017/,
• https://culture.doberman.co/,
• http://www.tramont.in/,
• https://20jahre.stimmt.ch/,
• https://www.fiftythree.com/paste,
• http://www.ouiwill.com/,
• https://www.strv.com/,
• https://overclothing.com/,
• https://www.weareenvoy.com/.

Темная или белая цветовая гамма лучше для глаз?

Было проведено множество исследований по этой теме с 1980-х годов, и многие из них актуальны и сегодня.Одно исследование 1980-х годов утверждает следующее:

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

Ссылка: Bauer, D., & Cavonius, C., R. (1980). Повышение разборчивости единиц визуального отображения за счет изменения контраста.В Э. Гранджан, Э. Вильяни (ред.), Эргономические аспекты терминалов визуального отображения (стр. 137-142). Лондон: Тейлор и Фрэнсис

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

Людям с астигматизмом (примерно 50% населения) труднее читать белый текст на черном, чем черный текст на белом. Частично это связано с уровнями освещенности: при ярком дисплее (белый фон) диафрагма закрывается немного больше, уменьшая эффект «деформированной» линзы; с темным дисплеем (черный фон) радужная оболочка открывается для получения большего количества света, а деформация линзы создает гораздо более размытый фокус на глазу.

Джейсон Харрисон — научный сотрудник, руководитель лаборатории тепловизоров — Исследовательская группа сенсорного восприятия и взаимодействия, Университет Британской Колумбии

Теперь, похоже, существуют разные факторы контрастности и разборчивости.Окружающее освещение помещения. Яркость монитора. Также вы можете смягчить эффект напряжения белого (#FFF) на черном (# 000), просто уменьшив контраст, например, используя светло-серый (#EEE, #DDD, #CCC) на темном фоне (# 111, # 222). .

---

Обновление

(7 февраля 2020 г.):

Новая статья из Nielsen Norman Group под названием «Темный режим или светлый режим: что лучше?» , предлагает еще несколько исследований по этой теме. Пара ключевых выводов в статье:

Козима Пипенброк и ее коллеги из Institut für Experimentelle Psychologie в Дюссельдорфе, Германия, изучали две группы взрослых с нормальным (или скорректированным на нормальное) зрение: молодые люди (от 18 до 33 лет) и пожилые люди (от 60 до 85 лет). Старый).Ни один из участников не страдал какими-либо заболеваниями глаз (например, катарактой).

…

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

Исследование показало, что темный режим полезен для пользователей с ослабленным зрением:

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

Хотя они отметили одну оговорку, что в этом исследовании использовались ЭЛТ-дисплеи вместо светодиодных дисплеев.

Несколько выводов из статьи:

1. Как правило, световой режим в большинстве случаев обеспечивает лучшую производительность для пользователей с нормальным или исправленным зрением.
2. В то время как светлый режим работает лучше, этот прирост кажется более краткосрочным. Длительное воздействие может привести к миопии.
3. Увеличенный размер шрифта в темном режиме не компенсирует выгоды от светлого режима.
4. Предоставление темного режима все же рекомендуется, хотя он становится потенциальным долгосрочным эффектом в светлом режиме, некоторые нарушения зрения лучше работают в темном режиме, и некоторые пользователи просто предпочитают его.
5. Для приложений, которые обеспечивают чтение в полной форме (книги, статьи, даже новостные сайты), рекомендуется использовать темный режим.

Еще одно примечание к исследованиям, процитированным в статье, заключается в том, что исследования были сосредоточены на «удобном» чтении (т. Е. Чтении 1-2 слов на мобильном телефоне, умных часах или приборной панели автомобиля).

---

Дополнительная литература:

Тёмный режим против светлого: что лучше?

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

iOS 13: Светлый режим (слева) и темный режим (справа)

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

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

Определение: Полярность контраста — термин, используемый для описания контраста между текстом и фоном:

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

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

Человеческий зрачок чувствителен к количеству света

Человеческий зрачок — это ворота в сетчатку: через него свет достигает глаза. По умолчанию зрачок человека меняет размер в зависимости от количества света в окружающей среде: когда света много, он сужается и сужается, а когда темно, он расширяется, позволяя проникать большему количеству света.Меньшие размеры зрачка делают глаза менее восприимчивыми к сферическим аберрациям (при которых изображение кажется несфокусированным) и увеличивают глубину резкости, поэтому людям не нужно так много работать, чтобы сосредоточиться на тексте, что, в свою очередь, означает что их глаза меньше устают. (Апертура камеры работает точно так же: фотография, сделанная при f / 2,8, будет иметь меньшую глубину резкости и, следовательно, более размытую, чем снимок, сделанный при f / 16.)

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

Пользователи с нормальным зрением

Ранние исследования, проведенные в 1980-х годах, по-видимому, указывали на то, что для людей с нормальным зрением или зрением с поправкой на нормальное (то есть носящими правильно прописанные очки или контактные линзы) полярность контраста не влияла на зрение.

Тем не менее, несколько недавних исследований опровергают это первоначальное открытие. В частности, мы сосредоточимся на двух статьях, в которых были задействованы два разных типа задач: в одной, опубликованной в 2013 году в журнале Ergonomics, рассматривалась острота зрения и эффективность чтения, а в другой, опубликованной в 2017 году в журнале Applied Ergonomics , исследовал производительность задачи быстрого чтения — быстрого чтения 1-2 слов, которым люди часто пользуются, когда они взаимодействуют с мобильным телефоном, умными часами или приборной панелью автомобиля, и которое участвует в таких действиях, как проверка направлений или посещение к уведомлению.

Влияние контрастной полярности на остроту зрения и корректуру

Козима Пипенброк и ее коллеги из Institut für Experimentelle Psychologie в Дюссельдорфе, Германия, изучали две группы взрослых с нормальным (или скорректированным на нормальное) зрение: молодые люди (от 18 до 33 лет) и пожилые люди (от 60 до 85 лет). Старый). Ни один из участников не страдал какими-либо заболеваниями глаз (например, катарактой).

Участникам были даны два разных типа заданий:

• Задача на проверку остроты зрения, которая включала обнаружение разрыва в оптотипе Ландольта C — другими словами, показ им символа, похожего на букву «C», ориентированный по-разному, и просьбу определить, где находится разрыв (например,г., верх, низ).
• Задача корректуры, которая включала чтение короткого отрывка и выявление различных типов ошибок

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

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

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

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

Другое исследование, опубликованное той же исследовательской группой в журнале Human Factors , рассматривало, как размер текста взаимодействует с полярностью контраста в задаче корректуры. Было обнаружено, что преимущество положительной полярности увеличивается линейно по мере уменьшения размера шрифта: , а именно, чем меньше шрифт, тем лучше пользователям видеть текст в облегченном режиме. Интересно, что даже несмотря на то, что их производительность была лучше в светлом режиме, участника исследования не сообщили о каких-либо различиях в своем восприятии читабельности текста (например, их способности сосредотачиваться на тексте) в светлом и темном режимах, что только усиливает первое правило юзабилити: не слушайте пользователей.

Влияние полярности контраста на удобное чтение

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

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

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

Днем люди работали быстрее, чем ночью, в светлом режиме, чем в темном, и с большим размером шрифта (4 мм), чем с меньшим размером шрифта (3 мм). В ночное время светлый режим был значительно лучше темного режима, а мелкий шрифт было намного легче читать в светлом режиме. (Более короткие столбцы лучше, чем более высокие. Обратите внимание, что мера времени, указанная в эксперименте, является пороговым значением времени презентации; хотя технически более сложна, чем время оценки, она по сути представляет собой время, необходимое участникам для правильной оценки представленная строка.)

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

Долгосрочные эффекты

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

Интригующее исследование, опубликованное в Nature Research’s Scientific Reports в 2018 году, предполагает, что длительное воздействие светового режима может быть связано с близорукостью. Миопия (или близорукость) относится к неспособности ясно видеть далекие объекты и сильно коррелирует с уровнем образования и чтением.В своем исследовании Андреа Алеман и ее коллеги из Тюбингенского университета в Германии попросили 7 человек-участников прочитать текст, представленный в темном и светлом режимах, в течение часа каждый. Чтобы увидеть, изменилась ли их предрасположенность к миопии после чтения, они измерили толщину сосудистой оболочки, расположенной за сетчаткой. Истончение сосудистой оболочки связано с миопией.

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

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

Пользователи с ослабленным зрением

Литература о пользователях с ослабленным зрением, как ни парадоксально, менее богата, чем литература о людях с нормальным зрением, хотя существует неявное мнение, что темный режим лучше, по крайней мере, для некоторых людей с нарушениями зрения.Гордон Легж и его коллеги из Университета Миннесоты определяют две категории слабовидящих: (1) из-за нарушений центрального зрения и (2) из-за мутности глазных сред.

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

Еще в 1977 году исследование Слоуна показало, что некоторые люди с плохим зрением предпочитают темный режим. (В наших собственных исследованиях доступности Кара Пернис также видела пользователей со слабым зрением, которые иногда переключались между темным и светлым режимами, пытаясь добиться ясности.) В 1985 году Гордон Легге и его коллеги из Университета Миннесоты предположили, что этот эффект вызван «Аномальное рассеяние света из-за облачности глазной среды» — по-видимому, потому, что, если больше света достигает глаза с помутнением линзы, увеличивается вероятность искажения.Таким образом, темный режим может быть лучше для людей с непрозрачным окном, потому что дисплей излучает меньше света.

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

Исследования

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

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

Еда на вынос

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

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

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

При этом мы настоятельно рекомендуем, чтобы дизайнеры позволяли пользователям переключаться в темный режим, если они хотят, чтобы — по трем причинам: (1) могут быть долгосрочные эффекты, связанные с световым режимом; (2) некоторым людям с нарушениями зрения лучше работать в темном режиме; и (3) некоторым пользователям просто больше нравится темный режим. (Мы знаем, что люди редко меняют значения по умолчанию, но у них должна быть возможность.) Маловероятно, что люди будут менять режим отображения для любого случайного веб-сайта, но, если веб-сайт или приложение часто используются, им следует рассмотреть возможность предоставления этой опции для его пользователи.В частности, приложения , предназначенные для длительного чтения (например, книги, журналы и даже новостные сайты), должны предлагать функцию темного режима. И в идеале эта опция должна распространяться на все экраны этого веб-сайта или приложения. Более того, если операционная система предоставляет API темного режима (например, iOS), убедитесь, что вы используете его в своих интересах — это даст тем пользователям, которые решат переключиться в темный режим, возможность испытать ваше приложение или веб-сайт в выбранном ими режиме. контрастная полярность.

Список литературы

А. Алеман, М. Ван и Ф. Шеффель (2018). Чтение и близорукость: вопросы полярности контраста. Научные отчеты 8, 10840 (2018) doi: 10.1038 / s41598-018-28904-x

Дж. Добрес, Н. Шахин, Б. Реймер (2017). Влияние окружающего освещения, полярности контраста и размера букв на разборчивость текста при чтении с первого взгляда, Applied Ergonomics . DOI: 10.1016 / j.apergo.2016.11.001

г. Легге, Г.С. Рубин, Д.Г. Пелли, М.М. Шлеске (1985). Психофизика чтения — ii. Плохое зрение. Исследование зрения .

К.С. Пападопулос., Д. Б. Гудирас (2005). Поддержка доступности для людей с дефектами зрения в цифровых текстах. Британский журнал нарушений зрения. DOI: 10.1177 / 0264619605054779.

К. Пипенброк, С. Майр, И. Мунд и А. Бюхнер (2013). Положительная полярность дисплея выгодна как для молодых, так и для пожилых людей, Ergonomics , DOI: 10.1080 / 00140139.2013.7

Козима Пипенброк, С. Майр, А. Бюхнер (2013). Положительная полярность дисплея особенно выгодна для символов небольшого размера: последствия для дизайна дисплея. Человеческий фактор. DOI: 10.1177 / 0018720813515509

Л.Л. Слоун (1977). Средства чтения для слабовидящих: систематическая классификация и порядок прописывания. Балтимор, Мэриленд: Уильямс и Уилкинс.

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

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

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

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

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

Одной из первых современных операционных систем, предлагающих более темную альтернативу теме «черное на белом», была операционная система Apple System 7, которая дебютировала в 1991 году и имела инвертированную цветовую схему для слабовидящих. Названная CloseView, дополнительная программа специальных возможностей позволяла пользователям переключаться между традиционной темой «черное на белом» и более мрачной темой «белое на черном». Точно так же Windows 95 могла похвастаться переключателем высокой контрастности, который делал в основном то же самое. Windows XP, выпущенная в 2001 году, содержала несколько высококонтрастных тем и возможность изменять цвет пользовательского интерфейса, что позволило создать более естественный вид, который не сильно отличается от нескольких хорошо продуманных темных режимов сегодня.

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

Несколько примечательных примеров: в 2007 году эколог из Сиднея запустил веб-сайт Blackle после прочтения (в основном неточного) сообщения в блоге, в котором утверждалось, что версия Google с темным режимом сэкономит абсурдное количество энергии, поскольку якобы требует меньше мощность для отображения черного экрана, чем белого.Это было верно только в самом расплывчатом смысле для ламповых ЭЛТ-мониторов, которые в то время уже начали выходить из моды; Тем не менее, сайт стал кратковременной вирусной сенсацией с сообщениями о «сотнях тысяч» испытывающих чувство вины пользователей, которые, вероятно, принесли своему создателю значительную прибыль от рекламы в обмен на его вклад в темную (режимную) сторону. В 2012 году Google Chrome запустил расширение High Contrast, которое позволяло пользователям изменять или инвертировать цветовую схему веб-страниц по своему усмотрению.Эта функция по-прежнему остается одним из лучших вариантов для пользователей Chrome, которые ищут способ окунуться в темноту во всей сети, особенно в сочетании с такой темой, как Morpheon Dark. В дополнение к традиционным настройкам белого на черном, расширение High Contrast также позволяет пользователям переключать сайты на оттенки серого, инвертированные оттенки серого и желтый на черном. Темный режим появился в приложении Twitter в 2016 году и был адаптирован для веб-сайта в следующем году. В 2017 году YouTube, Android и iOS от Apple представили свои собственные версии темного режима (хотя технически Apple была функцией Smart Invert, которая автоматически инвертирует практически все, кроме фотографий и видео).Reddit не выпускал официальную настройку темного режима до середины 2018 года, ссылаясь на трудности с получением правильных цветов в сообщении в блоге о столь востребованном обновлении. Одним из самых последних громких развертываний темного режима является MacOS Mojave, который имеет более темный пользовательский интерфейс и позволяет интегрировать сторонние приложения.

Темный режим в Outlook — Outlook

В Outlook для Microsoft 365 тема черного цвета включает темный режим, который обеспечивает черный фон (вместо белого) для окна сообщения.Вы можете переключиться на белый фон для окна сообщения, если хотите.

Перейти на черную тему

Темный режим включен по умолчанию при использовании черной темы. Чтобы переключиться на черную тему в Outlook:

1. Перейдите на панель инструментов и выберите Файл , затем выберите Учетная запись офиса .

2. В разделе Office Theme выберите Black .

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

Примечание: Выбранная тема будет применена ко всем настольным приложениям Microsoft 365.

Переключение между темным режимом и выключением темного режима

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

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

Отключить темный режим

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

• В Outlook перейдите к Файл > Параметры .

• На странице Общие найдите Персонализируйте свою копию Microsoft Office .

• Установите Office Theme на Черный и установите флажок рядом с Никогда не изменять цвет фона сообщения .

• Выберите ОК .

См. Также

Измените внешний вид Office с помощью тем

Темный режим в Outlook.

No related posts.