Илья Бир­ман

Пользовательский интерфейс

🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру

Удобно листать не только прокруткой, но и клавишами‑стрелками:

 
между важными местами
Shift
между
разворотами
Илья Бир­ман

Пользовательский интерфейс

Изда­тель­ство Бюро Гор­бу­нова
2017
Илья Бирман

Пользовательский интерфейс

Издательство Бюро Горбунова
2017
удк 655.262
ббк 85.15
Б64
Бир­ман И. Б.
Б64
Поль­зо­ва­тель­ский интер­фейс. —
М.: Изд‑во Бюро Гор­бу­нова, 2017
ISBN 978‑5‑9907024‑1‑7

Пред­став­ляем книгу Изда­тель­ства Дизайн‑бюро Артёма Гор­бу­нова — прак­ти­че­ское руко­вод­ство по поль­зо­ва­тель­скому интер­фейсу. Учеб­ник пред­на­зна­чен для дизай­не­ров, редак­то­ров, руко­во­ди­те­лей, раз­ра­бот­чи­ков и всех, кто при­ча­стен к созда­нию продуктов.

УДК 655.262
ББК 85.15
ISBN 978‑5‑9907024‑1‑7
© Изда­тель­ство
Бюро Гор­бу­нова, 2017

Оглавление

    Принципы 4

    Взаимодействие 86

    Язык 213

    Экраны 311

удк 655.262
ббк 85.15
Б64
Б64
Бирман И. Б.
Пользовательский интерфейс. —
М.: Изд‑во Бюро Горбунова, 2017
ISBN 978‑5‑9907024‑1‑7

Представляем книгу Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по пользовательскому интерфейсу. Учебник предназначен для дизайнеров, редакторов, руководителей, разработчиков и всех, кто причастен к созданию продуктов.

УДК 655.262
ББК 85.15
ISBN 978‑5‑9907024‑1‑7
© Издательство
Бюро Горбунова, 2017

Оглавление

    Принципы 4

    Взаимодействие 86

    Язык 213

    Экраны 311

Скрыто 105 разворотов

В дизайне теле­фон­ной книжки Айфона есть проблема.

Плохо

Лучше

Фей­стайм — функ­ция звон­ков через интер­нет. В строке справа две мел­ких иконки: камера озна­чает видео­зво­нок, а трубка — голо­со­вой. Нажа­тие во всю осталь­ную строку тоже озна­чает видео­зво­нок как функ­цию по умолчанию.

К сожа­ле­нию, если нажать в пра­вый край строки, нач­нётся видео­зво­нок, потому что область нажа­тия трубки огра­ни­чена раз­ме­рами иконки. Лучше рас­ши­рить область на всю пра­вую часть строки.

В дизайне телефонной книжки Айфона есть проблема.

Плохо

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

Лучше

К сожалению, если нажать в правый край строки, начнётся видеозвонок, потому что область нажатия трубки ограничена размерами иконки. Лучше расширить область на всю правую часть строки.

Точка под курсором мыши

Это самая быст­ро­до­ступ­ная точка на экране, ведь рас­сто­я­ние до неё равно нулю. Именно в ней появ­ля­ется всплы­ва­ю­щее меню.

В хорошо орга­ни­зо­ван­ном всплы­ва­ю­щем меню самое важ­ное идёт сверху. В Вин­до­усе пер­вый пункт ока­зы­ва­ется прямо под кур­со­ром — Фиттс дово­лен. На Маке для попа­да­ния в пер­вый пункт при­хо­дится немного сдви­нуть кур­сор — уже не так хорошо.

В про­грам­мах трёх­мер­ного моде­ли­ро­ва­ния попу­лярны «грозди»: несколько меню появ­ля­ются с раз­ных сто­рон от кур­сора. Идея в том, чтобы мак­си­мально близко к кур­сору ока­за­лось побольше полез­ных функций.

Контекстное меню на Маке

Такие меню не прижились за пределами мира 3Д

Контекстное меню на Маке

Такие меню не прижились за пределами мира 3Д

Точка под курсором мыши

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

В хорошо организованном всплывающем меню самое важное идёт сверху. В Виндоусе первый пункт оказывается прямо под курсором — Фиттс доволен. На Маке для попадания в первый пункт приходится немного сдвинуть курсор — уже не так хорошо.

В программах трёхмерного моделирования популярны «грозди»: несколько меню появляются с разных сторон от курсора. Идея в том, чтобы максимально близко к курсору оказалось побольше полезных функций.

Углы экрана

Все пик­сели на экране одного раз­мера. Но когда кур­сор достиг угла, дви­же­ние мыши можно про­дол­жать, пока она не упа­дёт со стола — кур­сор будет пока­зы­вать в ту же точку. Поэтому для кур­сора раз­меры углов бес­ко­нечны: чтобы попасть, доста­точно реши­тельно дви­нуть мышь в нуж­ную сто­рону и нажать кнопку.

Попро­буйте попасть кур­со­ром в кру­жок в цен­тре, а потом — в любой из углов, и оце­ните, насколько это легче.

Углы экрана — сле­ду­ю­щие по лёг­ко­сти попа­да­ния точки после точки под кур­со­ром мыши.

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

Кружок имитирует поведение курсора мыши и не выходит за пределы экрана. Попробуйте на компьютере с мышью и с книгой на весь экран

Углы экрана

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

Попробуйте попасть курсором в кружок в центре, а потом — в любой из углов, и оцените, насколько это легче.

Углы экрана — следующие по лёгкости попадания точки после точки под курсором мыши.

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

Кружок имитирует поведение курсора мыши и не выходит за пределы экрана. Попробуйте на компьютере с мышью и с книгой на весь экран

В Вин­до­усе 95 кнопка «Пуск» отсто­яла на один пик­сель от левого ниж­него угла, что сильно ослож­няло попа­да­ние в неё.

В одной из сле­ду­ю­щих вер­сий про­блему испра­вили, «забив» кнопку в самый угол. А вот кнопка закры­тия раз­вёр­ну­того на весь экран окна все­гда нахо­ди­лась в пра­вом верх­нем углу, и поль­зо­ва­тели Вин­до­уса знают, как легко в неё попасть.

На Маке настра­и­ва­ется функ­ция «Горя­чие углы». Наве­де­ние на углы экрана даже без клика вызы­вает выбран­ную команду.

В Виндоусе 95 кнопка «Пуск» отстояла на один пиксель от левого нижнего угла, что сильно осложняло попадание в неё.

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

На Маке настраивается функция «Горячие углы». Наведение на углы экрана даже без клика вызывает выбранную команду.

Стороны экрана

Сле­ду­ю­щие по лёг­ко­сти попа­да­ния после углов экрана — его сто­роны. Объ­екты, при­жа­тые к краю, имеют бес­ко­неч­ный раз­мер в направ­ле­нии за гра­ницу экрана.

Меню на Маке закреп­лено наверху экрана неза­ви­симо от поло­же­ния окна теку­щего при­ло­же­ния. Попа­дать в него гораздо легче, чем в меню про­грамм Вин­до­уса внутри отдель­ных окон.

В Вин­до­усе Икс‑Пи была хоро­шая панель задач. Кнопки про­грамм были боль­шой ширины и при­жаты к низу экрана. Бла­го­даря над­пи­сям, кнопки были инфор­ма­тив­нее — об этом подроб­нее в главе «Информативность».


К сожа­ле­нию, после Вин­до­уса 7 кнопки на панели задач стали малень­кими, как в маков­ском доке.

Раз­вёр­ну­тое на весь экран окно Ворда или дру­гой про­граммы при­жи­ма­лось поло­сой про­крутки к пра­вому краю, чтобы в неё было легче попасть. А когда появи­лась мышь с коле­сом про­крутки, необ­хо­ди­мость целиться и вовсе отпала.

Информативность 

Стороны экрана

Следующие по лёгкости попадания после углов экрана — его стороны. Объекты, прижатые к краю, имеют бесконечный размер в направлении за границу экрана.

Меню на Маке закреплено наверху экрана независимо от положения окна текущего приложения. Попадать в него гораздо легче, чем в меню программ Виндоуса внутри отдельных окон.

В Виндоусе Икс‑Пи была хорошая панель задач. Кнопки программ были большой ширины и прижаты к низу экрана. Благодаря надписям, кнопки были информативнее — об этом подробнее в главе «Информативность».

К сожалению, после Виндоуса 7 кнопки на панели задач стали маленькими, как в маковском доке.

Развёрнутое на весь экран окно Ворда или другой программы прижималось полосой прокрутки к правому краю, чтобы в неё было легче попасть. А когда появилась мышь с колесом прокрутки, необходимость целиться и вовсе отпала.

Информативность 

Скрыто 306 разворотов

Бир­ман Илья Борисович

Поль­зо­ва­тель­ский интерфейс

  • Арт‑дирек­тор и изда­тель Артём Горбунов

  • Дизай­нер обложки и фото­граф
    Вла­ди­мир Колпаков

  • Иллю­стра­тор Андрей Кокорин

  • Раз­ра­бот­чики Рустам Кул­ма­тов
    и Васи­лий Половнёв

  • Мет­ран­паж и тести­ров­щик Сер­гей Фролов

  • Помощ­ники Юрий Мазур­ский
    и Алек­сандра Шабалдина

  • Книга набрана шриф­тами
    «Бюро­се­риф» и «Бюросанс»

  • Дизайн‑бюро Артёма Гор­бу­нова
    Большая Новодмитровская улица,
    дом 36, стро­е­ние 2
    Москва, Рос­сия, 127015

  • bureau.ru

Бирман Илья Борисович

Пользовательский интерфейс

  • Арт‑директор и издатель Артём Горбунов

  • Дизайнер обложки и фотограф
    Владимир Колпаков

  • Иллюстратор Андрей Кокорин

  • Разработчики Рустам Кулматов
    и Василий Половнёв

  • Метранпаж и тестировщик Сергей Фролов

  • Помощники Юрий Мазурский
    и Александра Шабалдина

  • Книга набрана шрифтами
    «Бюросериф» и «Бюросанс»

  • Дизайн‑бюро Артёма Горбунова
    Большая Новодмитровская улица,
    дом 36, строение 2
    Москва, Россия, 127015

  • bureau.ru

Закладки
Добавьте закладки
Ничего не нашлось