17 апреля 2017
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 подразумевает несколько больше свободного пространства (поля, расстояния между элементами интерфейса). Это дает дополнительный вклад к «растягиванию» интерфейса. А значит, на экран помещается меньше полезной информации.
Спасибо за статью!
Соотношение сторон экрана от первого до 4S не 4:3, а 3:2! Поправьте.
Да, спасибо. Исправил.
В общем те же яйца, только вид сбоку, читд. А вот интересно, как Винда так неплохо смотрится на экране 11″ и HD разрешении? Видимо дело в расстоянии до глаз.
А мне показалось, что AAPL больше работает с человеческим восприятием, чем GOOG. Вот именно использует, что-то типа анаморфа при рисовании картинки.
Также не понял, что за винда у тебя? Надеюсь не w7? Может попросим автора для полноты в этом цикле статей затронуть ещё и пикселизацию на этой ОСи?
У мну 10-тка стоит на всем, на чем она может стоять. Но и в 7-ке тоже при низком разрешении довольно красивая картинка. Даже если на одном и том-же ПК поставить Android x86 и Windows 10 (или 7), то картинка у Windows будет в разы лучше.
>> В общем те же яйца, только вид сбоку, читд.
Ну да. Только в том «лагере» яйца разные. От перепелиных до страусиных. А стандартизация весьма условная.
Что за
? Как-то не уложилось в моей голове…
Опечатка. Спасибо, исправлено.
>>характерных для полиграфии:
для типографики.
Как всегда отлично, Андрей! Люблю почитать такие глубокие технические подробности.
И вопрос вдогонку: а что это за программа с расписанием сеансов?
Спасибо. Это «Fanlife Ижевск».
Спасибо за ответ.
Эх, жаль, что для моего Засратова такого агрегатора нет. 🙁
Кинопоиск то же показывает + возможность приобрести билеты. https://uploads.disquscdn.com/images/ab59bc7f1cfd21ab49d3fac05b7c406c9b963ea38e37f18d08deaca3cd342123.jpg https://uploads.disquscdn.com/images/448ef8ee71d61777c034fb497a4558cd0386a5fd90e0771be288aeea78c580d2.jpg
Спасибо за наводку, попробую данное приложение. А то старая версия, которую я пробовал пару лет назад была совсем невменяемая.
Вот это возвращение к истокам МР.
Автор, давай ещё!
В этой статье всё слишком сложна!Хочу интеллектуальные рассуждения Сережи Кузьмина по поводу цвета наушников!!!1
Сложилось впечатление, что до появления 6-го Айфона Эплл заказывали производство уникальных экранов под себя, добиваясь кратной плотности «пиксель-в-пиксель», а вот с 6-ки ради удешевления взяли за основу типовые экраны. Интересно, так и есть?
с ростом как производительности процессоров (масштабирование изображений) и также PPI, меньшая чёткость при несовпадении реального и виртуального разрешений (не кратный множитель) перестаёт иметь существенное значение… так что уже можно себе позволить повышенные накладные расходы на всякие масштабирования, я думаю.
С одной стороны, интерфейс на айфоне гладенький, без всяких пикселей, с другой, ролик в ютьюбе в FHD не посмотришь, хотя кто-то тут же скажет, что и не надо на 4,7 дюйма. Вот бывает этот неловкий момент, когда товарищ после своей семерки делает круглые глаза, глядя в 5,7 экран, воспроизводящий реальный FHD контент. Как то он привык считать, что в телефоне за 60к все самое лучшее. Звук и прочее, это оффтоп, но тоже в копилку его сомнений добавляет.
Да, и очень понравилось сравнение афонов 6,7 с «современным» им аппаратом 2013 г. Xiaomi Mi2S, который был в 10 раз дешевле. Почему не с шестеркой гелэкси?
>> Да, и очень понравилось сравнение афонов 6,7 с «современным» им аппаратом 2013 г. Xiaomi Mi2S, который был в 10 раз дешевле. Почему не с шестеркой гелэкси?
А где вы видите сравнение собственно аппаратов (начинки)? Я сравнивал исключительно конфигурацию экранов, и ничего больше. 360×640 dp при плотности 320 dpi — это максимально близкий аналог в мире Android.
Вы предлагаете смотреть аппарат 5,1″ с разрешением QHD. Но его гораздо правильнее настроить на программную плотность пикселей 560, а не 640 dpi. Тогда размер экрана будет 411×731 dp, как у Nexus 5x — т.е. гораздо ближе к плюсовым айфонам, чем к стандартным.
то есть, по Вашему мнению, экраны в топовых смартфонах 2014 по конфигурации соответствуют бюджетнику из 2013 г.? Я так понимаю, смысл статьи — смотрите, из какого г…. Эппл сделал конфетку?
Тот самый случай, когда имеет смысл перечитывать статью до тех пор, пока не дойдет, что речь не о экранах или аппаратах, а об интерфейсах.
ну до меня. в общем дошло. Просто речь о том, что интерфейс отображает экран, а не батарея. Я просто пытаюсь копнуть глубже.
Речь о том, как отображается информация на экране при сходных характеристиках ДПИ. А в данном примере, конкретное логическое ДПИ, сходное с конкретным айфоном.
Я умею читать, мне не надо разжевывать написанное. Я пытаюсь понять, есть ли смысл между строк или нет, вкладывал ли его автор статьи.
Смысл сравнить как оно на айфоне и на андроиде при сравнимых логических плотностях. Какая разница какие аппараты использовались, если НА ВСЕХ андроидах с таким логическим разрешением мы увидим одинаковую картинку на скриншоте?
Это я понял из ответа Андрея выше, давайте не будем пытаться зациклить тему, я хочу ее развития.
ну давайте тогда попросим Андрея написать статью «за дизайн» но ваш вопрос выходит за рамки темы статьи, уж простите.
так и быть, прощаю. Но в последний раз)))
мой белый господин простил меня! все я передумал вешаться! хвала богам! 🙂
а не важно это, человек сначала говорил почему сравнивают с xiaomi типа это оскорбляет йЯфон, а потом когда объяснили, он преключился на дизайн….
вывод — Андрей очень терпеливый человек
ну про оскорбления яйфона — это Ваши домыслы, мне на него вообще параллельно, я не сторонник и не хейтер. В семье есть несколько, мне не нравится.
я просто тут оставлю это 🙂
«Да, и очень понравилось сравнение афонов 6,7 с «современным» им аппаратом 2013 г. Xiaomi Mi2S, который был в 10 раз дешевле. Почему не с шестеркой гелэкси?»
я плохой психолог и оналитег плохой и между строк читаю плохо…
Ну так почитайте беседу, Андрей ответил по теме, я его понял и стал дальше развивать тему. Мы на форуме, а не в театре, где все должны похлопать и крикнуть «браво»!
я как раз обычно ветку обсуждения дочитываю и только потом вставляю свои гениальные 5 копеек…
конечно же мы на форуме… просто тема обсуждения вышла за рамки темы статьи (статья не о графическом дизайне и не о качестве экранных матриц), и по этому поводу я отписался ниже.
По моему мнению, при обсуждении конфигурации экранов — физического размера и плотности пикселей — существуют только факты и цифры размера и плотности пикселей. Например, я ничего не говорю о качестве экрана, его цветопередаче и т.д., потому что это не имеет к теме никакого отношения.
так и я не говорю о качестве, разумеется в айфоне стоит очень качественная матрица от LG (без иронии). Только пиксели. Ведь в айфоне реально очень классно выглядит интерфейс с точки зрения графики, его удобство это отдельный вопрос.
Тогда я не понимаю, что не так. Я сравнил экран 754х1334 c плотностью 326 dpi и экран 720×1280 с программной плотностью 320 dpi (при физической 342 dpi).
Конечно, если вам нужен максимально идеальный вариант для сравнения, лучше взять, например, у Sony Z3 Compact с его 320 dpi. Вот только на скриншоте будет отличаться всего лишь полоска статуса и наэкранные кнопки. Все остальное (т.е. собственно экран приложения) у Z3C будет совпадать с Mi2s.
Андрей, Вы все сделали отлично. Просто хочется ответа на вопрос: почему у Эппл получается сделать отличный интерфейс на экране с посредственными характеристиками по разрешению, а у самсунга, производящего по мнению ЭВМ, «лучшие» экраны и пилящего самый нелагающий тачвиз не получается? все ли дело в осях? Ваше отношение в к самой ситуации, когда софт позволяет продавать дорого технологии условно вчерашнего дня. Добавьте в статью немного «онолитеки»
Я вскользь уже упомянул это: Apple очень сильно заморочена на идеальном (в ее понимании) дизайне. Кроме упомянутых в статье тонких настроек, можно вспомнить еще встроенные в ОС анимации. Т.е. программист просто говорит: «Вот новое состояние, его надо анимировать». И он может быть уверен, что это будет сделано красиво. В Android надо заморачиваться, указывать тип анимации, подбирать ее параметры. Анализировать, что получилось и, возможно, переделывать, если результат получился «не очень».
так неужели гуглу сложно добавить в студио такие инструменты? ведь дизайн реально слабое место оси при такой фрагментации устройств.какой то сяоми вылизвает свой форк до идеала (как они его понимают), а гугл, или самсунг нет.
А Google добавляет инструменты. Но очень-очень медленно. С детальным руководством по дизайну они созрели только к 5 версии (Material design). В итоге все дается на откуп конкретным дизайнерам и разработчикам.
В Android O добавляют работу с цветом.
а это не помогает, и даже награда best material designed app тоже не помогает, разработчики упорно игнорируют рекомендации по дизайну, и до сих пор многие приложения выглядят как непотребное уг 🙁
но с другой стороны, есть те кто только на дизайне заморачивается в ущерб функционалу… и получаем какой нибудь файловый менеджер у которого первый пункт в описании Material design и…все больше ничего :))
А тот, в свою очередь, делает круглые глаза, смотря в телевизор…..или в какой-нить 6,5 дюймовый фаблет…..в смартфоне главное не это, и на пятидюймовых, или 4,7 дюймовых , если хорошее качество экрана, можно просмотреть видео
тащемта, так всё и есть.
Самое смешное, человек он очень практичный, деньги не привык тратить попусту, ездит на прадо, а не на дискавери, живет в доме 200 кв.м., а не 600.
Телефон ему нужен для фоток, сетей, видео и музыки в хорошем качестве во время рабочего процесса (приходится занимать технологические паузы). Камера неплохая в семерке — это факт, для ватцапа пойдет любой смарт, а вот видео и звук — с большой натяжкой можно назвать айфон лучшим.
Вот и получается — за эти деньги для НЕГО не лучшее решение и он это понимает уже.
Спасибо, статья отличная
Познавательный материал! Наглядно демонстрирует разумный подход Apple ‘к гонке мегапикселей’. Ну, а у Android (как обычно) кто во что горазд; к сожалению, Google не может/не хочет это регулировать.
Проблема в том, что ту Apple не такой огромный зоопарк устройств и им контролировать это проще. С другой стороны, всегда есть возможность исправить недоразумение и на аппаратах андроид самостоятельно. Так что, в реальности проблема высосана из пальца.
Пока одни зарабатывают накручиванием цен, другие двигают прогресс делая смартфоны доступными каждому. Android и Windows массовые системы охватывающие огромную базу пользователей и производителей, конечно подобная массовость накладывает накладывает на системы свои плюсы и минусы, впрочем плюсов и минусов не лишены и менее массовые системы ака ios и os X от Apple. Идеала все равно нет, в каждой из систем миришься со своими компромиссами и неудобствами, но так сложилось, что большинство людей Android и Windows вполне устраивают и им не нужно что-то ещё.
Не стоит забывать, что большинство людей вполне устраивали кнопочные смартфоны, а ещё раньше — 640 килобайт памяти.
P.S. Как показывает практика, последние две категории зачастую суть одно и тоже 😉
А как же Dynamic Type который завезли в iOS 7?
как я понимаю, моё существенное замечание в статье исправлять не будут 🙂
Если я правильно понимаю, Dynamic Type требует определенной поддержки со стороны разработчика. Т.е. все, как я и указал.
В Android все работает иначе: разработчик выставляет константный размер шрифта в пунктах, например, 12 sp. А система меняет размер одного пункта.
Так речь не о том, что требуется от разработчика, а про то, что начиная с iOS 7 есть возможность менять размер шрифта в приложениях.
А то можно сказать, что iOS не поддерживает высокие dpi, т.к. требуется поддержка от разработчика как минимум ресурсов x2 и x3
Перечитайте, пожалуйста, то, что я написал.
что перечитать?
>> нет никакой стандартной настройки шрифтов в сторонних приложениях на уровне ОС:
размер можно регулировать начиная с iOS 7.
>> если разработчик не предусмотрел возможность изменения размера шрифта,
Раз возможность присутствует, то это утверждение читается, что разраб должен встроить изменение размера шрифта как это делается в читалках и т.п. И не читается, как, разрабу надо поставить listener UIContentSizeCategoryDidChangeNotification
Начиная с xcode 8.3 вообще нужно только проверить, что есть чек-бокс «Dynamic Type: Automatically Adjusts Font» и отдельный listener не нужен.
>> что перечитать?
Статью и цепочку комментариев.
>> Раз возможность присутствует, то это утверждение читается, что разраб должен встроить изменение размера шрифта как это делается в читалках и т.п.
В контексте данной статьи нет никакой разницы, как именно разработчик встроил изменение размера шрифта. Самое главное, что он должен сделать — это согласиться на концепцию. После чего ему приходится адаптировать интерфейс под разные размеры шрифта. Эти действия сознательные. Поэтому на них идут далеко не все. Если разработчик с дизайнером сказали «Мы сделали все идеально, не надо менять», вы это и получите. Ничего никуда не расползется.
В противоположность этому в Android решение о размере шрифта принимает пользователь. Теоретически у разработчика есть возможность задать размер шрифта не в пунктах (sp), а в точках (dp), но я никогда не видел, чтобы так делали в промышленном масштабе (максимум для экранов с логотипами и тому подобным), даже когда за дело берутся разработчики, только вчера перешедшие под iOS и верстающие чуть ли не попиксельный дизайн для конкретного устройства.
Л — логика.
речь не о том, что там вы как разработчик и ваш дизайнер придумал, а то, что в OS есть возможность менять размер шрифта. не можете «согласиться на концепцию»? идите на завод.
если дизайнер уперся в pixel perfect и не будет принимать в расчет, что у платформы есть dynamic type, то такого дизайнера выгоняют. во всяком случае в нормальных конторах.
twitter, telegram, whatsapp, instagram, youtube — поддерживают DT
vk,skype — нет.
Спасибо за статью! Очень познавательно. Не ясными остались два момента:
1. В чем выигрыш от downsampling в экранах Plus? Сложная схема, для чего-то же все это затеяли.
2. Чисто практический вопрос. Какого размера нужно выбирать изображения для рабочего стола, чтобы картинка не растягивалась?
1) Позволю себе за Андрея ответить. Это троекратное (приблизительно) увеличение относительно первого айфона, натянутое на более практичный экран FHD
1. Видимо, для экономии. FHD экраны с диагональю 5,5″ — самые массовые, а, значит и самые дешевые). Эксклюзивный экран был бы дороже.
2. Если картинка не будет скроллится, то в родном разрешении экрана.
Отмечу, что родное разрешение для обоев не идеально подойдет, если включены 3d эффекты на рабочем столе — в дополнение к предыдущим ответившим.
Познавательно. Спасибо!
ИМХО, для прожжёных пользователей android не имеет никакого значения физическая и логическая плотность. При наличии root, всегда легко подогнать логический размер под физический. Всегда так делаю на всех аппаратах и использую площадь экрана максимально эффективно.
Отличные статьи. Сейчас использую 5,5″ с мелкими шрифтами — терпимо, хоть и хочется больше информации в пределах одного экрана. Подумал, что грабля у меня большая и можно попробовать 6″ (m3 max). Открыл первый попавшейся обзор на ютубе и сразу же закрыл. Растянутые 5″ на 6″выглядит как для слепых, т.е. польза от экрана будет только на ютубе и в браузере. Печаль.
Я извиняюсь, а что за приложение на скриншотах?
Fanlife Ижевск.
фигня какая то