Readability Settings: фильтр читабельности инфографики на экране телефона
Исходя из определения инфографики и особенностей мобильных устройств, с помощью которых получаем значительный объем информации, мы сформулировали рекомендации для разработки инфографики, вернее набор тех параметров (мы называем их фильтрами читабельности), без соблюдения которых ее просто не смогут адекватно прочесть на экране телефона. Процесс восприятия визуального контента на мобильном должен быть не менее комфортным, чем на мониторе ноутбука.
- Размер холста:
Рекомендуемая ширина холста 1080px, не менее 750px (разрешение экрана Apple iPhone 6Plus и 6).
Высота холста — не более content display area. Рекомендуемое соотношение высоты к ширине: 1:1 (оптимально при разных положениях экрана; примеры: формат в Instagram, обложки альбомов в Музыке). - Отступ от боковых границ холста:
не менее 8pt (iOS), рекомендуемый — 50px (Заметки в iOS). - Цвета:
2 цвета в основе, высокая контрастность между важной визуальной информацией и фоном (цветовой круг; исследование восприятия цветов). - Размер графической единицы на холсте:
не менее 120px (рекомендуемый размер App Icon). - Шрифт:
Основной текст 20–34pt, заголовки 35–80pt при ширине холста 750px (Apple apps: Погода, Музыка, Почта, Заметки, Меню. Текст должен быть читабелен не только в статике, но и при пролистывании, если инфографика — часть новостной ленты).
1 семейство шрифтов (пример использования системного шрифта в iOS10; для выделения заголовков использовать более жирное начертание). - Принцип простоты (соответствие самому понятию “инфографика”):
В инфографике текста < чем в исходном информационном сообщении и <600 знаков.
*В этих рекомендациях мы обращаем внимание больше на объективные технические характеристики, однако без учета качественных параметров даже читабельная недоинфографика «работать» не будет.
Не забудьте, что элементы инфографики должны быть логически связаны, а сама инфографика должна приводить к достижению определенной цели (понимание, предупреждение, шаринг и т.д.)
