Вы находитесь на странице: 1из 35

Типичные ошибки UI

Нарушение правила
близости
Близость
Объекты, которые расположенные ближе друг к другу
чем остальные, воспринимаются как взаимосвязанные

Круто! Мы — группа! Эээ!


Огромный
Большой
Средний
Малый
Правило внутреннего и внешнего
Правило внутреннего и внешнего
Правило внутреннего и внешнего
Правило внутреннего и внешнего
Правило внутреннего и внешнего
Правило внутреннего и внешнего
Правило внутреннего и внешнего
Правило внутреннего и внешнего
Ошибки

использования цвета
Низкая контрастность
Грязь (частный случай низкой контрастности)
Слабая акцентированность
Шумный, отвлекающий фон
Слишком много цветов
Ошибки типографики
Нет привязки к базовой линии
Нет привязки к базовой линии (не у шрифта тоже)
Неверно подобранный кегль
Малый размер
Одно/«мильён» начертаний на макете
Отсуствующая/сложная/слабая иерархиия
Другие ошибки UI
Разный стиль иконок
1) Иконки без явной метафоры

2) Слабоотличимые между собой иконки

3) Чрезмерно детализированные иконки


Неуверенные скругления углов
Полностью «текстовый» интерфейс
Нет последовательности в визуальном стиле
Нет последовательности в визуальном стиле
Неуверенная выключка
Бонус

Пропорции кнопки
Размер кнопки должен быть не меньше 44pt / 48 dp 

(для мобильных приложений)

Отступы сверху и снизу должны примерно равняться размеру кегля


надписи на кнопке. 

Пример: 16pt текст, высота кнопки 16pt * 3 = 48 pt

Отступы по краям примерно равны высоте кегля умноженной на 1.5-2 



Пример: 16pt * 2 = 32 pt — отступ с одного края кнопки

Кнопка
Домашнее задание
Исправить ошибки в UI своего проекта

Вам также может понравиться