Илья Бирман

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

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

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

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

Оглавление

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Поддельный

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

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

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

Настоящий

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

Поддельный

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

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

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

Настоящий

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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