Система проектирования
Термин «разработка программного обеспечения»

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

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

Известные системы дизайна включают Lightning Design System (от Salesforce), [3] Material Design (от Google), [4] Carbon Design System (от IBM) [5] и Fluent Design System (от Microsoft). [6]

Преимущества

Некоторые из преимуществ дизайн-системы:

  • Оптимизированный процесс проектирования и производства.
  • Создает единый язык общения между кросс-функциональными командами и внутри них.
  • Более быстрая сборка за счет повторно используемых компонентов и общего обоснования.
  • Более качественные продукты за счет более целостного пользовательского опыта и единого языка дизайна.
  • Улучшение обслуживания и масштабируемости за счет сокращения проектного и технического долга.
  • Более четкая направленность на команды разработчиков продуктов посредством решения общих проблем, чтобы команды могли сосредоточиться на удовлетворении потребностей пользователей. [7]

Происхождение

Системы проектирования существуют уже давно под разными названиями. Системы проектирования играют важную роль в области проектирования с момента их создания, но с момента их возникновения они претерпели множество изменений и улучшений. Использование систем или шаблонов, как они называли это в 1960-х годах, впервые было упомянуто на конференции НАТО по программной инженерии (обсуждение того, как должно разрабатываться программное обеспечение) Кристофером Александером, что привлекло внимание отрасли. В 1970-х годах он опубликовал книгу под названием «Язык шаблонов» вместе с Мюрреем Сильверстайном и Сарой Ишикавой, в которой простым и демократичным способом обсуждались взаимосвязанные шаблоны в архитектуре, и это дало начало тому, что мы сегодня знаем как «Системы проектирования».

Интерес к цифровой сфере снова возрос во второй половине 1980-х годов, когда этот инструмент стал использоваться в разработке программного обеспечения [8], что привело к понятию шаблона проектирования программного обеспечения . Поскольку шаблоны лучше всего поддерживать в среде совместного редактирования, это привело к изобретению первой вики , которая позже привела к изобретению самой Википедии . Проводились регулярные конференции, и даже тогда шаблоны использовались для создания пользовательских интерфейсов. [9] Всплеск продолжался вплоть до 90-х годов, а исследование Дженнифер Тидвелл завершило десятилетие. [10] Научный интерес продолжался вплоть до 2000-х годов. [11]

Массовый интерес к языкам шаблонов для проектирования пользовательского интерфейса снова возрос с открытием Yahoo! Design Pattern Library в 2006 году [12] с одновременным введением Yahoo! User Interface Library ( сокращенно YUI Library ). Одновременное введение должно было обеспечить более систематический дизайн, чем просто компоненты, которые предоставляла библиотека пользовательского интерфейса.

Material Design от Google в 2014 году был первым, который фирма назвала «языком дизайна» (предыдущая версия называлась «Holo Theme»). Вскоре и другие последовали этому примеру.

Технические проблемы масштабных веб-проектов привели к изобретению системных подходов в 2010-х годах, в частности, BEM [13] и Atomic Design. Книга об Atomic Design [14] помогла популяризировать термин «система дизайна» с 2016 года. В книге описывается подход к проектированию макетов цифровых продуктов на основе компонентов, что делает его удобным для будущего и простым для обновления.

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

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

UI-комплект — это просто набор компонентов пользовательского интерфейса, без каких-либо четких правил его использования.

Дизайн-токены

Токен дизайна — это именованная переменная, которая хранит определенный атрибут дизайна, такой как цвет, типографские настройки, значение интервала или другое решение дизайна. Токены дизайна служат единым источником истины для этих атрибутов во всем бренде или системе и предоставляют широкий спектр преимуществ, таких как абстракция, гибкость, масштабируемость и согласованность для больших систем дизайна. Токены дизайна, которые по сути являются решениями дизайна, выраженными в коде, также улучшают сотрудничество между дизайнерами и разработчиками. Концепция токенов дизайна существует в различных известных системах дизайна, таких как Material Design от Google, [15] Style Dictionary от Amazon, [16] Spectrum от Adobe [17] и Atlassian Design System [18]

Группа сообщества W3C Design Tokens работает над созданием открытых стандартов для токенов дизайна. [19]

Краткое содержание

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

Ссылки

  1. ^ "Система проектирования - Руководство по дизайну приложений и UX для создания лучших мобильных приложений". GoodBarber . Получено 2023-10-09 .
  2. ^ "Все, что вам нужно знать о системах проектирования". 2019-10-03.
  3. ^ «Система проектирования молний».
  4. ^ "Material Design". Material Design . Получено 2021-04-09 .
  5. ^ «Домашняя страница – Система проектирования углеродных конструкций».
  6. ^ "Домашняя страница – Fluent Design System". Microsoft .
  7. ^ Перес-Круз, Есения (2019). Системы экспрессивного дизайна . Джеффри Зельдман. стр. 4. ISBN 978-1-937557-85-0.
  8. ^ «Использование шаблонных языков для объектно-ориентированных программ». c2.com . Получено 2021-10-07 .
  9. ^ "История узоров". wiki.c2.com . Получено 2021-10-07 .
  10. ^ "Общая почва". www.mit.edu . Получено 2021-10-07 .
  11. ^ "Элизабет Г. Тодд - Публикации". dl.acm.org . Получено 2021-10-07 .
  12. ^ "Yahoo! Design Pattern Library". Creative Commons . 2006-02-14 . Получено 2021-10-07 .
  13. ^ ««Почему БЭМ?» в двух словах / Блог DECAF».«Почему BEM?» в двух словах / Блог DECAF . 24 июня 2015 г. Получено 07.10.2021 г.
  14. ^ Фрост, Брэд (2016). Атомный дизайн. Массачусетс. ISBN 978-0-9982966-0-9. OCLC  971562254.{{cite book}}: CS1 maint: location missing publisher (link)
  15. ^ "Токены дизайна – Material Design 3". Material Design . Получено 2024-07-24 .
  16. ^ "Словарь стилей - Стиль один раз, использование везде. Система сборки для создания кроссплатформенных стилей". amzn.github.io . Получено 24.07.2024 .
  17. ^ "Токены дизайна - Spectrum". spectrum.adobe.com . Получено 2024-07-24 .
  18. ^ "Токены дизайна - Токены". Atlassian Design System . Получено 2024-07-24 .
  19. ^ "Design Tokens Community Group". www.w3.org . 2022-06-14 . Получено 2024-07-24 .
  20. ^ Фессенден, Тереза ​​(11 апреля 2021 г.). «Системы проектирования 101». Nielsen Norman Group . Получено 30.03.2023 .
  • Что такое система проектирования? Роберт Гурли
  • Справочник по системам проектирования Марко Суареса, Джины Энн, Кэти Силор-Миллер, Дианы Моунтер и Роя Стэнфилда. (Design Better by InVision)
  • Запись (на французском): Зачем нужна система проектирования?
  • Шаблоны проектирования
  • Примеры систем проектирования
Retrieved from "https://en.wikipedia.org/w/index.php?title=Design_system&oldid=1256507229"