Чем опытный дизайнер отличается от новичка 2 — статика и динамика

Kostya Gorsky
Design & Productivity
2 min readDec 13, 2017

Чем опытный дизайнер отличается от новичка? Тем, что понимает, что интерфейс продукта — это гораздо больше, чем набор статичных состояний.

Новичок думает, что достаточно отрисовать основные экраны. Например, если он работает над дизайном приложения почты, значит рисует 3 основных экрана: список писем, просмотр письма и его написание. И может быть потом доделает еще настройки, профиль пользователя и тому подобное, когда кто-нибудь про это вспомнит. А если наш новичок работает над сайтом, то рисует его основные страницы. Если же клиент захочет больше «диджитала», всегда можно добавить где-нибудь параллакс-эффект при скролле.

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

У взаимодействия с интерфейсом есть своя динамика, темп, ритм, паузы. Есть завязка, развитие темы, кульминация и заключение. Хороший интерфейс — это хорошая история.

  • На самом-самом базовом уровне это значит, что переходы между состояниями хорошо бы сопроводить анимациями.
  • Чуть более высокая планка — учитывать при анимациях физику движения, ускорения и столкновения объектов. (вот неплохие примеры)
  • Ещё чуть более высокая планка — продумать анимации так, чтобы они не просто сглаживали переходы, но и несли в себе смысл, помогали человеку понять структуру приложения, понять, что вообще происходит и почему.
  • Уровень ещё выше — задумываться не только о микровзаимодействиях, не только об анимациях отдельных элементов, но и о сценарии работы с продуктом в целом. Понимать место текущего момента в общей картине. Рассказывать целостную историю.

Когда мы работали над дизайном Яндекс.Браузера, то ввели простое правило: ни один элемент интерфейса не имеет права появиться или исчезнуть на экране просто так. Любое появление или исчезновение чего угодно должно происходить с анимацией, которая объясняет, откуда это «что угодно» появилось или куда исчезло.

Ещё у нас прижилось слово «вздрыжность» — противоположность плавности — ситуация, когда что-то на экране дёрнулось или скакнуло. За тем, чтобы вздрыжности не случалось, следили в команде все, не только дизайнеры.

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

Этот пост был изначально опубликован в Телеграм-канале Design & Productivity.

Оглавление постов и об авторе

--

--