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



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

Очень короткая версия статьи

Вместо того чтобы готовить для сайта десятки фавиконов достаточно будет создать пять иконок и один JSON-файл.

Вот HTML-код, который попадает в браузер:

<link rel="icon" href="http://personeltest.ru/aways/habr.com/favicon.ico"><!-- 3232 --><link rel="icon" href="http://personeltest.ru/aways/habr.com/icon.svg" type="image/svg+xml"><link rel="apple-touch-icon" href="http://personeltest.ru/aways/habr.com/apple.png"><!-- 180180 --><link rel="manifest" href="http://personeltest.ru/aways/habr.com/manifest.webmanifest">

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

// manifest.webmanifest{"icons": [{ "src": "/192.png", "type": "image/png", "sizes": "192x192" },{ "src": "/512.png", "type": "image/png", "sizes": "512x512" }]}

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

Длинная версия статьи, в которой даны все необходимые пояснения

Совершенство достигнуто не тогда, когда нечего добавить, а когда нечего убрать.

^{Антуан де Сент-Экзюпери}

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

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

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

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


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

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

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

Универсальный набор фавиконов

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

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

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

I. Файл favicon.ico для устаревших браузеров

ICO-файлы, на самом деле, имеют структуру директорий. В них могут быть упакованы графические файлы разных размеров. Я рекомендую остановиться на одном изображении размера 32x32 пикселя. Если же это изображение плохо масштабируется до размера 16x16 (например, оказывается размытым), то вам стоит попросить дизайнера создать его высококачественную уменьшенную версию.

Не стоит увлекаться экспериментами со структурой папки для статических ресурсов и со средствами для улучшения кеширования ресурсов сайта. Предположим, у нас имеется сайт https://example.com. Его фавикон должен находиться по адресу https://example.com/favicon.ico. Некоторые программы, вроде RSS-читалок, пытаясь загрузить фавикон, просто запрашивают с сервера файл /favicon.ico и не утруждают себя поисками этого файла где-то ещё.

II. Одна SVG-иконка с поддержкой тёмной и светлой темы для современных браузеров

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

Для подключения к HTML-странице SVG-значка в её коде, в разделе <head>, должен быть тег <link>, в котором имеются атрибуты rel="icon", type="image/svg+xml" и атрибут href со ссылкой на SVG-файл.

SVG-файлы содержат XML-данные, в состав которых может входить тег <style>, содержащий CSS-код. Тут, как и в любом CSS-коде, могут использоваться медиазапросы, наподобие @media (prefers-color-scheme: dark). Это позволяет организовать подстройку внешнего вида значка под системную тему тёмную или светлую.

III. PNG-файл размером 180x180 для устройств Apple

Если добавить веб-страницу на домашний экран iPhone или iPad в качестве значка для её открытия будет использовано изображение, указанное в разделе страницы <head>, в теге, который может выглядеть как <link rel="apple-touch-icon" href="icon.png">.

Устройства iPad, начиная с iOS 8+, требуют использования изображений размером 180x180 пикселей. Другие устройства могут уменьшить изображение. Если подготовить исходное изображение достаточно высокого качества, то его уменьшение не повредит конечным пользователям (мы ещё об этом поговорим).

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

IV. Манифест веб-приложения с PNG-значками размерами 192x192 и 512x512, рассчитанными на Android-устройства

• Манифест веб-приложения это JSON-файл, содержащий сведения, необходимые браузеру для установки приложения на устройство. Формат этого файла предложен Google в рамках технологии PWA.
• Манифест подключается к веб-странице посредством тега, который может выглядеть как <link rel="manifest" href="path.webmanifest">.
• В манифесте должно присутствовать поле icons, в котором содержатся ссылки на две иконки. Одна из них, размерами 192x192 пикселя, используется для значка приложения на домашнем экране. Другая, размером 512x512, применяется в качестве экрана-заставки, показываемого при загрузке PWA.

{"icons": [{ "src": "/192.png", "type": "image/png", "sizes": "192x192" },{ "src": "/512.png", "type": "image/png", "sizes": "512x512" }]}

Не забыли ли мы о чём-нибудь?

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

Иконки для плиточного интерфейса Windows

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

Иконки для закреплённых вкладок Safari

Браузер Safari выдвигал особые требования для иконок, которые предназначены для закреплённых вкладок. Но, с выхода Safari 12, на таких вкладках можно использовать обычные фавиконы. Даже на apple.com больше не используется mask-icon.

Атрибут rel=shortcut

Во множестве руководств (теперь устаревших) предлагается включать favicon.ico в HTML с помощью следующей конструкции:

<link rel="shortcut icon" href="http://personeltest.ru/aways/habr.com/favicon.ico">

Обратите внимание на то, что ключевое слово shortcut не является допустимым значением атрибута rel и никогда таковым не являлось. Вот отличная статья десятилетней давности, в которой можно найти соответствующие пояснения и указание на то, что конструкция rel="icon" это всё, что нужно.

Табло браузера Яндекс

Браузер Яндекс основан на Chromium. Его разработкой занимается крупнейшая российская поисковая система, которой принадлежит 20% рынка поиска в России. У этого браузера есть удобная функция, которая позволяет сайтам выводить актуальные данные в виджетах, закреплённых на особой панели, называемой Табло. Для реализации этого функционала нужен особый JSON-файл манифеста, загружаемой по ссылке, значением атрибута rel которой является yandex-tableau-widget. Но оказалось, что эта возможность особой популярностью не пользуется. Компания Яндекс удалила со своего сайта соответствующую техническую документацию. В результате для нормальной работы с сайтами в браузере Яндекс достаточно обычного файла-манифеста.

Браузер Opera Coast

Opera Coast это экспериментальный браузер для iOS, который требовал использования иконок особого размера 228x228. В 2017 году браузер исчез из App Store. Я сомневаюсь, что он пережил множество обновлений iOS, которые были выпущены с тех пор.

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

Создание универсального набора фавиконов

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

Шаг 1. Подготовка SVG-файла

Проверьте, чтобы ваш исходный SVG-файл был бы квадратным. Откройте исходный файл в вашей системной программе просмотра графики и проверьте ширину и высоту изображения. Если файл нуждается в правке сделать это можно в любом SVG-редакторе. Например, в Inkscape можно изменить размеры документа, перейдя по пули File > Document Properties. Выровнять логотип по центру изображения можно, прибегнув к команде Object > Align and Distribute.

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

Теперь откройте SVG-файл в текстовом редакторе. Найдите элемент <path>, в котором значение fill отсутствует или представлено тёмным цветом. Добавьте в код медиа-запрос CSS, который срабатывает при изменении темы, и соответствующим образом поменяйте цвета этого элемента:

<svg xmlns="http://personeltest.ru/away/www.w3.org/2000/svg" viewBox="0 0 500 500">+  <style>+   @media (prefers-color-scheme: dark) {+   .a { fill: #f0f0f0 }+   }+  </style>-  <path fill="#0f0f0f" d="" />+  <path class="a" fill="#0f0f0f" d="" /></svg>

Шаг 2. Создание ICO-файл

Откройте файл icon.svg в растровом графическом редакторе. Я рекомендую GIMP бесплатный многоплатформенный редактор.

Согласитесь с растеризацией SVG-изображения. Установите ширину и высоту изображения в 32 пикселя. Экспортируйте изображение в файл favicon.ico, используя настройки 2 bpp, 8-bit alpha, no palette.

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

Для того чтобы включить в состав favicon.ico отдельную версию значка размером 16x16 пикселей, выполните следующие действия:

1. Откройте favicon.ico, содержащий изображение размером 32x32 пикселя.
2. Создайте новый слой размером 16x16.
3. Поместите изображение значка размера 16x16 пикселей на этот слой.
4. Экспортируйте файл. GIMP сохранит каждый вариант значка в виде отдельной версии.

Шаг 3. Создание PNG-изображения

Снова откройте исходный SVG-файл в растровом редакторе и создайте изображение размером 512x512 пикселей. Экспортируйте его в файл icon-512.png. Уменьшите изображение до размером 192x192 пикселя и экспортируйте его в файл icon-192.png. Далее, уменьшите само изображение до размеров 140x140 пикселей, а размеры холста установите в 180x180. Экспортируйте изображение в файл apple-touch-icon.png.

Шаг 4. Оптимизация PNG- и SVG-файлов

Лучший инструмент для оптимизации SVG-файлов это SVGO. Выполните следующую команду:

npx svgo --multipass icon.svg

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

1. Откройте в Squoosh файл icon-512.png.
2. Измените значение параметра Compress на OxiPNG.
3. Включите установку Reduce palette.
4. Установите количество цветов в 64.
5. Пользуясь слайдером сравните то, как выглядело изображение до оптимизации, с тем, как оно выглядит после оптимизации. Если вы заметите различия увеличьте количество цветов.
6. Сохраните файл.

Повторите эти действия для файлов icon-192.png и apple-touch-icon.png.

Шаг 5. Подключение значков в HTML

Теперь нужно подключить favicon.ico и apple-touch-icon.png к веб-странице.

Вот как это выглядит в коде статической страницы:

<title>My website</title>+ <link rel="icon" href="http://personeltest.ru/aways/habr.com/favicon.ico">+ <link rel="icon" href="http://personeltest.ru/aways/habr.com/icon.svg" type="image/svg+xml">+ <link rel="apple-touch-icon" href="http://personeltest.ru/aways/habr.com/apple-touch-icon.png">

Но мы рекомендуем использовать продвинутые средства для работы с кешем (речь идёт о включение в имя файла его хеша). Например, если вы пользуетесь Webpack с плагином html-webpack-plugin, выполните следующие действия:

1. Создайте шаблон index.html.
2. Добавьте этот шаблон в параметры плагина:
   
   

   new HtmlWebpackPlugin({ template: "./view/index.html" });
   

3. Опишите HTML-шаблон с включёнными в него ссылками (здесь для включения в шаблон ссылок на файлы используется ERB, но вы можете пользоваться и другим языком описания шаблонов):
   
   

   <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>My website</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="http://personeltest.ru/aways/habr.com/favicon.ico"><link rel="icon" type="image/svg+xml" href="<%=require('./icon.svg').default%>"><link rel="apple-touch-icon" href="<%=require('./apple-touch-icon.png').default%>"></head><body></body></html>
   

4. Воспользуйтесь плагином copy-webpack-plugin для копирования favicon.ico без добавления к имени файла его хеша.

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

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

Создадим файл favicon-dev.ico, содержащий то же изображение, что и обычный фавикон, но изображение каким-то образом изменённое (это могут быть инвертированные цвета, или нечто подобное). Точно так же создадим и файл icon-dev.svg.

Теперь настроим смену значков в HTML-шаблоне, проверяя условие process.env.NODE_ENV === 'production':

<!doctype html><html lang="en"><head><meta charset="utf-8"><title>My website</title><meta name="viewport" content="width=device-width,initial-scale=1">-   <link rel="icon" href="http://personeltest.ru/aways/habr.com/favicon.ico">+   <link rel="icon" href="<%=+    process.env.NODE_ENV === 'production'+     ? '/favicon.ico'+     : require('./favicon-dev.ico').default+   %>"><link rel="icon" type="image/svg+xml" href="<%=-    require('./icon.svg').default+    process.env.NODE_ENV === 'production'+     ? require('./icon.svg').default+     : require('./icon-dev.svg').default%>"><link rel="apple-touch-icon" href="<%=require('./apple-touch-icon.png').default%>"></head><body></body></html>

Шаг 6. Создание манифеста веб-приложения

При работе со статическим HTML-кодом нужно создать JSON-файл с именем manifest.webmanifest:

{"name": "My website","icons": [{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }]}

Этот файл нужно подключить в HTML-коде:

<title>My website</title>+ <link rel="manifest" href="http://personeltest.ru/aways/habr.com/manifest.webmanifest"><link rel="icon" href="http://personeltest.ru/aways/habr.com/favicon.ico"><link rel="icon" href="http://personeltest.ru/aways/habr.com/icon.svg" type="image/svg+xml"><link rel="apple-touch-icon" href="http://personeltest.ru/aways/habr.com/apple-touch-icon.png">

При использовании Webpack можно воспользоваться плагином webpack-pwa-manifest:

plugins: [,new WebpackPwaManifest({name: 'My website',icons: [{ src: resolve('./icon-192.png'), sizes: '192x192' },{ src: resolve('./icon512.png'), sizes: '512x512 }]})]

Итоги

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

Как вы готовите фавиконы для своих веб-проектов?

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

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

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


Изображение: Lazlo Barclay

Присмотревшись, я понял, что на самом деле всё грустно. Шесть последних комментаторов просто ткнули на одну из 8 часто используемых эмодзи, не написав ни слова. И я по-прежнему не знал, что же думает каждый из них. Большинство подписчиков просто использовали плюс-минус одни и те же эмодзи. Получается, что шесть одинаковых эмодзи мог отправить один и тот же человек. От этого ничего бы не изменилось.

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

Общение и распознавание

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

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

Качественное распознавание (валидация) секрет построения хороших человеческих отношений.

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

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

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

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

Письменная коммуникация

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

Две главных особенности асинхронной коммуникации:

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

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

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

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

Онлайн-переписка

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

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

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

Эмодзи

Эмодзи это современные иероглифы. Сегодня их можно считать самым быстрорастущим языком в мире. За последние 20 лет они стали неотъемлемой частью культуры написания текстовых сообщений. Эмодзи нравятся людям. Исследование 2015 года показало, что 72% британцев в возрасте 18-25 лет предпочитают использовать эмодзи вместо текста (где это возможно). В том же 2015-м британские филологи признали смайлик плачу от радости словом года. Да-да, словом.

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

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

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

Слова vs Эмодзи

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

Эмодзи могут похвастаться коллекцией всего в 3 521 символ. Несмотря на активное развитие, словарю эмодзи ещё очень далеко до уровня развития естественных языков. А наиболее активно мы используем только 200 смайликов.

Когда вы используете эмодзи в своих сообщениях, вы идёте на компромисс.

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

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

Человек vs Карикатура

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

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

Эмодзи это графические изображения конкретных объектов и абстрактных понятий и переживаний. Есть значок для слова машина, но есть также значок для слова экстатичный. В настоящее время эмодзи ограничены небольшим количеством предметов и эмоций. И всё бы ничего, но сам их тон, tone of voice, в данном случае, стиль, в котором они нарисованы, почти всегда один и тот же.

1. Карикатурный стиль: человеческие проявления, например, в нём преувеличены и доведены до абсурда. Смеющийся человек изображён как лицо, выплескивающее глаза от оргазмического ликования. Человек, желающий любви, становится с двумя мультяшными сердечками, скрывающими глаза, предположительно отсутствующие. Человек, высунувший язык (Бог знает по какой причине), становится мерзким парящим жёлтым шаром.
2. Многие смайлики слишком упрощены и лишены нюансов. Это мир, в котором вы чаще всего находитесь в двух базовых состояниях восторженный или депрессивный. Есть, конечно, нечто среднее, но его используют редко, так как оно не выражает эмоций
   Вместе с тем, обесцениваются (и по этой причине отсутствуют) многие эмоции, лежащие где-то между спокойствием и возбуждением.
3. Тяжело передавать смыслы и интонации при серьёзном или просто спокойном разговоре. Да, они хорошо помогают развлечься, повеселиться, поиронизировать, расслабиться в перерыве между работой. Но они не помогают передать реальную мимику, жесты и отношение говорящего.

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

Путь наименьшего сопротивления

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

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

Путь наибольшего распознавания

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

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

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

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

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

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

А какие эмодзи раздражают вас? И вообще, согласны ли вы с мнением автора статьи?

---

На правах рекламы

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

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

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

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

Медиакнопки без автора

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

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

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


Контрольная панель немецкого магнитофона AEG FT4, который производился с 1939 по 1941 год. Никаких иконок, только краткие подписи. Фотография Музея магнитной аудиозаписи в Остине, штат Техас

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


Панель управления магнитофона Ampex AG-440, модель 1967 года. Профессиональный сегмент и назначение только для внутреннего рынка США избавляли от необходимости переводить надписи. Фотография сайта Audiofanzine

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


Швейцарский магнитофон Revox F36 1962 года. Возможно, из-за двуязычности страны происхождения производитель задумался нанести на корпус графические символы, а не надписи текстом. Фотография сайта Reverb

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

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

Попытки есть. Несколько сайтов ошибочно утверждают, что иконки придумал несуществующий шведский дизайнер Филип Ульссон (Philip Olsson) во время стажировки в Японии по окончании его обучения в Королевском технологическом институте. На деле это обрывок информации из Википедии, который в 2012 году добавил викивандал под именем Phlopydisk. Судя по его аккаунтам в Сети, Филип зачем-то вставил своё имя в статью.

Треугольник воспроизведения указывает направо. Туда же движется лента при проигрывании звука. Если речь идёт про катушечный магнитофон с автореверсом, то кнопок воспроизведения иногда две. На магнитной ленте в этом случае 2 (моно) или 4 (стерео) дорожки. В дизайне укоренился лишь один вариант кнопки проигрывания: указывающая слева направо.


Продвинутый бобинник Pioneer RT-909 продавался уже в закат эпохи ленты, с 1978 года. Фотография Walkman Archive

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

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

Цвет кружка кнопки записи был продиктован традицией: красной индикацией обозначали прямой эфир.


Кнопки управления Grundig TK46, магнитофон производили с 1962 по 1964 год. Уже здесь используется красный кружок, хотя в остальном корпус обильно испещрён английскими глаголами. Модель для рынка Германии производилась с надписями на немецком. Фотография Relics & Rarities

Символы из стандарта IEC 417 (также известен как IEC 60417:1973) постепенно распространились по всему миру. На это ушло не одно десятилетие, и часто рядом соседствовали значки и буквы. Но простота значков победила.

А нарисовать интуитивные пиктограммы не так-то просто. В том же документе IEC 417 у привычных треугольников, квадрата и кружка есть аналог, который изображает действия с лентой и сами катушки. К этому аналогу прибегала, к примеру, советская техника: вместо значка 5107B на кнопке воспроизведения стоял похожий на очки 5096, вместо двух паралелльных вертикальных полосок 5111B магическая руна 5111A и так далее.


Советский кассетный магнитофон Квазар-303 выпускался с 1985 года, когда на Западе уже устоялись простые треугольники, квадраты и круги для пиктограмм. Фотография Виртуального музея отечественной радиотехники XX века

Скандинавский след

Символом в macOS обозначают клавишу Command. Как и для многих других особенностей интерфейса Apple, история этого значка восходит к дизайнеру Сьюзен Кэр.

В августе 1983 года команда разработки программного обеспечения Apple Macintosh заметила, что нужна специальная клавиша для вызова команд из строки меню. Разработчики решили поставить иконку компании небольшое яблочко. Так уже поступили с клавиатурой Lisa.


Клавиатура компьютера Apple Lisa. Изображение из архива Bitsavers

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

Внезапно взбунтовался руководивший работами Стив Джобс. Возможно, он увидел программу MacDraw, в которой пунктов меню было по-настоящему много. Он ворвался в здание офиса и потребовал прекратить упоминать логотип Apple всуе.

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

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

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

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


Клавиатура Apple M0110 от оригинального Macintosh. Фотография Deksthority

Сам Джобс покинул Apple в 1985 году и основал собственную компанию NeXT Computer. На клавиатурах NeXT командная клавиша помечена зелёной надписью Command.

Уже в 1986 году в Apple IIGS на клавишу рядом к символу достопримечательности добавили логотип компании. Так сделали для сохранения совместимости с предыдущими поколениями Apple II. В 2007 году логотип компании вновь исчез. На тот момент NeXT уже как десять лет вошла в состав Apple, а Джобс вновь влиял на любые процессы.

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



Составная руна в логотипе стандарта передачи данных по беспроводной связи комбинирует символ младшего футарка хагалаз () и беркану (). Вместе они образуют инициалы HB [Harald Bltand] короля Дании и Норвегии Харальда I Гормссона Синезубого, в честь которого и назвали стандарт. Как и связывающий устройства враждующих производителей протокол Bluetooth, этот правитель X века объединил соперничающие княжества Скандинавии.

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

Новейшие потеряшки

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

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

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


Скриншот из видеоролика. Видео смонтировано в 1990 году, но дата указывает на внутреннюю демонстрацию Xerox 1981 года. Слово гамбургер не звучит: элемент называют кнопкой меню

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

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

Отследить дальнейшее распространение иконки несложно. Гамбургер появился на самих смартфонах 17 июня 2009 года в приложении голосовых заметок в iOS.



Возможный кандидат среди сторонних приложений Tweetie, первый клиент Twitter руки известного разработчика iOS Лорена Брихтера. Tweetie вышел в 2008 году, и на тот момент Брихтер работал в Apple

Поиски гамбургера шли по пути упрощения. Facebook в 2008 году добавила иконку с сеткой квадратиков 23, а через год её поменяла на 33. В 2010 году в интерфейсе приложения девять квадратиков сменили на три полоски.


Интерфейс приложения Facebook для iOS, 2008 год

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



Её создатель веб-разработчик Алекс Кинг, создатель плагина ShareThis для WordPress. В ноябре 2006 года Кинг задался вопросом, нужна ли дополнению специальная иконка. 4 декабря 2006 года веб-разработчик публикует первый вариант, который затем лишь незначительно модифицирует утолщает рёбра графа, чтобы их было лучше видно в маленьком размере.



Кинг удачно предугадал необходимость в новом символе. К концу 2006 года Алекс открыл веб-сайт Share Icon Project, в котором призывал пользоваться этим логотипом для указания действия расшарки, и выложил архив с изображениями. Алекс объявил, что лицензирует иконку сразу под 4 свободными лицензиями: GPL, LGPL, BSD и Creative Commons Attribution 2.5.

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

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

---

Без истории развития стандарта логотип Ethernet понять тяжело: это какие-то квадратики, которые почему-то общаются по одному кабелю. Реальная витая пара идёт от устройства к устройству.


Порт Ethernet и его логотип

Но всё встанет на свои места, если вспомнить, что в 10BASE5, первом стандарте Ethernet, к общему коаксиальному кабелю вампирчиками подключались до 100 узлов.


В логотипе наверняка есть что-то от набросков автора стандарта Ethernet Роберта Меткалфа

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

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

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

---

На правах рекламы

Эпично! Мощные серверы на базе новейших процессоров AMD EPYC для размещения проектов любой сложности, от корпоративных сетей и игровых проектов до лендингов и VPN.

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




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

Отличаются ли американцы от корейцев в распознавании иконок?

Исследование корейских ученых Чжи Хе Ким и Гон Пхё Ли было представлено на седьмой конференции Mobile HCI в 2005 году в Зальцбурге.

Исследование проверяет три гипотезы:

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

Участники

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


Иконки для списка вызовов, сообщений, загрузок, диктофона и браузера

Эксперимент

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



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

Результаты

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


Распознанные корейцами и американцами иконки для списка вызовов, сообщений, загрузок, диктофона и браузера

Корейцы лучше распознавали полуметафорические и буквальные иконки. Американцы лучше распознавали метафорические иконки.


Зависимость количества правильных ответов от сета иконок

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

Cultural Difference and Mobile Phone Interface Design: Icon Recognition According to Level of Abstraction Чжи Хе Ким, Гон Пхё Ли.

Отличаются ли китайцы от американцев и немцев в распознавании иконок?

Исследование Сони Ауэр и Эстер Дик публиковалось на двенадцатой конференции HCI International 2007 в Пекине.
Исследование проверяет две гипотезы:

1. Между распознаванием иконок американцами, китайцами и немцами различий не будет.
2. Но при распознавании иконок, которые ассоциированы с языком группы (например, debug для американцев), у группы, для которой этот язык родной, распознавание будет лучше.

Участники

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

Также исключали результаты тех, кто выбрал ни один из этих значков более чем в 36% случаев или более 60% иконок из одного семейства.
Чтобы получить равные размеры групп, выборка для каждой страны была сокращена до 45 участников.

Эксперимент

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

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

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


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

Иконки были двух типов: связанные с культурой и не связанные.
Например, на значке Информация буква I, первая буква слова Information служит подсказкой для участников из Германии и США, но не для участников из Китая.

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

Результаты

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

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

Американцы правильно распознали 83,73% иконок, немцы 78,81%, а китайцы 68,85%. Но для иконок, связанных с культурой, правильных ответов было 86,22% у американцев, 66,22% у немцев, 47,56% у китайцев.


Слева результаты для всех иконок, справа для культурно обусловленных


Но даже после исключения значков, связанных с культурой, китайские пользователи по-прежнему распознавали иконки хуже других групп (73,24% против 81,55% у немцев и 83,19% у американцев).

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

When Does a Difference Make a Difference? A Snapshot on Global Icon Comprehensibility
Соня Ауэр, Эстер Дик

Отличаются ли мужчины и женщины в распознавании иконок?

Исследование так же было опубликовано на двенадцатой конференции HCI International 2007 в Пекине.
Ученые хотели прояснить два вопроса:

1. Влияет ли гендер на распознавание разных типов иконок?
2. Какие типы иконок любят тайваньские подростки?

Участники

В исследовании участвовали 60 человек от 16 до 24 лет 33 женщины и 27 мужчин. Все использовали мобильный телефон больше 2 лет.

Эксперимент

Иконки разделили на три группы:

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

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

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

Результаты

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

Но во всех трех категориях гендерная разница была незначительной.
Однако было обнаружено, что существует значительная гендерная разница в распознавании абстрактного значка для Call Records (Р = 0,019 < 0,05). Средний балл у женщин (0,91) был выше, чем у мужчин (0,67).

Во второй части эксперимента участники должны были оценивать несколько иконок для одной и той же функции по субъективному критерию нравится / не нравится.

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

The Effects of Gender Culture on Mobile Phone Icon Recognition
Shunan Chung, Chiyi Chau, Xufan Hsu, and Jim Jiunde Lee

Выводы

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

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

Обзоры исследований на другие темы

Знаменитые дизайнеры vs научные исследования про читаемость шрифтов
Красивое удобнее, чем некрасивое? Обзор исследований

Иллюстрация: Юлия Прокопова

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

Поэтому я оптимизирую настройки, чтобы показывать действительно, действительно хорошие буквы. Для этого необходим хороший монитор. Не просто нужен, а ОБЯЗАТЕЛЕН. А под хорошим я имею в виду настолько хороший, насколько это возможно. Это мои мысли, основанные на моём собственном опыте того, какие мониторы лучше подходят для программирования.

Дисплеи низкой плотности

Согласно моему опросу программистов, 43% всё ещё используют мониторы с плотностью пикселей на дюйм менее 150:


Какое разрешение dpi у вашего _основного_ монитора? Для вычисления используйте этот инструмент

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

• Времена дисплеев с низким разрешением прошли. Теперь в ходу дисплеи с высоким разрешением.
  
• Хитрости, разработанные для дисплеев с низким разрешением, не могли волшебным образом заставить текст выглядеть хорошо. Это всегда было и остаётся невозможным. Они просто сделали текст немного менее ужасным, но он всё ещё ужасен.

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

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

Не хватает пикселей

Во-первых, для отрисовки символов просто не хватает пикселей. Возьмём шрифт Consolas, разработанный специально для программистов. Microsoft очень много работала, чтобы настроить его для рендеринга на дисплеях с низким разрешением. Мы установили его на 14px, что является значением по умолчанию в VS Code (и люди часто уменьшают его!):


Consolas на 14px, macOS

На таком размере заглавная буква В занимает на экране всего лишь 69 пикселей. У строчных букв только 7 (семь!) вертикальных пикселей. Это не так уж много. У меня больше пальцев на руках, чем здесь пикселей. Независимо от того, насколько хорошо разработан шрифт, трудно что-либо показать, когда всё, что у вас есть, это семь пикселей. Всё, что немного сложнее, чем Т или Н, становится неразборчивым пиксельным беспорядком.

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


Consolas на 168px

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

Ужасный хинтинг

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

И это работает! Шрифты действительно выглядят лучше с хинтингом, чем без него:


Нет хинтинга (macOS) есть хинтинг (Windows)

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

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


Verdana (k) и Times New Roman Italic (z) перед растеризацией в 13px. Источник

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

Но даже если мы просто посмотрим на вертикальный хинтинг горизонтальных линий, это всё равно слишком сильно меняет шрифт:



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

Но эй! Если вы никогда не видели Consolas в высоком разрешении, кого волнует, имеет ли 'g' такую же форму или нет? Кого волнует, что линии находятся не в том месте, если вы не знаете, где они должны были быть изначально? Ну, иногда проблемы более очевидны: круги не являются кругами, равные расстояния становятся не равными, пропорции все неправильные, то, что должно быть маленьким, становится огромным и наоборот, и т. д. Здесь:



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



Из моего личного опыта разработки Fira Code я видел слишком много способов, которыми простая идея просто приклейте края к ближайшему пикселю может пойти не так:





Это игра, в которой просто невозможно победить.

Дробление пикселя

Можете ли вы нарисовать идеальную линию, которая тоньше одного пикселя?

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



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



Так что вам снова придётся идти на компромисс (внутри другого компромисса!), устанавливая предел, как далеко может отклоняться цвет от чёрного:



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



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

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


Consolas 14px с ClearType и хинтингом Consolas 14px @2x

Макбуки с Retina

Макбук с Retina может заставить текст выглядеть хорошо. Однако есть две вещи, которые вы абсолютно должны сделать.

Отключить сглаживание шрифтов

Во-первых, отключите Сглаживание шрифтов в Системных настройках Общие настройки:



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

UPD: судя по отзывам, похоже, что значение по умолчанию включено. Обязательно выключите его!

Это название настройки вводит в заблуждение. Раньше она называлась Сглаживание шрифтов на ЖК-экранах (LCD font smoothing), что предполагало субпиксельное сглаживание. Но Apple удалила субпиксельное сглаживание из macOS в 2018 году, в том же месяце, когда выпустила свой последний ноутбук без Retina.

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

На самом деле она просто делает шрифт немного жирнее:



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


Настоящий жирный шрифт и поддельный, который имитируется с контуром

Но это именно то, что делает сглаживание шрифтов в macOS! Вот ещё один пример. MacOS размывает пиксельные границы с помощью сглаживания шрифтов:



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

Что это значит для нас, программистов? Если вы возьмёте шрифт, оптимизированный вручную для определённого размера пикселя (каковыми являются многие программные шрифты, например Input на 11px или Monoid на 12px), он будет отображаться размытым, несмотря на все усилия.



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

UPD: Крис Морган упомянул в комментарии, что эта настройка может объяснить, почему так много дизайнеров используют font-weight: 300 в качестве шрифта веб-страницы по умолчанию. Они чрезмерно компенсируют шрифтовое утолщение macOS!

Целочисленное масштабирование

Когда я купил свой первый (и первый в мире) Retina Macbook Pro в 2012 году, это было именно то, что рекламировалось: масштабирование 2, каждый логический пиксель визуализируется на экране 22. Экран 28801800 визуализируется из логического источника 1440900.

К сожалению, с тех пор разум покинул Apple, и в какой-то момент MacBook начал получать странное нецелочисленное масштабирование по умолчанию. Например, экран 28801800 будет иметь логическое разрешение 16801050. Это коэффициент масштабирования 1,7142857143..., или 12/7.

Почему? Я думаю, кто-то в Apple решил, что больше экранной площади лучше продаётся. Проблема в том, что это не такой уж большой рост: всего лишь на 15%. Я имею в виду, что 15% это хорошо, но не принципиально. Самое ужасное, что это происходит ценой потери любого шанса отрисовать любое пиксельно-чёткое изображение вообще!

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



Переместитесь на 1 пиксель вверх или вниз и вы проиграете. Сделайте его на 1px выше или короче вы проиграете.



Пиксельно-идеальная линия? Жаль, но нельзя указать 7/12 пикселя в качестве ширины линии. Ещё хуже, что каждая линия 1px выглядит по-разному в зависимости от её вертикального положения:



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


Сверху: масштаб 2, снизу: то же самое после 12/7 даунсэмплинга

Трудно представить себе кого-то, кто специально хочет увидеть такое.

(понятия не имею, почему нижний правый пиксель отсутствует на всех иконках)

Что происходит с текстом? Ничего хорошего. Сначала он визуализируется чётко попиксельно с разрешением 2, затем масштабируется до 85,7142857143...%, чтобы вписаться в физические пиксели:


Monoid на 12px. Верхняя часть: масштаб 2, нижняя часть: то же самое после 12/7 нисходящего масштабирования

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

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

И не забывайте: это по умолчанию. Каждый Macbook поставляется с этими настройками. Миллионы людей работают, не зная, что их лишили радости экрана ретина.

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



Это сделает все на экране немного больше, оставив на экране (немного!) меньше места. Это ожидаемо. Моё мнение таково: ноутбук это ограниченная среда по определению. Дополнительные 15% не превратят его волшебным образом в огромный удобный рабочий стол. Но, по крайней мере, вы можете наслаждаться этим великолепным экраном и чёткими пиксельными шрифтами. В противном случае, зачем вам вообще покупать экран ретина?

ClearType в Windows

Учитывая все эти разговоры о недостатках ClearType и о том, что он просто необходим на дисплеях с низкой плотностью пикселей, следует ли отключить его на дисплее 4k? Теоретически да. На практике нет.

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



Но даже если вы его выключите, вам все равно придётся пройти через настройку ClearType. Там просто нет кнопки OK \_()_/.

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



И самое главное, текст без ClearType выглядит как дерьмо. Это не обязательно должно быть так (он выглядит идеально на macOS, например), но особенно на Windows это невыносимо. Я думаю, что они даже не проверяют данную опцию:



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



Но текст ClearType в Windows по-прежнему выглядит хорошо, даже на дисплее 4k. Жаль только, что мы пока не можем отключить ClearType.

Возьмите хороший монитор

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

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

• Это должен быть, по крайней мере, монитор 4k. И 5k, и 6k также великолепны, конечно (кроме LG 5к).
  
• Вам нужно использовать целочисленный коэффициент масштабирования.

Это означает, что если у вас есть монитор 4k (38402160) и вы используете масштабирование 2, вы получите эквивалент 19201080 логических пикселей. Таким образом, это базовый монитор 1080p с точки зрения того, сколько вы можете вместить, но с гораздо более чётким пользовательским интерфейсом и текстом везде.

Теперь может возникнуть соблазн использовать, например, масштабирование 1,5. Это даст вам эквивалент 25601440 логических пикселей, что, как вы можете подумать, намного лучше. Это неправильное использование! Идея монитора 4k заключается не в том, чтобы получить больше пикселей, а в том, чтобы получить идеальный пиксельный рендеринг с высокой плотностью пользовательского интерфейса. В противном случае обычный дисплей 1440p будет работать лучше. Простое правило, которое нужно запомнить: выравнивание пикселей перевешивает всё остальное. Дисплей 1440p лучше отображает контент 1440p, чем дисплей 2160p.

Кроме того, можно запустить дисплей 4k с собственным разрешением 38402160 пикселей. Конечно, это зависит от размера дисплея, но, по моему опыту, даже 27-дюймовые дисплеи 4k слишком малы, чтобы работать при 1. Пользовательский интерфейс будет слишком крошечным.

Миф о значении PPI, запатентованном Apple

Некоторые статьи предполагают, что компьютеры Apple должны использоваться только с дисплеями 220 PPI (пикселей на дюйм), потому что это число Apple сама использует на всех MacBook и iMac. Иногда люди заходят так далеко, что говорят, что дисплеи с другими PPI непригодны для использования в macOS.

Вот что я думаю. PPI определяет физический размер пикселя (220 PPI означает, что на дюйм приходится 220 пикселей, или 1 пиксель имеет ширину 1/220 дюйма). Таким образом, Apple гарантирует, что пиксели на всех её устройствах имеют одинаковый размер. Означает ли это, что элементы управления macOS имеют одинаковый физический размер? Больше нет, после того как Apple начала применять нецелочисленное масштабирование по умолчанию на MacBook.

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



Это означает, что угловой размер пикселя 1/220 Macbook эквивалентен пикселю монитора 1/110. На самом деле у меня меньше воспринимаемых пикселей на 27-дюймовом мониторе 4k, чем на 15-дюймовом Macbook Pro!

Даже сама Apple это понимает! Их айфоны имеют более высокий PPI, чем макбуки, потому что на них обычно смотрят с более близкого расстояния.

Подводя итог, я не вижу проблемы с 24-дюймовыми дисплеями 4k или даже 27-дюймовыми дисплеями. Я использую оба с macOS и люблю оба, никогда не было никаких проблем. Конечно, 5k или 6k были бы лучше, но они идут в категорию приятно иметь. 4K это обязательный, абсолютный минимум для всех, кто работает с текстом.

Переходите на 120 Гц

Раньше мир делился на два лагеря: дисплеи с высоким разрешением и дисплеи с высокой частотой кадров. Первое было хорошо для текста, второе для игр, и между ними не было середины. Если вы любите играть в экшн-игры, купите оба (и большой стол). Геймерам не нужны были 4K-дисплеи, поскольку ни одна разумная игра не работала бы при 4k @ 120 Гц, а творческие профессионалы не использовали 120 Гц для редактирования фотографий/текста. Конечно, я был в лагере высокого разрешения с 2014 года и никогда не променял бы рендеринг текста ретины на едва заметное обновление частоты обновления.


HP Z27 (4k) и LG 34GL750-B (120 Гц)

Что ж, раскола больше не существует. Поскольку с недавнего времени (да, я слишком ленив, чтобы проверить) вы можете получить и то, и другое! Вы можете найти монитор 4k, работающий на частоте 120 Гц. Собственно, это открытие и послужило главной мотивацией для данной статьи.

Почему 120 Гц?

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

120 Гц даёт вам несколько существенных улучшений:

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

Конечно, я не могу показать вам, что такое 120 Гц. Но вот что вы можете сделать, чтобы понять идею: переключитесь на 30 Гц и попробуйте работать так некоторое время.

Вы заметите, что всё плохо анимировано и менее отзывчиво. Это связано с тем, что время между обновлениями монитора теперь составляет 32мс вместо 16мс при частоте 60Гц. Это означает, что независимо от того, что вы делаете (нажимаете кнопку, перемещаете мышь), ближайший момент времени, когда компьютер может начать отображать результат, может быть на расстоянии 32мс.

32 мс это очень долго и хорошо заметно. На 60 Гц это время сокращается вдвое: самое долгое, что вам нужно ждать, всего 16мс. на 120Гц это время снова сокращается вдвое: с 16мс до 8мс. в абсолютных числах вы устраняете дополнительные 8мс, что означает, что переход 60 Гц 120 Гц примерно вдвое менее эффективен, чем переход 30 Гц 60 Гц. Но всё-таки стоит того, на мой взгляд.

Что купить?

На самом деле у нас нет особого выбора. Из того, что я могу найти, прямо сейчас на рынке есть только четыре (да, четыре!) дисплея 4k 120+Гц! Думаю, это потому, что спрос не так уж высок, но я рад, что у нас есть хотя бы такой выбор!

Первый Asus ROG SWIFT PG27UQ:



Второй Acer Predator X27:



Третий Acer ConceptD CP7:



Все они очень хорошие мониторы, я уверен. Но цена немного завышена (~2000 долларов), особенно для тех, для кого 120Гц не является вопросом жизни и смерти.

Есть ещё несколько мониторов с диагональю 55 дюймов и более, которые было бы трудно использовать на обычном рабочем столе.

Наконец, по какой-то невероятной удаче у нас действительно есть один недорогой, разумного размера монитор 4k 120 Гц. Это Acer Nitro XV273K:



И это единственное, что у меня есть.

Вещи, на которые стоит обратить внимание (Windows)

В Windows несложно запустить разрешение 4k на частоте 120 Гц. Убедитесь, что ваша видеокарта имеет DisplayPort 1.4, используйте его, вот и всё. Серьёзно, это просто работает.

Вещи, на которые стоит обратить внимание (macOS)

Поддержка MacOS отстой. Официально ни один из компьютеров Apple не поддерживает ничего выше 60 Гц, даже при нормальном разрешении:



Так что покупка этого дисплея была основана на чистой вере. Вот что я понял:

• 4k @ 120 Гц требует 3840 2160 3 bpp 120 Гц 8 = 24 Гбит/с. Чуть ниже 25,92 Гбит / с DisplayPort 1.3 / 1.4.
  
• HDMI 2.0 обеспечивает только 18,0 Гбит/с, поэтому нужно использовать DisplayPort.
  
• Thunderbolt 3 поддерживает DisplayPort 1.4, так что если найти адаптер, всё должно пойти.

Как определить, какой порт у моего Macbook? Легко! Используйте эту диаграмму, предоставленную Apple:



Итак, значок молнии означает Thunderbolt (не путать с портом Lighting!), а железнодорожная стрелка означает USB-C. Теперь просто посмотрите на свой Macbook:



Думаю, разобраться не так просто \_()_/. В качестве альтернативы можно посмотреть на страницу Apple с интуитивно понятным названием SP794:





Итак, прежде всего, что означает Thunderbolt 3 (USB-C)? Это Thunderbolt 3 или USB-C? Это может быть разница между работает безупречно и не работает вообще:



Затем упоминается DisplayPort over USB-C (но у нас есть Thunderbolt 3, а не USB-C!). Страница не указывает версию DisplayPort, и без неё она бесполезна. Она также говорит, что USB 3.1 Gen 2 ограничен 10 Гбит/с, но я думаю, что ограничения USB 3 не распространяются на USB-C? Кроме того, что это за название USB 3.1 Gen 2? Уже приняли USB 3.2?

Ну что ж, Википедия в помощь!

В октябре 2016 года Apple анонсировала обновлённый Macbook Pro с двумя или четырьмя портами Thunderbolt 3, в зависимости от модели. В июне 2017 года Apple анонсировала новые модели iMac с двумя портами Thunderbolt 3, а также iMac Pro с четырьмя портами был выпущен в декабре 2017 года.

8 января 2018 года Intel анонсировала обновление продукта (под кодовым названием Titan Ridge) с усиленной надёжностью и поддержкой DisplayPort 1.4. Новый контроллер периферии теперь может работать как USB sink (совместим с обычными портами USB-C).

Оказывается, Thunderbolt 3 может иметь или не иметь DisplayPort 1.4. Некоторые из них доходят только до DP 1.2. Статья Википедии предполагает, что всё, выпущенное до 2018 года, определённо не будет работать, но после 2018 года это может или не может работать, в зависимости от версии Thunderbolt. Чувствуешь себя потерянным? Используй мою схему:



Думаю, что мы все можем согласиться с тем, что вся эта ситуация Thunderbolt/USB-C является очень сильным претендентом на самый запутанный стандарт порта, когда-либо созданный человечеством.

Короче говоря, мне повезло. Мой Macbook Pro 2019 имел правильный порт, и с адаптером Thunderbolt 3 (USB-C) для DisplayPort всё заработало. Насколько я понимаю, версии портов на устройствах имеют значение, но кабели и адаптеры нет, пока они физически помещаются в отверстие. В моем случае это был конвертер Xiaomi USB-C miniDP и кабель miniDP DP кабель.



Будет ли это работать на вас? Понятия не имею! Надеюсь, что будет. Всё, что я знаю, это то, что вы должны убедиться, что ваш Thunderbolt 3 может нести DisplayPort 1.4. Это волшебное сочетание.

Вещи, на которые стоит обратить внимание (macOS) продолжение

Если до сих пор не было достаточно запутанно, есть ещё кое-что!

Думаю, ваш Macbook должен иметь дискретную видеокарту (На это могут влиять и другие причины, например, пересмотр Thunderbolt. У меня ограниченная тестовая база, но: Macbook Pro 15 2019 работает, Macbook Air 2018 нет, Mac mini 2018 работает только с eGPU). Различные графические карты Intel UHD/Iris не работают. eGPU работает.



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

1. Полностью загрузить macOS. В этот момент дисплей обычно находится на частоте 60 Гц.
   
2. Перейдите в раздел Системные настройки Дисплеи.
   
3. Удерживая нажатой клавишу Alt/Option (которая с ), нажать на флажок Scaled в Разрешении.
   
   
   
4. Чтобы получить доступ к выбору частоты обновления, установите флажок Показывать режим низкого разрешения. Л логика.
   
   
   
5. Посмотрите селектор Частота обновления. Большую часть времени самый высокий вариант там 60 Гц.
   
   
   
6. Выключите дисплей.
   
7. Подождите пару секунд.
   
8. Включите дисплей.
   
9. Посмотрите ещё раз в разделе Частота обновления. Надеюсь, теперь есть вариант 119,88 герц.
   
   
   
10. Выберите 119,88 герц в разделе Частота обновления.
    
11. Вы великолепны.

Почему это 119,88 герц, а не 120 Гц? Без понятия. Похоже, это работает одинаково. Почему macOS не может вспомнить его? Я не знаю. Почему macOS не видит 120 Гц в качестве опции, пока я не выключу/не включу монитор? Кто знает! Главный вывод заключается в том, что опция 120 Гц может появиться не всегда, но после некоторого танца вокруг неё может появиться, и если это произойдёт, то она действительно работает, несмотря ни на что.

Вся эта ситуация напоминает мне покупку дисплея 4k в 2014 году: есть только пара моделей, порты сбивают с толку, поддержка Apple отстой. Надеюсь, через пять лет 120 Гц станет стандартом. До тех пор мы должны быть благодарны, что, при больших неудобствах, мы, по крайней мере, можем использовать современные дисплеи с macOS. Спасибо, Apple!

Что дальше?

Каждому человеку нужна мечта. В какой-то момент 4k @ 120 Гц станет обыденностью, и мы даже можем увидеть 5k @ 120 Гц и больше. Мы также можем видеть экраны ретина с соотношением 21:9 и даже 32:9 (больше горизонтального пространства), что всегда является желанным дополнением (на самом деле, есть впечатляющий 34WK95U-W, но вы также можете найти его как более короткую версию более традиционного 27MD5KL-B).

Но даже сегодня вы можете заглянуть в будущее, если у вас есть лишние 4000 долларов. Это Dell UP3218K, первый и единственный в мире монитор 8k:


Даже на промо-странице для дисплея 8k Dell публикует только его фотографии размером 1

Плотность пикселей на нём настолько высока (280 PPI), что его, вероятно, лучше всего использовать при масштабировании 300% (чего, конечно, нет в macOS, но есть в Windows). Он также требует двух одновременных кабелей DisplayPort для работы, что опять же не подходит для Mac.

Но даже при 300% он всё равно даст вам эффективное логическое разрешение 25601440, что существенно больше, чем 19201080 современных дисплеев 4k. Больше плотности пикселей и больше разрешения! Что ж, можно помечтать.

Заключение

Подводя итог, вот лучшая установка для программистов:

• Текст не может выглядеть хорошо на дисплеях с низким разрешением.
  
• Дисплеи с высоким PPI перестали быть экзотикой, пришло время переключиться.
  
• Ноутбуки это нормально, но автономный монитор всегда лучше.
  
• Монитор 4k имеет смысл только при масштабировании 2/ 200%.
  
• Если вы хотите пойти дальше, то теперь есть доступные варианты 4k @ 120 Гц.

Удачного кодирования!