0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#статьи</a></p>
1
<p><a>#статьи</a></p>
2
<ul><li>26 ноя 2019</li>
2
<ul><li>26 ноя 2019</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><p>UI-киты помогают дизайнеру быстро собирать экраны интерфейса и не нарушать правил общей стилистики. Но зачем и как делать их самостоятельно?</p>
4
</ul><p>UI-киты помогают дизайнеру быстро собирать экраны интерфейса и не нарушать правил общей стилистики. Но зачем и как делать их самостоятельно?</p>
5
<p> vlada_maestro / shutterstock</p>
5
<p> vlada_maestro / shutterstock</p>
6
<p>Дизайнер digital-агентства "Атвинта"</p>
6
<p>Дизайнер digital-агентства "Атвинта"</p>
7
<p>UI-кит - набор элементов дизайна в одном стиле для проектирования пользовательского интерфейса. Это иконки, элементы меню, формы ввода, подсказки, напоминания, поп-апы, уведомления, кнопки и т.д. А также все состояния элементов, используемые цвета и типографика.</p>
7
<p>UI-кит - набор элементов дизайна в одном стиле для проектирования пользовательского интерфейса. Это иконки, элементы меню, формы ввода, подсказки, напоминания, поп-апы, уведомления, кнопки и т.д. А также все состояния элементов, используемые цвета и типографика.</p>
8
<p>Если сделаете UI-кит на старте проекта, вам останется только скомпоновать элементы в соответствии с прототипами продукта.</p>
8
<p>Если сделаете UI-кит на старте проекта, вам останется только скомпоновать элементы в соответствии с прототипами продукта.</p>
9
<p>Для frontend-разработчиков UI-кит - это инструкция по работе с элементами интерфейса. Он упрощает разработку продукта и командную работу с дизайнером.</p>
9
<p>Для frontend-разработчиков UI-кит - это инструкция по работе с элементами интерфейса. Он упрощает разработку продукта и командную работу с дизайнером.</p>
10
<p>Можно разрабатывать продукт и без UI-кита. Риски такого подхода: время разработки дизайна увеличивается, возникают расхождения в стилях и логике работы элементов в готовом интерфейсе. В результате сдвигаются сроки проекта, происходят переделки на этапе вёрстки и получается неудобный продукт, который запутывает пользователя.</p>
10
<p>Можно разрабатывать продукт и без UI-кита. Риски такого подхода: время разработки дизайна увеличивается, возникают расхождения в стилях и логике работы элементов в готовом интерфейсе. В результате сдвигаются сроки проекта, происходят переделки на этапе вёрстки и получается неудобный продукт, который запутывает пользователя.</p>
11
<p>В интернете полно ресурсов, где можно быстро найти и купить готовый UI-кит. Однако я так делать не рекомендую. И вот почему.</p>
11
<p>В интернете полно ресурсов, где можно быстро найти и купить готовый UI-кит. Однако я так делать не рекомендую. И вот почему.</p>
12
<p><strong>Во-первых,</strong>вам всё равно придётся подгонять часть элементов под свой проект. Например, под фирменные цвета и пожелания заказчика. Или некоторых нужных элементов не окажется в наборе, и их придётся отрисовывать с нуля, стараясь максимально сохранить стилистику. То есть в любом случае вы потратите время на UI-кит.</p>
12
<p><strong>Во-первых,</strong>вам всё равно придётся подгонять часть элементов под свой проект. Например, под фирменные цвета и пожелания заказчика. Или некоторых нужных элементов не окажется в наборе, и их придётся отрисовывать с нуля, стараясь максимально сохранить стилистику. То есть в любом случае вы потратите время на UI-кит.</p>
13
<p><strong>Во-вторых,</strong>UI-кит - не только набор "кубиков лего", из которых вы собираете сайт или приложение. Это инструмент, который помогает сделать удобный продукт для пользователей.</p>
13
<p><strong>Во-вторых,</strong>UI-кит - не только набор "кубиков лего", из которых вы собираете сайт или приложение. Это инструмент, который помогает сделать удобный продукт для пользователей.</p>
14
<p>Когда дизайнер просто берёт чьи-то готовые компоненты и расставляет их по макету, он перестаёт думать о целях конечного пользователя и бизнес-задаче заказчика. И это куда более губительно.</p>
14
<p>Когда дизайнер просто берёт чьи-то готовые компоненты и расставляет их по макету, он перестаёт думать о целях конечного пользователя и бизнес-задаче заказчика. И это куда более губительно.</p>
15
<p>Я предпочитаю всё-таки разрабатывать UI-киты под каждый проект с его особенностями и задачами. Так все нужные элементы будут учитывать аналитику и логику взаимодействия пользователя с интерфейсом.</p>
15
<p>Я предпочитаю всё-таки разрабатывать UI-киты под каждый проект с его особенностями и задачами. Так все нужные элементы будут учитывать аналитику и логику взаимодействия пользователя с интерфейсом.</p>
16
<p>Это не значит, что нужно изобретать велосипед и создавать привычные элементы в непривычном виде или плодить разные сущности для одной функции. Скорее наоборот: вы проектируете и добавляете в UI-кит только необходимое.</p>
16
<p>Это не значит, что нужно изобретать велосипед и создавать привычные элементы в непривычном виде или плодить разные сущности для одной функции. Скорее наоборот: вы проектируете и добавляете в UI-кит только необходимое.</p>
17
<p>Тогда UI-кит трансформируется в дизайн-систему продукта, где все элементы, цвета и шрифты будут собраны в CSS командой frontend-разработчиков.</p>
17
<p>Тогда UI-кит трансформируется в дизайн-систему продукта, где все элементы, цвета и шрифты будут собраны в CSS командой frontend-разработчиков.</p>
18
<p>Как только готовы прототипы, известны сценарии поведения пользователя и функции будущего продукта, можно приступать к разработке набора элементов.</p>
18
<p>Как только готовы прототипы, известны сценарии поведения пользователя и функции будущего продукта, можно приступать к разработке набора элементов.</p>
19
<p>Рассказываю, какие шаги нужно пройти, чтобы получился эффективный UI-кит, на примере сервиса "Врач42", который мы разрабатывали в digital-агентстве "Атвинта".</p>
19
<p>Рассказываю, какие шаги нужно пройти, чтобы получился эффективный UI-кит, на примере сервиса "Врач42", который мы разрабатывали в digital-агентстве "Атвинта".</p>
20
<p>Через этот сервис жители Кемеровской области записываются на приём в поликлинику. Главная боль пользователей - то, что в регистратуру сложно дозвониться. В результате приходится либо подолгу висеть на телефоне в ожидании ответа, либо постоянно откладывать поход к врачу. Главная цель проекта - дать возможность оперативно записаться в нужное медучреждение в несколько кликов.</p>
20
<p>Через этот сервис жители Кемеровской области записываются на приём в поликлинику. Главная боль пользователей - то, что в регистратуру сложно дозвониться. В результате приходится либо подолгу висеть на телефоне в ожидании ответа, либо постоянно откладывать поход к врачу. Главная цель проекта - дать возможность оперативно записаться в нужное медучреждение в несколько кликов.</p>
21
<p>Сначала рисуем сетку будущего веб-приложения. Это фундамент проекта. Сетка задаёт ритм в макетах и помогает frontend-разработчикам при вёрстке.</p>
21
<p>Сначала рисуем сетку будущего веб-приложения. Это фундамент проекта. Сетка задаёт ритм в макетах и помогает frontend-разработчикам при вёрстке.</p>
22
<p>В этом проекте используем сетку из 16 колонок: она позволяет логично и вариативно расположить все нужные элементы.</p>
22
<p>В этом проекте используем сетку из 16 колонок: она позволяет логично и вариативно расположить все нужные элементы.</p>
23
<p>Подобрали шрифты для заголовков, основного и второстепенного текста в интерфейсе.</p>
23
<p>Подобрали шрифты для заголовков, основного и второстепенного текста в интерфейсе.</p>
24
<p>При выборе цветов определяем главные: они играют наибольшую роль при взаимодействии пользователя с интерфейсом. Это основной цвет страницы, цвета кнопок целевого действия и системных предупреждений.</p>
24
<p>При выборе цветов определяем главные: они играют наибольшую роль при взаимодействии пользователя с интерфейсом. Это основной цвет страницы, цвета кнопок целевого действия и системных предупреждений.</p>
25
<p>Основным цветом страницы мы выбрали синий. Он наиболее социально-нейтральный и привычен для сайтов муниципальных учреждений.</p>
25
<p>Основным цветом страницы мы выбрали синий. Он наиболее социально-нейтральный и привычен для сайтов муниципальных учреждений.</p>
26
<p>После добавляем дополнительные цвета для кнопок и прочих элементов.</p>
26
<p>После добавляем дополнительные цвета для кнопок и прочих элементов.</p>
27
<p>Все нужные элементы были разработаны на этапе проектирования. Теперь нужно решить, как они выглядят при каждом варианте взаимодействия с пользователем.</p>
27
<p>Все нужные элементы были разработаны на этапе проектирования. Теперь нужно решить, как они выглядят при каждом варианте взаимодействия с пользователем.</p>
28
<p>Создаём кнопки для целевых и второстепенных действий, формы заполнения, выпадающие списки. Важные кнопки делаем заметнее, а для второстепенных оставляем более нейтральный вид.</p>
28
<p>Создаём кнопки для целевых и второстепенных действий, формы заполнения, выпадающие списки. Важные кнопки делаем заметнее, а для второстепенных оставляем более нейтральный вид.</p>
29
<p>Основные элементы взаимодействия на сайте - карточки поликлиники и врача. Они должны помогать пользователю получить нужную информацию и записаться на приём без дополнительных текстовых подсказок.</p>
29
<p>Основные элементы взаимодействия на сайте - карточки поликлиники и врача. Они должны помогать пользователю получить нужную информацию и записаться на приём без дополнительных текстовых подсказок.</p>
30
После разработки этих элементов добавляем в UI-кит чекбоксы и ссылки<p>После завершения работы над элементами следующим этапом была разработка страниц интерфейса.</p>
30
После разработки этих элементов добавляем в UI-кит чекбоксы и ссылки<p>После завершения работы над элементами следующим этапом была разработка страниц интерфейса.</p>
31
<p>Здесь может понадобиться дополнительный цвет или ещё один вид кнопки. Важно понять необходимость этого и учитывать затраты на внедрение при разработке.</p>
31
<p>Здесь может понадобиться дополнительный цвет или ещё один вид кнопки. Важно понять необходимость этого и учитывать затраты на внедрение при разработке.</p>
32
<p>Кстати, если вы работаете в Figma, то есть лайфхак по быстрому редактированию элементов интерфейса с помощью UI-кита.</p>
32
<p>Кстати, если вы работаете в Figma, то есть лайфхак по быстрому редактированию элементов интерфейса с помощью UI-кита.</p>
33
<p><strong> ЛАЙФХАК</strong></p>
33
<p><strong> ЛАЙФХАК</strong></p>
34
<p><em>Если элементы интерфейса из UI-кита поместить в компоненты, можно изменять сразу все, редактируя только родительский. Изменения автоматически распространяются на все дочерние элементы в макетах рабочего проекта.</em></p>
34
<p><em>Если элементы интерфейса из UI-кита поместить в компоненты, можно изменять сразу все, редактируя только родительский. Изменения автоматически распространяются на все дочерние элементы в макетах рабочего проекта.</em></p>
35
<p>Готовый UI-кит вместе с макетами отдаем frontend-разработчикам. Для сервиса "Врач42" весь UI-кит выглядит вот так:</p>
35
<p>Готовый UI-кит вместе с макетами отдаем frontend-разработчикам. Для сервиса "Врач42" весь UI-кит выглядит вот так:</p>
36
<p>Чтобы разработчикам было удобнее разобраться в свойствах элементов и правилах их использования, делаем текстовые пояснения к каждому состоянию элементов.</p>
36
<p>Чтобы разработчикам было удобнее разобраться в свойствах элементов и правилах их использования, делаем текстовые пояснения к каждому состоянию элементов.</p>
37
<p>Цвета подписываем кодом для СSS, который имеет 6 латинских знаков. Для кнопок, форм, меню, полей ввода расписываем состояния и указываем, в каком случае и какие использовать.</p>
37
<p>Цвета подписываем кодом для СSS, который имеет 6 латинских знаков. Для кнопок, форм, меню, полей ввода расписываем состояния и указываем, в каком случае и какие использовать.</p>
38
<p>Например, для кнопки в спокойном состоянии нужен непрозрачный цвет, при клике мышкой сначала добавляется прозрачность, а затем кнопка меняет цвет на более насыщенный.</p>
38
<p>Например, для кнопки в спокойном состоянии нужен непрозрачный цвет, при клике мышкой сначала добавляется прозрачность, а затем кнопка меняет цвет на более насыщенный.</p>
39
<p>Можно использовать два подхода:</p>
39
<p>Можно использовать два подхода:</p>
40
<ul><li>Отрисовываем элементы и дополняем UI-кит по ходу работы над макетами. Тогда frontend-разработчики смогут приступить к своей работе после дизайна.</li>
40
<ul><li>Отрисовываем элементы и дополняем UI-кит по ходу работы над макетами. Тогда frontend-разработчики смогут приступить к своей работе после дизайна.</li>
41
<li>Или как делал я в приведённом примере: в первую очередь готовим UI-кит со всеми необходимыми элементами и их состояниями. После чего собираем макеты, а разработчики параллельно готовят дизайн-систему.</li>
41
<li>Или как делал я в приведённом примере: в первую очередь готовим UI-кит со всеми необходимыми элементами и их состояниями. После чего собираем макеты, а разработчики параллельно готовят дизайн-систему.</li>
42
</ul><p>Выбор подхода зависит от ресурсов и задач проекта. В случаях, когда разработчики присоединяются к проекту не сразу, подойдёт первый вариант. Если сроки сжатые, лучше привлекать разработчиков сразу, а создавать дизайн и готовить дизайн-систему параллельно.</p>
42
</ul><p>Выбор подхода зависит от ресурсов и задач проекта. В случаях, когда разработчики присоединяются к проекту не сразу, подойдёт первый вариант. Если сроки сжатые, лучше привлекать разработчиков сразу, а создавать дизайн и готовить дизайн-систему параллельно.</p>
43
<a><b>Попробуйте бесплатно 4 топовые профессии в дизайне</b>Пройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>
43
<a><b>Попробуйте бесплатно 4 топовые профессии в дизайне</b>Пройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>