В этой статье мы объясним значимость модульности при проектировании пользовательского интерфейса, рассмотрим, как она переплетается с гидом по стилю, улучшает внедрение гибких и удобных приложений, помогает дизайнерам и разработчикам сотрудничать более продуктивно.
Использование руководства по стилистике при разработке набирает популярность среди front-end разработчиков. И не зря. Начинается все с добавления нового кода или обновления существующего, что способствует развитию модульной UI (User Interface Design или пользовательский интерфейс) системы, которая в дальнейшем будет интегрирована в приложение. Но для того, чтобы внедрить модульную UI систему, к проектированию также нужно подходить с точки зрения модульности.
Модульный дизайн побуждает нас мыслить и разрабатывать UX и UI по определенной структуре. Например, вместо разработки ряда страниц или образов для побуждения пользователя к совершению действий, мы начинаем процесс дизайна со структуры UI системы и понимания того, как ее элементы могут быть использованы для создания потока пользователей.
В этой статье мы объясним значимость модульности при проектировании пользовательского интерфейса, рассмотрим, как она переплетается с гидом по стилю, улучшает внедрение гибких и удобных приложений, помогает дизайнерам и разработчикам сотрудничать более продуктивно.
Суть модульного дизайна заключается в дроблении дизайна на мелкие части (модули), независимом их создании и дальнейшем объединении в большую систему. Модульный дизайн во многом, что нас окружает. Автомобили, компьютеры, мебель. Из-за своей модульности, части каждой системы могут быть заменены, добавлены, удалены или переработаны. Это полезно для потребителей, ведь они могут подстраивать систему под свои нужды.
Нужен люк в крыше автомобиля, более мощный двигатель, кожаные сидения? Получите! Это возможно благодаря модульному дизайну машины.
Еще один яркий пример - мебель из IKEA. На картинках ниже показано, что модульна не только форма книжного шкафа, но и каждая его часть.
С производственной точки зрения, модульная система еще и экономична. Проще создать небольшие простые части, которые в дальнейшем могут быть объединены, чем сразу один большой объект. Кроме того, это решение можно заново применять, повышая производительность.
Цель создания UI дизайна аналогична. Дизайнеры стремятся создать эффективную структуру пользовательского интерфейса с удобством использования. Когда мы находим решение сложной проблемы, нужно применить его в разных местах. Это не только экономит время, но и создает шаблон, который можно заново использовать. Мы также хотим иметь возможность настраивать систему под определенные условия без полной перестройки.
Это именно то, что модульность приносит в дизайн пользовательского интерфейса: гибкость, масштабируемость, экономическая эффективность системы, а также настраиваемость, многоразовость и последовательность.
Его элементы можно увидеть в адаптивной сетке, дизайне плиток окна. Здесь модули многократно используют для гибкой верстки, которая адаптируется под разные размеры экранов. Кроме того, модули выступают в качестве контейнеров для компонентов, которые позволяют вставлять различные виды контента и функционала, также как и в книжном шкафу IKEA.
Пожалуй самый яркий пример, выкладка в Pinterest.
Модульный дизайн заключается в разработке системы, которая в основном состоит из одинаковых частей (кнопки, шрифты, иконки, сетки и т.п.). В связи с этим может появится ряд вопросов:
Не будут ли проекты с модульным дизайном выглядеть идентично?
Как это повлияет на бренд?
Каким должен быть пользовательский интерфейс продукта, чтобы сделать его уникальным?
Визуальный дизайн это первое, что видим. В связи с этим мы склонны полагать, что в нем и состоит уникальность. Однако визуальный дизайн лишь одна из составляющих. Нужно учитывать ценность, которую дает продукт и то, как люди эту ценность воспринимают.
Использование шаблонов не говорит о том, что уникальность и инновационность будут принесены в жертву. Напротив, они критично важны для решения определенных проблем потребителей. Преимущество модульного дизайна в том, что он стимулирует применять эти решения как комплекс из частей, которые взаимосвязаны, вместо поиска изолированных уникальных решений с единственной целью, отличаться от других.
Другими словами, инновационный дизайн, соединенный с элементами управления пользовательским интерфейсом, будет пронизывать всю систему, поддерживать сплоченность и улучшать юзабилити.
С точке зрения реализации, стайл гайд разработка также модульна. Процесс начинается с исследования: понимания проблемы, которая должна быть решена, сбора требований и итерации с дизайнерскими решениями. Последнее должно быть представлено в виде комбинации многих частей и задокументировано в руководстве. Некоторые части дизайна могут быть новыми, но они должны быть в виде модулей. Суть в том, чтобы использовать руководство с целью определения доступных модулей, возможности их повторного использования и расширения.
Следующий шаг - фаза абстракции, которая состоит в делении дизайнерских решений на части. На этом этапе дизайнер и разработчик должны работать вместе, чтобы понять предлагаемый дизайн, определить элементы и компоненты, которые будут использоваться или усовершенствоваться.
Эта фаза также нужна для создания плана следующего шага: внедрение и документация. Модули либо построены, либо расширены отдельно от существующих. В веб-разработке это означает создание компонента или определение стилей элемента независимо от приложения. Это важный аспект модульности, позволяющий обнаружить проблемы на ранней стадии, предотвращая непредвиденные моменты с другими частями системы. Результат - более устойчивые части, которые проще интегрировать в целое. Преимуществом является ведение документации и внедрение прогресса на раннем этапе, а не в последствие.
Документация играет несколько ролей:
Интеграция является заключительным этапом. Элементы пользовательского интерфейса разработаны и готовы к интеграции в приложение. Остается настроить их. При этом руководство будет выступать в качестве хорошего мануала по сборке.
Представьте такую картину. Вы столкнулись с большим потоком посетителей, собрали макеты и прототипы для демонстрации взаимосвязей и задокументировали каждый этап. Есть шансы, что работа над проектом основана на руководстве, что дает огромное преимущество. Если же нет, сделайте шаг назад и начните создавать карту основных частей дизайнерских решений на высоком уровне. Эти части могут быть в виде точек взаимодействия при завершении определенного этапа. Процедура контроля может выглядеть так:
Будьте внимательны! Это еще не модули. Чтобы до них добраться, нужно определится с постоянными элементами пользовательского интерфейса:
Копнув глубже, мы найдем стили и модели взаимодействия:
Стили:
Модели взаимодействия:
Как только дизайн будет разбит на такие небольшие части, мы наконец получим наши модули. Станет очевидно, что некоторые из них применимы не только в процессе оформления заказа, но и в других элементах приложения, как в текущем дизайне, так и будущих.
Для облегчения восприятия приведем в пример “атомный дизайн” и его этапы:
Недостающим звеном является способ документации полученных модулей. Руководство должно быть составлено таким образом, чтобы при изменении модулей оно оставалось актуальным.
Руководство может быть полезно во время дизайна по ряду причин.
Обеспечивает визуальное представление, содержит модули, которые нужно использовать при дизайне. Нет необходимости начинать все с нуля. Т.к. руководство формируется на основании текущего кода, отражает последнюю версию дизайна.
Знания, приобретенные при решении определенной UX или UI проблемы могут быть использованы в дальнейшем.
Требует совместной работы дизайнеров и разработчиков, что является большим преимуществом.
Теперь рассмотрим подводные камни, которые могут встретится на пути.
Нередко можно услышать от менеджеров, что если есть таблица стилей, часть работы дизайнера уже выполнена. Несмотря на то, что однообразная работа выполнена, учтите, что будут разрабатываться новые компоненты, будет вестись поиск дизайнерских решений.
Нужно стремится к применению шаблонов. Например, использование определенных цветов и шрифтов для облегчения идентификации элементов пользовательского интерфейса, с которыми можно взаимодействовать. Но использовать шаблон только потому, что он уже был сделан, не стоит. Делайте это, если он действительно решает определенную проблему.
Гайдлан должен стать отправной точкой, ориентиром, благодаря которому проблема может быть решена.
Среди множества должностных обязанностей, обслуживание таблицы стилей не должно стать обузой. Несколько советов:
Библиотека компонентов не имеет смысла, если каждый новый дизайн разрабатывается независимо, игнорируя существующие стандарты. С другой стороны, это не значит, что нужно использовать одни и теже стили из проекта в проект. Хороший дизайн эффективен не только из-за своей уникальности, но и благодаря сочетанию формы и функциональности. Об этом нужно помнить всегда.