[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"general-list":3,"footer-feature-tags":4,"slate-glossary-term-prototype":66},true,[5,14,20,29,34,40,46,52,56,62],{"id":6,"name":7,"hex":8,"translations":9,"count_pages":13},8,"Компания","#f40925",{"ru":10,"en":11},{"name":7},{"name":12},"Company",9,{"id":15,"name":16,"hex":17,"translations":18,"count_pages":6},26,"Главная страница",null,{"ru":19},{"name":16},{"id":21,"name":22,"hex":23,"translations":24,"count_pages":28},2,"Проекты","#3027ff",{"ru":25,"en":26},{"name":22},{"name":27},"Project",15,{"id":30,"name":31,"hex":17,"translations":32,"count_pages":21},33,"ИИ",{"ru":33},{"name":31},{"id":35,"name":36,"hex":17,"translations":37,"count_pages":39},34,"Комментарии",{"ru":38},{"name":36},4,{"id":41,"name":42,"hex":17,"translations":43,"count_pages":45},25,"Задачи",{"ru":44},{"name":42},24,{"id":47,"name":48,"hex":17,"translations":49,"count_pages":51},27,"Рабочие пространства",{"ru":50},{"name":48},3,{"id":45,"name":53,"hex":17,"translations":54,"count_pages":6},"Kanban-доска",{"ru":55},{"name":53},{"id":57,"name":58,"hex":17,"translations":59,"count_pages":61},23,"Диаграмма Ганта",{"ru":60},{"name":58},1,{"id":28,"name":63,"hex":17,"translations":64,"count_pages":61},"Календарь",{"ru":65},{"name":63},{"detail":67,"more":143},{"id":68,"slug":69,"translations":70,"category":84,"tags":92,"letter":102,"og_image":17,"cover":17,"author_name":17,"author_position":17,"author_avatar":17,"faqs":103,"related":117,"views_count":140,"helpful_yes_count":106,"helpful_no_count":106,"created_at":141,"updated_at":142,"published_at":17},328,"prototype",{"ru":71},{"title":72,"short_definition":73,"tldr":74,"full_explanation":75,"when_to_apply":76,"when_not_to_apply":77,"examples":78,"tips":79,"synonyms":80,"translation_en":81,"seo_title":82,"seo_description":83},"Прототип интерфейса","Интерактивная или статичная модель будущего продукта, на которой можно проверять идеи до разработки.","Прототип — это черновик интерфейса, на котором идеи проверяют до того, как они станут кодом. Прототипы бывают разной детализации: от наброска на бумаге до почти настоящего интерактивного макета, где можно тестировать сценарии с пользователями. Чем раньше команда собирает прототипы, тем дешевле обходятся ошибки: переделать переход на макете — час, переписать готовый код — неделя.","\u003Cp>Прототипы экономят деньги тем, что переносят эксперименты на этап до разработки. Это работает почти всегда, и в этом смысле прототип — не «приятный артефакт дизайна», а инструмент управления риском.\u003C\u002Fp>\u003Ch3>По уровню детализации\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cstrong>Низкая детализация (low-fidelity)\u003C\u002Fstrong> — наброски на бумаге, серые блоки, без цвета. Цель — обсудить структуру и сценарии.\u003C\u002Fli>\u003Cli>\u003Cstrong>Средняя детализация (mid-fidelity)\u003C\u002Fstrong> — каркасы экранов в Figma, без финального оформления. Удобно проверять поток.\u003C\u002Fli>\u003Cli>\u003Cstrong>Высокая детализация (high-fidelity)\u003C\u002Fstrong> — почти настоящий макет с цветом, шрифтами и анимацией. Используется для тестов с пользователями и презентаций.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>По интерактивности\u003C\u002Fh3>\u003Cul>\u003Cli>Статичные — просто экраны без переходов.\u003C\u002Fli>\u003Cli>Интерактивные — переходы, состояния, иногда даже небольшие сценарии с условной логикой.\u003C\u002Fli>\u003C\u002Ful>","\u003Cul>\u003Cli>Перед крупной новой функцией или новым продуктом\u003C\u002Fli>\u003Cli>Для тестов юзабилити до начала разработки\u003C\u002Fli>\u003Cli>Для согласования с заказчиками и заинтересованными сторонами\u003C\u002Fli>\u003C\u002Ful>","\u003Cul>\u003Cli>Мелкие очевидные изменения, где прототип займёт больше времени, чем сама разработка\u003C\u002Fli>\u003C\u002Ful>","\u003Cp>Команда обсуждает новый процесс оформления заказа. Без прототипа спор тянулся неделями: каждый представлял что-то своё. За два дня в Figma собирают интерактивный прототип с тремя вариантами, проводят на нём короткие тесты юзабилити, и один из вариантов явно выигрывает. Разработка получает понятный артефакт и точно знает, что строить, — время на согласования сокращается в разы.\u003C\u002Fp>","\u003Cp>Не зацикливайтесь на красоте прототипа на ранних этапах. Высокая детализация раньше времени — частая ловушка: на серьёзные изменения уже жалко потраченных часов, и команда начинает защищать решения вместо того, чтобы их пересматривать. Сначала идея и сценарий, потом полировка.\u003C\u002Fp>","прототип, прототип интерфейса, кликабельный макет, Prototype","Prototype","Прототип интерфейса: что это и зачем нужен | Глоссарий Shtab","Прототип — модель будущего интерфейса для проверки идей до разработки. Уровни детализации, виды интерактивности и советы, как не потратить лишнего.",{"id":85,"slug":86,"hex":87,"icon":17,"order":85,"translations":88},12,"ux-design","#ec4899",{"ru":89},{"title":90,"description":91},"UX и дизайн","Понятия дизайна пользовательских интерфейсов и пользовательского опыта: исследования, юзабилити, доступность, IA, прототипы, дизайн-системы, методологии и тёмные паттерны.",[93],{"id":94,"slug":95,"kind":96,"hex":97,"order":98,"translations":99},49,"design-process","methodology","#5e79ec",112,{"ru":100},{"title":101},"Процесс дизайна","П",[104,111],{"id":105,"order":106,"translations":107},1657,0,{"ru":108},{"question":109,"answer":110},"Чем прототип отличается от мокапа?","\u003Cp>Мокап — статичная детализированная картинка экрана: по ней видно, как всё будет выглядеть, но нажать ничего нельзя. Прототип — интерактивная модель, по которой можно пройти сценарий. Детализированный прототип внешне почти неотличим от мокапа, но в нём работают переходы, состояния элементов и базовая логика, поэтому его можно давать пользователям на тест.\u003C\u002Fp>",{"id":112,"order":61,"translations":113},1658,{"ru":114},{"question":115,"answer":116},"В каком инструменте делать?","\u003Cp>Самый распространённый сейчас — Figma: в ней собирают и макеты, и интерактивные переходы. Также используют Sketch, Adobe XD и Penpot. Для черновиков нередко берут просто бумагу и карандаш: это быстро, и не возникает иллюзии «уже почти готово», из-за которой правки начинают откладывать на потом.\u003C\u002Fp>",{"related":118},[119,126,133],{"id":120,"slug":121,"translations":122},329,"mockup",{"ru":123},{"title":124,"short_definition":125},"Мокап интерфейса","Статичный высокодетализированный визуал интерфейса с финальным дизайном, но без интерактивности.",{"id":127,"slug":128,"translations":129},135,"wireframe",{"ru":130},{"title":131,"short_definition":132},"Wireframe (каркас интерфейса)","Схематичный черновой макет интерфейса: показывает структуру экрана и расположение элементов без цветов, шрифтов и прочих деталей оформления.",{"id":134,"slug":135,"translations":136},322,"usability-testing",{"ru":137},{"title":138,"short_definition":139},"Тестирование юзабилити","Метод исследования, при котором пользователи выполняют реальные задачи в продукте под наблюдением исследователя.",99,"2026-05-11T20:33:04.494209+03:00","2026-05-11T20:33:04.494225+03:00",[144,171,197],{"id":145,"slug":146,"translations":147,"category":152,"tags":155,"letter":169,"cover":17,"updated_at":170,"published_at":17},332,"atomic-design",{"ru":148},{"title":149,"short_definition":150,"translation_en":151},"Atomic Design (атомарный дизайн)","Подход Брэда Фроста, в котором интерфейс собирается из иерархии «атомов», «молекул», «организмов», «шаблонов» и «страниц».","Atomic Design",{"id":85,"slug":86,"hex":87,"icon":17,"order":85,"translations":153},{"ru":154},{"title":90,"description":91},[156,160],{"id":61,"slug":96,"kind":96,"hex":97,"order":61,"translations":157},{"ru":158},{"title":159},"Методология",{"id":161,"slug":162,"kind":163,"hex":164,"order":165,"translations":166},50,"design-system-tag","framework","#14b8a6",113,{"ru":167},{"title":168},"Дизайн-системы","A","2026-05-11T20:33:05.908305+03:00",{"id":172,"slug":173,"translations":174,"category":179,"tags":182,"letter":195,"cover":17,"updated_at":196,"published_at":17},335,"mobile-first",{"ru":175},{"title":176,"short_definition":177,"translation_en":178},"Mobile-first (сначала мобильная версия)","Подход к проектированию, при котором сначала продумывают мобильную версию, а уже потом расширяют её до десктопа.","Mobile-first",{"id":85,"slug":86,"hex":87,"icon":17,"order":85,"translations":180},{"ru":181},{"title":90,"description":91},[183,192],{"id":184,"slug":185,"kind":186,"hex":187,"order":188,"translations":189},48,"ui-design","tool","#7c5ce6",111,{"ru":190},{"title":191},"UI-дизайн",{"id":94,"slug":95,"kind":96,"hex":97,"order":98,"translations":193},{"ru":194},{"title":101},"M","2026-05-11T20:33:07.021925+03:00",{"id":198,"slug":199,"translations":200,"category":205,"tags":208,"letter":226,"cover":17,"updated_at":227,"published_at":17},319,"ux-vs-ui",{"ru":201},{"title":202,"short_definition":203,"translation_en":204},"UX и UI: в чём разница","UX — про общий опыт взаимодействия с продуктом, UI — про внешний вид и поведение конкретного интерфейса.","UX vs UI",{"id":85,"slug":86,"hex":87,"icon":17,"order":85,"translations":206},{"ru":207},{"title":90,"description":91},[209,216,223],{"id":6,"slug":210,"kind":211,"hex":212,"order":6,"translations":213},"concept","other","#4b5370",{"ru":214},{"title":215},"Концепция",{"id":217,"slug":218,"kind":186,"hex":87,"order":219,"translations":220},47,"ux-research",110,{"ru":221},{"title":222},"Исследования UX",{"id":184,"slug":185,"kind":186,"hex":187,"order":188,"translations":224},{"ru":225},{"title":191},"U","2026-05-11T20:33:01.213551+03:00"]