Гайдлайн по iOS на русском. Часть 46 — Иконки и картинки: Их размер и разрешение

Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна (лайк, подписка и тд). В этой серии постов я делюсь вольным переводом iOS гайдлайна на русский язык. Как и с переводом Material Design все части будут объеденены в 1 notion документ. Оригинальный источник этой части: здесь.

Система координат, используемая iOS для размещения контента на экране, основана на измерениях в точках (pt), которые сопоставляются с пикселями на дисплее. Дисплей со стандартным разрешением имеет плотность пикселей 1:1 (или @1x), где один пиксель равен одной точке (1px = 1pt). Дисплеи с высоким разрешением имеют более высокую плотность пикселей, что дает коэффициенты масштабирования 2 или 3 (так называемые @2x и @3x). В результате, дисплеям с высоким разрешением требуюсят картинки с бОльшим количеством пикселей.

Например, предположим, что у вас есть изображение со стандартным разрешением (@1x) 100×100 пикселей. Версия @2x этого изображения будет 200×200 пикселей, а версия @3x будет 300×300 пикселей.

📌 От автора: сам интерфейс всегда проектируй в @1x, но растровые изображения (если они будут) ищи/создавай в максимально возможном разрешении. Допустим, если ты считаешь (или тебе сказали, или задача/проект этого требуют) что iPhone 8 это самый ходовой девайс у твоей аудитории, то проектируешь в его @1x = 375x667, но картинки растровые лучше делать/находить @2x = 750x1334 (просто для примера). Идеально если ты всегда рисуешь и используешь вектор, тогда с иллюстрациями, иконками и т.д. будет проще. Табличка (их много в гугле).

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

Дизайн иллюстраций и др. арта с высоким разрешением

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

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

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

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

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