Разбор задач квалификации: Design

Сегодня мы разберём вопросы, в которых участники допустили больше всего ошибок в квалификационном раунде трека Design VK Cup. Список всех задач можно посмотреть на сайте Codeforces.

Выбрать аккуратную вёрстку (C10)

Какой интерфейс более аккуратный?

Правильный ответ — А. У второго интерфейса сильно разлетелись блоки и нарушено правило внутреннего и внешнего. Иконку, заголовок и подпись нужно объединить в одну группу, а кнопку поставить после.

Разобраться с модальностью (D3)

Какое сообщение об ошибке лучше?

Правильный ответ — Б. Оба интерфейса имеют право на жизнь, и нельзя сказать, что модальные окна — это плохо. Но в данном случае нет причин прерывать взаимодействие с интерфейсом с помощью модальности: можно заблокировать кнопку и показать сообщение в поле.

Блокирующее модальное окно лучше использовать, когда нужно экстренно уведомить пользователя о чём-то. Например, если в процессе выполнения транзакции произошла ошибка.

Найти информацию про цветовые модели (A9)

Какая цветовая модель отображает информацию о цвете в более удобной человеку форме? Варианты: RGB, HSB (HSV), HEX, CMYK.

Цвет, представленный в модели HSB, выглядит как набор чисел Hue, Saturation и Brightness. С помощью этих параметров легко подбирать оттенки и дополнительные цвета. У остальных моделей цвет представлен в виде более абстрактных чисел, менее понятных человеку.

Подумать про сложность (B4)

Что нужно делать, чтобы сократить бессмысленную трату времени команды продукта? Можно выбрать несколько вариантов:

• проверять небольшие гипотезы;
• переиспользовать компоненты интерфейса;
• использовать «трендовый» визуальный стиль;
• брать в разработку все идеи, которые вам нравятся.

Если брать в работу все идеи, которые вам нравятся, и не проверять, нужны ли они пользователям — легко загрузить команду бесполезными задачами.

Использование «трендового» дизайна так же вряд ли поможет сэкономить время. А переиспользование уже разработанных компонентов позволяет не писать новые с нуля.

Почитать про виды шрифтов (A7)

Графичные гарнитуры, которые плохо чувствуют себя в основном наборе, но хорошо подходят для заголовков:

• акцидентные гарнитуры;
• моноширинные гарнитуры;
• гротески;
• антиквы.

Гарнитуры делятся на множество различных видов по параметрам шрифта: наличию засечек, стилю, предназначению, степени читаемости. Акцидентные гарнитуры — очень графичные и выразительные, но почти всегда им нужен большой кегль, чтобы они хорошо выглядели и читались. Поэтому их чаще используют в заголовках, а в основном тексте применяют более спокойные шрифты.

Оценить вёрстку (C1)

Какой интерфейс аккуратнее?

Правильный ответ — А. Здесь нет устоявшихся правил, но интерфейс слева выглядит аккуратнее, кнопка выровнена по вертикальной направляющей, а таймкод не скачет.

Подумать про реальный мир (D2)

Какая кривая анимации более естественная для появления модального окна?

Правильный ответ — Б. Хорошая анимация должна быть естественной. Когда дизайнер оживляет интерфейс с помощью анимации, он приближает его к реальному миру, потому что в реальности объекты изменяют состояние постепенно, а не моментально.

На левом графике показана линейная анимация: объект движется без ускорения. В реальном мире объекты движутся с ускорением, плавно или резко, поэтому для появления модального окна лучше использовать нелинейную кривую.