Разрабатываем интерфейс мобильного приложения

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

Мы начнем с нуля, и я опишу весь процесс создания интерфейса.

Окончательное изображение

Программное обеспечение: Photoshop CS3 и выше.

Ресурсы

  • Бесплатный шрифт Source Sans Pro;
  • Бесплатный шрифт Playfair Display;
  • Бесплатная иконка звездочки;
  • Бесплатная иконка пользователя;
  • Бесплатная иконка облака;
  • Бесплатный PSD-файл iOS 8 GUI (iPhone 6);
  • Бесплатный макет iPhone 6.

Шаг 1

Давайте создадим в Photoshop новый документ. Нажмите CMD / CTRL + N и установите ширину 750 пикселей и высоту 1334 пикселей — это разрешение iPhone 6:

Шаг 2

Теперь нам нужно установить вертикальные направляющие, чтобы структура интерфейса была ровной. Перейдите в Просмотр > Новая направляющая и задайте следующие значения для вертикальных направляющих: 40 пикселей, 250 пикселей, 375 пикселей, 500 пикселей и 710 пикселей:

Шаг 3

Теперь создайте новую группу слоев (Слой> Новый> Группа из слоев), назовите ее “Top Bar”, выберите инструмент «Прямоугольник» (U) и нарисуйте прямоугольник с размерами 750 на 129 пикселей.

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

Шаг 4

Скачайте бесплатный PSD-файл IOS 8 GUI (iPhone 6) и перетащите из него в основной документ панель состояния из черной группы. Затем используйте ее для отображения элементов оператора связи, часов и индикатора заряда батареи.

Измените имя группы, дважды кликнув на миниатюре слоя. С помощью инструмента «Горизонтальный текст» (T) измените цвет элементов на белый #FFFFFF:

Шаг 5

Теперь выберите инструмент «Горизонтальный текст» (T), установите шрифт Source Sans Pro (Стандартный), размер шрифта — 40 пикселей и введите заголовок приложения, в данном случае “Recommended Readings”. Чтобы текст хорошо читался, используйте контрастный белый цвет #FFFFFF:

Шаг 6

Сверните группу слоев “Top Bar”, нажав на стрелку рядом с названием группы, и создайте новую группу (Слой> Новый> Группа из слоев) под названием “Read 1;.

После этого выберите инструмент «Прямоугольник» (U) и нарисуйте прямоугольник размером 750 на 368 пикселей. Это будет базовый фон документа:

Шаг 7

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

Поместите слой изображения поверх созданного прямоугольника. Затем при активном слое добавленного изображения нажмите сочетание клавиш Ctrl+Alt+G. Это создаст «Обтравочную маску», которая скроет все, кроме содержимого внутри базового фона. В нашем случае мы увидим часть изображения, которая совпадает с границами прямоугольника:

Шаг 8

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

Выберите инструмент «Градиент» (G) и задайте переход от черного к прозрачному:

После этого создайте новый слой (Слой> Новый> Слой) и назовите его “Shadow”. Создайте для него «Обтравочную маску», как мы это делали для изображения. Затем, удерживая нажатой клавишу Shift, прочертите линию перехода градиента снизу вверх и уменьшите непрозрачность слоя до 60%:

Шаг 9

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

Выберите инструмент «Горизонтальный текст» (T), установите шрифт Playfair Display (Жирный), размер шрифта – 46 пикселей и введите заголовок статьи.

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

С помощью инструмента «Горизонтальный текст» (T) введите шрифтом Source Sans Pro (Курсив, размер шрифта — 28 пикселей), ориентировочное время прочтения материала. Затем поместите надпись справа, перед последней вертикальной направляющей:

Шаг 10

Сверните группу “Read 1;, нажав на маленькую стрелку рядом с именем группы, и продублируйте ее два раза, нажав CMD / CTRL + J.

После этого переименуйте копии группы в “Read 2; и “Read 3;, а затем аналогичным образом создайте новые рекомендованные для прочтения материалы с новыми изображениями, заголовками и временем на прочтение:

Шаг 11

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

После этого нажмите CMD / CTRL + T и измените размер прямоугольника, чтобы он «влез» в пространство между последним материалом и нижней частью документа. В моем случае это размер 750 на 101пиксель:

Шаг 12

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

Кликните правой кнопкой мыши на слое иконки и выберите пункт «Параметры наложения». Примените стиль «Наложение цвета», залив иконку белым цветом #FFFFFF.

Нажмите CMD / CTRL + T, чтобы изменить размер иконки на 54 на 52 пикселя:

Шаг 13

Теперь снова выберите инструмент «Горизонтальный текст» (T), задайте шрифт Source Sans Pro (Обычный), размер – 24 пикселя и введите надпись “Favorites”, чтобы пользователям был более понятен смысл этой иконки.

Поместите подпись немного ниже иконки, оставив одинаковое пространство выше и ниже элемента:

Шаг 14

Повторите предыдущий шаг дважды и создайте еще две ссылки навигации с бесплатными иконками пользователя и облака. Я использовал для них подписи “Profile” и “Discover”:

Шаг 15

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

Выберите инструмент «Прямоугольник» (U) и нарисуйте между второй и четвертой направляющими черный прямоугольник цветом #000000.

Уменьшите непрозрачность фигуры до 20%, и у нас получится хороший маркер активного пункта меню:

Поздравляю! Вы создали интерфейс iOS-приложения «Рекомендуемая литература«. Для того чтобы он еще лучше, вставьте интерфейс в один из этих бесплатных макетов iPhone 6:

Перевод статьи «Designing Mobile App Interface in Photoshop» был подготовлен дружной командой проекта Сайтостроение от А до Я.