Путеводитель по дизайну iOS 7

Перевод, оригинал - The iOS Design Cheat Sheet

С выходом iOS 7, дизайнерам и разработчикам приложений потребуется скорректировать свой визуальный стиль в соответствии с новым “плоским” дизайном iOS. Помимо изменений в системе сетки, Apple во многих отношениях обновила размеры и стиль иконок и часто используемых элементов, а также изменила типографику.
Это простое руководство, которое автор будет периодически обновлять (и мы, естественно, будем за этим следить), должно помочь вам начать дизайнить приложения в iOS 7.

Т.к. iOS 7 не поддерживает старые модели iPhone и iPod (только версии 4+), это руководство затронет только поддериваемые устройства.

Характеристики экранов устройств

 

Разрешения
УстройствоКнижнаяАльбомная
Iphone 5 640×1136 px 1136×640 px
iPhone 4/4S 640×960 px 960×640 px
iPhone & iPod Touch1ое, 2ое и 3е Поколения 320×480 px 480×320 px
Retina iPadiPad 3, iPad 4 1536×2048 px 2048×1536 px
iPad Mini 768×1024 px 1024×768 px
iPad1ое и 2ое Поколения 768×1024 px 1024×768 px

 

Экраны
УстройствоPPIРежим цветаТемпература цвета
Iphone 5 326 RGB 8бит Теплый
iPhone 4/4S 326 RGB 8бит Холодный
iPhone & iPod Touch1ое, 2ое и 3е Поколения 163 8RGB 8бит Теплый
Retina iPadiPad 3, iPad 4 264 RGB 8бит Теплый
iPad Mini 163 RGB 8бит Неизвестно
iPad1ое и 2ое Поколения 132 RGB 8бит Теплый

 

Иконки приложений

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

Размеры
УстройствоИконка приложенийИконки в AppStoreИконки в поискеИконки в настройках
Iphone 5 120×120 px 1024×1024 px 80×80 px 58×58 px
iPhone 4/4S 120×120 px 1024×1024 px 80×80 px 58×58 px
Retina iPadiPad 3, iPad 4 152×152 px 1024×1024 px 80×80 px 58×58 px
iPad Mini 76×76 px 512×512 px 40×40 px 29×29 px
iPad1ое и 2ое Поколения 76×76 px 512×512 px 40×40 px 29×29 px

 

Скругленные углы1

Apple представила новую форму иконок, которая называется “суперэллипс“, а старые значения радиусов скругленных углов больше не используются. Т.к. Apple не выпустила официальный шаблон этой формы, вам придётся использовать кокой-нибудь неофициальный шаблон, который более точно повторяет форму iOS7. Лучшее из того, что я пока что находил, это шаблон иконки приложения, который будет служить очень хорошей отправной точкой при дизайне иконки приложения для iOS7. Как обычно, в финальной версии вашей иконки не должно быть скругленных краёв, но они могут понадобиться на этапах проектирования, если вы хотите добавить эффекты, такие как обводка или тени, т.к. они привязываются к краям иконки.

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

Интерфейс

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

Часто используемые элементы дизайна
УстройствоВысота строки состоянияВысота панели навигацииВысота панели вкладокШирина таблиц
Iphone 5 40 px 88 / 64 px 98 px 640 / 1136 px
iPhone 4/4S 40 px 88 / 64 px 98 px 640 / 1136 px
Retina iPadiPad 3, iPad 4 40 px 88 px 112 px динамическая
iPad Mini 20 px 44 px 56 px динамическая
iPad1ое и 2ое Поколения 20 px 44 px 56 px динамическая

 

Строка состояния

35

Хотя высота строки состояния, по сравнению с iOS 6, осталась неизменной, отображение элементов на ней немного изменено. Вы можете управлять цветом фона, чтобы ее внешний вид соответствовал вашему приложению или использовать стандартную цветовую схему (белый и черный цвета). Во многих стандартных приложениях iOS7, строка состояния совмещена с панелью навигации.

Панель навигации

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

Табличные представления

7Таблицы (или списки) теперь используют всю ширину экрана и больше не окружены контейнером, который отделял их друг от друга. Единственное визуальное разделение между различными табличными представлениями – это заголовки, которые находятся сверху таблицы (как это было в прошлых версиях iOS) в верхней части основного цвета/текстуры приложения. Элементы внутри таблицы отделены друг от друга просто линией, толщиной 1 пиксель, которая имеет отступ в 15pt от левой части экрана и непосредственно соединяется с правой стороной экрана. Каждый элемент имеет внутренний отступ в 15pt с каждой из двух сторон.

Иконки

89Apple делает ставку на использование иконок без заливки цветом, только с обводкой в 1pt, но “классические” иконки, с заливкой цветом по-прежнему широко используются в iOS7. В панели вкладок для активных иконок применяется инвертирование цвета – неактивные иконки имеют только обводку, активные же заливаются цветом и их обводка или исчезает, или инвертируется.

Типографика

Шрифтом по-умолчанию по-прежнему остаётся Helvetica Neue, но простой текст теперь отображается более тонким. Текст средней толщины – это обычно текст, который должен быть более заметным (например заголовок в панели навигации). Также существует множество альтернативных шрифтов для использования вместо Helvetica Neue. Вы можете найти полный список тут. Для большинства элементов дизайна размер шрифта был увеличен (вероятно, из-за использования шрифта с более тонким начертанием). Кнопки часто отображаются как простые цветные ссылки и не имеют формы.

Стандартные размеры шрифта
ЭлементСтандартный размер шрифтаСтандартная толщина шрифта
Заголовок панели навигации 34 px Средний
Обычне кнопки 34 px Тонкий
Заголовок таблицы 34 px Средний
Метка таблицы 28 px Обычный
Метки иконок в панели вкладок 20 px Обычный

 

Дополнительные статьи и ресурсы

В этой статье была представлена только некоторая базовая информация, чтобы вы были в курсе изменений в iOS 7. Погружаясь в эту тему глубже, вы наверно захотите подробностей. Эти статьи и ресурсы должны вам помочь:

 

Автор: