Retina дисплей что это такое
Использование дисплея Retina
Узнайте о дисплее Retina вашего компьютера Mac.
Плотность пикселей на дисплеях Retina такова, что отдельные пиксели неразличимы для глаза на обычном расстоянии от экрана. Это обеспечивает высочайшую детализацию изображения и значительно улучшает качество просмотра в целом.
Компьютеры Mac, оснащенные дисплеем Retina
Модели MacBook Air, выпущенные в 2018 г. или позднее. Штатное разрешение: 2560 x 1600, 227 пикселей на дюйм. Поддержка миллионов цветов.
Модели MacBook, выпущенные в 2015 г. или позднее. Штатное разрешение: 2304 x 1440, 226 пикселей на дюйм. Поддержка миллионов цветов.
Все модели iMac Pro. Штатное разрешение: 5120 x 2880. Поддержка одного миллиарда цветов.
Изменение разрешения дисплея
Компьютер Mac автоматически выбирает оптимальное для дисплея разрешение по умолчанию. Чтобы изменить разрешение:
Если также используется внешний дисплей
Если внешний дисплей используется для расширения рабочего стола, можно выбрать предпочтительное разрешение для каждого из дисплеев. Чтобы отобразить дополнительные разрешения для внешнего дисплея, нажмите и удерживайте клавишу Option при выборе параметра «Масштабированное».
Если внешний дисплей используется для видеоповтора встроенного дисплея, компьютер Mac оптимизирует изображение для дисплея, выбранного во всплывающем меню «Оптимизация для». Позвольте компьютеру Mac выбрать наилучшее разрешение для дисплея или выберите «Масштабированное» и задайте другое разрешение.
При видеоповторе дисплеев можно оптимизировать изображение для внешнего дисплея, а не для встроенного.
Использование приложений с дисплеем Retina
Если приложение выглядит на дисплее Retina или внешнем дисплее с высоким разрешением не так, как вы ожидали, попробуйте открыть приложение в режиме низкого разрешения:
Для некоторых приложений, работающих в режиме низкого разрешения лучше или работающих только в режиме низкого разрешения, этот режим уже включен, и в этом случае отключить его бывает невозможно. Разработчик приложения может предлагать обновление, включающее поддержку дисплея Retina.
Использование приложения Boot Camp и Windows с дисплеем Retina
Информация о продуктах, произведенных не компанией Apple, или о независимых веб-сайтах, неподконтрольных и не тестируемых компанией Apple, не носит рекомендательного или одобрительного характера. Компания Apple не несет никакой ответственности за выбор, функциональность и использование веб-сайтов или продукции сторонних производителей. Компания Apple также не несет ответственности за точность или достоверность данных, размещенных на веб-сайтах сторонних производителей. Обратитесь к поставщику за дополнительной информацией.
Дисплей Retina – что это такое? Retina или AMOLED?
Одним из самых главных преимуществ любого iPhone является дисплей Retina. Экран имеет превосходное качество изображения и настолько высокую резкость, что невозможно увидеть пиксели.
Типы дисплеев в смартфонах
Времена, когда с мобильного телефона можно было только позвонить, уже давно прошли. Сегодня мы имеем дело со смартфонами, которые используются для просмотра интернета, фотографий, видео и игр. Поэтому важно, чтобы они предлагали высокое качество детализации изображения, которым может похвастаться технология Retina. Но прежде чем узнать, что такое Retina, стоит ознакомиться с типами дисплеев на смартфонах. В данный момент самые распространенные это:
Из-за незначительных технологических различий, можно столкнуться с различными названиями, такими как AMOLED, Super AMOLED или P-OLED. Однако все они обеспечивают более или менее похожее и очень высокое качество изображения.
Но почему в списке не находится Retina? Дальше все станет ясно…
Что такое Retina?
Это дисплеи, которые используют технологию, обеспечивающую очень высокое разрешение и, следовательно, резкость изображения — настолько, что пиксели остаются невидимыми для человеческого глаза (отсюда и название Retina — «сетчатка»). Он обеспечивает яркие и в то же время естественные цвета.
Дисплей Retina был впервые использован в 2010 году и стал одной из ключевых особенностей iPhone 4, который получил разрешение 960×640 пкс, что означает плотность 326PPI (пикселей на дюйм) и считается более чем хорошим результатом. За эти годы Apple усовершенствовала свои технологии и представила их на новых устройствах — не только новых моделях iPhone, но и iPod, iPad, iMac, MacBook и Iwatch.
Так что может предложить дисплей Retina? Прежде всего, отличную детализацию, высокую контрастность и хорошую цветопередачу. Это происходит за счет использования высококачественных IPS или OLED экранов (Super Retina HD) и более высокой плотности пикселей, чем обычно.
На видео: Super AMOLED и Retina Display: В чем разница?
Retina или AMOLED — что лучше?
На этот вопрос трудно ответить по двум причинам. Во-первых, оба решения обеспечивают очень высокое качество изображения. Во-вторых, это всего лишь маркетинговые названия, которые на практике могут означать схожие технологии. Но все же можно попробовать сравнить.
Прежде всего, следует помнить, что Retina и Retina HD — это экраны IPS (LCD), тогда как AMOLED — это OLED дисплеи. Некоторые плюсы и минусы связаны с особенностями обеих технологий.
Первые обеспечивают превосходную цветопередачу и обычно более длительный срок службы, а вторые — более широкие углы обзора и более высокую контрастность.
Также стоит обратить внимание на новые устройства и задаться вопросом, что будет лучше — дисплей Super Retina или Super AMOLED? В обоих случаях мы имеем дело с экранами типа OLED премиум-класса. Поэтому снова придется признать ничью. Выбрав любой из вариантов, будет трудно не радоваться изображению.
На видео: iPhone X vs Samsung Galaxy S8 Display — битва гигантов
Популярные смартфоны с дисплеем Retina
Дисплей Retina используется только в iPhone, который производится компанией Apple. Поэтому список моделей для интересующихся данной технологией, будет не слишком длинный. В настоящее время лучше всего сделать ставку на какой-либо из этих трех устройств:
Что нужно знать о вёрстке под ретину
При создании сайтов и веб-приложений важно помнить, что пользователи будут их открывать на устройствах с разными экранами. Поэтому нужно делать всё возможное, чтобы вёрстка выглядела хорошо на любом девайсе.
Есть множество способов подготовить вёрстку, начиная от использования медиавыражений и заканчивая написанием скриптов. Мы не будем углубляться в эту тему и разберём только основные моменты, которые полезно знать начинающим веб-разработчикам.
Дисклеймер: в статье мы называем ретиной все экраны с повышенной плотностью пикселей, но знаем, что это не так. Считайте это литературным допущением.
Что такое пиксель?
Чтобы понять, чем ретина-экраны отличаются от остальных и как с ними работать, нужно для начала разобрать понятие пикселя. Пиксели бывает двух видов:
Физический пиксель — пиксель устройства — это пиксель на матрице девайса. Например, когда мы говорим, что ширина экрана устройства 480px, то подразумеваем, что по всей ширине находится 480 неделимых ячеек. Именно они с помощью цветовой схемы RGB формируют изображение на экране.
Чем больше физических пикселей на экране, тем выше его плотность и тем детальнее выводимое на него изображение. Для измерения плотности экранов используют специальную единицу PPI — Pixels per Inch. Она показывает количество физических пикселей на квадратном дюйме экрана. То есть чем выше PPI, тем лучше графика.
CSS-пиксель — относительный пиксель. Размер физических пикселей может отличаться у разных устройств и производителей. Поэтому они подстраивают выводимую на экране своих девайсов информацию под CSS-пиксель. Если этого не сделать, то изображения и тексты, размеры которых заданы в CSS, будут выглядеть по-разному даже на внешне похожих устройствах.
В свою очередь, разработчики никогда не работают с физическими пикселями устройств, только с CSS-пикселями. Чему равен один CSS-пиксель? Изначально стандарт W3C приравнивал его к значению 1/96 дюйма, то есть около 0,26 мм., а браузеры для упрощения расчетов принимали его 1:1 к физическому пикселю при масштабе 100%. Но позже многое изменилось: настало время экранов с повышенной плотностью пикселей.
Что такое ретина-дисплеи?
Ретиной называют дисплеи Apple с повышенной плотностью пикселей на квадратный дюйм. Впервые о них заговорили в 2010 году, когда Стив Джобс презентовал iPhone 4. Новый на тот момент смартфон получил экран с плотностью 326 PPI — в два раза выше, чем у его предшественника iPhone 3GS.
Ретина-дисплеи вывели смартфоны на новый уровень. По словам самого Стива Джобса, на ретина-дисплеях удалось достичь такого PPI, на котором человеческий глаз перестаёт различать отдельные пиксели. Текст стал выглядеть так, словно он выведен не на экран мобильного устройства, а напечатан в хорошей книге. Изображения стали более чёткими и плавными. Появились полутона и исчезла «зернистость» картинок.
Сейчас экраны с повышенной плотностью пикселей выпускают, пожалуй, все крупные бренды. Их нельзя называть ретиной — это название принадлежит исключительно компании Apple. Но принцип отображения аналогичен.
Слева изображение для ретина-экрана, справа — для стандартного дисплея.
Как узнать плотность пикселей на дюйм?
С устройствами Apple всё просто. Можно зайти на официальный сайт, выбрать интересующий девайс и нажать на кнопку «Спецификация». Вы попадёте на страницу с подробными техническими характеристиками, в том числе с информацией о диагонали дисплея, разрешении и PPI:
С другими устройствами может быть чуть сложнее: не все производители указывают плотность пикселей на дюйм. Например, некоторые бренды в технических характеристиках описывает только диагональ и разрешение экрана. Поэтому если вам нужно узнать PPI на конкретном девайсе, можете вычислить его сами по формуле:
Если не хочется считать вручную, можно воспользоваться любым онлайн-калькулятором. Например, такие сервисы есть на сайте 7pads.com, myresolutionis.ru или prostudio.ru. Они показывают одинаковые результаты, поэтому можете выбрать любой.
Результаты подсчёта: слева myresolutionis.ru, справа — prostudio.ru
Особенности вёрстки под ретина-экраны
Ретинизация изображений — стандарт на рынке веб-разработки. Уже сейчас многие устройства (и не только от Apple) используют экраны с повышенной плотностью пикселей. Поэтому, чтобы вёрстка выглядела хорошо, нужно научиться ретинизировать контент. Давайте разберём, какой тип контента нужно оптимизировать под экраны с высокой плотностью, а какой не нуждается в дополнительной подготовке.
Текст
С текстом ничего не нужно делать, ведь современные шрифты выполнены в векторном формате. Векторный текст сам подстраивается под параметры экрана и одинаково выглядит на всех устройствах. Поэтому все тексты на сайте нужно добавлять не изображениями, а с помощью
, и других тегов.
Исключение — логотипы: даже если они выглядят как текст, их лучше вставлять изображением. Причина в том, что если по каким-то причинам основной шрифт не загрузится, браузер заменит его на стандартный. В таком случае логотип уже не будет соответствовать фирменному стилю компании. Например, представьте себе лого Coca-Cola, написанное не узнаваемым курсивом, а стандартным Arial.
Так мог бы выглядеть логотип Coca-Cola, если бы шрифт не подгрузился.
Даже в таком, казалось бы, простом случае логотип «Техномарта» лучше сделать картинкой в формате SVG, а не написать простым текстом.
Иконки и декоративные изображения
Лучшее решение для иконок и декоративных элементов — использование формата SVG. SVG — векторный формат графики, и он, как и в случае со шрифтами, отлично выглядит на экранах с разным разрешением и плотностью пикселей и не нуждается в дополнительной оптимизации при вёрстке под ретину. Главное не забывать указывать размеры таких элементов.
Иконки категорий лучше использовать в SVG-формате. А вот главный баннер, кажется, забыли оптимизировать под ретина-экраны.
Есть и другие векторные форматы, например, AI — как на этом изображении. Такое изображение хорошо подойдет для широкоформатной печати в типографии, но не для сайта.
Контентные и фоновые изображения
Для контентных и фоновых изображений обычно используют PNG, JPG, WebP и другие растровые форматы. Почему не SVG? Потому что отрисовывать фотореалистичную графику в векторе — очень трудоемкий и технически сложный процесс.
Вся растровая графика состоит из пикселей, количество которых определяется при создании изображения и остается неизменным. Поэтому при увеличении или уменьшении такой картинки её качество ухудшается: она становится «зернистой». Из-за таких особенностей основной упор при оптимизации вёрстки под ретина-дисплеи делается именно на подготовку и добавление растровой графики: контентных и фоновых изображений.
Графика должна быть подготовлена как минимум для двух вариантов экранов. Один для обычных дисплеев, второй, с увеличенным количеством пикселей — для ретины.
Обычно дизайнеры знают про экраны с повышенной плотностью и сами готовят дополнительные изображения. Так, если вы работаете с Figma, то можете легко выгрузить изображения с индексом @1x для обычных дисплеев и @2x — для дисплеев, плотность пикселей которых в два раза выше. Обычно этих индексов достаточно. Но в некоторых проектах идут дальше и используют отдельную графику с индексом @3x и выше.
Пример: как экспортировать изображения в Figma.
При ретинизации изображений учитывается плотность пикселей экрана устройства и в зависимости от нее показываются разные изображения. Чтобы браузер понимал, какую из картинок показать пользователю, используют медиазапросы или специальные атрибуты.
Фоновые изображения вставляют с помощью медиавыражения @media(min-resolution: 2dppx) <. >.
Вариант с префиксами:
У функции image-set() есть несколько особенностей:
В Safari префикс указывать не нужно, но синтаксис функции немного другой, с использованием функции url (): background-image: (url(«platypus.png» 1x));
Пока что не во всех браузерах есть полная поддержка этой функции. Поэтому перед использованием проверьте, поддерживают ли её нужные вам браузеры с помощью сервиса Caniuse.com.
Для контентных изображений следует использовать тег
После добавления нескольких вариантов графики полезно проверять, как отображаются изображения на экранах с разной плотностью пикселей. Это можно сделать с помощью инструментов разработчика. Например, в Chrome DevTools на верхней панели можно изменить плотность экрана на DPR: 1.0, 2.0 или 3.0. А во вкладке «Сеть» или Network можно посмотреть, какие картинки загружаются на экранах с разной плотностью. Главное — при изменении DPR не забывайте перезагружать страницу.
Подведём итоги
Используйте тексты и градиенты — их не нужно дополнительно оптимизировать.
Используйте изображения минимум в двух форматах: для обычных экранов и для ретины.
По возможности отдавайте приоритет SVG.
При добавлении контентных изображений используйте тег
Для фоновых картинок применяйте медиавыражение @media(min-resolution: 2dppx) <. >или используйте CSS-функцию image-set.
Не забывайте проверять, как выглядит вёрстка на экранах с различной плотностью пикселей.
Если вы хотите более подробно погрузиться в ретиновую графику и научиться готовить вёрстку для ретина-экранов, попробуйте наш профессиональный курс «HTML и CSS. Адаптивная вёрстка и автоматизация».
Другие наши статьи о вёрстке
Retina дисплей: что такое, зачем нужен, плюсы и минусы
Читая описания устройств Apple, неискушенный пользователь среди прочего обращает внимание на так называемый Retina дисплей. Что это означает? Это лучше или хуже, например, HD или FullHD?
Может, это просто очередная развесистая маркетинговая лапша, которую купертинцы щедро заготавливают в промышленных масштабах для доверчивых покупателей? Попробуем разобраться.
Retina – это не разрешение
Большинство из нас привыкло мерить качество видеоконтента и экрана, на котором он воспроизводится, именно в этом ключе. SD – HD – FullHD – 4K – 8K. Плюс куча промежуточных вариантов типа 3K, Quad HD, FullHD+.
В целом это верно: в современном видео все привязано к величинам, кратным 720 пикселей по минимальной стороне растра, что, собственно, и составляет то самое HD разрешение.
В случае смартфонов стройность картины несколько подпортило изменение соотношения сторон с 16:9 на 18:9 и более, однако принцип остался прежним.
Однако проблема в том, что экран с разрешением HD с диагональю, к примеру, 5,5 дюйма – это совсем не то, что он же, но с 7-дюймовой. В первом случае изображение будет практически идеальным, во втором – пикселизированным, «с квадратиками».
Здесь начинает играть совсем другой параметр – так называемая плотность пикселей, она же PPI (Pixels per Inch, «пикселей на дюйм»). Он не абсолютен, при пикселизации может играть роль и состав цветовых субпикселей, но близок к этому.
И именно от него в свое время решил отталкиваться покойный Стив Джобс.
Опираясь на результаты исследований, Apple в 2010 году объявила, что при расстоянии до дисплея 10-12 дюймов пикселизация отсутствует при плотности пикселей 325 ppi.
Именно к этой величине и стали привязывать разрешение дисплеев, по факту ставя телегу впереди лошади. Вот поэтому у всех iPhone вплоть до SE (2020) такие странные разрешения: ни HD, ни FullHD.
Однако уже в 2014 году, когда на рынок вышел iPhone 6 Plus, купертинцы поняли, что погорячились.
У этой модели, в отличие от младшего iPhone 6, было самое обыкновенное FullHD разрешение: 1920х1080, при 5,5-дюймовой диагонали соответствовавшее плотности пикселей 401 ppi.
И его ничтоже сумняшеся обозвали Super Retina. То, что, согласно исследованиям британских ученых, эта величина является «избыточной», никого не волновало.
Для других устройств плотность пикселей Retina отличалась от смартфонной, хотя особой логики в этом не было. Например, у одного из макбуков она соответствовала 227 ppi – все-таки дисплей таких устройств располагается куда дальше от глаз пользователя.
…и не тип матрицы
Еще одно заблуждение – некоторые всерьез полагают, что дисплеи Retina – это такой суперкрутой тип матрицы, который на голову выше не только банального IPS, но и всяких там AMOLED.
После выхода iPhone X число таких свидетелей секты надгрызенного фрукта поубавилось, но полностью они как вид не вымерли. Так вот: в последних iPhone стоят дисплеи Samsung.
Хорошие, никто не спорит, даже отличные – но все-таки не лучшие.
Лучшие корейцы приберегают для собственных флагманов линейки Galaxy S. Так что к технологии производства экранов Retina никакого отношения не имеет, увы.
Плюсы и минусы
Если говорить о достоинствах Retina дисплея, то они были актуальны разве что на момент его появления, начиная с iPhone 4. По тем временам 330 ppi на диагонали в 3,5 дюйма – это было сказочно.
Для сравнения: Samsung Google Nexus S при диагонали в 4 дюйма имел всего 233 ppi – показатель самых убогих современных ультрабюджетников.
При этом стоит отметить, что свои матрицы Apple не производила и не производит самостоятельно, в отличие от чипсетов. В разное время ее поставщиками были Sharp, LG и та же Samsung.
Так что вопрос был, скорее, психологический – именно купертинцы первыми задали новый стандарт, остальные могли, но не считали нужным.
DPI, пиксели, Retina: Как устроены экраны устройств Статьи редакции
Руководство дизайнера Google
Дизайнер Google Себастьян Габриэль опубликовал в своём блоге подробный обзор разрешений экранов устройств и того, как адаптировать интерфейс для них. Команда Sketchapp.me подготовила перевод заметки Габриэля.
DPI или Dots Per Inch (точек на дюйм) — это величина измерения плотности точек, изначально используемая в печати. Это количество чернильных точек, которое принтер может поместить в одном дюйме.
Чем меньше DPI, тем менее детализированная печать. Это понятие применяется также и для компьютерных экранов под названием PPI или Pixels Per Inch (пикселей на дюйм). Тут такой же принцип: величина подсчитывает количество пикселей, которое ваш экран способен отобразить на 1 дюйме. Термин DPI также используется и для описания характеристик экрана.
Компьютеры Windows по умолчанию имеют PPI = 96. В Mac используется PPI = 72. Эти значения были обусловлены тем, что производимые тогда экраны отображали 72 «точки» или пикселя на дюйм. Так было в 80-х, а сейчас устройства на Windows, Mac и прочих платформах имеют множество вариаций PPI-разрешения экранов.
Разрешение, пиксель и физический размер
Спросить кого-то, каков размер пикселя, — это отличный способ смутить человека каверзностью вопроса. У пикселя нет размера, нет физического значения или смысла вне его математического представления. Это часть связи между физическим размером экрана, выраженным в дюймах, и разрешением экрана, выраженным в пикселях на дюйм, а также пиксельным размером экрана, выраженным в пикселях. В общих чертах это выглядит вот так:
Обычные декстопные экраны не-Retina (включая Mac) будут иметь PPI от 72 до 120. Дизайн с PPI между 72 и 120 дает уверенность в том, что ваша работа будет иметь примерно одинаковые пропорции в размере везде.
Вот пример. Экран Mac Cinema Display 27″ располагает PPI = 109, что означает, что он отображает 109 пикселей на дюйме экранной площади. Ширина с фасками составляет 25,7 дюймов (65 см). Ширина самого экрана примерно 23,5 дюймов, так что 23,5 * 109
2560, что и формирует родное разрешение экрана в 2560 * 1440 px.
23,5 * 109 на самом деле не равно 2560 — это будет 23,486238532 дюймов. Более точный результат получится при подсчете пикселей на каждый сантиметр, но, надеюсь, вы уловили суть.
Влияние на дизайн
Скажем, вы нарисовали синий квадрат размером 109 * 109 px на экране, о котором мы только что говорили.
Этот квадрат будет иметь физический размер 1 * 1 дюйм. Но если экран пользователя имеет PPI = 72, ваш синий квадрат будет крупнее по своим физическим размерам. Так как PPI = 72, понадобится примерно полтора дюйма экранного пространства, чтобы отобразить квадрат со стороной в 109 пикселей. Посмотрите симуляцию этого эффекта ниже:
Не обращая внимания на разницу в цвете и разрешении, помните, что каждый будет видеть ваш дизайн по-разному. Вашей целью должен быть поиск лучшего компромисса, покрывающего наибольший процент пользователей. Не надейтесь, что у каждого пользователя будет такой же экран, как у вас.
Разрешение экрана (и родное разрешение)
Разрешение экрана может существенно влиять на то, как пользователь воспринимает ваш дизайн. Так как на смену CRT-мониторам пришли LCD, пользователи теперь имеют родное разрешение, которое гарантирует хорошее соотношение размера и PPI.
Разрешение определяет количество пикселей, отображаемых на экране (например, 2560 * 1440 px для дисплея Cinema в 27 дюймов) — 2560 по ширине и 1440 по высоте. Конечно, теперь, когда вы знаете, что означает PPI, вы понимаете, что это не может быть единицей измерения физического размера. Изображение с таким разрешением можно растянуть как на всю стену, так и на очень небольшой экран.
Сегодня LCD-мониторы идут с предустановленным или родным разрешением, отражающим количество пикселей, которое может отобразить экран. Оно немного отличалось от старых CRT-мониторов, но так как они остались в прошлом, не будем вдаваться в детали (так я смогу скрыть и свой частичный недостаток знаний в области старых-добрых телевизоров).
Возьмем наш 27-дюймовый Cinema Display, который может отобразить 190 PPI на родном разрешении в 2560 * 1440 px. Если вы сократите разрешение, элементы будут больше. Но фактически у вас будет 23,5 дюймов по горизонтали, чтобы заполнить их пикселями, правда меньшим их количеством.
«Фактически», потому что в этом случае так и будет. Экран располагает родным разрешением в 2560 * 1440 px. Если разрешение снизится, пиксели останутся на месте, отображая 109 PPI. Чтобы заполнить разрыв между этими параметрами, ваша ОС попросту начнет все растягивать. Ваш графический процессор возьмет каждый пиксель и высчитает новую пропорцию для его отображения.
Если вы зададите разрешение в 1280 * 720 (половину прошлой ширины, половину высоты), ваш GPU будет симулировать пиксель, вдвое больший по сравнению с прежним, чтобы заполнить экран. Какой будет результат? Ну, графика может стать размытой. Если половинчатая пропорция будет выглядеть более-менее хорошо, потому что это простой делитель, то если задать пропорцию ⅓ или ¾, вы придете к дробным значениям, а пиксель делить нельзя. Вот пример:
Посмотрите на пример ниже. Возьмите линию толщиной в один пиксель на экране с родным разрешением. А теперь примените разрешение на 150% меньше. Чтобы заполнить экран графикой, процессору придется генерировать графику на 150%, умножая все на 1,5. 1 * 1,5 = 1,5, но у нас нет половинчатых пикселей. В итоге крайние пиксели зальются дробным оттенком цвета, что и создаст эффект размытости.
Поэтому, если у вас есть Retina Macbook Pro, и вам нужно измерить разрешение, вам отобразится окно, показанное ниже, уведомляя вас, что выбранное разрешение будет «выглядеть, как» 1280 * 800 px. Так система выражает пропорции размера через разрешение пользователя.
Это очень субъективное представление, потому что используется пиксельное разрешение в качестве меры физического размера, но это и не ложь, как минимум, с их точки зрения.
Если вы хотите всегда видеть дизайн в качестве pixel-perfect, никогда не используйте разрешение, отличное от вашего родного. Да, вам может быть комфортнее с меньшей пропорцией, но когда речь заходит о пикселях, желательно быть максимально точным. К сожалению, некоторые люди используют разрешение как способ лучше видеть то, что на экране (особенно на компьютерном экране). Тут ваш дизайн тоже может выглядеть плохо, но тут пользователям важнее удобочитаемость, чем аутентичность дизайна.
Что такое 4K-разрешение
Вы, должно быть, в последнее время часто слышали термин 4K, эта тема сейчас в тренде. Чтобы понять, что это такое, давайте сначала разберем, что же означает «HD». Помните, что это супер-упрощенный вариант объяснения. Я просто поясню на примере самых распространенных разрешений. Есть разные категории HD.
Термин HD применим к любому разрешению, начиная с 1280 * 720 px или 720p на 720 горизонтальных линий. Некоторые могут назвать такое разрешение SD, по стандартному определению.
Термин full HD применяется к экранам 1920 * 1080 px. Большая часть телевизоров использует это разрешение, как и все большее количество продвинутых high-end телефонов (Galaxy SIV, HTC one, Sony Xperia Z, Nexus5).
Разрешение 4K начинается от 3840 * 2160 пикселей. Его также называют Quad HD, UHD от Ultra HD. Грубо говоря, вы можете вместить 4 по 1080p в 4K-дисплей по количеству пикселей.
Вторым разрешением 4K является 4096 * 2160. Оно немного больше, используется для проекторов и профессиональных камер.
Гипотетический пример: если вы подключите дисплей размером 12″ и разрешением 4K к компьютеру 12″ с высоким разрешением (2х), все отобразится в размере вдвое меньше.
Частота мерцания монитора
Отвлечемся ненадолго от PPI и разрешений экрана. Вы наверняка видели, что в настройках экрана также значится значение в Герцах (Hz). Это не имеет никакого отношения к PPI, но если вам интересно, частота мерцания монитора или частота обновления изображения — это единица измерения скорости, с которой ваш монитор будет отображать фиксированное изображение или фрейм, в секунду. Монитор с частотой 60Hz сможет отображать 60 кадров в секунду (60 fps). Монитор с частотой 120Hz — 120fps и так далее.
В контексте пользовательского интерфейса, частота мерцания монитора определит, насколько плавно и детализировано будет выглядеть ваша анимация. Большинство экранов имеют частоту 60Гц. Помните, что количество кадров, отображаемое за секунду, также зависит от процессорной и графической мощности устройства. Нет смысла адаптировать экран 120 Гц под Atari 2600.
Для лучшего понимания посмотрите на пример ниже. Ти-рекс идет из точки А в точку Б в быстром и точно постоянном ритме на обоих экранах — 60 Гц и 120 Гц. Экран с частотой 60fps способен отображать 9 кадров во время аримации, а экран 120 Гц по логике вещей отобразить в два раза больше кадров за ту же единицу времени. Анимация будет гораздо плавнее на экране с частотой 120 Гц.
Некоторые утверждают, что человеческий глаз не может улавливать частоту свыше 60fps. Это не так. Не слушайте таких умников, смейтесь им в лицо как можно более очевидно.
Что такое экран Retina
Само название Retina display было представлено Apple в релизе iPhone 4. Экран называется Retina, потому что PPI устройства было таким высоким, что сетчатка человеческого глаза (на английском retina) не должна была различать пиксели на экранах.
Это утверждение справедливо для некоторых размеров экрана, но так как экраны постоянно улучшаются, наши глаза теперь натренированы достаточно, чтобы различать пиксели, особенно на закругленных элементах интерфейса.
Технически, такие экраны отображают вдвое больше пикселей в высоту и в ширину на таком же физическом размере. iPhone 3GS имел диагональ в 3,5 дюйма и разрешение 480 * 320 px, что соответствует 163PPI. Phone 4S также имел диагональ в 3,5 дюйма и разрешение 960 * 640 px, что соответствует 326PPI.
Точно в два раза. Простой множитель. Так что, вместо того, чтобы быть меньше, элементы на экране в два раза резче, так как в них вдвое больше пикселей, и такой же физический размер. 1 нормальный пиксель = 4 пикселя Retina, в четыре раза больше пикселей.
Используйте пример ниже по прямому назначению при разработке сложных дизайнов.
Примечание: довольно сложно симулировать разное качество изображения с двух устройств на третьем, то есть на которое вы сейчас смотрите. Музыкальный плеер на Retina, даже занимая такое же физическое пространство, будет смотреться вдвое четче и качественнее на iPhone 4.
Название «Retina» принадлежит Apple, так что другие компании используют вместо него «HI-DPI» или совсем никакого названия.
Продукты Apple — это отличный способ познакомиться с конвертацией DPI, чтобы понять различия между разрешением, PPI и соотношением с физическим размером, потому что вам придется использовать всего 1 множитель.
Что такое множитель
Множитель — это ваш математический спаситель, когда дело доходит до конвертации дизайна в разных PPI-разрешениях. Когда вы знаете множитель, вам не нужно париться о детальных спецификациях устройства.
Давайте возьмем для примера iPhone 3G и 4. У вас есть в четыре раза больше пикселей (ширина 2х и высота 2х) при том же физическом размере. Следовательно, ваш множитель равен 2. Это означает, чтобы ваши исходники были совместимы с разрешением 4G, вам нужно просто умножить размер исходников на 2, и все.
Скажем, вы создаете кнопку размером 44 * 44 px, что является рекомендованным размером для сенсорных кнопок в iOS (мы к этому еще вернемся позже в этой заметке). Назовем ее типичной кнопкой с именем «Jim». Чтобы наш Джим выглядел красиво на iPhone 4, вам нужно создать вдвое большую версию. Это мы и делаем здесь:
Все довольно просто. Теперь есть версия Jim.png для нормального PPI (iPhone 3) и версия Jim@2x.png для 200% PPI (iPhone 4.)
Теперь вы скажете: «Я почти уверен, что есть и другие множители, кроме двойки». Так и есть, и тут начинается самый кошмар. Может, и не кошмар, но я уверен, что вы предпочтете провести весь день, гладя носки, вместо работы с этим бесчисленным множеством множителей. Слава богу, это не так страшно, как кажется на первый взгляд. Мы к этому еще вернемся.
Поговорим о единицах измерения сначала, потому что вам понадобится именно условная единица, а не пиксель, для спецификаций мульти-DPI дизайнов. И тут на сцену выходят DP и PT.
Множитель нужно знать для любого дизайна, над которым вы работаете. На множителях и держится весь этот мир хаоса, делая все эти размеры экрана, PPI и прочие размерности понятными для человека.
Что такое DP, PT и SP
DP или PT — это единица измерения, которую можно использовать для описания макетов дизайна для множества устройств, во множестве DPI.
DP или DiP — это аббревиатура от Device independent Pixel, а PT означает Point (точка). PT относится к Apple, DP — к Android, но означают примерно то же самое.
Если вкратце, эти единицы определяют размер независимо от множителя устройства. Это очень выручает, когда нужно обсуждать спецификации с разными участниками рабочего процесса вроде дизайнера и инженера. Вернемся к примеру с кнопкой-Джимом.
Ширина Джима 44 px на нормальных экранах не-retina и 88 px на экранах Retina. Добавим вокруг кнопки отступ в 20 px, потому что Джиму нравится свободное пространство. Тогда для Retina отступы будут 40 px. Но считать пиксели retina совсем не имеет смысла, когда вы создаете дизайн для экранов не-Retina.
Так что мы просто возьмем нормальную 100% пропорцию не-retina в качестве основы для всего.
В этом случае размер Джима будет 44 * 44 DP или PT и отступ в 20 DP или PT. Вы можете давать спецификации в любом PPI, Джим всегда будет 44 * 44 dp или pt.
Android и iOS адаптирует этот размер к экрану и конвертирует с правильным множителем. Вот почему мне кажется проще всегда создавать дизайн в родном PPI для вашего экрана.
SP — это отдельный от DP и PT термин, но работает по такому же принципу. SP — это аббревиатура Scale-independent pixel (пиксель, независимый от масштаба). На SP будут влиять настройки шрифтов пользователя на устройстве Android. Как дизайнеру, мне задание SP кажется заданием DP для чего-то другого. базируйте его на том, что читабельно в масштабе 1х (16 sp — отличный размер шрифта, например).
Для отступов всегда используйте значения, независимые от разрешения и масштаба. Всегда. Чем разнообразнее размеры и разрешения экрана, тем важнее это становится.
Конфигурация PPI
Теперь, когда вы знаете, что такое PPI, retina и множитель, важно поговорить о том, «А что будет, если я изменю настройки PPI в моем дизайн-редакторе?»
Если вы задавали этот вопрос себе, это означает, что вы немного разбираетесь в программном обеспечении для дизайнеров. Вот то, на понимание чего у меня ушло немного времени, и это важный момент: любой непечатный контент использует пиксельные размерности независимо от того, какая PPI-конфигурация задана изначально.
PPI-конфигурация в ПО — это прерогатива печати. Если вы создаете дизайн под веб, PPI не будет никак влиять на размер вашего растра.
Вот почему мы используем множители, а не прямые значения PPI. Ваш канвас и графика будут всегда конвертироваться в пиксели программой, используя соответствующий множитель.
Вот пример. Вы можете попробовать самостоятельно проделать то же самое в программе с поддержкой настроек PPI, как Photoshop. Я нарисовал прямоугольник 80 * 80 px и текст размером 16 pt в photoshop с настройками 72 PPI. Второй — то же самое, но с настройками на 144 PPI.
Как видите, текст стал немного больше, вдвое больше, если быть точным, в то время, как квадрат не изменился. Причина в том, что программа (в данном случае Photoshop) масштабирует значения pt (как и должна) на основе значения PPI, что в результате дает удвоение размера при рендеринге текста при удвоенной конфигурации PPI. С другой стороны, то, что было определено в пикселях, то есть синий квадрат, остается в том же размере. Пиксель — это пиксель, и останется пикселем, какой бы PPI ни задать. Изменит его только PPI экрана, который его отображает.
Важно помнить, что при дизайне для цифровых устройств PPI будет влиять только на то, как вы воспринимаете дизайн, а также на процесс его создания и на графику в размерности pt, такую как шрифты. Если вы включите в свой процесс дизайна исходники с разными значениями PPI, программа отресайзит все файлы по пропорции PPI получаемого файла. Это может стать для вас проблемой.
Решение. Используйте PPI (предпочтительно в диапазоне 72-120 для дизайна в 1x). Лично я использую 72 PPI, потому что это настройка по умолчанию в Photoshop, и большинство моих коллег используют то же самое.
Как быть с PPI на iOS
Настало время погрузиться в дизайн под конкретные платформы. Вспомним, какие устройства iOS вышли с начала 2014.
Когда речь заходит о размере экрана и DPI, в iOS есть 2 типа мобильных устройств и 2 типа экранов под планшет и десктопы.
В мобильной ветке у них есть iPhone и, конечно же, iPad. В категории телефонов есть старый 3GS (до сих пор поддерживается iOS6) и выше. Только iPhone 3GS является не-Retina. iPhone 5 и выше используют более длинный экран с тем же DPI, как iPhone 4 и 4s. Вот вам шпаргалка:
В сентябре 2014 был анонсирован 2014 Apple Keynote, теперь у вас есть 2 новые категории iPhone: iPhone 6 и iPhone 6 Plus.
iPhone 6 немного больше, чем 5 (на 0,7″), но PPI тот же. iPhone 6 Plus, с другой стороны, представляет совсем новый множитель для iOS — @3x, из-за своего размера в 5,5″.
Есть что-то особенное в том, как iPhone 6 Plus работает со своим экраном по сравнению с другими моделями iPhone: Он уменьшает графику.
Когда вы, к примеру, создаете дизайн для iPhone 6, вы будете рисовать на канвасе размером 1334 * 750px, и телефон будет рендерить 1334 * 750 физических пикселей. В случае с iPhone 6 Plus, телефон имеет меньшее разрешение, чем изображение, так что нужно будет делать дизайн в разрешении 2208 * 1242 px, а телефон уже уменьшит его до идеального размера. Посмотрите иллюстрацию ниже:
Физическое разрешение на 15% меньше, чем разрешение рендеринга, будет немного глюков вроде полупикселей, из-за чего самые мелкие детали могут быть немного размытыми. Разрешение настолько высоко, что эти недостатки будут практически незаметны, разве что если слишком придирчиво вглядываться. Так что рисуйте на канвасе 2208 * 1242 px и помните возможные глюки для супер-крошечных деталей вроде разделителей. Посмотрите на симуляцию:
Далее идет категория iPod touch. В рамках дизайна рассматривайте их как iPhone. Поколение iPod 4 и выше используют iOS 6 и не-Retina. В поколении iPod 5 уже используется экран retina(@2x), который совместим с iOS7. Поколение iPod 5 использует экран, который по размеру как в iPhone 5.
И, наконец, есть еще iPad-ы. За исключением первого поколения айпадов (сейчас уже не поддерживаются), все они работают на iOS7, и только iPad 2 и iPad mini первого поколения используют экран не-retina. Если вам интересно, что собой представляет iPad mini с точки зрения дизайна, то это обычный iPad (экран с тем же PPI), но физически меньше. Я имею в виду, что они взяли то же разрешение экрана, но сократили его размер с 9,7 дюймов до 7,9. При том же соотношении увеличилась плотность пикселей. Графические исходники будут немного меньше физически.
Что касается категории десктопов и ноутбуков, мы не будем описывать каждый размер экрана, который предлагает Apple. Большинство используемых сегодня экранов имеет множитель 1x (Macbook, Macbook Air, old Macbook Pro, экраны десктопов). Retina представлена в 13 и 15″ только на Macbook Pro. Множитель 2x, точно как на iPad-ах и iPhone-ах. Если дизайн для десктопа отличается от мобильной версии, вам понадобится подготовить исходники для обеих версий экрана.
Только с одним множителем создание исходников под iOS и OSX довольно простой процесс. Я предлагаю начать с дизайна для базового PPI (то есть 100%/1x) и умножать на 2 потом, чтобы убедиться в корректности дизайна на экране @2x и генерации исходников в @2x. Как только вам станет удобно переключаться между 1x и 2x, вы сможете создавать дизайн напрямую в @2x, уменьшая исходники для меньшего разрешения. Это будет особенно полезным при дизайне на экране Retina (Macbook Pro).
Требуемые исходники, пример Chrome
Как вы видите, нужно каждый раз генерировать два изображения для каждого исходника. Для изображений под разрешение retina мы добавляем суффикс @2x, так что названия файлов получаются в формате name@2x.png. Это стандартное правило в iOS, которому необходимо следовать.
Если вы создаете изображение, которое будет использоваться только на iPad, мы используем
Как быть с PPI на Android
Платформа Android располагает более широким спектром устройств по сравнению с iOS. Причина в том, что любой OEM может выпустить устройство со своими разрешениями экрана, установив на него свою собственную версию Android. В результате получается практически неограниченное множество размеров дисплеев и вариантов DPI, от телефонов размером с планшет до планшетов, размером с небольшой телефон. По этой причине ваш дизайн всегда вынужден приспосабливаться ко всем этим вариациям.
В этом разделе мы пойдем путем, отличным от пояснений для iOS. Сначала мы обсудим множители и категории DPI.
Как и для iOS, у вас есть две категории устройств: телефоны и планшеты. Обе категории можно организовать в разные категории DPI: ldpi, mdpi, tvdpi, hdpi, xhdpi, xxhdpi и xxxhdpi.
К счастью, некоторые используются более часто, чем остальные, некоторые являются более устаревшими и не рекомендуемыми к использованию.
Сначала нужно найти базовую единицу, эквивалентную 1x для iOS. Для Android такой базой служит MDPI.
Посмотрим на множители в этой шпаргалке:
Да, их много, и это далеко не полный список. Осталось еще кое-что.
В постоянном использовании находятся пять DPI: MDPI, HDPI, XHDPI, XXHDPI и XXXHDPI.
LDPI — это старый вариант DPI, который больше не используется, TVDPI использовался специально под интерфейсы телевизоров и частично в Nexus 7 2012 edition. Его можно рассматривать как ненужный для телефонов и планшетов. Хотя, множитель TVDPI (1,33x) используется в некоторых устройствах Android Wear, таких как LG G watch, но об этом мы поговорим позже.
Соотнесем телефоны и планшеты на Android с их DPI-разрешениями.
Требуемые исходники, пример для Chrome
Вам придется подготовить набор из 4 изображений для каждого исходника, от MDPI до XXHDPI. Вы можете исключить из набора LDPI. Помните, что в случае с показанной ниже версией Chrome, TVDPI версия также была экспортирована, поэтому в этом случае у нас вышло 5 изображений на исходник.
Как и для iOS, я предлагаю взять 100% или множитель 1х в качестве основы вашего дизайна. Это облегчает подготовку дизайна под каждый другой множитель, особенно на Android с множителями вроде 1,33 и 1,5.
Посмотрите на пример кнопки «назад» в Chrome на Android:
В плане имен файлов добавление DPI не является обязательным требованием официальных стандартов Android. Мы просто называем так свои исходники из-за ограничения текущих инструментов для дизайна, которые вызывают трудности в задании пути под экспорт конкретного исходника.
Учитывая, что набор исходников может иногда содержать сотни исходников, таким образом можно сделать процесс более простым и безболезненным, избежать дублирования имен. Вот как наборы исходников будут структурированы в репозитории исходников:
Будьте осторожны с элементами в пиксельной размерности, таких как различные штрихи. Вы захотите выбрать, делать штрих шириной в 1 px или в 2 px, чтобы он был не размытый, как показано в разделе screen resolution section.
PPI в Mac и Chrome OS
Mac (OSX) и Chrome OS ведут себя довольно одинаково в плане PPI. Обе операционные системы поддерживают стандартный PPI (100%) и более высокие разрешения, включая retina (200%). Как и в случае с моделями iPhone и iPad, здесь используется только множитель 2x.
Даже если большинство ваших пользователей, как Mac, так и Chrome OS, будут сидеть на устройствах с низким разрешением, я очень рекомендую подготавливать и версии экранов в высоком разрешении. Исходники для будущих версий Chrome OS включают файлы в высоком разрешении. Поверьте, это не будет пустой тратой времени.
Сейчас всего три ноутбука используют это PPI — Macbook Pro 13″, 15″ и Chromebook Pixel. Вдобавок, Chromebook Pixe еще и сенсорный.
Требуемые исходники, пример Chrome
Идеальный пример этого сходства — исходники кнопки тулбара Chrome. Мы используем одни и те же кнопки в обеих платформах. Если код и отличается, то графика идентична. Посмотрите на меню Chrome и кнопки закладок:
Растягиваемые исходники
Неважно, десктопное или мобильное приложение вы разрабатываете, почти всегда требуются растягиваемые исходники (stretchable assets). Этот исходник позволяет коду изменять размер до нужного без потери качества при рендеринге.
Это не одно и то же с повторяющимися исходниками (repeatable assets), которые работают по-разному, хоть иногда и показывают идентичный результат.
Посмотрите на пример внизу. Панель инструментов на iOS генерируется из одного супертонкого исходника, который повторяется по оси Х по всему экрану.
Теперь посмотрим, как разные платформы используют растягиваемые исходники.
Растягиваемые исходники на iOS
В iOS работа дизайнера упрощается, потому что растягивание задается в коде. Все, что нужно от вас, — предоставить базовое изображение и, если вы сами не реализуете дизайн в коде, задать для него спецификации растягивания по-горизонтали, по-вертикали или в обоих направлениях. Вот пример стандартной кнопки Chrome в iOS.
Растягиваемые исходники на Android
Android использует такие исходники не так, как iOS. Сам исходник окружен 4 линиями. Их надо задать в слайсе/изображении как часть графики, в буквальном смысле визуально отобразить спецификации исходника в самом исходнике.
Эти 4 линии определяют две вещи: область масштабирования и область заливки. Если эти два параметра заданы, код просто сможет растянуть исходник и поместить контент в заданное место. Посмотрите на пример ниже — Android-версия стандартной кнопки Chrome, которую вы уже видели ранее.
Как вы видите, изображение 9-patch — это набор 4 чистых полос #000000. У них должна быть ширина в 1 px для любого DPI; это индикация кода. Область растягивания не включает в себя закругленные углы, потому что это не то, что может повторяться (иначе выглядеть будет ужасно). В этом случае мы добавили отступы по 10dp вокруг кнопки. Это то, что не придется задавать в спецификациях.
Помните, что нужно быть осторожными с размером исходника. Если я сделал его довольно большим для демонстрации, важно оптимизировать вес исходника, уменьшив его размер до минимума, как показано ниже. Я оставил углы, как они были, но уменьшил область растяжения и контента к минимуму.
9-patch не заменяет экспорт исходника для каждого DPI. Это нужно проделывать для каждой версии исходника.
Всегда спрашивайте человека, который будет заниматься реализацией вашего дизайна, какое решение лучше всего использовать, особенно для десктопа. Чем больше изображений у вас будет, тем тяжеловеснее будет приложение, и будет тяжелее для вас обновлять исходники в случае необходимости изменений. 9-patch нужно использовать только с правильными названиями и правильной организацией исходников.
Векторные исходники
Так как разнообразие экранов, использующих больший диапазон DPI, постоянно растет, переключение на векторные исходники вместо растровых более чем заслуживает внимания.
Главное преимущества векторных изображений — их масштабируемость. Нет необходимости создавать растровые изображения для всех PPI-вариаций, вектор будет автоматически масштабироваться на основе экранного множителя.
.svg содержит XML-информацию о том, как рисовать графику. ПО/ОС/браузер затем интерпретирует эти команды для рендеринга исходника в выбранном размере.
Использование такого формата дает потрясающие преимущества:
Хотя есть и недостатки:
В зависимости от вашего проекта и платформы, специалистам по реализации дизайна придется предоставить разные материалы. Убедитесь, что выбранное решение хорошо продуманно. К примеру, более старые версии Android (Pre-L) не поддерживают VectorDrawable. Всегда согласовывайте решения с командой инженеров, чтобы выбрать лучший вариант для проекта, учитывая особенности работы продукта и его дизайна. Векторная графика — лучший вариант, но и он не универсален для всех случаев. Так что будьте осторожны.
Сенсорное управление в графике
Сначала вам нужно понять, что сенсорность не имеет никакого отношения к DPI, но когда дело доходит до создания интерфейса и генерации исходников, важно понимать связь между серсорностью и DPI.
Выбор между сенсорным и не-сенсорным характером графики очень зависит от характера приложения, его нагруженности и так далее. Давайте рассмотрим этот вопрос по категориям — десктоп не-серсор и мобильная категория.
Десктоп, не-сенсор
Не буду давать целый урок истории древнего мира, но если вы родились не позже 2005 года, вы еще застали то время, когда компьютерные технологии не создавались под сенсорное управление.
Мы используем мышку и клавиатуру для очень точной навигации по интерфейсу. Точность курсора мышки составляет 1 pt, В теории вы бы могли создать кнопку 1 * 1 pt, которая будет кликабельной. Посмотрите на демо:
Это 20х-версия курсора Chrome OS. Красная зона — это именно та область, которая запускает действие в интерфейсе. Довольно точно. Вы знаете, к чему я веду. Что же не настолько точное? Правильно, наши пальцы.
Как же создавать дизайн под сенсорное управления? В целом, все нужно делать крупнее.
Размер пальца
Это средний размер из двух наиболее часто используемых для взаимодействия с интерфейсом пальцев, указательный и большой. Он отображает как зону прикосновения к экрану, так и занимаемую пальцем область. Фактическая зона прикосновения (то есть часть вашего пальца, которая контактирует с экраном), конечно, будет меньше и немного точнее, если только вы не впечатаете палец с силой в экран.
При создании сенсорных дизайнов, безопаснее будет переоценить размер области прикосновения, чем сделать ее меньше фактической.
Как применить все это к процессу создания дизайна
Как мы уже видели, дюймы или сантиметры — не лучший способ измерений в мире пикселей. По сути, даже пиксель не очень хорошо подходит для этой роли. Так как же убедиться, что дизайн полностью адаптирован под сенсорное управление?
Я сейчас скажу очевидную вещь, но вам просто необходимо тестировать дизайн на устройствах и платформах, под которые он создавался.
Но чтобы не тратить на это слишком много времени, вот некоторые базовые пиксельные размеры, которые считается безопасно использовать в разных ОС.
Рекомендованные размеры областей прикосновения для разных платформ
Опять же, будьте осторожны, так как эти размеры даны для удобства, а не как реальные замеры. Они работают только потому, что OEM-ы и производители следуют определенным стандартам, чтобы экраны были постоянными в плане пропорций размера/DPI.
Как вы видите, каждая ОС предлагает свой набор рекомендаций, но все они в районе 48pt. Windows включает в свои спецификации отступы, вот почему я добавил их здесь. Разница в этих размерах обусловлена разными причинами.
Apple контролирует свое оборудование, поэтому качество сенсорных экранов стабильное, известны точные стандарты размерностей. Здесь можно позволить себе меньшую область для сенсора. Вдобавок, их оборудование еще и меньше по физическим размерам.
С другой стороны, в Android и Windows другие OEM-ы, каждый создает свои устройства, и большее пространство для прикосновения считается более растянутым (особенно в Windows), и их устройства больше по физическим размерам.
Вот пример того, как Safari применяет цели касаний на iOs, и как они применяются в Chrome на Android.
Как видите, обе панели инструментов используют рекомендованные высоты областей касания для каждой платформы. Также область окружения представляет собой квадрат 44 * 44 pt и 48 * 48 pt для iOS и Android соответственно. Помните, что после релиза Material design высота тулбара увеличилась до 56 dp, что увеличило области касания до 56 * 56 dp. Минимальная область касания для интерфейса остается 48 dp. Это не только делает интерфейс созвучным с остальной частью ОС в плане размеров, но и задает хороший стандарт минимального размера для любых элементов, с которыми будет взаимодействовать пользователь.
Windows 8 и Chrome OS
Windows 8 и Chrome OS поддерживают и сенсорное, и несенсорное управление. Если вы создаете дизайн интерфейса для Windows 8, я очень рекомендую вам следовать их стандартам по сенсорным элементам.
Спецификации Chrome OS по этому вопросу еще не вышли. Хотя, учитывая, что все приложения Chrome OS являются веб-приложениями, я бы предложил все равно создавать сенсорный дизайн. Мой совет: применяйте стандарты сенсорных элементов для Android.
Веб, гибридные устройства и будущее
Если вы создаете дизайны под мобильные устройства, будет понятно, каким путем идти — однозначно, сенсорное управление. Если вы разрабатываете дизайне под десктоп, делайте из не-сенсорными. Звучит просто, но при этом игнорируется последний тренд с растущей популярностью — гибридные устройства.Гибридное устройство может управляться и сенсорно и не-серсорно. Chromebook Pixel, Surface Pro и Lenovo Yoga — хорошие тому примеры.
Как поступать в данном случае? Простого ответа на этот вопрос нет, но я попробую посоветовать выбрать сенсорное управления. Именно в этом направлении развивается технология.
Если вы создаете дизайн под веб, думайте о сенсорном управлении заранее.
Что бы вы ни делали для будущего, обдумывайте свои проекты в разрезе мобильных устройств и сенсорного управления. Используйте стандарты областей прикосновения для каждой ОС. Это поможет улучшить дизайн и помочь в достижении постоянства. Стандартные размеры областей касания больше даны для справок, не обязательно строго им следовать. Вы сами контролируете процесс и принимаете решения.
Программы для дизайна интерфейсов
Программное обеспечение не определяет мастерство дизайнера, но выбор правильного инструмента под конкретную задачу может значительно улучшить продуктивность и упростить сам процесс разработки. «Ноу-хау» в программах не должны стать единственным вашим навыком, но изучение и освоение подходящих инструментов дадут отличную основу для воплощения ваших идей в реальность.
К работе с вариациями DPI в дизайне интерфейсов разное ПО подходит по-разному. Некоторые из программ особенно хороши под какие-то определенные цели. Вот наиболее популярные решения:
Photoshop
Мать всех дизайн-инструментов. Возможно, самый популярный выбор для дизайна интерфейсов сегодня. Есть бесконечное множество ресурсов, уроков и статей, посвященных Photoshop. Этот «старичок» стоял еще у истоков развития отрасли дизайна интерфейсов.
Первоначально программа создавалась для обработки растровой графики и фотографий, что видно даже из названия. С годами она развивалась, и дизайнеры стали использовать ее и для дизайна интерфейсов. Частично это было продиктовано привычкой, а также тем, что это был чуть ли не единственный инструмент, способный обеспечить нужное качество.
Photoshop на сегодняшний день является лидером в редактировании растра, а также занимает первое место по популярности для дизайна интерфейсов. За счет существования десятки лет, программа слишком обросла функционалом, из-за чего ее не так легко освоить. Это как раз тот случай, когда в ней можно сделать практически все, но далеко не всегда наиболее оптимальным способом.
Так как изначально он был создан для растровой графики, Photoshop не зависим от DPI-разрешения, в отличие от Illustrator и Sketch, описанных ниже.
Illustrator
Это векторный брат Photoshop. Как говорит само название, он создан для иллюстраторов, но также активно применяется и в дизайне интерфейсов.
Illustrator хорошо адаптирован под печатные дизайны, как и его интерфейс, работу с цветами, масштаб, линейки и единицы измерения сначала могут сбить вас с толку, потребуется немного времени и небольших переделок для адаптации под дизайн интерфейсов. Как и Photoshop, это невероятно мощный инструмент с очень крутой кривой обучения.
В отличие от Photoshop, Illustrator является DPI-независимым из-за своей векторности. В отличие от растровых изображений, векторная графика основана на математических формулах, и ее можно масштабировать программно без потери качества.
Понимание разницы между растровым и векторным изображением — это ключ в постороении масштабируемых дизайнов и исходников.
Sketch 3.0
Sketch — относительно новый инструмент в сравнении с Photoshop и Illustrator. Появившись всего 4 года назад, эта программа наделала много шума (в хорошем смысле) в индустрии дизайна интерфейсов. Причина в том, что Sketch изначально был задуман с одной целью — дизайн интерфейсов. Sketch позиционирует себя как инструмент, идеально адаптированный под свою нишевую аудиторию — дизайнеров интерфейсов.
Sketch подходит для грубого прототипирования, а также для более комплексного визуального дизайна. Он полностью векторный, как Illustrator, с минималистичным и очень продуманным интерфейсом. Комбинация артбордов с простотой работы и гибкостью системы генерации исходников делает Sketch самым быстрым решением для мульти-DPI и мульти-платформенного дизайна. Последние релизы делают его очень достойной альтернативой Photoshop.
Из недостатков можно отметить, что Sketch разрабатывается меньшей командой, и он все еще не так популярен, как Photoshop. К тому же, в нем довольно скудный набор возможностей для обработки растра. В этом отношении Photoshop подойдет гораздо лучше. И, наконец, будучи еще достаточно молодым, он не располагает таким огромным количеством ресурсов, уроков и таким большим сообществом, как Photoshop. Но нужно отметить, что сообщество очень активно и мотивированно на развитие.
Из личного опыта, я был пользователем Photoshop с 8-летнего возраста, но недавно перешел на Sketch 3.0 для большинства задач по дизайну. Это не свидетельство качества, я считаю Photoshop до сих пор шикарным инструментом. Просто Sketch лучше соответствует моим потребностям.
Figma
Новичок конца 2015 года, Figma является браузерным инструментом для векторного дизайна (работает преимущественно через Chrome). Он похож на облачную версию Sketch с возможностями командной работы и интеграцией Slack. Впечатляющее достижение инженерного искусства в попытке реализовать дизайн-инструмент будущего.
Самое большое преимущество Figma в его кросс-платформенности (работает везде, где работает Chrome) и в возможностях командной работы и одновременного редактирования несколькими людьми. Тем не менее, если вы или ваша компания не особо привыкли работать в веб-сервисах, выбор может быть неудачным, так как нет локальной версии программы.
Идеальных инструментов не существует, но есть те, с которыми именно вам комфортно работать. Если вы располагаете достаточным количеством времени и средств, протестируйте все перечисленные программы для формирования собственного мнения.