Краткое введение в проектирование интерфейсов
Под проектированием понимается вся работа, которая проходит после постановки задачи, исследования и описания пользовательских сценариев и до отрисовки макетов:
- Черновые схематичные макеты с переходами
- Детальные схематичные макеты
- Чистовые схематичные макеты
Зачем это вообще делать
Есть две основные причины:
- Схематичные макеты гораздо быстрее править, чем приближенные к финалу.
- В схематичных макетах не должно быть ни намека на оформление, что позволяет отточить функционал, не отвлекаясь на отступы, цвета, скругления и прочее.
Каждый этап проектирования утверждается с клиентом. Это не значит, что к предыдущему этапу нельзя будет вернуться, но такое пошаговое проектирование поможет снизить количество возвратов и переделок.
Черновые схематичные макеты с переходами
На таких макетах может быть представлено только текстовое описание того, что будет на экране, какие блоки. Хорошо такое описание снабдить символичной визуализацией, которая дает только намек на содержание.
Такие макеты становятся планом разработки всего интерфейса и могут быть полезны так же разработчикам, которым предстоит верстать и программировать этот интерфейс. Еще до готовности всего интерфейса можно параллельно начать работу и, тем самым, уменьшить сроки разработки всего проекта.
Черновые схематичные макеты со структурой могут быть полезны для проектирования больших интерфейсов. Для проектирования функционала в рамках уже готового и развивающегося интерфейса в таких макетах необходимости нет.
Детальные схематичные макеты
Когда черновые макеты определены, структура интерфейса прояснилась, следует начать проработку каждого из макетов.
Становится понятен лейаут (или, как минимум, расположение элементов интерфейса относительно друг друга), появляются кнопки, места для иконок. Начинают вырисовываться общие паттерны, которые можно переиспользовать на разных экранах.
Не редко такой прорисовки схематичных макетов достаточно, чтобы можно было приступать к отрисовке финальных макетов. Но такая схема работает только в случае, если рисовать будет тот же, кто и проектировал. Если попробовать передать такое проектирование другому дизайнеру на отрисовку, то разобраться ему будет крайне тяжело.
Чистовые схематичные макеты
В чистовых схематичных макетах все тексты должны быть приближены максимально к реальным данным. Даже если это таблица, то и ее нужно заполнить реальными данными. Предыдущий этап детальных схематичных макетов учитывает весь функционал, но не учитывает длину текстов.
И дизайнер, и программист, которым достанутся чистовые схематичные макеты с картой переходов, смогут прекрасно справиться со своей работой и сконцентрироваться именно на ней, а не на проектировании интерфейса.
Разработчик сможет до получения финальных макетов хорошенько подготовиться к разработке интерфейса: подобрать движок, подготовить базу данных, развернуть CMS на сервере.
Дизайнер, получивший результаты такого проектирования, уже не будет задумываться о функционале, а сможет сконцентрироваться на отрисовке макетов, покажет анимацию и подумает над всякими приятными плюшками дизайна, которых никто не ждет, но все им рады.
