Не так давно я читал о протоколе Wayland и мне врезалась в память эта фраза:
Заявленная цель Wayland — «каждый кадр идеален».
Я считаю, что к этой цели должны стремиться мы все. В Wayland говорилось о технической стороне дела (современные стеки GPU очень сложные, а Wayland пытается вернуть себе контроль), но этот принцип можно применить и к UI.
Эмпирическое правило таково:
Если сделать скриншот приложения в любой момент времени, должно быть понятно, что на нём происходит
Дополнение: раньше оно заканчивалось «..., должно иметь смысл», но в таком случае не учитываются сложные техники анимации, например, размазанные кадры и тому подобное.
Почему нам важен каждый кадр? Потому что это нарабатывает доверие. Пользователи не могут увидеть код, поэтому судить о качестве приложения могут судить только по UI. Если UI хорош, значит, у разработчиков было время на его совершенствование, а значит, они, вероятно, потратили сравнимое количество времени на отладку кода. Это эвристика, но вполне разумная.
Что же это проявляется на практике? Могу привести несколько примеров:
Отсутствие белых вспышек между экранами.
Отсутствие частично загруженного контента.
Структура не меняется при загрузке контента.
Внутренняя согласованность. Если в одной части UI написано «Доступно 1 обновление», то в другой не должно быть написано «Проверяем наличие обновлений...»
Чёткие анимации.
Об анимациях часто забывают. UI может выглядеть в начальном и конечном состояниях, но грязным между ними. Например, так:
Наверно, вы заметили нечто странное. Давайте замедлимся, чтобы рассмотреть внимательнее:
Теперь применим наше правило и сделаем скриншоты посередине анимации. Выглядит это неправильно:
И это тоже:
Оба эти кадра неидеальны.
Давайте рассмотрим ещё один пример, Safari:
Тест здесь перемещается из центра, а курсор анимируется из позиции слева:
Это ни в коем случае не конец света, но создаёт ощущение, что два компонента не синхронизированы друг с другом. Поэтому возникает такая мысль: может, они и не проектировались вместе? Если так, возможно, они плохо будут взаимодействовать друг с другом. И так мы теряем доверие пользователя.
Такая рассинхронизация может сильно сбивать с толку. Например, в Photos при переключении между режимами Crop и Adjust изображение меняется мгновенно, но граница кадрирования анимирована:
Это создаёт ложное впечатление, что при переключении между режимами что-то немного меняется. А я не люблю, когда UI создаёт у меня ложные впечатления. Мне нужен точный инструмент, а не анимированная игрушка.
Иногда анимации предназначены для того, чтобы пользователь лучше понял переход, поэтому вдвойне печальнее, когда они, наоборот, усложняют понимание. Посмотрите на лупу:
То же самое и с Youtube. У дизайнеров была самая простая задача в мире: переместить прямоугольник из одной позиции в другую! Однако они решили сделать нечто очень странное:
Можете это объяснить? Есть ли в этом смысл?
Вероятно, это было техническое ограничение архитектуры DOM, которую выбрали ранее. Я называю такие ситуации «технология перехитрила программиста». Но какой бы ни была причина, в результате получился неидеальный кадр.
Иногда анимации вставляют необдуманно. Пусть происходит то, что происходит. В результате получаем вот это:
Наблюдать за подробностями очень любопытно:
Поэтому вот что: внимательно обращайтесь не только с начальным и конечным состояниями, но и со всем, что между ними. Важен каждый кадр.
А закончу я анимацией зума в приложении Preview. Будьте внимательны к своему UI!