375 x 667 айфон

iPhone против Android — размеры и плотность пикселей

Андрей Подкин

В комментариях к статье про размеры и масштабирование в Android меня просили рассказать, как обстоит дело в противоборствующем лагере — на стороне Apple. Что ж, давайте возьмем в руки iPhone и посмотрим, как эти смартфоны выглядят на фоне своих собратьев с ОС от Google.

Фиксированный размер

На текущий момент существует всего пять различных конфигураций экранов iPhone. Причем актуальны для разработчиков не более четырех (а если посмотреть реальный процент пользователей с каждым экраном, то окажется, что реально актуальных экранов осталось всего три). Это позволяет говорить о том, что дизайн приложений можно «заточить» под конкретные экраны, довести его на каждом экране до идеального вида и быть уверенным, что пользователи увидят именно то, что придумал дизайнер и реализовал разработчик. Существенный вклад вносит то обстоятельство, что нет никакой стандартной настройки шрифтов в сторонних приложениях на уровне ОС: если разработчик не предусмотрел возможность изменения размера шрифта, то ничего с этим не поделать.

Рай для дизайнеров

С одной стороны Apple минимизировала затраты дизайнеров на адаптацию интерфейса под разные экраны, а с другой предоставила им массу инструментов, характерных для полиграфии: можно легко настраивать кернинг шрифта или указывать отступ для первой строки абзаца. А если надо максимально точно передать графику, то можно выбрать нужный цветовой профиль (например, Adobe RGB).

Также Xcode (среда разработки от Apple) имеет гораздо более мощные средства отладки дизайна (элементов интерфейса), чем Android Studio.

Да здравствуют нестандартные размеры!

Apple, наверное, единственный производитель смартфонов, который не просто осознал, а стал реально использовать тот факт, что пользователь не видит разрешения смартфона. Пользователь видит физический размер устройства и его dpi. Вы скажете: «Но ведь разрешение рассчитывается автоматически из физического размера и dpi». Да, рассчитывается. Но при расчете нам не важно какое именно разрешение мы получим. Если и размер, и плотность пикселей нас полностью удовлетворяют, то нам нет никакого дела, что разрешение нашего гаджета не дотягивает до FHD или даже HD — недостачу пикселей невозможно заметить невооруженным глазом. Понятно, что при измерении «попугаев» всегда можно будет заявить: «Нам не доложили!», но на практике недостача пикселей нигде себя не проявит.

Впрочем, хватит теории, давайте перейдем к конкретным устройствам.

iPhone, iPhone 3G, iPhone 3Gs

Первые три поколения iPhone имели экран с диагональю 3,5″ и разрешением 320×480 пикселей, что давало плотность пикселей в 163 dpi. Это очень близко к стандартной плотности пикселей в Android — 160 dpi. Разумеется, ни о каких расхождениях между физическими и программными пикселями и речи нет. Эта плотность пикселей у программистов и дизайнеров также называется 1x.

iPhone 4, iPhone 4s

В 2009 году плотность пикселей iPhone 3Gs смотрелась уже довольно бледно (на фоне 253 dpi от Nokia и 300 dpi от Samsung) и в 2010 году Apple представила экран Retina: физический размер остался неизменным, а количество пикселей по ширине и по высоте было увеличено в два раза. Получилось 640×960 с плотностью 326 dpi. Что снова близко к стандартной плотности пикселей в Android — 320 dpi. С этого момента вся графика для iPhone стала создаваться в двух вариантах: 1х и 2х.

iPhone 5, iPhone 5s, iPhone 5c, iPhone SE

Экраны iPhone от оригинальной модели до 4s имели соотношение сторон 3:2. В 2012 году Apple перешла на соотношение сторон 16:9 (только для смартфонов, планшеты это нововведение не затронуло). Сохранив неизменную ширину, экраны подросли по высоте. Диагональ достигла 4″, а разрешение 640х1136. Дизайнерам и программистам пришлось учитывать в разработке новый размер экрана, но плотность пикселей осталась неизменной. Логический размер экрана (тот, что в Android измеряется в dp) стал равен 320×568 точек при плотности 2x.

iPhone 6, iPhone 6s, iPhone 7

В 2014 году Apple представила сразу две модели iPhone 6 и iPhone 6 Plus. Первая из них получилась физическим наращиванием размера экрана до 750×1334 точек при неизменной плотности пикселей. Логический размер экрана: 375х667 точек при плотности 2x. Это чуть больше большинства современных устройств с Android (360×640 dp, для сравнения приведен скриншот с Xiaomi Mi2s).

iPhone 6 Plus, iPhone 6s Plus, iPhone 7 Plus

Вторая модель 2014 года — iPhone 6 Plus — получила принципиально новый экран. Его диагональ составила 5,5″ — как у типичных фаблетов на Android. Но его разрешение было совершенно нетипичным. Физически экран имеет разрешение FullHD — 1080×1920, но с точки зрения прикладного ПО его размер составляет 1242×2208 пикселей, а конечная картинка получается масштабированием готового изображения (downsampling). Поэтому физическая плотность пикселей составляет 401 dpi, но она важна только для того, чтобы понимать насколько гладкое изображение пользователь видит на экране. Программная плотность пикселей составляет 461 dpi. Она получила обозначение 3x. На самом деле, если мы умножим 163 (плотность пикселей оригинального iPhone) на 3, то получим не 461, а 489 (опять же очень близко к стандартной плотности Android — 480 dpi). Но отклонение составляет всего несколько процентов, а фаблет обычно держат чуть дальше от глаз, чем компактный смартфон, поэтому визуально все элементы интерфейса выглядят так, как и должны. Логический размер экрана составляет 411×736 точек (плотность 3x), что практически эквивалентно размеру современных фаблетов на Android (411×731 dp, для сравнения приведен скриншот с Nexus 5x).

Так почему же на iPhone все выглядит мельче?

Основная причина, конечно же в том, что у большинства смартфонов на Android физический и логический размер не совпадают и интерфейс растягивается на несколько большую диагональ. Но есть и другой момент: при переходе к Material Design произошло уменьшение размера шрифтов (по сравнению с интерфейсом Holo). Однако далеко не все дизайнеры используют рекомендуемые Google шрифты. Зачастую они оказываются чуть крупнее. Но даже если шрифты небольшие, как и должны быть, Material Design подразумевает несколько больше свободного пространства (поля, расстояния между элементами интерфейса). Это дает дополнительный вклад к «растягиванию» интерфейса. А значит, на экран помещается меньше полезной информации.

Источник

Дизайн мобильных приложений: почему мы работаем в @1x

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

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

Чем мы пользуемся

Sketch и плагины:

• Sketch Measure
• Sketch Preview
• Sketch Android Assets

Adobe Photoshop и скрипт Size Marks от Романа Шамина.
Заметим, что Photoshop для дизайна мобильных приложений используем все реже и реже — в работе мы активно внедряем Sketch и продвигаем его среди разработчиков, дабы они могли в случае трудностей сами посмотреть нужный размер или ресурс в исходнике, не отвлекая дизайнера от важных дизайнерских дел.

Несмотря на то, что описанное ниже сильно «завязано» на Sketch, приемы возможно применять и в Photoshop, хотя это несколько сложнее.

О разрешениях макетов

Итак, как мы знаем, iOS имеет на данный момент следующие разрешения ресурсных изображений: @1x, @2x и @3x; а Android: mdpi(1x), hdpi(1,5x), xhdpi(2x), xxhdpi(3x), xxxhdpi(4x) — это основные, ldpi и tvdpi в рассчёт брать не будем.

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

Если рассматривать форм-фактор телефонов, то для простоты вычислений размеров, а так же последующей подготовки спецификации, проще взять следующие разрешения макетов:
iOS

• 320×480 (iPhone 4/4s)
• 320×568 (iPhone 5/5c/5s)
• 375×667 (iPhone 6)
• 414×736 (iPhone 6 Plus).

У Android это 360×640 (конечно же есть и меньшие разрешения, и чуть большие, но следуя гайдлайнам это будет эталонным для Android L). Планшеты сейчас рассматривать не будем, но будем помнить о них.

За основные разрешения мы выбираем 320×568 для iOS ( @1x) и 360×640 для Android (mdpi), так как девайсов с этими форм-факторами сейчас наибольшее количество.

Так почему же именно @1x и mdpi?

Проектирование и отрисовка

На этапах проектирования и дизайна выбранные нами @1x и mdpi дают возможность быстро «накидать» прототип из стандартных элементов Sketch и не думать о чётности размеров элементов и отступов, так как все они будут только увеличиваться в случае нашего желания посмотреть большие разрешения.

Кроме того, это никак не мешает нам смотреть макеты на устройствах с помощью плагина Sketсh Preview (работает в связке с приложением Skala и Skala Preview), у плагина есть настройки, которые дают возможность увеличивать макет до нужного для просмотра разрешения, причем как на iOS устройствах, так и на Android.

Настройки плагина Sketch Preview

Главным требованием является кратность разрешения у устройства к разрешению исходника, например, наш исходник iOS 320×568, нормально смотреть его можно только на iPhone 5/5s/5c, а исходник Android 360×640 мы смотрим на Nexus 5 c разрешением в 3 раза больше 1080×1920 (xxhdpi).

Единственным, для кого-то существенным, минусом является желание видеть однопиксельные разделители на высоких разрешениях. Это значит, что если мы хотим увидеть на экране iPhone 5 линию толщиной в 1px, то в макете она должна быть 0,5px. Так как создавать в макете 0,5px линии не круто, решение этой проблемы может быть иным: создаём 2px прозрачную линию на месте разделителя с внутренней тенью с значением 0,5. Если же это Android макет, то 0,33-0,35 (для просмотра на Nexus 5).

Пример разделителя 0,35 установленного с помощью внутренней тени в Android приложении

Но в большинстве случаев мы просто останавливаемся на разделителях в 1px в макете, а в спецификации для разработчиков прописываем этот момент словами.

Экспорт

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

Так как мы выбрали самое малое разрешение, то можем не беспокоиться за «мыло» (искажения и нечёткость) в ресурсах для iOS, изначально мы рисуем все элементы с привязкой к пиксельной сетке (очень редко без) и получаем чёткие иконки в @2x и в @3х. Очевидно преимущество в случае появления в проекте iPad-версии приложения, так как в этом случае проработанные @1x ресурсы нам понадобятся.

Пример нарезки для iOS из @1x(верхняя строка — нормальный размер иконок, нижняя — увеличенный, для детального просмотра)

В случае же с Android, наш выбор mdpi даёт отличный результат в xhdpi/xxhdpi/xxxhdpi и, возможно, «мыло» в hdpi.

Пример автоматической нарезки для Android из mdpi

Очевидным решением проблемы является проработка hdpi ресурсов руками, либо сильное соблюдение чётности в mdpi(как видно на картинке с верхней линией самолётика получилось, а вот с линией в обведённой области — нет).

Замечание: Всегда и везде лучше перепроверять автоматический экспорт ресурсов.

Спецификация

Разработчики просят отдавать им спецификацию в pt и dp, для iOS и Android соответственно. Тут выбранные нами разрешения также нам помогают, не надо думать и делить размеры на какие-то числа и так далее…

Достаточно с помощью lite measure или просто measure расставить нужные размеры. Здесь можно возразить, что плагин умеет пересчитывать размеры из тех что есть в нужные, но не многие об этом знают, да и вообще не многие знают, что размеры надо отдавать в pt и dp.

Замечание: У автора была старая версия плагина Sketch Measure, новую изрядно поменяли.

Такой способ может помочь при желании разработчика посмотреть какой-то размер в исходнике, ему не надо будет дергать дизайнера или что-то считать опять же.

Здесь же можно вспомнить про Photoshop и скрипт Size Marks, который при наших разрешениях даст нужные разработке размеры (но только в px, к сожалению).

Пример работы скрипта Size Marks

Думаем о других

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

В случае с iOS и передачей макетов в @2x дело обстоит чуть проще, так как делить на 2 умеет даже гуманитарий. Но иногда встречаются исходники в @2x для iPhone 6, и опять вместо работы начинаются пересчёты и размышления.

Лирика

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

Но так как не каждый экран надо проверять, то вполне можно работать и в mdpi — просто увеличивать исходник и смотреть на устройстве.

Руководствуясь вышеизложенными размышлениями, наша дизайн-команда мобильных приложений выбрала путь работы с @1x и mdpi макетами.

Источник