Дизайн как инструмент для доработки приложений: пошаговое руководство

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

Основные выводы

• Разнообразные цвета и контрасты увеличивают визуальную привлекательность.
• Четкие структуры макета помогают пользователям лучше ориентироваться.
• Единые размеры шрифтов и дизайны способствуют приятному пользовательскому опыту.

Пошаговая инструкция

Добавление нового контроллера

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

Настройка контроллера

Назовите ваш новый контроллер «Курс Контроллер», чтобы облегчить будущее назначение. Убедитесь, что устаревшее имя «iPhone 8 copy» заменено на «Профиль Контроллер».

Настройка цвета фона

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

Настройка строки состояния

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

Создание метки

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

Добавление дополнительных меток

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

Отображение дополнительной информации

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

Создание таблицы

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

Уроки как ячейки

Создайте ячейку для первого урока с названием «Основы Часть 1». Обратите внимание на правильное расстояние и выравнивание.

Вставка разделителя

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

Создание кнопки отмены

Чтобы пользователи могли покинуть этот экран, добавьте кнопку отмены в виде «X». Убедитесь, что она хорошо видна в центре экрана.

Перспективы следующих шагов

После успешного создания нового контроллера курса следующим шагомбудет интеграция входа в систему. Это позволит пользователям сохранять свои достижения в приложении.

Резюме – Дизайн как инструмент для доводки приложения

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