Илья Бир­ман

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

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

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

 
между важными местами
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

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

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

Спи­сок при­ни­ма­е­мых карт тоже оформ­лен как одно из полей; имя с фами­лией раз­де­лены — это тоже удли­няет форму зря. Кнопка отмены не нужна — кто пере­ду­мает поку­пать билет, про­сто уйдёт.

О группировке полей:

  • Близость 95

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

Список принимаемых карт тоже оформлен как одно из полей; имя с фамилией разделены — это тоже удлиняет форму зря. Кнопка отмены не нужна — кто передумает покупать билет, просто уйдёт.

О группировке полей:

  • Близость 95

Хорошо

Плохо

Плохо

Хорошо

Хорошо

Под­пись и текст полей наби­рают одним шриф­том и ста­вят на общую базо­вую линию.

Длин­ная под­пись может пере­не­стись на две строки. Бывает, что она спол­зает вверх и вырав­ни­ва­ется вер­ти­кально с сере­ди­ной поля. Когда строк две, про­блемы можно не заме­тить, решив, что под­пись «как раз» срав­ня­лась по высоте с полем.

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

Пер­вая строка подпи­си должна все­гда оста­ваться на месте.

Тот же прин­цип с мно­го­строч­ными полями: под­пись стоит на базо­вой линии с пер­вой строкой.

Хорошо

Плохо

Плохо

Хорошо

Хорошо

Подпись и текст полей набирают одним шрифтом и ставят на общую базовую линию.

Длинная подпись может перенестись на две строки. Бывает, что она сползает вверх и выравнивается вертикально с серединой поля. Когда строк две, проблемы можно не заметить, решив, что подпись «как раз» сравнялась по высоте с полем.

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

Первая строка подписи должна всегда оставаться на месте.

Тот же принцип с многострочными полями: подпись стоит на базовой линии с первой строкой.

Криво

Ровно

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

Эта форма имеет вид таб­лицы, поэтому подпи­си есте­ственно вырав­ни­вать как боко­вик таб­лицы — по левому краю.

  • Близость 86

Криво

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

Ровно

Эта форма имеет вид таблицы, поэтому подписи естественно выравнивать как боковик таблицы — по левому краю.

  • Близость 86

Если длин­ная под­пись поля «рас­пи­рает» форму, ото­дви­гая осталь­ные подпи­си от полей, то её стоит пере­не­сти или сократить.

Если длинная подпись поля «распирает» форму, отодвигая остальные подписи от полей, то её стоит перенести или сократить.

Если нет места на две колонки, подпи­си полей допу­стимо рас­по­ло­жить над полями. Но на широ­ких экра­нах лучше при­дер­жи­ваться «таб­лич­ной» ком­по­новки — с ней место рас­хо­ду­ется более равномерно.

Форма в движке блога «Эгея» на большом экране и на экране телефона

Форма в движке блога «Эгея» на большом экране и на экране телефона

Если нет места на две колонки, подписи полей допустимо расположить над полями. Но на широких экранах лучше придерживаться «табличной» компоновки — с ней место расходуется более равномерно.

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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