Дизайн
Dmitry Hanin
2650

Сетки в дизайне приложений под iOS, или вызов для перфекциoниста

Приветствую.

В закладки
Аудио

Гайдлайны Apple рекомендуют использовать сетку 8 х 8 pt (points) для дизайна приложений под iOS. И, собственно, у тебя не возникнет никаких трудностей, если нужен дизайн только для устройств 320 pt. А для тех ребят, кому приходится творить красоту под 375 pt и 414 pt, — моя статья.

Итак, у смартфонов Apple есть несколько опорных размеров экранов по ширине:

​Всем, кто использует сетки для дизайна мобильных приложений посвящается
  1. Ширина 320 points для экранов c множителем:
    — @2 (iPhone SE, 5C, 5S)
  2. Ширина 375 points для экранов c множителем:
    — @2 (iPhone 7, 8)
    — @3 (iPhone X, Xs, 11 Pro)
  3. Ширина 414 points для экранов c множителем:
    — @2 (iPhone XR, 11)
    — @3 (iPhone 7 Plus, 8 Plus, XS Max)

Иными словами, если заказчику нужен дизайн приложения который будет работать исключительно на iPhone 11 Pro, то мы создаем в Figma (или в любом другом векторном редакторе) фрейм размером 375 х 812 и творим макет.

Когда красота готова, разработчик экспортирует все нужные ему ресурсы с проекта, выбирая при этом множитель @3. Потому что реальный размер экрана iPhone 11 Pro 1125 x 2436 px, ровно в три раза больше созданного нами макета в начале.

А теперь к самому интересному. К сеткам

Устанавливая сетку 8 x 8 в устройство с шириной 320 pt, мы получаем 40 кубиков 8 х 8. Также с легкостью встают и рекомендованные поля в 16 с каждой стороны. Расстояние между объектами держим кратным 8. Pixel perfect во плоти!

Идеалити!

А что насчет 375pt?

Сетка 8 х 8 не встает. А какую сетку тогда использовать? И вот тут мы сразу нарушаем гайдлайны Apple. Потому что единственный размер сетки который встает в 375 pt — это сетка 5 x 5. В таком случае поля придется выставить по минимум 15 pt. Расстояния между объектами должны быть кратны 5.

И если вы уже сотворили приложение для экранов 320 pt, то по сути вы его заново творите для экранов 375 pt. Потому что меняется все, пропорции объектов, горизонтальный и вертикальный ритмы. Спасибо, Apple.

Ширина блоков для сетки 5 х 5 под устройства 375 pt (поля по 15). Можем вместить 4 колонки с отступами в 15 pt между ними.

— Хм, у нас есть еще один размер в 414 pt. Может быть здесь будет работать сетка 8 х 8?
— Нет.
— 5 х 5?
— Нет.
— А какая тогда?
— 6х6.

Мы снова нарушаем гайдлайны Apple. Выставляем минимальные поля по 18. И происходит то, что никто не мог предвидеть. Мы не можем разместить 4 колонки идеально по сетке.

Вывод и советы

Эта статья для тех ребят, которые любят, чтоб все было с иголочки. Если же твой выбор просто нарисовать макет в 320pt и потом растянуть от края до края на другие экраны, мои рекомендации не нужны.

Но, тем не менее.

  1. Сетки которые лучше всего работают для экранов:
    — 320 pt, сетка 8 х 8, поля по 16.
    — 375 pt, сетка 5 х 5, поля по 15.
    — 414 pt, сетка 6 х 6, поля по 18.
  2. Старайтесь не группировать объекты в 4 колонки, потому что Apple приготовила вам сюрприз в экранах 414pt.
  3. Не забывайте про горизонтальный ритм текста. Если вы опираетесь на сетку при выборе межстрочного интервала, то получается что для каждого опорного экрана этот ритм будет разный.




Спасибо за внимание!

Dmitry Hanin
дизайнер, которого вы заслужили :)

Update:
— Apple говорит об использовании сетки 8x8 тут
— 16pt размер поля в iOS по умолчанию

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Dmitry Hanin", "author_type": "self", "tags": [], "comments": 26, "likes": 33, "favorites": 119, "is_advertisement": false, "subsite_label": "design", "id": 114969, "is_wide": false, "is_ugc": true, "date": "Wed, 25 Mar 2020 17:01:27 +0300", "is_special": false }
Создать объявление на vc.ru
Торговля
Улитки, гепарды и глухари: как интернет-магазины готовятся к распродажам
Каких онлайн-продаж ожидают в «М.Видео» и в «Metro Cash & Carry», если их сайты загружаются по 33 и 20 секунд?
(function(d, ver) { var s = d.createElement('script'); s.src = 'https://specials-f378ef5.gcdn.co/Covid19Quiz/all.min.js?' + ver; s.async = true; var container = d.getElementById('covid-quiz'); if (container) { s.onload = function() { new Covid19Quiz.Special({ css: 'https://specials-f378ef5.gcdn.co/Covid19Quiz/all.min.css?' + ver, container: container, location: 'article', share: { url: '', title: '', } }); }; } d.body.appendChild(s); })(document, 'fd9959fa');
0
26 комментариев
Популярные
По порядку
Написать комментарий...
13

1. У эпл нет гайдов по клеточной сетке поэтому я не понимаю что ты нарушаешь.
2. Дизайн приложения нужно делать под ВСЕ экраны, а не под конкретные, поэтому выбирать между 5х5 6х6 или 8х8 сеткой — без матов сложно оценить такие советы.
3. Чтобы понять что ни одно приложение от эпл не создано по этим сеткам достаточно просто сделать скриншоты и посмотреть.

Спасибо Apple за то что они не используют клеточные сетки и всем правит система отступов + колонны.

Дай б*г здоровья! 

Ответить
0

Можно ссилку на систему отступов + колонны от эпл?

Ответить
0

У эпла нет гайдов по сеткам, отступам, колоннам) есть только сейфзоны. 
То что там просто ритм по отступам который не привязан ни к какой сетке это просто здравый смысл. 

Ответить
0

Чтобы не делать демагогию, создай пжлст для экрана в 414pt 4 колонки, чтоб они были одинакового размера и поля были в 16pt и чтоб отступ не был кратен 6 как я описал в статье. 

Ответить
2

Чаще всего колонок тоже нет :( есть только отступы. И ты снова уходишь в частности что мол вот 414 экран, 4 колоннки, кратное 6) это всё ненужно. 

Самый лучший совет который можно дать, дизайнить по отступам которые кратны 2) а чтобы небыло вопросов что выбрать 24px или 26px надо зафиксировать определенный набор отступов с ощутимой разницей между друг другом. 

Прозри в корень просто))))) всё намного проще чем клетки и математические просчитывания каждого экрана.

Ответить
–1

Так уже все рассчитано в статье, друг. В гайде Apple таки просит использовать 8x8. 

Ответить
3

У Apple нет фиксированных сеток, ни 8x8 ни каких либо еще. Есть фреймворки, отвечающие за построение UI и инструменты, которые позволяют системе адаптироваться под разные экраны. Лучше понимать как это работает, чтобы не изобретать велосипеды и не тратить время (свое и разработчиков). 

Ответить
0

Для 414px вы все равно никогда pixel perfect не сделаете, потому что 414×3 не равно 1080.

Ответить
0

Вообще, само понятие pixel perfect в большинстве случаев не актуально, когда практически все элементы интерфейса векторные а сами пиксели не различимы невооруженным глазом. 

Ответить
0

Насчет векторов и пикселей = неверно.

Ответить
0

А причем тут вообще 1080?
У Apple нет устройства под iOS с таким разрешением. 
В статье речь только о дизайне приложений для iOS.

Ответить
0

iPhone 6/7/8+ имеет разрешение дисплея 1920×1080. Созданное программно 2208×1242 даунскейлится в него. Об этом можно почитать в интернете.

Ответить
0

И тут Apple ставит подножку дизайнерам. Спасибо, верно подметила.

Ответить
7

Какая-то надуманная проблема с ужасным решением

Ответить
–2

Когда будешь дизайнить прилу под iOS с тремя колонками равными по размеру  обнаружишь, что я был прав :)

Ответить
2

Гайдлайны Apple рекомендуют использовать сетку 8 х 8 pt (points) для дизайна приложений под iOS.

Можно вас попросить прикрепить ссылку на оригинал? Где они именно рекомендуют это.

Ответить
0

в статье внизу

Ответить
1

Там нет ссылок на официальные гайды. А в гайдах для iOS нет ничего про фиксированные стеки и фиксированные отступы для разных дивайсов

Ответить
2

Дмитрий, отличный формат повествования! Пишите ещё :)

Ответить
0

А если ты околоперфекционист , можно ли создать один макет 320 для андроид и говнояблоко ?

Ответить
1

Конечно. 
У нас всего лишь два препятствия:
1. Должен апрувнуть клиент
2. Должна апрувнуть твоя "дизайнерская" совесть. 
Ну, и не стоит забывать про различия во взаимодействии с пользователем разных операционных систем. Например, бургер в андроид и нижнее меню в iOS.

Ответить
0

По различию ОС и специфике разработки это понятно! Сенкс

Ответить
0

Есть еще виндоусфоны, аврора, новая ос от хуавей и другие интересные ребята)

Ответить
0

:)

Ответить
0

Ну, это прям вообще высший пилотаж создать сетки для всего :)

Ответить
0

По вашей ссылке гайдлайны по размерам изображения, а не по дизайну в целом. И то, это лишь рекомендации, чтобы изображения получались максимально четкими. В общем, фейспалм.

Ответить

Прямой эфир