iOS Guidelines in Russian. Part №1.

Гайдлайны Apple. Перевод.

Основы пользовательского интерфейса

Пользовательский интерфейс iOS основывается на трех факторах:

1. Уважение. Пользовательский интерфейс должен служить прослойкой между пользователем и программной частью, помогать понимать и взаимодействовать с контентом. Интерфейс никогда не должен забирать на себя внимания от контента, не должен конфликтовать с ним.
2. Чистота. Пользовательский интерфейс — прослойка между пользователем и программной частью, помощник по взаимодействию с контентом. Интерфейс не забирает внимания, не конфликтует с контентом.
3. Глубина. Визуальная иерархия слоев и реалистичное поведение продвижения пользователя сквозь эти слои должны благотворно сказываться на понимании пользователем текущего положения. Это принцип единого интерфейсного пространства пользователя.

Приложение Погода в iOS 7 и iOS 6

Если вы обновляете интерфейс уже существующего приложения под iOS или создаете приложение с нуля, то выбирайте подход, который использовала Apple для обновления встроенных приложений iOS:

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

Направьте себя на содержание

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

Проверьте правильность подхода отображения контента в приложении:

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

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

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

Пользователь понимает контекст, с которого вызвал Центр Уведомлений. Это помогает видеть, что часть контента доступна на нижлежащих слоях и дает понимание возможности перехода на них. В iOS полупрозрачные элементы размывают только элементы ниже, как будто вы смотрите через тонкую рисовую бумагу. Заметим, что соседние области при этом не размываются (с технической точки зрения это означает, что используется не размытие по Гаусу, а фоновое размытие).

Стремитесь к чистоте интерфейса.

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

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

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

• Повысьте читаемость, используя системные шрифты. Они автоматически подстраивают межбуквенное расстояние и высоту шрифта. Используя другой шрифт, используйте свойство “Dynamic Type” (динамически-подстраиваемый шрифт), тогда приложение подстроится под системный размер шрифта (для тех, у кого проблемы со зрением).

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

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

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

Используя прозрачный фон и анимацию Папки отделяют контент от остальной части экрана.

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

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

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

Контент статьи обновлен под iOS 9. Теперь текст понятнее и его меньше! Делитесь с друзьями, это будет заставлять меня меньше лениться и обновлять дальше☺