Илья Бир­ман

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

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

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

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

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

Рас­смот­рим сетку видже­тов спра­воч­ных систем «Актиона».

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

Если спе­ци­аль­ного эле­мента снизу нет, в списке на один пункт больше. Если списка нет, в цен­тре может нахо­диться таб­лица или гра­фик. В цен­тре виджета видео­се­ми­на­ров — кадр све­жего видео.

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

Новый виджет «Выс­шей школы глав­буха» отоб­ра­жает успехи в школе и моти­ви­рует учиться дальше. Виджет сер­виса «Отчёты» помо­гает отправ­лять отчёты в госорганы.

Виджет сер­виса «Дого­воры» пока­зы­вает и даёт найти нуж­ный дого­вор. Если каким‑то из сер­ви­сов чело­век не поль­зу­ется, то виджет умеет отоб­ра­жаться в «про­мо­ре­жиме» — про­сто рас­ска­зы­вает о сер­висе и при­гла­шает воспользоваться.

Для рекламы буду­щих про­дук­тов создан шаб­лон промовиджета.

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

Рассмотрим сетку виджетов справочных систем «Актиона».

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

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

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

Новый виджет «Высшей школы главбуха» отображает успехи в школе и мотивирует учиться дальше. Виджет сервиса «Отчёты» помогает отправлять отчёты в госорганы.

Виджет сервиса «Договоры» показывает и даёт найти нужный договор. Если каким‑то из сервисов человек не пользуется, то виджет умеет отображаться в «проморежиме» — просто рассказывает о сервисе и приглашает воспользоваться.

Для рекламы будущих продуктов создан шаблон промовиджета.

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

Система Главбух

Система Кадры

Система Юрист

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

Для при­да­ния систе­мам инди­ви­ду­аль­но­сти доста­точно фир­мен­ной цве­то­вой и шриф­то­вой схем.

Система Главбух

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

Система Кадры

Для придания системам индивидуальности достаточно фирменной цветовой и шрифтовой схем.

Система Юрист

Сле­ду­ю­щий уро­вень систе­ма­ти­за­ции — на уровне опе­ра­ци­он­ной системы. В Андро­иде регла­мен­ти­ро­ван набор исполь­зу­е­мых кег­лей и свя­зан­ных с ними интерлиньяжей.

Весь текст вырав­ни­ва­ется по четы­рёх­пик­сель­ной сетке базо­вых линий.

Следующий уровень систематизации — на уровне операционной системы. В Андроиде регламентирован набор используемых кеглей и связанных с ними интерлиньяжей.

Весь текст выравнивается по четырёхпиксельной сетке базовых линий.

Боко­вые поля у андро­ид­ных при­ло­же­ний — по 16 пк, а отступ слева до основ­ной колонки тек­ста — 72 пк.

Вер­ти­каль­ные раз­меры также регла­мен­ти­ро­ваны. Строка ста­туса имеет высоту 24 пк, тул­бар — 56 пк, заго­ло­вок и эле­менты списка — по 72 пк, под­за­го­ло­вок — 48 пк, отступ между груп­пами эле­мен­тов — 8 пк.

Раз­меры всех обла­стей кратны 8 пк.

Бла­го­даря после­до­ва­тель­ному исполь­зо­ва­нию этих раз­ме­ров в раз­ных про­грам­мах, про­граммы узна­ются как андроидные.

Здесь и на предыдущем развороте — иллюстрации из гайдлайнов «Материал‑дизайна»

Боковые поля у андроидных приложений — по 16 пк, а отступ слева до основной колонки текста — 72 пк.

Вертикальные размеры также регламентированы. Строка статуса имеет высоту 24 пк, тулбар — 56 пк, заголовок и элементы списка — по 72 пк, подзаголовок — 48 пк, отступ между группами элементов — 8 пк.

Размеры всех областей кратны 8 пк.

Благодаря последовательному использованию этих размеров в разных программах, программы узнаются как андроидные.

Здесь и на предыдущем развороте — иллюстрации из гайдлайнов «Материал‑дизайна»

Поддельный

Студенческая работа

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

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

Настоящий

Приложение Эпла

Поддельный

Студенческая работа

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

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

Настоящий

Приложение Эпла

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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