[Интерфейсы, Дизайн] Тупые и умные компоненты
Автор
Сообщение
news_bot ®
Стаж: 6 лет 9 месяцев
Сообщений: 27286
Меня зовут Илона, я Senior Experience Designer в EPAM. Работа для меня удачно совпадает с хобби — в EPAM я проектирую интерфейсы для зарубежных заказчиков, читаю лекции для сотрудников и студентов лабы, менторю дизайнеров. В свободное время преподаю проектирование интерфейсов в магистратуре Университета ИТМО и веду Телеграм-канал о UX-дизайне.
В работе и преподавании я часто сталкиваюсь с проблемой: сложно организовать компоненты интерфейса так, чтобы было всегда понятно, какой компонент использовать, чтобы похожие компоненты не плодились и не путали дизайнеров и разработчиков.Делюсь подходом, который помогает мне удобно организовать компоненты и упростить жизнь себе и разработчикам.Что вообще такое компонентыГрафический интерфейс (GUI), как правило, состоит из кнопок, полей, чекбоксов, текстовых блоков и пр. Именно это мы называем «компоненты» — эдакая интерактивная (или нет) «обёртка» контента: кнопка «Оформить заказ»; чекбокс «Я принимаю условия соглашения» и т.д.Для UX-дизайнера интерфейс в первую очередь — инструмент решения пользовательских задач. Задача всегда существует в контексте: регистрация в контексте сайта авиакомпании, покупка в контексте интернет-магазина одежды. Поэтому дизайнеру очень важно использовать реальные заголовки, названия кнопок, пункты списков. Именно так мы иллюстрируем решение определённой задачи в определённом контексте.Но привязанность к контексту таит в себе потенциальную опасность, особенно для крупных и долгоиграющих проектов: контекстуализированные компоненты может быть сложно переиспользовать.Посмотрим на простом примереДизайним карточку товара в интернет-магазине: картинка, информация, цена и кнопка «Купить».
А ещё требуется карточка товара для корзины. Там нет кнопки «Купить», зато есть кнопка «Удалить» и селектор количества товара. Звучит как новый компонент. Делаем!
Спустя какое-то время дизайним новую фичу — личный кабинет. Карточка требуется уже не для товара, а для пользователя. Совсем другой компонент. Делаем!
И вот у нас уже 3 компонента «Карточка».
Карточки во всем своем многообразииТеперь мы хотим показать информацию о заказе в личном кабинете. Неплохо смотрелась бы… Карточка!
Какую же из трёх использовать? Ни одна толком не подходит. Проще уже сделать новую.Проходит время, карточки разработаны и живут в разных местах системы.Однажды мы решаем разом модернизировать все карточки — сделать изображения круглыми. Модно!
Изменения во всех карточках становятся испытанием для дизайнера и болью для разработчиков, потому что карточек много и они разные.
Три группы правок в нескольких местах на макетах и в системеИзменений бы потребовалось в три раза меньше, если бы карточку переиспользовали.Зачем и как переиспользовать компонентыПереиспользование компонентов помогает:
- облегчить жизнь себе и разработчикам;
- пользователям предсказывать поведение интерфейса (увидел компонент — понял как работает — знаю чего ожидать)
Во имя переиспользования, по примеру разработчиков React.js, делим компоненты на два типа: «тупые» и «умные».
«Тупой» компонент не привязан к бизнес-логике. Вместо контента в нём — рыба, максимальное количество состояний и элементов. Универсальный кирпичик для конструктора интерфейса.
Если же «тупой» компонент размещается в контексте, на определённой странице, оснащается конкретным контентом и функциональностью — он становится «умным».«Умный» компонент привязан к бизнес-логике. Он исполняет определённую функцию в конкретном месте. Умный компонент является реализацией «тупого».
Можно сказать, что тупой компонент — шаблон, а умный компонент — пример его применения.
Шаблон карточки и примеры его примененияПример с карточками сделан в Figma. «Тупая» карточка — Figma-component с применением Auto Layout. Благодаря этому элементы карточки можно удалять и менять, а её размер подстроится под изменения. Умная карточка — Figma-instance.
Достаточно внести изменения в «тупом» компоненте, и они автоматически окажутся в «умных». Также происходит и в разработке, если код компонента переиспользуется.
Скругление всех картинок одним движениемТупой UI kitПростая и понятная библиотека компонентов (UI kit), элементы которой легко переиспользовать и обновлять — турбо-ускоритель дизайна и разработки. И состоит такая библиотека из тупых компонентов. Я называю её «Тупой UI kit».
Если на вашем проекте уже есть UI kit, попробуйте сделать все компоненты в нём тупыми. Скорее всего, вы с удивлением обнаружите, что многие компоненты можно унифицировать: объединить похожие или удалить повторяющиеся. «Отупить» UI kit может быть непросто, понадобится время на ревизию системы и сильный дизайн-инструмент. Figma отлично справляется, но и Sketch не отстает.«Тупой UI kit» облегчит работу над дизайном, избавив от необходимости плодить компоненты и изобретать велосипед. Разработчики тоже скажут вам спасибо за то, что они могут переиспользовать код компонента.
«Тупой UI kit» также может стать основой для создания Storybook проекта.Выводы
Разделяя компоненты на «умные» и не очень, вы:
- создаете унифицированный интерфейс;
- оптимизируете дизайн и разработку, не выдумывая новые компоненты без необходимости;
- оставляете возможность легко вносить изменения в дизайн и код;
- делаете поведение компонентов предсказуемым для пользователей.
Больше о проектировании интерфейсов и UX можно почитать в моём телеграм-канале «Поясни за UX».
===========
Источник:
habr.com
===========
Похожие новости:
- [API, Big Data, Data Mining, Интерфейсы, Открытые данные] Парсинг сайта Умного Голосования и новый API на сайте ЦИК
- [*nix, Open source] FOSS News №34 – дайджест новостей свободного и открытого ПО за 14-20 сентября 2020 года
- [Разработка игр, Дизайн игр] Анимация в KAPIA. «Лучше один день потерять, чтобы потом за пять минут долететь»
- [Я пиарюсь] How I’m creating a digital mini-guitar
- Выпуск дистрибутива 4MLinux 34.0
- [Графический дизайн, Дизайн, Управление продуктом, Управление проектами] Организация работы в креативной команде: опыт Wrike, Miro, Revolut
- [Разработка веб-сайтов, CSS, JavaScript, HTML, Accessibility] Делаем модальные окна для сайта. Заботимся об удобстве и доступности
- [Usability, Дизайн, Веб-дизайн, Дизайн мобильных приложений] UXD — Реальность и будущее в дизайне или человек во главе всего
- [Swift, Программирование, Разработка мобильных приложений, Разработка под iOS] Виджеты в iOS 14 – возможности и ограничения
- [Разработка под Linux, Софт] Не прошло и полгода: вышел GNOME 3.38
Теги для поиска: #_interfejsy (Интерфейсы), #_dizajn (Дизайн), #_ux, #_ui, #_ux_design, #_komponenty (компоненты), #_biblioteka_komponentov (библиотека компонентов), #_ui_kit, #_interfejsy (интерфейсы), #_dizajnprotsessy (дизайн-процессы), #_blog_kompanii_epam (
Блог компании EPAM
), #_interfejsy (
Интерфейсы
), #_dizajn (
Дизайн
)
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 16-Ноя 10:09
Часовой пояс: UTC + 5
| Автор | Сообщение |
|---|---|
|
news_bot ®
Стаж: 6 лет 9 месяцев |
|
 Меня зовут Илона, я Senior Experience Designer в EPAM. Работа для меня удачно совпадает с хобби — в EPAM я проектирую интерфейсы для зарубежных заказчиков, читаю лекции для сотрудников и студентов лабы, менторю дизайнеров. В свободное время преподаю проектирование интерфейсов в магистратуре Университета ИТМО и веду Телеграм-канал о UX-дизайне. В работе и преподавании я часто сталкиваюсь с проблемой: сложно организовать компоненты интерфейса так, чтобы было всегда понятно, какой компонент использовать, чтобы похожие компоненты не плодились и не путали дизайнеров и разработчиков.Делюсь подходом, который помогает мне удобно организовать компоненты и упростить жизнь себе и разработчикам.Что вообще такое компонентыГрафический интерфейс (GUI), как правило, состоит из кнопок, полей, чекбоксов, текстовых блоков и пр. Именно это мы называем «компоненты» — эдакая интерактивная (или нет) «обёртка» контента: кнопка «Оформить заказ»; чекбокс «Я принимаю условия соглашения» и т.д.Для UX-дизайнера интерфейс в первую очередь — инструмент решения пользовательских задач. Задача всегда существует в контексте: регистрация в контексте сайта авиакомпании, покупка в контексте интернет-магазина одежды. Поэтому дизайнеру очень важно использовать реальные заголовки, названия кнопок, пункты списков. Именно так мы иллюстрируем решение определённой задачи в определённом контексте.Но привязанность к контексту таит в себе потенциальную опасность, особенно для крупных и долгоиграющих проектов: контекстуализированные компоненты может быть сложно переиспользовать.Посмотрим на простом примереДизайним карточку товара в интернет-магазине: картинка, информация, цена и кнопка «Купить».  А ещё требуется карточка товара для корзины. Там нет кнопки «Купить», зато есть кнопка «Удалить» и селектор количества товара. Звучит как новый компонент. Делаем!  Спустя какое-то время дизайним новую фичу — личный кабинет. Карточка требуется уже не для товара, а для пользователя. Совсем другой компонент. Делаем!  И вот у нас уже 3 компонента «Карточка».  Карточки во всем своем многообразииТеперь мы хотим показать информацию о заказе в личном кабинете. Неплохо смотрелась бы… Карточка! Какую же из трёх использовать? Ни одна толком не подходит. Проще уже сделать новую.Проходит время, карточки разработаны и живут в разных местах системы.Однажды мы решаем разом модернизировать все карточки — сделать изображения круглыми. Модно! Изменения во всех карточках становятся испытанием для дизайнера и болью для разработчиков, потому что карточек много и они разные.  Три группы правок в нескольких местах на макетах и в системеИзменений бы потребовалось в три раза меньше, если бы карточку переиспользовали.Зачем и как переиспользовать компонентыПереиспользование компонентов помогает:
 «Тупой» компонент не привязан к бизнес-логике. Вместо контента в нём — рыба, максимальное количество состояний и элементов. Универсальный кирпичик для конструктора интерфейса. Если же «тупой» компонент размещается в контексте, на определённой странице, оснащается конкретным контентом и функциональностью — он становится «умным».«Умный» компонент привязан к бизнес-логике. Он исполняет определённую функцию в конкретном месте. Умный компонент является реализацией «тупого». Можно сказать, что тупой компонент — шаблон, а умный компонент — пример его применения.  Шаблон карточки и примеры его примененияПример с карточками сделан в Figma. «Тупая» карточка — Figma-component с применением Auto Layout. Благодаря этому элементы карточки можно удалять и менять, а её размер подстроится под изменения. Умная карточка — Figma-instance.  Достаточно внести изменения в «тупом» компоненте, и они автоматически окажутся в «умных». Также происходит и в разработке, если код компонента переиспользуется.  Скругление всех картинок одним движениемТупой UI kitПростая и понятная библиотека компонентов (UI kit), элементы которой легко переиспользовать и обновлять — турбо-ускоритель дизайна и разработки. И состоит такая библиотека из тупых компонентов. Я называю её «Тупой UI kit». Если на вашем проекте уже есть UI kit, попробуйте сделать все компоненты в нём тупыми. Скорее всего, вы с удивлением обнаружите, что многие компоненты можно унифицировать: объединить похожие или удалить повторяющиеся. «Отупить» UI kit может быть непросто, понадобится время на ревизию системы и сильный дизайн-инструмент. Figma отлично справляется, но и Sketch не отстает.«Тупой UI kit» облегчит работу над дизайном, избавив от необходимости плодить компоненты и изобретать велосипед. Разработчики тоже скажут вам спасибо за то, что они могут переиспользовать код компонента. «Тупой UI kit» также может стать основой для создания Storybook проекта.Выводы  Разделяя компоненты на «умные» и не очень, вы:
 =========== Источник: habr.com =========== Похожие новости:
Блог компании EPAM ), #_interfejsy ( Интерфейсы ), #_dizajn ( Дизайн ) |
|
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 16-Ноя 10:09
Часовой пояс: UTC + 5