Разработка UX/UI дизайна криптокошелька
Дизайн криптокошелька — специфическая дисциплина на пересечении финтех UX и Web3. Пользователи одновременно боятся потерять деньги из-за ошибки и хотят быстро совершать операции. Хороший дизайн снижает когнитивную нагрузку, предотвращает дорогостоящие ошибки и строит доверие.
Ключевые UX-паттерны
Адреса и их отображение
Ethereum адрес — 42 символа hex. Пользователь не читает их, он сравнивает первые 4 и последние 4 символа. Дизайн должен это учитывать:
- Всегда показывать checksum адрес (EIP-55 mixed case) — снижает риск typosquatting
- Визуальный blockie/jazzicon рядом с адресом — быстрая идентификация
- Кнопка копирования с feedback (checkmark на 2 секунды)
- При отображении в тексте —
0x1234...5678формат (никогда не обрезать в начале) - QR-код для адреса получения — обязателен
Address book. Пользователи часто отправляют на одни и те же адреса. Сохранённые контакты с именами и аватарами кардинально снижают ошибки. Верификация адреса при добавлении (предложить отправить тестовую транзакцию на малую сумму).
Подтверждение транзакций
Экран подтверждения — самый критичный в кошельке. Пользователь должен понять что происходит без знания технических деталей:
- Получатель: имя из адресной книги или ENS, или адрес с иконкой верификации
- Сумма: в токенах И в USD (обновляется в реальном времени)
- Gas fee: в USD, не в gwei. «Комиссия: $2.40» вместо «Gas: 21000 @ 85 gwei»
- Total: сумма + fee
- Время подтверждения: «~15 секунд» или «~5 минут» (исходя из газ-цены)
- Warning для контрактных транзакций: объяснение что делает вызов
⚠️ Взаимодействие с контрактом
Contract: Uniswap V3 Router (verified ✓)
Action: Swap 1 ETH → USDC
Min received: 3,412 USDC
Slippage: 0.5%
Fee: $3.20
Gas и fee management
Большинство пользователей не понимают gas. Три режима:
- Slow (базовая цена): дёшево, медленно
- Normal (рекомендовано): хороший баланс
- Fast (приоритет): быстрое включение в блок
Для опытных — кастомный режим с полями maxFeePerGas и maxPriorityFeePerGas.
Gas estimation должен происходить автоматически и обновляться каждые 10-15 секунд. Показывать пользователю если цена резко выросла между его открытием формы и отправкой.
Онбординг и создание кошелька
Создание seed phrase — самый стрессовый момент для новичков. Паттерны снижения тревоги:
- Объяснение до показа. «Мы покажем вам 12 слов. Это ваш главный ключ. Запишите их в правильном порядке.»
- Показывать по одному или по 4. Не все 12 сразу — это подавляет.
- Тест после записи. Попросить ввести несколько слов в произвольном порядке — подтверждает что пользователь записал.
- Объяснить что НЕ делать. Не делать скриншот, не хранить в заметках, не отправлять никому.
Для кошельков с embedded wallet (no seed phrase) — онбординг радикально проще: email/Google → готово.
Токены и балансы
Главный экран баланса:
- Общий баланс в USD крупно
- Список токенов с иконками, названием, балансом в токенах и USD
- Изменение за 24ч (% и абсолютное значение) — с цветом (зелёный/красный)
- Скрытие токенов с нулевым балансом (или малым, ниже порога)
- Spam tokens: токены, которые не запрашивались — скрывать по умолчанию
NFT вкладка:
- Grid вид с превью изображений
- Нет изображения = показывать заглушку, не broken image icon
- Lazy loading для коллекций с большим числом токенов
Дизайн для мобильных
50-70% пользователей кошельков — на мобильных. Специфика:
- Все интерактивные элементы минимум 44x44pt (Apple HIG) / 48x48dp (Material)
- Thumb zone: основные действия в нижней части экрана
- Bottom sheet вместо модальных окон
- Haptic feedback для критичных действий (отправка транзакции)
- Face ID / Touch ID для аутентификации вместо пин-кода
Accessibility
- Цветовой контраст: минимум 4.5:1 для обычного текста (WCAG AA)
- Не использовать только цвет как сигнал (красный/зелёный для P&L должен иметь и символ -/+)
- Screen reader совместимость для ключевых флоу
- Размер шрифта: поддержка системного масштабирования
Дизайн-система
Кошелёк требует консистентную дизайн-систему с токенами:
| Элемент | Значение |
|---|---|
| Spacing | 4px grid |
| Radius | 8px стандарт, 16px карточки |
| Font | Inter или SF Pro (системный) |
| Colors | Primary, Destructive, Warning, Success + нейтральные |
| Shadows | Минимальные (flat design лучше для финтех) |
Компоненты: AddressInput (с валидацией + ENS resolution), TokenAmount (с конвертацией), TransactionItem (история), NetworkBadge (иконка + название сети).
Срок дизайна UX/UI для типового кошелька — 3-5 недель. Включает: исследование (2-3 конкурента, user flow mapping), wireframes, высокодетальные макеты в Figma, прототип для user testing, передача в разработку с design tokens.