Разработка модульных ui-систем на основе руководств по стилю

Posted on by riasevastopol

Применение управления по стилю при разработке — это популярная практика, которая усиливаетсяво front-end девелопменте. И не напрасно. Эксперты начинают с добавления нового кода либо обновления существующего и тем самым содействуют формированию модульной UI (user interface) совокупности, которая в будущем интегрируется в приложение.

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

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

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

UI vs. UX: в чем различие?

Модульное проектирование в UI дизайне

Главная концепция модульного дизайна пребывает в том, что дизайн разбивают на пара меньших частей, каковые создаются раздельно друг от друга и после этого объединяются в более большую совокупность.Разработка модульных ui-систем на основе руководств по стилю Если вы посмотрите назад около, то заметите множество примеров применения модульного дизайна. Автомобили, компьютеры а также мебель — все это модульные совокупности, компоненты которых смогут быть заменены, удалены либо переставлены.

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

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

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

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

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

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

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

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

«Конструктор секций» — новый виджет в редакторе LPgenerator

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

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

Пример адаптивной сетки от Bootstrap — комплекта инструментов для сайтов и приложений

NASA применяют сетку Bootstrap, дабы создать карточный макет

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

Разве модульные конструкции не будут смотреться одинаково?
Как это отразится на индивидуальности бренда?
Как необходимо доходить к разработке, дабы создать неповторимый интерфейс?

Эти в полной мере обоснованные вопросы затрагивают еще более ответственный нюанс:

«В чем выражается инновационность и уникальность дизайна продукта?»

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

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

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

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

Юзабилити интерфейса пользователя: как сделать невидимое видимым?

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

С позиций реализации, стайл-гайд разработка (style-guide driven development) кроме этого носит модульный темперамент. Процесс начинается с изучения — понимания неприятности, которую необходимо устранить, итераций и сбора требований дизайнерских ответов.

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

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

Стайл гайд разработка: ИсследованиеАбстракцииВнедрение и документированиеИнтеграция

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

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

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

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

Демонстрационная площадка для и тестирования образов. Как раз тут разработка осуществляется перед тем, как все ответы интегрируются в приложение.

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

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

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

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

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

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

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

Пошаговый процесс оформления заказа: товары, добавленные в корзинукорзинадоставкабиллингподтверждениепокупка продукта

Имейте ввиду, что эти шаги еще не являются модулями. Дабы добраться до них, вам необходимо выяснить постоянные UI элементы пути, такие как:

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

Макетный дизайн страницы с корзиной

Макетный дизайн страницы доставки

Макетный дизайн страницы расчета

Кое-какие UI элементы, каковые сохраняются в дизайне (сверху вниз): индикатор прогресса оформления заказа, элементы формы, продукты в корзине, похожие продукты

Копнув мало глубже, мы кроме этого отыщем модели и стили сотрудничеств:

Стили

Цвета, применяемые для обозначения:

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

Типографика, применяемая для обозначения разных типов контента:

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

Иконкография (iconography) для передачи быстрого ознакомления и визуального смысла с неспециализированными действиями.

Модели сотрудничеств

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

Кое-какие стили, сохраняющие постоянство в дизайне (сверху вниз): первичные действия на фоне вторичных, ссылки на фоне простого текста, брендинг, типографика, иконкография

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

Ускорить процесс создания модульных конструкций вы имеете возможность за счет так именуемого «ядерного дизайна» (atomic design). Это методика разбирает связи между разными частями совокупности да и то, как они взаимодействуют, применяя химию в качестве аналогии. Последовательность действий в этом случае во многом есть противоположностью метода из прошлого упражнения:

1. Мы начинаем с атомов — мельчайших частиц в совокупности (в отечественном примере это кнопки, типографика и иконки).

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

3. После этого появляются организмы, воображающие собой молекулы, каковые группируются совместно в приложении (в отечественном примере это различные формы и хедер приложения).

4. Отходя от аналогии с химией, перебираемся на следующий уровень — к шаблонам, являющимися предопределенными структурами, в каковые помещаются организмы.

5. И наконец, имеется страницы, каковые являются примерамишаблонов.

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

Как раз в таких случаях на помощь приходит управление по стилю.

Как применять управление по стилю?

Такое управление может оказаться весьма полезным в ходе дизайна по многим причинам:

1. База, с которой возможно трудиться

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

2. Документирование проектных ответов

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

3. Простота коммуникации

Данное управление разрешает с легкостью трудиться над дизайном, поскольку оно предоставляет самые актуальные UI-репрезентации (в отличие от статичных макетов, каковые скоро устаревают).

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

Единство дизайна: как создать управление по стилю?

Не переусердствуйте!

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

1. Управление по стилю не освобождает вас от работы над дизайном

Менеджеры часто утверждают, что по окончании создания стайл-гайда большинство дизайнерской работы проделана. Не смотря на то, что сейчас многие повторяющиеся и тривиальные задачи (к примеру, многократное прототипирование кнопки) вправду выполнены, не забывайте, что:

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

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

2. Не следуйте шаблонам через чур довольно часто

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

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

Закат эры «золотой лихорадки» в UX-дизайне

Не пренебрегайте итерациями дизайна

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

Бремя помощи

Помощь управления по стилю должна быть последней вещью, которая думается вам обременительной. Для решения данной неприятности следуйте нижеприведенным рекомендациям:

Отыщите совокупность документирования, которая отличается простотой как с позиций установки, так и в плане сотрудничества;

Сделайте своевременное обновление документации частью вашего рабочего процесса;

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

Вместо заключения

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

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

Высоких вам конверсий!

По данным: smashingmagazine.com, image source hwguth

Случайные статьи:

Создание Unit-тестов в Visual Studio


Подборка похожих статей:

riasevastopol

More Posts