О канонах дизайна в виртуальных турах
Давайте немного поговорим о гармонии в разработке дизайна интерфейса для виртуальных туров.
Нам часто присылают ссылки на виртуальные туры и просят прокомментировать работу. Очень трудно вот так в коротких сообщениях обосновать свои ответы: логотип слишком большой, кнопки необходимо передвинуть, а вот это меню, наоборот сделать чуть крупнее, шрифт надписи увеличить на один пункт. Возникла необходимость рассмотреть основы гармоничного расположения элементов на странице для создателей виртуальных туров.
Профессиональные дизайнеры знают практически весь изложенный ниже материал. Им могут быть интересны только некоторые аспекты применительно к виртуальным турам.
Немного теории
Часть 1. Секретный канон и гармония страницы
Посмотрите старинные рукописные свитки и книги. Они гармоничны и красивы. В них все четко выверено - размер листа, размер полей, букв, расположение на листе. Они идеальны. Средневековые мастера знали секреты идеальной книги, с помощью которых их блоки текста, буквицы, пометки и рисунки образовывали гармоничный союз. Эти каноны считались коммерческой тайной.
Каноны построения книжных страниц представляют собой набор принципов книжного дизайна, с помощью которого соблюдаются гармоничные пропорции, соотношения размеров страницы и печатных областей на странице книги.
Понятие канонов или законов верстки в XX веке популяризовал Ян Чихолд, основываясь на работах Ван де Граафа (J. A. van de Graaf), Рауля Розариво (Raúl Rosarivo), Ганса Хайзера (Hans Kayser) и других. Чихольд писал: "Хотя многие методы и правила сегодня незаслуженно забыты, они формировались на протяжении веков для создания идеальной книги".
Типографы и дизайнеры до сих пор применяют многие из этих правил, с поправкой на другие стандарты размеров.
Рассмотрим основные каноны. Мы не будем приводить здесь подробные пропорции, пояснения и пр. Приведем лишь схемы, на которые и будем опираться в дальнейшем.
1. Золотой канон позднеготического членения (Секретный канон Чихольда)
Сохранявшийся в тайне канон, который положен в основу многих рукописей позднего Средневековья и инкунабул. Пропорции плоскости, отведенной под письмо, и плоскости листа (страницы) одинаковы. Высота плоскости, отведенной под письмо, равна ширине бумаги: при отношении сторон (бумаги) 2:3, что является обязательным условием этого канона, одна девятая часть ширины бумаги образует внутреннее поле, две девятые - внешнее, одна девятая часть высоты бумаги - верхнее поле и две девятые - нижнее. Поле, отведенное под письмо, и размер бумаги пропорциональны. Отношения полей 2:3:4:6.
2 Канон Гуттенберга
Аргентинский типограф, художник и иллюстрато Рауль Розариво показал в качестве канона Гутенберга то же самое, что Чихолд открыл как канон писцов. Он находит размер и место наборной полосы посредством деления диагонали страницы на девять частей.
Розариво делит на 9 частей высоту и ширину бумаги, пропорция листа, как и у Чихолда 2:3. Считается, что этому канону следовали Гутенберг и Петер Шеффер.
Иоганн Гуттенберг (ок. 1396-1468), нем. изобретатель книгопечатания и первопечатник
Петер Шеффер - немецкий каллиграф и книгопечатник, работавший с Гутенбергомг.
3. Канон Ван де Графа
Этот канон является результатом кропотливого зрительного изучения и понимания.
Голландский печатник Ван де Грааф изучал печатные книги, которые были изданы за 50-летний период, начиная с первой - Библии Гуттенберга в 1455. Глядя на книги того времени, Ван де Грааф пришел к выводу, что во многих использована некая система для определения положения и размера текстового блока. Вся прелесть системы, которая была использована в том, что у них практически не было стандартных измерительных устройств. Тем не менее, страницы своих книг они создавали в одном стиле.
Ван де Грааф обнаружил, что независимо от размера и пропорций страницы, его канон всегда размещает текстовый блок в верхнем углу на 1/9 от верхнего поля и на 1/9 от внутреннего, обеспечивая при этом согласованность, равновесие и гармонию.
4. Схема Виллара де Оннекура (гармонический делительный канон Виллара де Оннекура)
Система, которую Виллар разработал, известна как Схема Виллара -деление прямой линии на логические и гармоничные части, состоящие из трети, четверти, пятых частей и так далее, до бесконечности.
Виллар де Оннекур - французский архитектор XIII века, альбом с его чертежами хранится в Парижской национальной библиотеке.
Работы Виллара де Онекура размыли границы между графическим дизайном и архитектурой, показав, что гармоническое соотношение форм и размеров одинаково для любой среды.
Гармония между размерами страницы и наборной полосы достигается благодаря нахождению правильных пропорций. Даже в необычных форматах благодаря канонам можно найти идеальное соотношение.
5. Танец четырех канонов
Как нетрудно заметить, все каноны приводят к одному и тому же результату. Изменяется только методика его получения.
Часть 2. Золотое сечение
Из Викепедии
Золотое сечение (золотая пропорция, деление в крайнем и среднем отношении) - соотношение двух величин, равное соотношению их суммы к большей из данных величин. Приблизительная величина золотого сечения равна 1,6180339887. В процентном округлённом значении - это деление величины на 62 % и 38 % соответственно.
С математической точки зрения, отношение большей части к меньшей в золотом сечении выражается квадратичной иррациональностью
В дошедшей до нас античной литературе деление отрезка в крайнем и среднем отношении впервые встречается в «Началах» Евклида (ок. 300 лет до н. э.), где оно применяется для построения правильного пятиугольника.
Лука Пачоли, современник и друг Леонардо да Винчи, называл это отношение «божественной пропорцией». Термин «золотое сечение» (goldener Schnitt) был введён в обиход Мартином Омом в 1835 году.
Начиная с Леонардо да Винчи, многие художники сознательно использовали пропорции «золотого сечения».
Часть 3. Модульные сетки
Использование модульный сетки - это фундаментальный навык, которым должны обладать дизайнеры. Они являются важной частью процесса проектирования.
Для начала, что такое молульная сетка.
Из Википедии:
Модульная система вёрстки - система вёрстки, при которой основой композиции полос и разворотов становится модульная сетка с определенным шагом (модулем), одинаковым или разным по горизонтали и вертикали.
Термин «модуль» пришёл в оформление книги из архитектуры. Многие выдающиеся художники книги, например Э. Лисицкий, В. Фаворский, Я. Чихольд, неоднократно проводили аналогию между конструкцией книги и здания. В архитектуре «модулем» (от лат. modulus - маленькая мера) называют единицу измерения, которая служит для придания соразмерности всему сооружению или его частям. Так, в классической архитектуре в качестве модуля часто принимался радиус колонны у её основания. Размеры различных элементов здания - например высота колонны, ширина и высота окна или портала - устанавливались соразмерно этой единице.
Перенося модульную систему в конструирование книги, исходят из того, что помещаемый на её страницах материал графически неоднороден. Прежде всего, графически различны - и в силу этого неодинаково смотрятся и воспринимаются - текст и иллюстрации. Поэтому для каждого из этих элементов должно быть отведено своё место на книжной полосе. На различных полосах соотношение текста и иллюстраций неодинаково, но на любой полосе место, отводимое иллюстрациям и тексту, должно соответствовать тому или иному числу выбранных единиц измерения - модулей.
На основе выбранного модуля строится модульная сетка, по формату равная полосе будущей книги. Модульная сетка определяет в целом внешний вид будущего макета и строго задаёт места размещения на странице, страницах или во всех однородных документах всех предполагаемых элементов, текста, иллюстраций, заголовков статей и других графических и информационных объектов. Сетка представляет собой систему непечатаемых вертикальных, горизонтальных и диагональных линий, разделяющих страницу.
Сетка разрабатывается дизайнером конкретно для каждого проекта, будь то календарь, фирменный бланк, визитка, открытка, конверт, журнал, книга и т. д.
Веб-дизайнеры относительно недавно начали применять модульные сетки в проектировании интерфейсов. Этот метод значительно упрощает как проектирование интерфейса, так и последующую вёрстку макета.
В отличие от типографии, модули в веб-дизайне могут иметь непостоянную ширину и растягиваться в зависимости от ширины окна браузера (разрешения экрана монитора).
Несколько простых поясняющих иллюстраций (из статьи с примерами о модульной сетке):
Пример 1
Пример 2
Часть 4. Разработка дизайна виртуального тура
Вот, собственно говоря, и все. Основы теории вы знаете. Осталось применить полученные знания дл разработки интерфейса виртуального тура.
В обычном режиме, сама виртуальная панорама является основной информацией и соответственно занимает центральное смысловое поле. Различные элементы управления располагаются на полях. При смене режимов просмотра, центральное поле могут занимать другие элементы. Например, изображения или карты-схемы. Масштаб всех элементов и их расположение мы вбираем в соответствии с модульной сеткой. Оформление самих элементов - это уже вопрос выбранного стиля.
Рассмотрим алгоритм создания интерфейса на конкретном примере.
Для начала вы определяетесь со структурой вашего тура и всеми элементами, которые у вас должны быть на странице. Данный материал подробно расписан в статье "Архитектура и дизайн виртуального тура". Здесь мы к нему возвращаться не будем.
1. Определимся, под какие пропорции и размеры мы будем проектировать наш тур.
Если вы вставляете ваш тур в iframe и четко знаете его размеры, то ориентируйтесь на них. Если рассчитываете на всю ширину браузера, то просто выберите для себя - на каком разрешении вы хотите, чтобы ваш тур смотрелся органичней всего. Тут производители различных мониторов и гаджетов подложили дизайнерам небольшую свинью. Мало того, что все они имеют разное разрешение, это не страшно. Но все они имеют еще и разные пропорции. Тут и 4:3 и 16:9 и много других вариантов (Википедия выдает нам 14 основных соотношений) Сильно расстраиваться не стоит. Гармонично разработанный тур будет смотреться на любом разрешении экрана.
2. Выбираем модульную сетку.
Какую вы выберите для себя сетку, размер ее ячеек и их количество, зависит от количество тех элементов, что будут использоваться в вашем интерфейсе. Слишком большие ячейчки - загромоздят ваш тур неудобным размещением, слишком маленькие - создадут эффект случайного размещения.
3. Отдельно рисуем ваш модуль, он может быть как квадратным, так и просто прямоугольным.
А теперь на основе этого модуля просто вычерчиваем все элементы, которые должны присутствовать. На этом этапе мы не рисуем элементы. Мы просто определяем их размер, занимаемую ими площадь.
Например:
Например, на странице должен присутствовать какой-то титул, кнопки управления панорамой и пр., подпись к панораме, выезжать план, галерея изображений.
4. Располагаем элементы на экране . Внешние поля в канонах рассматривайте как основные места дислокации ваших элементов.
По композиции расположения элементов был разбор в статье "Архитектура и дизайн виртуального тура", здесь же мы в основном касаемся вопроса взаимных пропорций и размеров.
5. Подправляем расположение по канонам (см часть 1)
Канон в основном потребуется нам для нахождения полей. Поля для виртуальных туров являются основным местом для расположения элементов.
6. Отрисовываем все элементы, опираясь на пропорции и размеры, которые вы определили в пункте 3.
В качестве подложки, для удобства, возьмите скриншот панорамы, чтобы лучше представлять себе конечный результат.
И с выдвинутым планом:
7. Кодируем, программируем.
8. Тестируем.
9. Оптимизируем
10. Все!
Часть 5. Заключение
И в заключении еще несколько простых мыслей.
“Я не люблю все эти рюшечки, предпочитаю делать простые туры” Разработка дизайна интерфейса тура - это не рисование рюшечек. Вы можете сделать тур вообще без единой копки управления. Но будет ли это удобно? А как только у вас возникает хотя бы один - два элемента для управления (кнопки управления панорамой, схема, превью изображений, что-нибудь еще), то сразу встает вопрос об их гармоничном расположении на экране и о соразмерности их друг к другу. Это и есть разработка дизайна, а вовсе не рисование рюшечек, которые, кстати, и нужны только в единичных случаях.
«У меня нет такого заказчика, который хотел бы такой разработанный тур. Крутится, уже счастье». И не будет, пока вы сами не станете разрабатывать такие туры. Заказчики на такие туры есть, и они мучаются обратной проблемой - не могут найти исполнителя. Солидные фирмы продолжают уделять оформлению большое внимание.
Большинство разработчиков автоматических редакторов, к настоящему моменту, озаботились привлечь к оформлению созданных с их помощью туров профессиональных дизайнеров. Скорее всего, стандартный интерфейс будет выстроен по классическому канону. К его внешнему виду претензий не будет. Кроме одного. Он - стандартный. Женщины, например, не любят носить одинаковые наряды. Если вдруг дама придет, скажем, в театр, и случайно встретит там другую даму в точно таком же наряде, то обе почувствуют себя, мягко говоря, очень неловко.
С другой стороны, попытка изменить стандартный интерфейс без должного объема знаний, скорее всего, приведет к нарушению целостности восприятия. В конце концов, школьная, пожарная, военная форма тоже имеют права на существование, если они хорошо разработаны. Но стоят они дешевле, чем хороший костюм.
Вывод.
Для создания профессионального дизайна вы используете общие законы оформления применительно к конкретным условиям виртуальных туров.
©2014, Наталия Коварская, Алексей Гриф.
Разместили здесь - http://www.classic-ru.org.ru/articles/article4.html