🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
Представляем книгу Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по пользовательскому интерфейсу. Учебник предназначен для дизайнеров, редакторов, руководителей, разработчиков и всех, кто причастен к созданию продуктов.
Принципы 4
Взаимодействие 86
Язык 213
Экраны 311
Представляем книгу Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по пользовательскому интерфейсу. Учебник предназначен для дизайнеров, редакторов, руководителей, разработчиков и всех, кто причастен к созданию продуктов.
Принципы 4
Взаимодействие 86
Язык 213
Экраны 311
В середине 2000‑х скорости интернета стало хватать для музыки. На сайтах появились виджеты‑автомагнитолы на технологии Флеш. Если плагин Флеша не был установлен у пользователя, на месте плеера была пустота. Эти виджеты выглядели сложно и тяжеловесно, некоторые даже поддерживали плейлисты.
В бюро проектировали музыкальный сервис «Веборама», в том числе — плеер для размещения на других сайтах. Мы начали с чистого листа и радикально упростили дизайн без ущерба для функциональности.
В плеере обязательны название песни и кнопка воспроизведения.
Полезное действие плеера — в получении трафика с сайтов пользователей, поэтому сделаем название песни ссылкой на её страницу.
Важно добавить индикатор положения. Как сделать это, не добавляя новый элемент? У нас уже есть подчёркивание ссылки, используем его.
Во время подгрузки песни на медленном интернете сделаем линию волнистой.
Больше ничего не нужно. Управление громкостью и так всегда было на компьютере. Чтобы получился плейлист, достаточно поставить плееры песен в несколько строк — они заиграют по порядку.
Благодаря компактности и строчному формату появилась возможность вставлять виджет прямо в текст.
Технически виджет был реализован как скрипт, который один раз подключался в любой блог или на сайт и превращал в плееры ссылки на песни «Веборамы». Если у пользователя не было Флеша, ссылки продолжали работать стандартно.
Было
Стало
Стало
Стало
Стало
Стало
Стало
Стало
Было
Стало
Было
Стало
Было
Стало
Было
Стало
Было
Стало
Было
Стало
Было
Стало
В середине 2000‑х скорости интернета стало хватать для музыки. На сайтах появились виджеты‑автомагнитолы на технологии Флеш. Если плагин Флеша не был установлен у пользователя, на месте плеера была пустота. Эти виджеты выглядели сложно и тяжеловесно, некоторые даже поддерживали плейлисты.
В бюро проектировали музыкальный сервис «Веборама», в том числе — плеер для размещения на других сайтах. Мы начали с чистого листа и радикально упростили дизайн без ущерба для функциональности.
В плеере обязательны название песни и кнопка воспроизведения.
Полезное действие плеера — в получении трафика с сайтов пользователей, поэтому сделаем название песни ссылкой на её страницу.
Важно добавить индикатор положения. Как сделать это, не добавляя новый элемент? У нас уже есть подчёркивание ссылки, используем его.
Во время подгрузки песни на медленном интернете сделаем линию волнистой.
Больше ничего не нужно. Управление громкостью и так всегда было на компьютере. Чтобы получился плейлист, достаточно поставить плееры песен в несколько строк — они заиграют по порядку.
Благодаря компактности и строчному формату появилась возможность вставлять виджет прямо в текст.
Технически виджет был реализован как скрипт, который один раз подключался в любой блог или на сайт и превращал в плееры ссылки на песни «Веборамы». Если у пользователя не было Флеша, ссылки продолжали работать стандартно.
Всегда стоит подумать, как наделить новой функцией существующий элемент, а не вводить новый.
В почте Айфона есть функция «вип». Пользователь указывает, чьи письма ему особенно важны, чтобы получать уведомления только о них. Такие письма отображаются со звёздочкой. А ещё у писем бывает отметка непрочитанности — привычный синий шарик. У непрочитанных вип‑писем Айфон вместо двух знаков рисует один — синюю звёздочку.
Кадр презентации «Эпла», 2012
Всегда стоит подумать, как наделить новой функцией существующий элемент, а не вводить новый.
В почте Айфона есть функция «вип». Пользователь указывает, чьи письма ему особенно важны, чтобы получать уведомления только о них. Такие письма отображаются со звёздочкой. А ещё у писем бывает отметка непрочитанности — привычный синий шарик. У непрочитанных вип‑писем Айфон вместо двух знаков рисует один — синюю звёздочку.
Кадр презентации «Эпла», 2012
На Маке кнопка закрытия окна сигнализирует о несохранённости документа точкой внутри. Точка выглядит как препятствие внутри кнопки, и действительно, если нажмёшь, окно не закроется, а система спросит, не сохранить ли документ.
В браузере Сафари были совмещены прогрессбар и адресная строка.
На Маке кнопка закрытия окна сигнализирует о несохранённости документа точкой внутри. Точка выглядит как препятствие внутри кнопки, и действительно, если нажмёшь, окно не закроется, а система спросит, не сохранить ли документ.
В браузере Сафари были совмещены прогрессбар и адресная строка.
Принцип работает и за пределами пользовательского интерфейса.
Плохо
Хорошо
В Екатеринбурге над светофором установлена отдельная секция для обратного отсчёта.
В Челябинске время отсчитывается в уже имеющейся секции красного света.
Принцип работает и за пределами пользовательского интерфейса.
Плохо
В Екатеринбурге над светофором установлена отдельная секция для обратного отсчёта.
Хорошо
В Челябинске время отсчитывается в уже имеющейся секции красного света.
Здесь для указания выхода используется две пиктограммы: «вправо» и «вниз по лестнице». Причём на обеих есть стрелка вправо.
На двери «Коворкафе» стрелка и лестница собраны в один знак, однозначно читающийся как «налево и вниз по лестнице».
Здесь для указания выхода используется две пиктограммы: «вправо» и «вниз по лестнице». Причём на обеих есть стрелка вправо.
На двери «Коворкафе» стрелка и лестница собраны в один знак, однозначно читающийся как «налево и вниз по лестнице».
Бирман Илья Борисович
Пользовательский интерфейс
Арт‑директор и издатель Артём Горбунов
Дизайнер обложки и фотограф
Владимир Колпаков
Иллюстратор Андрей Кокорин
Разработчики Рустам Кулматов
и Василий Половнёв
Метранпаж и тестировщик Сергей Фролов
Помощники Юрий Мазурский
и Александра Шабалдина
Книга набрана шрифтами
«Бюросериф» и «Бюросанс»
Дизайн‑бюро Артёма Горбунова
дом 36, строение 2
Москва, Россия, 127015
Бирман Илья Борисович
Пользовательский интерфейс
Арт‑директор и издатель Артём Горбунов
Дизайнер обложки и фотограф
Владимир Колпаков
Иллюстратор Андрей Кокорин
Разработчики Рустам Кулматов
и Василий Половнёв
Метранпаж и тестировщик Сергей Фролов
Помощники Юрий Мазурский
и Александра Шабалдина
Книга набрана шрифтами
«Бюросериф» и «Бюросанс»
Дизайн‑бюро Артёма Горбунова
дом 36, строение 2
Москва, Россия, 127015