Дизайн на 1x - это факт
Ощутимые преимущества проектирования с плотностью пикселей 1x
Позвольте мне начать с того, что я уверен, что это уже очевидно для многих из вас. Но из отдельных наблюдений и разговоров выясняется, что до сих пор нет единого мнения о плотности пикселей, с которой должны разрабатываться мобильные экраны. В основном, проектирование на 1x или 2x.
Некоторый быстрый контекст
Когда я впервые пришел в Шип, мы проектировали экраны iOS на 2х и Android на 3х (xxhdpi). Это была огромная заноза в заднице. Зачем мы это делаем?
- Создавать дизайн при низком разрешении экрана, отличном от Retina, нелогично. Я имею в виду, что я давно не видел iPhone 3GS.
- В то время было проще предварительно просматривать дизайны, когда макеты были 1: 1 с устройством, на котором вы просматривали. В качестве тестовых устройств мы использовали iPhone 5 и Nexus 5. Все, что ниже 2x и 3x соответственно, будет отображаться на устройстве размытым.
- Сопротивление изменениям - поскольку мы уже проектировали в 2x, было бы сложно воссоздать все наши дизайны в любом другом разрешении (с тех пор мы переработали все в 1x).
Все эти причины довольно печальны и не могут удержаться от преимуществ проектирования на 1x.
7 причин разрабатывать дизайн на 1x
Больше не должно быть споров о проектировании на 1x или 2x. Я не видел простого списка преимуществ 1x, так что вот он.
1. Нет математики
Если вы разрабатываете что-нибудь, кроме 1x, вы решили отправиться в нескончаемый путь кропотливого преобразования ваших пикселей для других разрешений устройств.
Попробуйте - из 2-кратного разрешения конвертируйте эти пиксели в точки: размер шрифта 36 пикселей с отступом 40 пикселей слева / справа и 20 пикселей сверху / снизу. А что насчет 3-кратной плотности пикселей?
Тебе это весело?
И я нет. И еще меньше удовольствия, когда дерьмо начинает выходить за пределы четных точек. «Эй, инженер, не могли бы вы добавить к верху отступ 16.66pt?»
2. Индивидуальная беседа между iOS и Android.
О мой Бог. Какая экономия времени это стало. Все отлично переводится между iOS и Android, что позволяет повторно использовать размеры текста, значки и интервалы. Вы знаете, все эти хорошие вещи в вашем руководстве по стилю. Теперь это очень простой перевод.
3. Простой экспорт
Хорошо, допустим, вы проектируете на 2x и хотите экспортировать некоторые ресурсы. Для iOS вам нужно будет экспортировать в 0,5x (фактическое 1x), 1x (фактическое 2x) и 1,5x (фактическое 3x). Это вообще имеет смысл? А для Android есть пять размеров. Вы экспортируете с разрешением 0,5x (фактическое 1x / mdpi), 0,75x (фактическое 1,5x / hdpi), 1x (фактическое 2x / xhdpi), 1,5x (фактическое 3x / xxhdpi) и 2x (фактическое 4x / xxxhdpi).
При проектировании на 1x все становится чисто. Экспорт в 1x на самом деле равен 1x и так далее. Простой.
Вот сравнение экспорта из 1x и 2x в Sketch…
4. То же, что и инженерные измерения.
Разве ваши проекты не должны говорить на том же языке, что и код, который их реализует? Да, да, должны. И инженеры используют точки, а не пиксели.
Вот как Джиашу Ван, один из инженеров Shyp по iOS, ответил на эту тему:
Инженеры используют в коде точки (а не пиксели). Таким образом, файл 1x Sketch очень хорош для нас, потому что мы можем напрямую использовать значения, которые мы находим из Sketch, без каких-либо математических вычислений с использованием масштабных коэффициентов.
Например, когда мы использовали 2x в файле Sketch, вот что инженеры iOS сделали бы:
- Проверьте компонент пользовательского интерфейса в Sketch, см. `50`
- Выполните математические вычисления:` 50 (value из Sketch) / 2 (коэффициент масштабирования от 2x) = 25`
- Затем используйте `25` в коде
В наши дни с `1x` мы видим` 25`, мы используем `25`
(примечание: наши инженеры работают прямо из Sketch. Да, неплохо.)
Это не только понравится вашим инженерам, но и приведет к меньшему количеству ошибок при реализации пользовательского интерфейса. Все хотят избежать ненужной настройки пикселей во время контроля качества.
5. Предварительный просмотр устройства по-прежнему работает.
Помните, когда зеркальное отображение из Sketch на 1x приводило к размытому экрану? Что ж, те времена прошли. Теперь все легко масштабируется во время зеркалирования.
Для устройств Android и предварительного просмотра из Photoshop Skala Preview работает аналогичным образом. Все хорошо масштабируется. Бум.
6. Меньший размер файла, лучшая производительность.
Ваши файлы дизайна будут меньше, особенно если они содержат растровые изображения. И если у вас когда-либо было много артбордов на одной странице в Sketch, отставание может стать проблемой. Меньшие артборды обеспечивают лучшую производительность в Sketch.
7. Доказательство будущего
Дизайн в 1x защищает вас от Apple или Google, которые вводят новую плотность экрана, в которой вам нужно будет сделать еще одно преобразование. Вспомните, когда Apple выпустила iPhone 6 Plus и всю последовавшую за этим болтовню о том, как создать дизайн для этого типа экрана. Эта путаница привела к появлению множества ресурсов, объясняющих преобразование.
Проектирование чего-либо, кроме 1x, начинает казаться произвольным по мере того, как увеличивается плотность экрана устройств. 1x вне времени.
Обновление 1: Дэйв Бедингфилд, старший дизайнер Twitter, отметил еще одну отличную поддержку для 1x.
Причина 8 - космический эффект плацебо
Проектирование с увеличением в 2 или 3 раза часто дает искаженное восприятие, например: «У меня больше места». Это особенно актуально для начинающих дизайнеров, которые склонны слишком много размещать в областях с более высоким разрешением, вызывая небольшие точки касания и плохую читаемость. Дизайн на 1x помогает предотвратить этот эффект.
Проектирование для 2x также может вызвать у дизайнеров эффект плацебо: проектирование на 2x довольно привлекательно визуально и может маскировать. Тем не менее, базовый уровень 1x по-прежнему является оптимальной «отправной точкой», и я действительно думаю, что наши проекты выигрывают от этого ограничения (дизайн, который «работает» на 1x, будет также «работать» в 2 раза; мы не обманываем себя, думая, что 2x обеспечивает больше места для «впихивания» элементов). Соблазн разрабатывать более высокое разрешение может привести к сужению мишеней касания, уменьшению размера шрифта, ухудшению четкости и т. Д. Дизайн с разрешением 1x может помочь защитить от этого.
Дэйв - самый осведомленный человек, которого я знаю в области дизайна платформ, и руководит этими инициативами в Twitter. Посмотрите этот более длинный отрывок из электронного письма, которое он много лет назад отправил команде дизайнеров Twitter, в котором подчеркивается важность проектирования на 1x.
Вот и люди. Используйте и злоупотребляйте этим списком по своему усмотрению. Я что-нибудь пропустил? Я с радостью добавлю и отредактирую это сообщение по мере необходимости.
Особая благодарность Джереми Голдбергу, который изначально убедил меня, что 1x - это праведный путь.
Напишите мне в Twitter или подпишитесь на публикацию Shyp Design, чтобы узнать больше от нашей команды дизайнеров.
