Найти в Дзене
Mad Devs

Интерфейс в 1x? Обязательно!

Оглавление

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

… но они будут плохо смотреться при масштабировании.

Проектирование в 1x помогает предотвратить многие проблемы.

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

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

Забудьте про математику

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

Рассмотрим простой пример.

Создание интерфейса под iPhone6 в Adobe Photoshop.
Создание интерфейса под iPhone6 в Adobe Photoshop.

По умолчанию Photoshop предлагает нам использовать разрешение 750*1334 px, то есть 2х, что является в корне неправильно и приведет к дальнейшей головной боли — экспорту изображений.

Как мы знаем, нам нужно экспортировать 3 размера изображений: 1х, 2х и 3х.

Слева неправильные размеры, справа правильные.
Слева неправильные размеры, справа правильные.

Выставление размеров указанных слева, приведет к неправильным финальным размерам, нужно поломать голову вспомнить математику и привести к правильным индексам и размерам (слева на картинке↑).

Всего этого можно было избежать приведя размер артбоарда сразу к 1х:

При работе в Photoshop, не забудьте уменьшить артбоард в 2 раза.
При работе в Photoshop, не забудьте уменьшить артбоард в 2 раза.

Данная проблема на всегда исчезает при использовании Sketch

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

-5

Бонус

Если компании производители введут новое разрешение экранов 5x, 7x… , вам не придется ничего переделывать, потому что 1х это отправная точка 🎉.

Ранее статья была опубликована тут.