Позвоните нам +372 52 50 146
Корзина 1 Konstantin K.

ALVADI client web

Client UI Kit

Инвентаризация устойчивых UI- и UX-паттернов клиентского сценария возвратов.

01

Foundations

Типографика, цвета, геометрия и базовая сетка.

Типографика

Шрифт: системный шрифт интерфейса.

-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Arial, sans-serif

Как читать параметры: размер шрифта / высота строки / насыщенность. Например, 32 / 40 / 700 означает размер 32 px, высоту строки 40 px и жирное начертание 700.

Размер 32 pxСтрока 40 pxНасыщенность 700 Bold Заявка на возврат
Размер 24 pxСтрока 30 pxНасыщенность 700 Bold Возврат средств
Размер 20 pxСтрока 28 pxНасыщенность 700 Bold Запчасти в заявке
Размер 16 pxСтрока 24 pxНасыщенность 400 Regular Основной текст интерфейса и значения полей.
Размер 14 pxСтрока 20 pxНасыщенность 400 Regular Вспомогательный текст, подписи и ошибки.

Цвета

Primary#0E75D0
Primary dark#0D61AB
Text#333333
Secondary#737373
Page#EBEFF2
Canvas#F6F8FA
Surface#FFFFFF
Danger#D70A0A

Ссылки

В клиентском сценарии используем два основных текстовых паттерна: ссылка без подчеркивания, которая получает underline по hover/focus, и dotted inline link, который на hover/focus становится solid. Для опасных вторичных действий есть отдельный contextual-вариант.

Primary text link
DefaultЗабыли пароль? Hover / focusЗабыли пароль?
#0D61AB, no underline → #0E75D0 + underline

Для входа, регистрации, edit-ссылок и compact link-buttons вроде “Подробнее”.

Dotted inline link
DefaultПросмотреть Hover / focusПросмотреть
border-bottom: 1px dotted currentColor → solid

Для коротких inline-ссылок рядом со значением, например просмотр суммы возврата на шаге проверки.

Contextual danger link
DefaultУдалить заявку Hover / focusУдалить заявку
#5A7299, no underline → #D70A0A + underline

Для вторичных разрушительных действий, которые не должны выглядеть как primary danger button.

4 pxБазовая сетка
2–4 pxКонтролы и карточки
999 pxКнопки и бейджи
44 pxМинимальная высота действия

02

Icons

Иконки клиентской части, подключенные через CSS-классы.
Source: Remix Icon Используем Remix Icon, бесплатный набор SVG-иконок. SVG подключаются из CDN и окрашиваются через currentColor, поэтому иконка наследует цвет текста или кнопки. https://cdn.jsdelivr.net/npm/[email protected]/icons/...

Client shell

Search.client-icon--searchSystem / search-line
Dropdown.client-icon--arrow-drop-downArrows / arrow-drop-down-fill
Phone.client-icon--phoneDevice / phone-fill
Cart.client-icon--cartFinance / shopping-cart-2-fill
User.client-icon--userUser & Faces / user-3-fill
Home.client-icon--homeBuildings / home-line
Breadcrumb.client-icon--breadcrumb-arrowArrows / arrow-right-s-line
Lock.client-icon--lockSystem / lock-line
Edit.client-icon--pencilDesign / pencil-fill
Close.client-icon--closeSystem / close-line

UI kit controls

Add.ui-kit-icon--addSystem / add-large-line
Trash.ui-kit-icon--trashSystem / delete-bin-line
Eye.ui-kit-icon--eyeSystem / eye-line
File.ui-kit-icon--fileDocument / file-text-line
Info.ui-kit-icon--infoSystem / information-2-line
Invoice.ui-kit-icon--invoiceDocument / file-list-2-line
Chevron.ui-kit-icon--chevron-downArrows / arrow-down-s-line
Action arrow.icn-btn__icon svgArrows / arrow-right-line

Feedback and dialogs

Error warning.client-required-error-iconSystem / error-warning-line
Dialog close.client-dialog-close-iconSystem / close-large-line

03

Actions

Команды, ссылки и их визуальная иерархия.
Удалить заявку

05

Statuses

Состояния процесса, запчасти и системная обратная связь.
Необработан Не подана Проблема с данными Ждём товар Одобрен Экспертиза Отклонён Кредитовый счет создан Отменен
Интерактивный статус запчасти

06

Forms

Поля, выбор, ошибки, подсказки и составные контролы.
Способ возврата

07

Attachments

Пустые и заполненные состояния фото и документов.

Пустое состояние

Фото

JPG, PNG до 10 MB

Пустое состояние

Документы

PDF, DOC, DOCX до 10 MB

Заполненное состояние

Фото
Фото упаковки запчасти Фото запчасти в коробке Фото установленной запчасти

JPG, PNG до 10 MB

Заполненное состояние

Документы
Return_statement.pdf Delivery_notification.doc

PDF, DOC, DOCX до 10 MB

08

UX patterns

Составные блоки, состояния чтения и обратная связь.

Сведения о заявке

Заявка
267582RR613706
Статус
Не подана
Заказ
613706
Удалить заявку

Запчасть

Castrol Edge FST 5w-30 5L
Castrol Edge FST 5w-30 5L (AL11143264)

57.93 EUR

Готово

Причина возврата: Дефект, обнаруженный после установки

Неисправность проявилась после установки запчасти и проверки в эксплуатации.

Изменить

Read-only данные

Комментарий
После установки появился посторонний шум и ошибка в работе узла.
VIN код
WP1ZZZ92ZCLA42629
Пробег
215981 км
Чтобы создать заявку на возврат, войдите в аккаунт или зарегистрируйтесь.
270594CR6245744 Кредитовый счет создан
Отправьте товары в ALVADI
ESTONIA, TALLINN
Приложите документы из заявки и укажите номер возврата на упаковке.
Краткая контекстная подсказка без смены экрана.