Илья Бирман

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

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

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

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

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

Илья Бир­ман

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

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

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

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

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

УДК 655.262
ББК 85.15

Оглавление

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

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

УДК 655.262
ББК 85.15

Оглавление

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

Раз­бе­рём след­ствия закона Фиттса.

Мелко

Достаточно

Опасно

Размеры и отступы объектов

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

Тег <button> по умолчанию делает кнопки «обтягивающими». Больший размер нужно прописать вручную

 

Хорошо отде­лять допол­ни­тель­ным рас­сто­я­нием опас­ные кнопки и ссылки, иначе будет слиш­ком легко попасть не в ту.

Раз­бе­рём след­ствия закона Фиттса.

Мелко

Достаточно

Размеры и отступы объектов

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

Тег <button> по умолчанию делает кнопки «обтягивающими». Больший размер нужно прописать вручную

Опасно

Хорошо отде­лять допол­ни­тель­ным рас­сто­я­нием опас­ные кнопки и ссылки, иначе будет слиш­ком легко попасть не в ту.

  • Перевод из кошелька

  • Предоплаченные
    пластиковые карты

  • Наличный перевод

  • Зачисление из других
    платёжных систем

  • Наличный платёж
    через терминал

Когда ссылки в списке не отде­лены рас­сто­я­нием, легко слу­чайно про­мах­нуться. Кроме того, спи­сок трудно читать.

Если рас­сто­я­ния уве­ли­чить сверх стан­дарт­ного интер­ли­ньяжа, реша­ются обе проблемы.

  • Перевод из кошелька

  • Предоплаченные
    пластиковые карты

  • Наличный перевод

  • Зачисление из других
    платёжных систем

  • Наличный платёж
    через терминал

Когда ссылки в списке не отде­лены рас­сто­я­нием, легко слу­чайно про­мах­нуться. Кроме того, спи­сок трудно читать.

Если рас­сто­я­ния уве­ли­чить сверх стан­дарт­ного интер­ли­ньяжа, реша­ются обе проблемы.

Размеры нажимаемых областей

Ино­гда жела­ние уве­ли­чить эле­мент всту­пает в про­ти­во­ре­чие с тре­бо­ва­нием занять им как можно меньше места на экране. Тогда доста­точно уве­ли­чить не сам объ­ект, а лишь область нажатия.

Чёр­ные точки 1 2 3 необ­хо­димо было сде­лать неболь­шими, чтобы они не закры­вали собой схему тор­го­вого цен­тра. Но их обла­сти нажа­тия больше и сораз­мерны пальцу:

Интерфейс электронного киоска в торговом центре «Мега», Москва

Интерфейс электронного киоска в торговом центре «Мега», Москва

Размеры нажимаемых областей

Ино­гда жела­ние уве­ли­чить эле­мент всту­пает в про­ти­во­ре­чие с тре­бо­ва­нием занять им как можно меньше места на экране. Тогда доста­точно уве­ли­чить не сам объ­ект, а лишь область нажатия.

Чёр­ные точки 1 2 3 необ­хо­димо было сде­лать неболь­шими, чтобы они не закры­вали собой схему тор­го­вого цен­тра. Но их обла­сти нажа­тия больше и сораз­мерны пальцу:

Плохо

Хорошо

Плохо

Хорошо

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

На сай­тах при­хо­дится отдельно забо­титься о том, чтобы нажи­ма­лась под­пись к радиокнопке или чек­боксу, а не только они сами.

Плохо

Хорошо

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

Плохо

Хорошо

На сай­тах при­хо­дится отдельно забо­титься о том, чтобы нажи­ма­лась под­пись к радиокнопке или чек­боксу, а не только они сами.

Айфон уве­ли­чи­вает обла­сти нажа­тия ссы­лок в бра­у­зере. Если открыть неадап­ти­ро­ван­ную к мобиль­ному экрану стра­ницу, нажа­тие мик­ро­ско­пи­че­ской ссылки среди тек­ста рабо­тает безотказно.

Даже если несколько мел­ких ссы­лок ока­зы­ва­ются рядом, чаще всего уда­ётся попасть в нуж­ную с пер­вого раза. По всей види­мо­сти, обла­сти нажа­тия сме­ща­ются так, чтобы быть сораз­мер­ными пальцу и не пересекаться.

Айфон уве­ли­чи­вает обла­сти нажа­тия ссы­лок в бра­у­зере. Если открыть неадап­ти­ро­ван­ную к мобиль­ному экрану стра­ницу, нажа­тие мик­ро­ско­пи­че­ской ссылки среди тек­ста рабо­тает безотказно.

Даже если несколько мел­ких ссы­лок ока­зы­ва­ются рядом, чаще всего уда­ётся попасть в нуж­ную с пер­вого раза. По всей види­мо­сти, обла­сти нажа­тия сме­ща­ются так, чтобы быть сораз­мер­ными пальцу и не пересекаться.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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