‎Planner for iPad on the App Store

Что можно и что нельзя в дизайне интерфейсов

Новый пользователь iOS должен придерживаться определенных правил. Следуйте примерам демонстрации, составленным Apple.

Safety

Загружая приложение из App Store, пользователи хотят быть уверены, что это безопасно, что оно не повредит их устройство, не содержит оскорбительного или расстраивающего содержания, а также что его использование не подвергнет их опасности.

3d touch

3 D Touch — это совершенно новая функция, которую Apple добавила в iOS 9. Она позволяет пользователям быстро получать доступ к функциям как внутри программы, так и за ее пределами.

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

Используя горячую клавишу 3 D Touch, вы можете быстрее выполнять многочисленные повторяющиеся задачи.

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

Рекомендуется: бесплатный курс дизайна мобильных приложений

Legal

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

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

Apple watch gui

Как выглядит полный комплект пользовательского интерфейса Apple Watch? Вы можете экспортировать их в нужном разрешении и изменить размер.

Before you submit

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

Обязательно:

Choosing fonts to enhance your app

По возможности используйте встроенные стили текста. Встроенные стили текста позволяют выразить содержимое таким образом, чтобы оно визуально отличалось, сохраняя при этом оптимальную читаемость. Эти стили — включая стили заголовка, основного текста, вызова и нескольких размеров заголовка — основаны на системных шрифтах и позволяют использовать преимущества ключевых типографских функций, таких как Dynamic Type, которая автоматически регулирует отслеживание и наводку для каждого размера шрифта. Руководство для разработчиков см. в разделе UIFontTextStyle.

Выделите важную информацию. Чтобы привлечь внимание к наиболее важной информации в вашем приложении, используйте вес, размер и цвет шрифта.

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

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

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

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

Система определяет API, позволяющий увеличивать или уменьшать пространство между линиями на две точки; для руководства разработчика см. loose и tight (SwiftUI), а также traitLooseLeading и traitTightLeading (UIKit).

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

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

Настройте отслеживание по мере необходимости в макетах интерфейса. В работающем приложении системные шрифты динамически регулируют отслеживание при каждом размере точки. Чтобы создать точный макет интерфейса пользовательского интерфейса, в котором используются переменные системные шрифты, может потребоваться настройка отслеживания. Для получения рекомендаций см. значения, перечисленные в разделе «Значения отслеживания» и доступные в ресурсах Apple Design Resources.

П РИМЕЧАНИЕ iOS использует множество других шрифтов для других шрифтов в дополнение к San Francisco как системному шрифту для латинского, греческого и кириллического алфавита.

Content-driven or experience-driven navigation

Перемещайтесь по своему усмотрению или в соответствии с содержанием. Большинство иммерсивных приложений, игр и книг используют этот метод навигации.

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

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

Предоставьте пользователям единый путь к каждому экрану в целом. Рассмотрите возможность использования листа действий, оповещения, всплывающего окна или модального представления, если им нужно увидеть экран в различных контекстах. Дополнительные сведения см. в разделах «Листы действий, оповещения, всплывающие окна и модальность».

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

Для плавности используйте сенсорные жесты. Сделайте свой интерфейс свободным от трения и простым для навигации. Например, люди могут провести пальцем по краю экрана, чтобы вернуться к предыдущему экрану.

Dynamic type sizes

Позволяя читателям выбирать предпочтительный размер текста, Dynamic Type обеспечивает еще большую гибкость. Для каждого стиля текста при различных размерах Dynamic Type следующие значения представляют собой вес, размер и наводку.

Flat navigation

Чередование различных категорий контента. Этот метод навигации используется в музыкальных магазинах и магазинах приложений.

Hierarchical navigation

Пока вы не прибудете в пункт назначения, принимайте по одному решению на экране. Чтобы добраться до другого места и принять другое решение, необходимо вернуться назад или начать сначала. Эта схема навигации используется в Настройках и Почте.

Ios 9 gui для ipad

Среди новых возможностей iPad UI Kit — ландшафтная и портретная клавиатуры. Все основано на векторах.

Ios 9 gui для iphone

Если вы разрабатываете дизайн для iOS 9, вам лучше использовать готовые элементы. Какие бывают навигационные панели? Это может быть строка состояния или строка вкладок. Прежде всего, вам нужно определиться с размерами и компонентами.

Ios human interface guidelines от apple

Apple показала инструкции по разработке интерфейсов для iOS Здесь есть специальный формат iBooks.

New york

Вы можете использовать традиционный шрифт с засечками New York в интерфейсе или для создания традиционной среды для чтения.

Поощрение:

Смотрите свойство serif структуры SystemDesign для руководства разработчика.

Resources

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

Sf mono

San Francisco имеет моноширинный вариант под названием SF Mono, который представляет собой шрифт с одинаковым размером символов. Когда необходимо выровнять колонки текста, например, в среде кодирования, обычно используется моноширинный шрифт. Например, SF Mono используется по умолчанию в Xcode и Swift Playgrounds.

П РИМЕЧАНИЕ SF Pro поддерживает отображение моноширинных чисел и валют с помощью функции табличной подкладки OpenType.

S F Mono поддерживает:

Для руководства разработчика см. свойство monospaced в структуре SystemDesign.

Sf pro and sf compact

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

Поддержка SF Pro и SF Compact

Для руководства разработчика см. свойство default структуры SystemDesign.

Sf pro rounded and sf compact rounded

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

SF Pro Rounded and SF Compact Rounded support:

См. свойство rounded в структуре SystemDesign для руководства разработчика.

Tracking values

Используйте значения отслеживания, которые система определяет для разных размеров SF Pro, SF Pro Rounded и New York, чтобы помочь вам создать точные макеты интерфейса.

Адаптивный макет и многозадачность

Очень важно обеспечить адаптивность в связи с увеличением общего числа разрешений дисплеев, которые необходимо учитывать и адаптировать под них макет. При использовании инструментов Xcode или Sketch Constraints вы должны разрабатывать дизайн таким образом, чтобы размер экрана не влиял на удобство использования интерфейса.

Дизайн системы iPad Pro адаптирован к дизайну iPhone. Пользовательский интерфейс не просто увеличен, а расширен. Панель навигации расположена справа на больших экранах, таких как iPhone 6 Plus и iPad в ландшафтном режиме или без него.

Как Fluid настраивает дизайн артборда.

Выбор

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

Выравнивание и отступы

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

Иконка приложения

Иконка приложения используется для брендинга приложения. Это первое, что видит пользователь. Значок всегда отображается на главном экране, в Spotlight и меню настроек.

Значок приложения в графическом интерфейсе iOS 9.

Вы не можете сохранять значки 1x, поскольку они больше не поддерживаются для iPhone. Существует два размера значков приложений: 2x и 3x. Spotlight, настройки и значки приложений. Разрешение на iPad может быть 1x или 2x.

Иконки ios

Эти значки из iOS 9 имеют общепринятые названия. Пользователи могут быстро идентифицировать их, когда они используются в качестве стандартов. Многочисленные иконки iOS используются для различных целей.

Использование общепризнанного символа при создании нового значка нельзя не подчеркнуть. Кроме того, я настоятельно рекомендую добавить к ним текст объемом не менее 10 пунктов.

Иконочная сетка

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

Коллекция

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

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

Курс: дизайн мобильных приложений

Изучите все хитрости Sketch, если вы хотите освоить создание мобильных приложений для iOS и повысить уровень своего мастерства в ближайшее время.

Проверьте эту информацию, пожалуйста

перевод

Модальные окна

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

Панель вкладок

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

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

Панель инструментов

Используйте панель инструментов, чтобы добавить дополнительные кнопки действий и состояния.

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

В iOS 9 панель навигации используется для мгновенного получения информации на экране. Кнопки «Профиль», «Назад» и «Меню» находятся слева. Другие кнопки, такие как Редактировать, Добавить или Готово, можно использовать с правой стороны. Вам не нужно создавать источники, если вы видели системные значки.

Строка состояния, которая имеет все цвета. Для того чтобы текст всегда был читаемым, он обычно имеет очень легкое размытие. Фоны объединяются, когда видна строка состояния.

Панель поиска

Вы должны планировать поиск нужного элемента, если у вас много содержимого.

Панель статуса

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

Переключатель

Используйте этот элемент для мгновенного перехода в другое состояние путем переключения между состояниями. Не используйте их и для других целей.

Пиксели и точки в ios 9

Точечные значения используются разработчиками, и крайне важно отличать их от пикселей. В первый день производства iPhone две единицы были идентичны. Так, 1pt был эквивалентен 2px.

1pt был заменен на 2px для экранов Retina. Считайте точки на iPhone величинами, потому что их плотность зависит только от плотности пикселей.

Прогресс-бар

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

Размеры шрифта и кнопок

Общее правило следующее: основной текст должен быть 17pt, кнопки — 44pt, а мелкий текст — 12pt.

Разрешения ipad

I Pad имеет два основных разрешения: 768×1023 и 1024 x 1366 (для iPad Pro).

В iOS 9 появилось два новых варианта: Split View и Slide Over. Не изменяя дизайн открытого приложения, Slide Over представляет собой наложение, которое появляется в правой части экрана.

Пользователи могут создавать портретные снимки, работая сразу в двух приложениях с помощью Split View.

Разрешения iphone

На iPhone доступны четыре основных разрешения: 320 x 568 pt (iPhone 5), 280 x 470 pt и 128 x 736 pt. Макет не масштабируется, а увеличивается в зависимости от разрешения. Навигационные панели являются альтернативой; они имеют одинаковую высоту и регулируются только по ширине. Состав панели остается неизменным.

I Phone 6 Plus стал единственным смартфоном, который в ландшафтном режиме ведет себя больше как iPad. В общем, вместо привычной панели вкладок появится левая панель навигации.

Сегментированный компонент управления

Сегментный контроллер используется для доступа к различным подразделам, а панель вкладок служит для навигации по основным разделам.

Слайдеры

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

Степпер

По сравнению с другими устройствами, степпер обеспечивает более медленное, но точное управление. Добавив один, вы можете регулировать значение настройки. Фон и границы этих элементов управления можно изменять.

Супер-эллипс

Закругленные углы в iOS 7 сменились на форму суперэллипса. Важно понимать, что не следует экспортировать значки с маской в другие страны, поскольку они могут содержать черные артефакты. В качестве альтернативы экспортируйте в App Store значки квадратной формы.

Табличный вид

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

На фундаментальном уровне можно использовать множество готовых аксессуаров и стилей.

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

Трекинг шрифта sf

Для Сан-Франциско в i OS 9 автоматически настраиваются параметры Text/Display и отслеживание. Это делает шрифт простым для чтения. Используйте SF UI Display размером 20 пт или больше; в противном случае используйте Text.

Photoshop не позволяет использовать такие значения отслеживания, но теперь существует уникальная формула конвертации.

Чтобы быстро и просто использовать правильное значение межсимвольного интервала, воспользуйтесь плагином Sketch.

Цвета

В i OS 9 для кнопок используются яркие цвета. Эти оттенки лучше, чем черный фон. Используйте цвета экономно в тех областях, которые не требуют особого брендинга, например, в навигационной панели и примерах логотипа.

Если более 10%-20% дизайна будет представлено в этих цветах, то дизайн будет подавлять содержание.

Нейтральные оттенки часто используются в качестве фона или области меню в i OS 9. Для удобства чтения белый текст используется на черном фоне. Кнопки обозначены пастельным голубым цветом.

Шрифт francisco font

После выхода El Capitan и iOS 9 шрифт San Francisco был принят в качестве шрифта по умолчанию.