Подпишите картинку интерфейс какой программы изображен на картинке
Перейти к содержимому

Подпишите картинку интерфейс какой программы изображен на картинке

Подчеркните правильный ответ.

☐ Растровое изображение создаётся с помощью геометрических фигур.

☐ Растровые изображения изменяются при масштабировании.

Подпишите основные элементы окна графического редактора Paint.

(переместить подписи в соответствующие окна)

Инструмент растровой графики

Добавьте подпись к картинке

(переместить подпись в соответствующее окно)

Введите с клавиатуры пропущенные слова в предложении.

Способ, при котором задаются Место для ввода текста. и Место для ввода текста. для каждого отдельно взятого Место для ввода текста., называется Место для ввода текста..

Как изменяется качество растрового изображения при масштабировании?

Подчеркните правильный ответ.

b) Не изменяется

С помощью чего можно в растровом графическом редакторе Paint нарисовать идеальный круг?

Выберете из списка правильный ответ (наведите курсор на список):

С помощью инструмента Ellipse tool (овал) с удержанием клавиши Ctrl

Можно ли растровое изображение распечатать на принтере?

Зачеркните неверные ответы.

c) В особых случаях

Выберите все растровые редакторы.

Интерфейс какой программы изображён на картинке? (см. следующую страницу)

Подпишите картинку.

Векторное изображение

Отличается ли векторное изображение на экране монитора от изображения, распечатанного на бумаге?

Подчеркните правильный ответ.

b) Не отличается

c) Нельзя сказать точно

Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:

Студопедия рекомендует:

Понятие и виды экологического вреда Понятие и виды экологического вреда. Способы его возмещения. Выраженное в Гражданском кодексе РФ общее положение права о том.
Социальный контроль Социальный контроль – это совокупность средств, с помощью которых общество или социальная общность (группа) обеспечивает.
SWOT-анализ и SNW- анализ для супермаркетов «Пятёрочка» Факторы, вызывающие изменения, которые, как представляется на первый взгляд, происходят под воздействием внутренних причин, тем не.
Конституционный суд Российской Федерации Конституционный суд Российской Федерации, который согласно Конституции РФ является судебным органом конституционного контроля.
Понятие и виды субъектов трудового права и их правовой статус СУБЪЕКТЫ ТРУДОВОГО ПРАВА Субъект права — это физическое или юридическое лицо, имею­щее определенные права и обязанности, т.

Разбираемся с сеткой в Adobe Illustrator

Этот перевод как бы дополняет мою предыдущую публикацию про Pixel Perfect, без которого она была бы неполной, тем более что оригинальная статья про Pixel Perfect ссылается на оригинальную статью этого перевода.

  1. Как избежать той проблемы, из-за которой у вас в макетах расстояние между элементами или гайдами начинает включать в себя дробные части пикселей;
  2. Как использовать сетки для прототипирования в Adobe Photoshop и Adobe Illustrator.

Как и в прошлый раз, одна из целей, почему я пишу эту статью на Хабр (а не ограничиваюсь, к примеру, переводом на Tuts+) — это составление после перевода полезных ссылок по теме. Призываю хабражителей так же делиться своими соображениями и инструментами, которыми вы пользуетесь при создании сеток, может быть какими-то другими редакторами. Один мой знакомый товарищ прокомментировал предыдущую статью таким образом, что, конечно, материал прикольный, но сам он пользуется Sketch’ем, а там это всё из коробки. Расскажите, чем пользуетесь вы?

Кстати, хотя в статье речь идёт об Adobe Illustrator, в Adobe Photoshop можно так же использовать и пиксельную сетку, и привязку к пикселям, и свою собственную настраиваемую сетку.

Краткое содержание
  • Чтобы включить/выключить сетку в Adobe Illustrator/Photoshop, нажмите Ctrl + ‘
  • Чтобы включить/выключить гайды в Adobe Illustrator/Photoshop, нажмите Ctrl + ;

Разбираемся с сеткой в Adobe Illustrator

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

Так получается, что некоторые функции упускаются из виду новичками, и я хотел бы поделиться с вами одной из них. Лично я был бы очень рад, если бы мне кто-нибудь рассказал об этой теме в ту пору, когда я был новичком.

Да, я собираюсь рассказать вам о Сетке.

Что такое Сетка?

Как и в изучении любого другого вопроса давайте сначала дадим определение изучаемому термину.
Если обратиться к онлайн-словарю Merriam-Webster, сетка — это сеть равномерно расположенных вертикальных и горизонтальных линий(например, для позиционирования точек на карте).

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

Кстати, сетка Adobe Illustrator состоит только из строго вертикальных и горизонтальных линий. Если вам для работы нужны кривые или ещё какие-то более сложные сетки, то вы сможете создать их с помощью гайдов-направляющих, это на самом деле довольно несложно.

Почему знание Сетки важно?

Мы дали общее представление того, что из себя представляет Сетка. Но зачем ей вообще пользоваться? Если ещё раз повторить кратко, то Сетка — это то, что помогает нам расположить элементы друг относительно друга и выставить отношения между размерами и расположениями объектов. Сетка как бы предлагает нам правила, по которым мы можем расположить объекты на макете, а самое главное — структурировать контент.

Кроме того, Сетка как инструмент помогает дизайнерам создавать Pixel Perfect изображения, что очень важно (на мой взгляд так вообще обязательно) при создании изображений для разных устройств с разными экранами.

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

Цифра VS Печать

Ни для кого не секрет, что цифровые изображения на экранах много чем отличаются от напечатанных изображений на бумаге. У каждого типа изображений своя цветовая схема (RGB у цифровых изображений и CMYK у печатных картинок), и каждый тип имеет своё выходное разрешение (разрешение экрана и разрешение при печати). Всё это создаёт разницу в том, каким образом создаются эти два типа изображений, в особенности то, каким образом получаются изогнутые, кривые линии.

Цифровые экраны имеют своё разрешение и свою пиксельную сетку (на любом экране квадратные пиксели выстроены один за другим в ряды). Это означает, что чтобы создать какую-то кривую линию, мы просто делаем какие-то пиксели полупрозрачными (альфа-канал) на этих участках искривлений, и это называется сглаживанием, которое искусственным образом помогает нам воссоздать на экране монитора кривую.

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

Использование привязок

Один из самых интересных вопросов, который может быть поднят в этой теме. Если вы используете привязки, то вы как бы говорите Illustrator’у выравнивать ваши объекты на холсте к вашей сетке либо пиксельной сетке.

Помните, что недавно я заикнулся о Pixel Perfect изображении? Теперь, когда вы знаете, в чём отличие напечатанных картинок от цифровых, отображаемых на экране, самое время поведать о том, в чём на мой взгляд главная роль Сетки.

Я уверен, что вы ранее наверняка видели различные иллюстрации на Dribbble или Behance с супер-чётким изображением. Лично я всегда удивлялся, как автору удалось вывести такие чёткие линии? Как оказалось, в этом нет ничего необычного! Он или она просто привязывали все объекты к пиксельной сетке и создавали каждый элемент с целыми значениями размеров в пикселях!

На всякий случай уточню, что под целыми значениями я имею ввиду числовые значения без дробных частей, т.е. например если мы собираемся нарисовать прямоугольник, то мы будем его рисовать с шириной 200 пикселей и высотой 100 пикселей, а не 200.84 пикселя на 99.8 пикселей.

Расширенное понятие сетки

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

Шаг 1
  • Количество холстов: 1
  • Ширина: 800 пикселей
  • Высота: 800 пикселей
  • Единицы измерения: пиксели
  • Цветовой режим: RGB
  • Разрешение при растеризации: 300 пикселей на дюйм
  • Приравнивать новые объекты к пиксельной сетке: отмечено

На заметку: вы наверняка обратили внимание на то, что мы поставили значения эффекта растеризации 300 PPI, хотя мы собираемся использовать наш дизайн на экране монитора. Скажем так, если мы используем бОльшие значения разрашения, то это не будет сильно заметно на экране, но если вдруг случится так, что вы захотите напечатать то, что нарисовали (пока не обращайте внимания на то, что мы создали документ в RGB), все ваши эффекты вроде теней выйдут в плохом качестве, если значение PPI было выбрано меньше 300.

В самом деле, вы в любой момент можете изменить значение PPI, если зайдёте в Effect > Document Raster Effects Settings.

Шаг 2

После того, как вы настроили документ, создайте чёрный квадрат размерами 100х100 пикселей, и разместите его точно в левом верхнем углу Холста, используя палитру Align.

Шаг 3

Чтобы понять, как работает сетка, давйте посмотрим на это. Открываем меню View > Show Grid (или нажимаем Ctrl + „), и тут же на экране появляется стандартная сетка 1000х4.

Шаг 4

Теперь мы видим сетку, но как же она работает? Давайте попробуем подвигать маленький квадратик с помощью стрелок на клавиатуре и посмотреть, что получится.

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

Давайте отменим наши последние шаги, вернём квадратик на своё место, и зайдём в меню View → Snap to Grid (Shift + Ctrl + Y), а потом снова оппробуем поперемещать наш объект.

Вот теперь мы можем увидеть разницу. Попробуйте поперемещать объект, чтобы понять, что происходит. Каждое перемещение квадрата происходит с привязкой к горизонтальной или вертикальной линии Сетки.

  • Шаг сетки через каждые: 1000px
  • Деления внутри шага сетки: 4

Что в самом деле означают эти настройки?

Это очень легко, смотрите. Через каждые 1000 пикселей Illustrator будет рисовать клетку, поделенную на 4 части (тем самым внутри клетки появится сетка 2х2), т.е. получатся клетки, каждая из которых размером 1000 х 1000 пикселей, и в свою очередь поделена ещё на 4 клетки размерами 250 х 250 пикселей (1000/4 = 250).

Т.к. наш холст имеет размеры всего лишь 800х800 пикселей (т.е. полностью умещается три квадрата сетки по 250 пикселей и ещё остаётся 50 пикселей), привязка будет срабатывать на верхнюю и левую часть этого пространства, которая умещается в 1000 х 1000 пикселей. А нижняя и правая часть пространства на линии толщиной 200 пикселей, выделенной красным, остаётся незадействованной.

Теперь если мы вернёмся к нашему маленькому чёрному квадрату, то мы увидим, что он прилипает только к линиям сетки, которые располагаются в 250 пикселях друг от друга, при том, что сам квадратик 100х100 пикселей. Если бы чёрный квадрат был размером 250х250 пикселей, то он бы занимал целую клетку сетки, и прыгал бы точно в одну из 16 маленьких клеток.

Настройки сетки

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

Лично для себя я решил, что использование минимальных возможных значений является самым удобным, и если совместить всю мощь возможностей Сетки и инструмента PathFinder, то я получаю возможность супербыстро размещать все свои объекты так, как мне удобно.

  • Линия сетки через каждые: 1 пиксель
  • Деления внутри шага сетки: 1

Быстрое прототипирование с использованием сетки

Давайте выполним небольшое упражнение и попробуем сделать быстрый прототип веб-сайта с использованием сетки через каждые 800 пикселей с разделением на 4 шага на холсте размером 800 х 800 пикселей.

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

Шаг 1

Создаём прямоугольник размером 800х200 пикселей и распологаем его сверху нашего холста, раскрасим его цветом #191919. Теперь возьмём инструмент Текст и подпишем этот элемент как Шапку нашего веб-сайта.

На заметку: Если у вас есть более мелкие элементы, которые не обязаны быть привязаны к сетке, в нашем примере это тексты-подписи к прямоугольникам, просто выделите их, зайдите в меню View и снимите галочку с опции Snap to Grid.

Шаг 2

Создадим небольшой прямоугольник размером 600х400 пикселей и цветом #191919 и попробуем разместить его, используя кнопки на клавиатуре, в левой части нашего холста, сразу под шапкой. Этот жлемент так же следует подписать, это будет Content.

Шаг 3

Давайте создадим объект поменьше размером 200х400 пикселей цветом #B24747 и потом разместим его в правой части, справа от контента, а потом подпишем его Sidebar.

Шаг 4

Завершаем наше прототипирование добавлением последнего элемента 800х200 пикселей и цветом #191919. Расположим этот прямоугольник внизу холста и назовём его Footer.

Грубо говоря, только что за несколько секунд нам удалось набросать макет сайта. Здорово тратить на такие вещи так мало времени, не правда ли?

Двойственная привязка

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

По умолчанию, если вы создаёте новый документ, режим Preview обычно выставлен в положение Default. Это означает, что то, что вы создаёте — это то, что вы видите. (Т.е. вы видите вектор таким, какой он есть, не расстрированным). В этом случае опция Snap to относится к Сетке, которую вы настраиваете, и Сетка зависит от тех значений, которые вы выставите в параметрах.

Если вы включите Pixel Preview (View → Pixel Preview) и приблизите изображение, Illustrator покажет вам пиксели, из которых состоит ваше векторное изображение. Когда режим привязок включен на пиксели, каждое нажатие на стрелки клавиатуры будет перемещать ваш объект на фиксированное число пикселей, которое выставлено в настройках Keyboard Increment.

На заметку: Да, вы можете включить Keyboard Increment на любое кол-во пикселей, которое вам удобно. Эта опция располагается в меню Edit > Preferences > General > Keyboard Increment.

Ключевое различие между двумя способами привязки в том, что если вы каким либо образом создали объект с нецелыми значениями размеров, например 200.9х60.40 пикселей, привязка к пикселям изменят это, и сама автоматически округлит ваши значения.

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

Полезные ресурсы

  • Чои Вин. Как спроектировать современный сайт. Профессиональный веб-дизайн на основе сетки. б.м.: Питер, 2012.
    Существует множество книг про сетки. популярные и не очень, но я читал именно эту, поэтому именно её и рекомендую. Здесь по шагам очень подробно описывается процесс разработки универсальной сетки (которая в готом варианте раздаётся много где). Вобщем-то после прочтения точно всё встаёт на свои места, становится понятно что, почему и зачем.
  • 960 Grid System — один из всевозможных готовых наборов сеток. Здесь есть уже созданные шаблоны макетов под все популярные редакторы вроде Photoshop, Illustrator, InDesign и т.д. Список очень большой, ознакомьтесь.
  • GuideGuide и Griddify — плагины для Photoshop для создания сеток.
  • pixel perfect
  • дизайн интерфейсов
  • дизайн
  • иконки
  • сетки верстки
  • модульные сетки
  • сетки
  • Adobe Illustrator
  • Adobe Photoshop
  • Веб-дизайн
  • Работа с иконками
  • Работа с векторной графикой
  • Usability
  • Дизайн мобильных приложений

FotoSketcher — превращение фотографий в рисунки

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

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

Название программы FotoSketcher по-русски можно перевести как фото скетч (эскиз или набросок). Фотография (изображение) в результате модификации становится рисунком, или картиной.

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

Скачать FotoSketcher можно с официального сайта разработчика. Программа работает в операционной системе Windows, приложение имеет русский язык интерфейса.

FotoSketcher скачать

Интерфейс программы FotoSketcher

После запуска откроется главное окно FotoSketcher. В верхней части окна программы находятся две панели: панель меню и панель с кнопками. Из панели меню выполняется управление программой.

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

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

главное окно fotosketcher

Программой можно управлять не только мышкой, но и с помощью «горячих клавиш». Нажмите на пункт меню «Редактировать». В открывшемся контекстном меню вы увидите, каким командам соответствуют клавиши клавиатуры.

управление кнопками клавиатуры

Создание рисунка в FotoSketcher

Выберите начальное изображение, откройте его в программе, а затем нажмите на кнопку «Параметры рисунка…». После этого откроется новое окно «Параметры рисования». Здесь вы можете загрузить параметры (если параметры были сохранены ранее), сохранить параметры, или сбросить параметры по умолчанию.

Сначала нужно выбрать стиль рисования. В программе FotoSketcher доступно большое количество разнообразных эффектов:

  • 6 эффектов эскизов карандашом;
  • 2 эффекта эскиза пером чернил;
  • 10 эффектов живописи (акварель, масло);
  • 7 стилизованных эффектов (мультфильм, мозаика);
  • 3 других эффекта;
  • 1 вариант без эффектов (рамка, текстура, текст).

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

создание рисунка

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

После выбора стиля, фрагмент рисунка будет отображен в окне «Параметры рисования». Этот фрагмент можно увеличить, показав полный размер изображения, в уменьшенном по размеру окна виде. Это уменьшенную картинку можно передвигать при помощи мыши, для того, чтобы увидеть разные области будущего рисунка.

Теперь можно модифицировать изображение в соответствие с выбранным стилем: регулировать интенсивность цвета, уровень контраста, и т. д. Для каждого стиля применяются свои собственные настройки. С помощью кнопки «Руководство кисти» можно изменить размер кисти, с помощью которой будет выполнен рисунок.

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

Вам также может быть интересно:

  • Лучшие бесплатные просмотрщики изображений — 5 программ
  • 10 сервисов оптимизации изображений онлайн

После выбора настроек, нажмите на кнопку «Рисовать!». В течение некоторого времени происходит обработка проекта, поэтому дождитесь ее завершения.

сохранение картины

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

На этом изображении видно, что это уже не фотография, а картина написанная акварелью. Автор этих строк в детстве учился в художественной школе, поэтому я постарался, чтобы рисунок имел вид, сделанный акварельными красками (мне больше всего нравилась акварель).

рисунок создан

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

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

Выводы статьи

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

Похожие публикации:

  • FotoMorph — создание анимации из фотографий
  • Free 3D Photo Maker — программа для создания 3D фотографий
  • Easy Image Modifier — обработка изображений в пакетном режиме
  • Funny Photo Maker — программа для создания фотоприколов
  • FotoMix — фотомонтаж и коллаж

Пользовательский интерфейс
Электронный учебник

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

Об интерфейсе написано много, но главные труды слишком академичны и проиллюстрированы устаревшими примерами. Современные же авторы обсуждают моду и частности, выражают личное мнение, но не дают базовых знаний. У читателя не создаётся цельной картины и системы ценностей, и он вынужден черпать вдохновение на Дрибле и Бехансе.

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

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

Автор — Илья Бирман
Арт‑директор бюро, соавтор «Советов», преподаватель Школы бюро
КПД ❔
16 дизайнеру, 12 редактору и руководителю

Оглавление

Принципы

Что такое интерфейс
Человечность
Технозависимость
Модальность
Последовательное волшебство
Взгляд новичка

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

Прицеливание
Информативность
Обратная связь
Листание и прокрутка

Язык

Элементы управления
Пиктограммы
Язык роботов

Экраны

В бюро радикально пере­осмыслили формат электрон­ной книги

В бюро радикально переосмыслили формат электронной книги

Было

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

Стало

Бюрошная экранная книга соединяет удобство прокрутки и наглядность бумажной книги. Она поделена на развороты, которые можно прокрутить от начала до конца. Текст на развороте прокручивается, когда это необходимо, а иллюстрации сохраняют положение на экране. Читателю легко запомнить место и позднее вернуться к материалу. Разворот — смысловая единица, а не результат математического деления книги на «экраны».

Книга на экране

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

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

Книга разделена на развороты. Каждый разворот состоит из рассказа и иллюстрированных примеров

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

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

Книга разделена на развороты. Каждый разворот состоит из рассказа и иллюстрированных примеров
Книга разделена на развороты. Каждый разворот состоит из рассказа и иллюстрированных примеров

Проверка знаний

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

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

Тест предлагает вопросы на знание материала и анализ примеров: что хорошо и плохо, как улучшить
Тест предлагает вопросы на знание материала и анализ примеров: что хорошо и плохо, как улучшить

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

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

Справочник

«Пользовательский интерфейс» — настольная книга дизайнера интерфейса. Он пользуется ей как учебным пособием и справочником во время работы:

Дизайнер находит нужный пример в закладках, иллюстрированном оглавлении или поиске
Знания о синтаксисе элементов интерфейса сведены в подробную таблицу
Знания о синтаксисе элементов интерфейса сведены в подробную таблицу
Дизайнер находит нужный пример в закладках, иллюстрированном оглавлении или поиске
Дизайнер находит нужный пример в закладках, иллюстрированном оглавлении или поиске
Не забудьте купить плакат о синтаксисе интерфейса
Не забудьте купить плакат о синтаксисе интерфейса
Не забудьте купить плакат о синтаксисе интерфейса

Теория плюс примеры

Каждый принцип проиллюстрирован множеством примеров:

Предисловие издателя

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

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

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

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

В последней версии Ай‑ОСа появилась маленькая кнопка возврата к родительскому приложению из открытых внешних ссылок и приложений. К сожалению, эта кнопка не только слишком маленькая, но и расположена в том же углу, что и стандартная кнопка «назад» в текущем приложении. Поэтому я часто попадаю пальцем не в ту кнопку и испытываю раздражение, как, уверен, и другие миллионы пользователей.

Когда я становился дизайнером интерфейсов, я прочитал книгу Нормана и узнал, что проблема с плитами вовсе не в плохих значках, а в принципе соответствия.

Когда я работал над дизайном телевизионных пультов ББК , я установил требования ко всем пультам в серии: кнопка включения должна стоять в особом положении сверху, рядом с цифровыми кнопками не должно быть функциональных, коромысла громкости и переключения каналов должны быть перпендикулярны, а кнопки управления воспроизведением — узнаваться вслепую по форме. Об этих пультах писал Артемий Лебедев.

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

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

Дизайнер в Эпле, знакомый с законом Фиттса, вряд ли допустил бы ошибку с расположением кнопки «назад» осознанно и добровольно. Очевидно, это следствие корпоративного компромисса.

Эти и подобные знания о проектировании интерфейса накапливались в бюро в течение почти десяти лет из личных наблюдений, книг и проектов. Когда мы делали в 2007 году наш курс об интерфейсе, я даже немного стеснялся, что рассказываю в нём о вещах, известных из книг — о законе Фиттса, о привычках и жестах.

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

Поэтому я с большим удовольствием представляю электронный учебник «Пользовательский интерфейс» своего коллеги Ильи Бирмана. Эта книга объясняет основы на классических и современных примерах продуктов, сайтов и приложений. Мы начинаем с общих принципов дизайна, объясняем особенности взаимодействия человека с продуктом, затем рассказываем о том, какими элементами интерфейс взаимодействует с пользователем.

В книге есть и собственные наработки. Синтаксис элементов интерфейса в русском языке — важнейший вклад бюро в знания об интерфейсах. Это подход к дизайну графического интерфейса, как к языку. Он отвечает на вопросы, почему один ряд названий пунктов меню или радиокнопок связно читается, а об другой спотыкаешься на каждом элементе. Синтаксис объясняет, почему подпись «введите» рядом с полем ввода выглядит наивно (хотя и может быть полезной новичку).

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *