Этапы разработки интерфейса

Этапы разработки интерфейса Под интерфейсом понимается любой экранный информационный или интерактивный интерфейс. Таковыми являются:  сайты,  мобильные приложения,  приложения для стационарных компьютеров,  презентационные панели (включая touch),  информационные стационарные экраны. Проецируемая картинка на стену или полотно с использованием проектора и управляемая жестами или голосом тоже считается интерфейсом. Этапы разработки Полный цикл разработки интерфейса включает следующие этапы: 1. Исследование 2. Пользовательские сценарии 3. Структура интерфейса 4. Прототипирование интерфейса 5. Определение стилистики 6. Дизайн концепция 7. Оформление всех экранов 8. Анимация интерфейса 9. Подготовка материалов для разработчиков Для сокращения общего времени разработки, определение стилистики начинается после пользовательских сценариев. Этап 1: Исследование На этапе исследования проводится сбор информации о продукте, клиенте, его конкурентах или близких аналогах, сбор статистики использования текущего интерфейса (например, сайта или мобильного приложения), анализ устройств предполагаемой целевой аудитории. Этот этап помогает понять для кого разрабатывается интерфейс, с какими ограничениями следует его делать (размеры экранов, интерактивность), как не стоит делать (например, быть непохожими на конкурентов). Этап 2: Пользовательские сценарии На основе предоставленного описания работы интерфейса создается список задач (пользовательских сценариев), которые может выполнять пользователь в рамках интерфейса. Например, обновить аватарку в профиле. Все задачи расписываются по шагам, которые необходимо предпринять для решения задачи. Например: 1. Зайти на сайт 2. Авторизоваться 3. Перейти в профиль 4. Нажать на аватарку 5. Выбрать файл 6. Подтвердить или изменить кадрирование изображения 7. Сохранить Составленные списки шагов для каждой задачи помогают понять где путь для решения слишком долог относительно остальных задач. Этап пользовательских сценариев больше всего подходит для сокращения пути решения задач пользователей в рамках интерфейса. Пример выше можно сократить на несколько шагов. Например, сделать сохранение автоматическим, а обрезание изображения — опциональным. Этап 3: Структура интерфейса Полученный список шагов на предыдущем этапе, ложится в основу структуры интерфейса. Становится известно количество экранов, их краткое содержание и положение в общей структуре. Этап 4: Прототипирование интерфейса Черновой прототип представляет собой схематичные изображения экранов (например, скетчи). При черновом варианте на схемах изображены зоны и описания этих зон. Например, список новостей или шапка сайта. Все без деталей. Черновой прототип помогает более наглядно понять на сколько объемным будет сайт, как много информации будет на каждом экране, как много нужно кликать, чтобы добраться до нужной страницы. Следующим шагом идет финальный прототип, в котором схемы страниц все еще остаются связанными между друг другом, но на страницах уже видны все кнопки, тексты, чекбоксы, формы и прочие элементы. В прототипах планируется функционал, расположение элементов страниц относительно друг друга, но никак не оформление. Цвета, изображения, иконки — это все этап оформления. На этапе проектирования невозможно сказать, как они будут взаимодействовать между собой, как будут смотреться вместе. Этап 5: Определение стилистики После этапа исследования и параллельно с этапами проектирования идет определение будущей стилистики интерфейса. Для выбора стилистики готовятся несколько наборов изображений (moodboards). Эти наборы представлены страничками сайтов, иллюстрациями, кнопками, шрифтовыми композициями, связанными между собой стилистически. Один из этих наборов ляжет в основу дизайн концепции. Этап 6: Дизайн концепция Дизайн концепция призвана показать оформление сайта и дать понять будущий вид всего сайта. Если предыдущий этап определения стилистики только дал направление, то дизайн концепция призвана скрестить выбранное направление с имеющимся содержанием интерфейса. Дизайн концепция может быть представлена любым объемом. Обычно концепция представлена 1—3 экранами интерфейса. Если речь идет о сайте, то лучше показать вид одной и той же страницы для нескольких устройств. Если в интерфейсе предполагается анимация на экране, участвующих в концепции, то показываем и ее. Этап 7: Оформление всех экранов После утверждения дизайн концепции настает время оформления всех остальных экранов интерфейса. Дизайн концепция — это предположение как может выглядеть весь интерфейс. Когда же очередь доходит до оформления всех экранов, тогда и происходит финализация внешнего вида: становится ясно правильно ли подобран кегль или интерлиньяж, хорошо ли сочетается толщина линий иконок с текстом, не конфликтует ли оформление форм (кнопок, полей ввода) с другими элементами экрана и многие другие случаи. Планом для оформления всех экранов являются структура и схематичный прототип интерфейса. Однако не редки отхождения от этого плана. Так при оформлении может выясниться, что всплывающее окно будет намного нагляднее и эффективнее, чем разъезжающийся блок информации посреди экрана. Все оформленные экраны собираются в интерактивный прототип, который создаст максимально приближенный опыт использования интерфейса без программирования. Этап 8: Анимация интерфейса Часто этот этап начинается еще с момента дизайн концепции и продолжается на протяжении всего этапа оформления всех экранов. В результате этого этапа появляются видеоролики, показывающие анимацию интерфейса. Они нужны не только клиенту, но и разработчикам, которые будут ориентироваться на эти ролики. Этап 9: Подготовка материалов для разработчиков Макеты интерфейса во всех состояниях у нас уже есть. Прототип, связывающий весь интерфейс воедино — есть. Видеоролики, показывающие анимацию, готовы. Чтобы помочь разработчикам в реализации интерфейса, мы готовим все необходимые для этого материалы. Такими материалами могут быть:  спрайты,  шрифт со всеми иконками,  UI Kit с повторяющимися элементами интерфейса и их состояниями.