На этот раз я объясню, как закодировать вашу собственную карту Empathy, используя Angular + CDK + Bootstrap.
Дизайн-мышление
«Дизайн-мышление — это ориентированный на человека подход к инновациям, основанный на наборе инструментов дизайнера для интеграции потребностей людей, возможностей технологий и требований к успеху в бизнесе».
Ссылка: https://designthinking.ideo.com/
Преимущества дизайн-мышления
· Совместная работа
· Ориентированность на пользователя
· Тщательно протестировано
· Адаптивный
Методологию дизайн-мышления можно использовать где угодно, от разработки продуктов и финансов до обслуживания клиентов.
Итак, где используется карта эмпатии? Давайте посмотрим на этапы дизайн-мышления
Ссылка: https://bootcamp.uxdesign.cc/the-process-of-design-thinking-and-its-5-stages-c6df8c08d5c2
Что такое эмпатия?
Для Human-Centred Design Toolkit от DEO: этоглубокое понимание проблем и реалий людей, для которых вы создаете дизайн.
Эмпатия — это первая стадия процесса дизайн-мышления. Следующие этапы можно обобщить как: Определение, Идея, Прототип и Тестирование. На этапе эмпатии ваша цель как дизайнера — получить эмпатическое понимание людей, для которых вы разрабатываете дизайн, и проблемы, которую вы пытаетесь решить.
Ссылка: https://www.interaction-design.org/literature/article/design-thinking-getting-started-with-empathy
Итак, мы увидели, почему эмпатия так важна в процессе дизайн-мышления: она позволяет вам понять людей, которые будут использовать ваше решение.
На работе я реализовал некоторые утилиты для улучшения своего рабочего процесса, я думал о том, сколько у меня инструментов для улучшения моих программных решений, а затем я нашел дизайн-мышление, несколько месяцев спустя я могу сказать, что я сертифицирован в дизайн-мышлении, поэтому следующий шаг использовал его на моей повседневной работе!
Давайте создавать!
Я начал с карты Empathy, для этого я использовал Angular, CDK Drag and Drop из Angular Material и Bootstrap для некоторых других вещей.
Я использовал Angular 10 для приложения, поэтому CDK Drag and Drop должен быть не менее 10, наконец, версия Bootstrap была 5.1.1.
Создайте приложение, используя:
ng новая эмпатия-карта-rv
Я также установил локализацию из-за моей версии зависимостей.
добавить @angular/localize
Вы можете увидеть полный список зависимостей на следующем снимке экрана.
Здесь вы можете увидеть мой макет, он использует 4 поля для каждого раздела карты эмпатии, также есть кнопки для добавления элементов, а изображение пользователя расположено в центре.
Здесь я делюсь кодом app.component.html, он включает в себя модальное окно для добавления элементов, а также содержит основной div под названием «контейнер», функция перетаскивания позволяет перемещать элемент в случае, если пользователь допустил ошибку.
Мы можем увидеть окончательный пользовательский интерфейс на следующем скриншоте.
Здесь я делюсь кодом app.component.ts, он включает в себя методы, которые позволяют работать пользовательскому интерфейсу, а также включает логику открытия мода с использованием ng-bootstrap.
Результат
Мы создали действительно мощный инструмент для понимания наших конечных пользователей, с помощью этого приложения вы можете начать реализовывать дизайн-мышление со своей командой!
Скачать проект можно здесь:
Спасибо за чтение, поделитесь своими комментариями и хорошего дня.
