Дизайн модульного интерфейса с помощью гайдлайнов [digital note #16]

Использование руководства по стилистике при разработке набирает популярность среди front-end разработчиков. И не зря. Начинается все с добавления нового кода или обновления существующего, что способствует развитию модульной UI (User Interface Design или пользовательский интерфейс) системы, которая в дальнейшем будет интегрирована в приложение. Но для того, чтобы внедрить модульную UI систему, к проектированию также нужно подходить с точки зрения модульности.

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

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

Модульный дизайн в пользовательском интерфейсе

Суть модульного дизайна заключается в дроблении дизайна на мелкие части (модули), независимом их создании и дальнейшем объединении в большую систему. Модульный дизайн во многом, что нас окружает. Автомобили, компьютеры, мебель. Из-за своей модульности, части каждой системы могут быть заменены, добавлены, удалены или переработаны. Это полезно для потребителей, ведь они могут подстраивать систему под свои нужды.

Нужен люк в крыше автомобиля, более мощный двигатель, кожаные сидения? Получите! Это возможно благодаря модульному дизайну машины.

Еще один яркий пример - мебель из IKEA. На картинках ниже показано, что модульна не только форма книжного шкафа, но и каждая его часть.

С производственной точки зрения, модульная система еще и экономична. Проще создать небольшие простые части, которые в дальнейшем могут быть объединены, чем сразу один большой объект. Кроме того, это решение можно заново применять, повышая производительность.

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

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

Примеры модульного дизайна

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

Пожалуй самый яркий пример, выкладка в Pinterest.

Это однородно?

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

Не будут ли проекты с модульным дизайном выглядеть идентично?

Как это повлияет на бренд?

Каким должен быть пользовательский интерфейс продукта, чтобы сделать его уникальным?

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

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

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

Модульность в стайл гайд разработке

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

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

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

Документация играет несколько ролей:

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

Интеграция является заключительным этапом. Элементы пользовательского интерфейса разработаны и готовы к интеграции в приложение. Остается настроить их. При этом руководство будет выступать в качестве хорошего мануала по сборке.

Разработка модульного дизайна

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

Будьте внимательны! Это еще не модули. Чтобы до них добраться, нужно определится с постоянными элементами пользовательского интерфейса:

• Индикатор оформления заказа;
• элементы формы для ввода информации;
• представление товаров в корзине;
• правила закупки;
• текст справки;
• сообщения и оповещения.

Копнув глубже, мы найдем стили и модели взаимодействия:

Стили:

• цвета для обозначения:
  • ошибка, успех, информационные и предупредительные сообщения;
  • первичные и вторичные действия;
  • статус неактивен/ выбран/ блокирован;
  • ссылки и обычный текст;
  • брендинг;
• оформление, которое используется для обозначения разных видов контента:
  • размер шрифта для иерархической выкладки информации;
  • типы шрифтов для выделения сообщений или предоставления дополнительной информации;
  • списки для обобщения информации;
• иконки.

Модели взаимодействия:

• Показ предстоящих шагов;
• показ предыдущих шагов;
• отображение сводок, которые можно редактировать;
• проверка информации после того, как посетитель на нее кликнул;
• предоставление справки;
• обновление корзины после того, как был сделан выбор.

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

Для облегчения восприятия приведем в пример “атомный дизайн” и его этапы:

1. Мы начинаем с атомов, которые являются наименьшими модулями (кнопки, типография, иконки).
2. Модули усложняются и превращаются в молекулы, обладающие большей функциональностью (например, модуль похожих товаров).
3. Затем из сгруппированных молекул появляются организмы (хедер и различные формы).
4. Отбросив аналогию с химией, следующий уровень это шаблоны.
5. И наконец, страницы.

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

Использование руководства

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

База, с которой можно работать

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

Документация проектных решений

Знания, приобретенные при решении определенной UX или UI проблемы могут быть использованы в дальнейшем.

Легкость общения

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

Не доводите до крайностей

Теперь рассмотрим подводные камни, которые могут встретится на пути.

Руководство, таблица стилей не заменяет дизайнерской работы

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

Шаблоны это не панацея

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

Не забывайте об итерации дизайна

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

Сложность обслуживания

Среди множества должностных обязанностей, обслуживание таблицы стилей не должно стать обузой. Несколько советов:

• Определитесь с системой документации с которой удобно работать на постоянной основе.
• Делайте заметки, обновляйте руководство по ходу работы.
• Разработайте рекомендации по оформлению.

Модульный дизайн для модульной работы

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

Источник: https://www.smashingmagazine.com/2016/06/designing-modular-ui-systems-via-style-guide-driven-development/