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

При создании графических интерфейсов следует:

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

Рассмотрим их подробнее.

Использование визуальных свойств для группировки элементов и создания четкой иерархии

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

Глядя на любой набор визуальных элементов, пользователь бессознательно задается вопросом: "Что здесь представляет интерес?" – и почти сразу же: "Какая связь между этими объектами?" Мы должны стремиться к тому, чтобы интерфейс содержал в себе ответ на оба вопроса.

Рис. 3.4.

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

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

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

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

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

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

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

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

Есть хороший способ убедиться, что визуальный дизайн эффективно задействует иерархию и отношения, – дизайнеры называют этот прием тестом с прищуриванием (squint test). Закройте один глаз и посмотрите на экран прищуренным вторым глазом. Обратите внимание на то, какие элементы слишком выпирают, какие стали нечеткими, а какие объединились в группы. Эта процедура часто вскрывает не замеченные ранее проблемы в композиции интерфейса.

Визуальная структура и логические маршруты

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

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

Выравнивание

Выравнивание визуальных элементов – один из главных приемов, позволяющих дизайнеру представить продукт пользователям в систематизированном и упорядоченном виде. Сгруппированные элементы следует выравнивать как по горизонтали, так и по вертикали ( рис. 3.5).

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

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

Рис. 3.5.

Сетка

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

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

В идеальном случае сетка должна задавать и пропорции различных областей экрана. Такие отношения обычно выражаются дробями. Среди распространенных дробей – прославленное "золотое сечение" (равное примерно 1,62), которое часто встречается в природе и считается особенно приятным для человеческого глаза; величина, обратная квадратному корню из двух (примерно 1:1,41), которая является основой международного стандарта размера бумаги (например, листа A4). В программировании для мобильных устройств не следует полагаться на соотношение сторон дисплеев, так как для устройств на Android не существует единого стандарта размера экранов.

Использование сетки в визуальном дизайне интерфейсов дает ряд преимуществ:

• Удобство применения. Поскольку сетка делает расположение элементов единообразным, пользователи быстро приобретают навыки поиска нужных элементов в интерфейсе. Последовательность в расположении элементов и выборе расстояний между ними облегчает работу механизмов визуальной обработки в мозгу человека. Качественно спроектированная сетка упрощает восприятие экрана.
• Эстетическая привлекательность. Аккуратно применяя сетку и выбирая подходящие соотношения между различными областями экрана, дизайнер может создать ощущение порядка, который удобен пользователям и стимулирует их работу с продуктом.
• Эффективность. Создание сетки и включение ее в процесс на ранних этапах детализации проектных решений сокращает число итераций и действий по "доводке" интерфейса. Качественная и явно обозначенная сетка закладывает основу для легко модифицируемого и расширяемого дизайна, позволяя разработчикам находить хорошие композиционные решения.

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

Вольный перевод статьи Якуба Линовски — «A Good User Interface» .

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

Идея 1: Старайтесь использовать макет с одной колонкой вместо многоколоночного

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

Идея 2: Старайтесь сделать подарок, не завершайте продажу сразу

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

Идея 3: Старайтесь объединять схожие функции и не дробить интерфейс

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

Идея 4: Старайтесь использовать социальное доказательство вместо того, чтобы рассказывать о себе самом

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

Идея 5: Старайтесь повторить главный призыв к действию, вместо того, чтобы показывать его один раз

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

Идея 6: Старайтесь усиливать различия в стиле между кликабельными и выбранными элементами, а не размывать их

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

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

Идея 8: Попробуйте отмену действия вместо запросов на подтверждения

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

Идея 9: Объясните, для кого предназначен продукт. Не пытайтесь адресовать сообщение всем подряд

Вы четко выделяете свою аудиторию, или обращаетесь ко всем сразу? Эта идея повышения конверсии заключается в том, чтобы ясно объяснить, для кого именно предназначен ваш продукт или сервис. Когда вы обращаетесь к аудитории, выделите определенные признаки ваших покупателей. Это выведет общение с ними на новый уровень и придаст некий оттенок эксклюзива и элитарности. Возможный риск такой стратегии заключается в том, что при объявлении каких-либо ограничений вы можете отсечь часть потенциальной аудитории. В этом случае выручит прозрачность предложения: честность вызывает доверие.

Идея 10: Говорите прямо вместо предположений

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

Идея 11: Больше контраста вместо однородности

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

Идея 12: Покажите место происхождения продукта вместо обобщений

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

Идея 13: Сокращайте количество полей, не спрашивайте слишком много

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

Идея 14: Раскройте все опции сразу

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

Идея 15: Предлагайте последовательность вместо страниц с двойным дном

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

Идея 16: Сохраняйте фокус, не злоупотребляйте ссылками

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

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

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

Почему сбалансированные сайты выглядят хорошо

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

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

Типы баланса

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

Горизонтальный баланс

Вертикальный Баланс

Радиальный Баланс

Симметричный баланс

Асимметричный баланс

Отличный способ визуально упорядочить элементы - сбалансировать их по осям - горизонтальной или вертикальной. Горизонтальный баланс - вы располагаете элементы слева и справа от друга – как на детских качелях. Вертикальный баланс - вы развешиваете элементы сверху вниз по центральной оси.

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

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

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

Как узнать, какой из видов баланса было бы правильно сейчас использовать? Если в общем, то симметрия обычно проще воспринимается. Вот поэтому она чаще встречается в дизайне.

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

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

В асимметрии лучше всего привлекать внимание к какой-то одно определённой точке, выводя взгляд зрителя из равновесия

Свойства баланса

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

Большой пустой объект имеет легкий визуальный вес и поэтому он может быть сбалансирован с меньшим, но более насыщенным объектом. Например, блог с областью содержания и боковая панель – область содержимого, как правило, больше, чем боковая панель. Вы могли бы уравновесить их, добавив больше пустого пространства в области содержания и заполнив боковую панель чем-то визуально более тяжелым. Если вы хотите достичь симметричного баланс в вашем дизайне, то вам нужно убедиться, что элементы имеют одинаковый размер, независимо от визуального веса.

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

Форма элементов может резко изменить баланс композиции. Волнистые или зубчатые формы визуально интереснее и, следовательно, тяжелее, чем формы с очень простыми, прямыми линиями. Не пытайтесь уравновесить несколько элементов со сложной формой, лучше сбалансируйте сложный и простой объект.

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

Расположение

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

Как добавить баланс на сайт

Итак, как же сделать страницу сбалансированной? В качестве примера возьмем самый простой симметричный баланс. Пустое содержание выглядит довольно уныло, так что добавим меню. Если посмотреть на практически любой неплохой дизайн, то можно увидеть, что меню оформлено «тяжелее» текста. Вот тут и получается самый примитивный баланс - небольшой тяжелый элемент уравновешивает объемный, но лёгкий текст. Начинайте разработку макета с наброска необходимых элементов. Эти правила помогут не совершить ошибок:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Большие объекты тяжелее маленьких

Тёмные объекты тяжелее светлых

Насыщенные цвета тяжелее блеклых

Чем толще граница, тем она тяжелее

Чем больше текстуры, тем тяжелее объект с ней

Кроме горизонтального вида баланса не забывайте про вертикальный и радиальный

Тёплые яркие цвета, такие, как оранжевый и красный, тяжелее, чем холодные цвета (синий, зелёный)

Правило третей

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

Итак, как же разделить макет на 9 равных частей?

1. Вообразим, что всё рабочее пространство - обычный прямоугольник

2. Мысленно делим вертикальную его часть на 3 равных доли и проводим для этого 2 паралленьные линии.

3. То же самое для горизонтальной составляющей

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

Примеры с пояснениями

На сайте MacAllan Ridge вы видите асимметричное расположение блоков. Однако громоздкий блок с картинкой уравнивается тяжелыми границами блока меню. Довольно распространённый приём балансировки.

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

-- [ Страница 1 ] --

Визуальный дизайн интерфейсов

Сколько бы сил вы ни вложили в исследование пользователей и созда

ние модели поведения продукта, способствующей достижению их це

лей, силы эти будут потрачены впустую, если вы не сумеете должным

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

чае интерактивных продуктов это часто делается визуальными средст

вами – путем отображения объектов на дисплее (хотя в некоторых слу

чаях поведение продукта приходится доносить посредством физиче

ских свойств, таких как форма аппаратной кнопки или тактильные ощущения от нее).

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

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

Разработка визуального дизайна интерфейса требует ряда сопряжен ных навыков. Конкретный набор навыков определяется создаваемым продуктом. Чтобы создавать привлекательные и удобные пользова тельские интерфейсы, дизайнер интерфейса должен владеть базовыми визуальными навыками – пониманием цвета, типографики, формы и композиции – и знать, как их можно эффективно применять для пе редачи поведения и информации, для создания настроения или стиму 332 Глава 14. Визуальный дизайн интерфейсов лирования физиологических реакций. Дизайнеру интерфейса также требуется глубокое понимание принципов взаимодействия и идиом интерфейса, определяющих поведение продукта.

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

Изобразительное искусство, визуальный дизайн интерфейсов и прочие дисциплины дизайна Художники и визуальные дизайнеры работают с одними и теми же изобразительными средствами. И те, и другие должны быть искусны и опытны во всем, что касается этих средств, но их деятельность слу жит различным целям. Цель художника – создать объект, взгляд на который вызывает эстетический отклик. Таким образом, изобрази тельное искусство – способ самовыражения художника на тему, кото рая у него (а иногда и у общества в целом) вызывает эмоциональный или интеллектуальный интерес. Художник не связан почти никакими ограничениями. Чем необычнее и своеобразнее продукт его усилий, тем выше он ценится.

Дизайнеры, напротив, создают объекты для других людей. В то время как современные художники озабочены в основном самовыражением, дизайнеры, как отмечают Кевин Маллет (Kevin Mullet) и Даррел Сано (Darrel Sano) в своей великолепной книге «Designing Visual Interfaces», «заняты поисками наиболее подходящего представления для переда чи некоторой специфической информации», то есть коммуникацией.

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

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

Изобразительное искусство, визуальный дизайн интерфейсов и прочие дисциплины ди Графический дизайн и пользовательские интерфейсы Графический дизайн – это дисциплина, над которой долгие годы (при мерно до второй половины 80 х годов прошлого века) довлела полигра фия, поскольку дизайн в основном сводился к созданию упаковок, рекламе, форматированию документов и обустройству среды сущест вования.

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

Графические дизайнеры обычно очень хорошо разбираются в визуаль ных аспектах и хуже представляют себе понятия, лежащие в основе по ведения программного продукта и взаимодействия с ним. Талантливые графические дизайнеры, подкованные и в цифровых аспектах, преус певают в создании информационно насыщенных, эстетически прият ных, впечатляющих интерфейсов, которые мы видим в Windows XP и Mac OS X, а также визуально насыщенных интерфейсов для компь ютерных игр и приложений, ориентированных на рядового потребите ля. Они способны создавать красивую и адекватную внешность интер фейсов, а кроме того – привносить фирменный стиль во внешний вид и поведение программного продукта. Для таких специалистов дизайн или проектирование интерфейса есть в первую очередь тон, стиль, ком позиция, которые являются атрибутами бренда, во вторую очередь – прозрачность и понятность информации и лишь затем (если до этого вообще доходит дело) – передача информации о поведении посредст вом ожидаемого назначения (см. главу 13).

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

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

334 Глава 14. Визуальный дизайн интерфейсов Визуальный информационный дизайн Информационные дизайнеры работают не над интерактивными функ циями, а над визуализацией данных, информации и средств навига ции. В визуальном дизайне интерфейсов их навыки особенно важны, в особенности когда речь идет о приложениях, интенсивно работаю щих с данными, и некоторых веб сайтами, где содержание перевеши вает функциональность. Усилия информационного дизайнера направ лены на то, чтобы представить данных в форме, способствующей их верному истолкованию. Результат здесь достигается через управление визуальной иерархией при помощи таких средств как цвет, форма, расположение и масштаб.

Распространенными объектами информационного дизайна являются всевозможные графики, диаграммы и прочие способы отображения количественной информации. Эдвард Тафти (Edward Tufte) написал несколько новаторских книг, подробно раскрывающих эту тему, включая «The Visual Display of Quantitative Information».

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

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

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

Строительные блоки визуального дизайна интерфейсов

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

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

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

Форма Какую форму имеет объект? Он круглый, квадратный или похож на амебу? Форма – главный признак сущности объекта для человека. Мы узнаем объекты по контурам; силуэт ананаса, текстурированного си ним мехом, все равно позволяет нам понять, что это ананас. При этом различение форм требует большей концентрация внимания, чем ана лиз цвета или размера. Поэтому форма – не лучшее свойство для соз дания контраста, если требуется привлечь внимание пользователя.

Слабость формы как фактора в распознавании объектов становится очевидна, если взглянуть на dock1 операционной системы Mac OS X – здесь можно по ошибке вызвать iTunes вместо iDVD или iWeb вместо iPhoto. Пиктограммы имеют различную форму, но обладают сходны ми размерами, цветами и текстурой.

Размер Насколько велик или мал объект относительно других объектов на эк ране? Более крупные элементы привлекают больше внимания, особен но если они значительно превосходят размерами окружающие элемен ты. Размер является переменной упорядоченной и поддающейся коли чественному определению, то есть люди автоматически упорядочива ют объекты по размеру и склонны оценивать их по размеру; если у нас есть текст в четырех размерах, предполагается, что относительная Специальный интерфейсный элемент операционной системы Mac OS X, ко

–  –  –

важность текста растет вместе с размером и что полужирный текст бо лее важен, чем текст с нормальным начертанием.

Таким образом, размер – полезное свойство для обозначения информа ционных иерархий. Достаточное расхождение в размерах обычно быст ро привлекает внимание человека. Жак Бертен (Jacques Bertin) в своей классической работе «The Semiology of Graphics» описывает размер как диссоциативное свойство. Это означает, что если объект очень мал или очень велик, становится сложно интерпретировать другие пере менные, например форму.

Яркость Насколько темным или светлым является объект? Разумеется, поня тия темного и светлого обретают смысл преимущественно в контексте яркости фона. На темном фоне темный текст почти не видно, тогда как на светлом он будет резко выделяться. Как и в случае с размером, зна чение яркости может быть диссоциативным; скажем, если фотогра фия слишком темная или слишком светлая, становится невозможно разобрать, что на ней. Контрастность люди воспринимают легко и бы стро, так что значение яркости может стать хорошим инструментом привлечения внимания к тем элементам, которые требуется подчерк нуть. Значение яркости также упорядоченная переменная – скажем, более темные (с более низкой яркостью) цвета на карте легко интер претируются: они обозначают большие глубины или большую плот ность населения.

Цвет Желтый, красный или оранжевый? Цветовые различия быстро при влекают внимание. В некоторых профессиональных областях цвета имеют конкретные значения, и этим можно пользоваться. Так, для бухгалтера красный цвет – отрицательные результаты, а черный – по ложительные; для трейдера, работающего с ценными бумагами, си ний – сигнал покупать, а красный – сигнал продавать (по меньшей ме ре, в США это так). Цвета приобретают смыслы и благодаря социаль ным контекстам, в которых проходит наше взросление. Для человека с Запада, выросшего среди светофоров, красный означает «стоп», а ино гда даже «опасность», тогда как в Китае красный – это цвет удачи. Бе лый цвет на Западе ассоциируется с чистотой и миром, а в Азии – с по хоронами и смертью. При этом в отличие от размера или яркости цвет изначально не обладает свойством упорядоченности и не выражается количественно, поэтому далеко не идеален для передачи информации такого рода. Кроме того, не следует делать цвет единственным спосо бом передачи информации, поскольку цветовая слепота встречается довольно часто.

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

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

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

Текстура Грубая или гладкая, однообразная или неровная? Разумеется, изобра женные на экране элементы не обладают настоящей текстурой, но спо собны создавать ее видимость. Текстура редко бывает полезна для пе редачи различий или привлечения внимания, поскольку требует зна чительной концентрации на деталях. Кроме того, для передачи тек стуры требуются значительные затраты пикселов. И тем не менее текстура может быть важной подсказкой: когда мы видим область, текстурированную резиной, то предполагаем, что следует ухватить устройство за эту область. Засечки и выпуклости на элементах пользо вательского интерфейса обычно указывают, что элемент можно пере таскивать, а фаски или тени у кнопки усиливают ощущение, что ее можно нажать.

Расположение Как располагается элемент относительно других элементов? Подобно размеру, расположение – это переменная упорядоченная и выражае мая количественно, а значит, полезная для передачи иерархии. Рас положив наиболее важные или наиболее востребованные элементы слева вверху, мы воспользуемся порядком восприятия элементов на экране на благо продукта. Расположение также может служить сред ством создания пространственных отношений между объектами на эк ране и объектами реального мира.

Принципы визуального дизайна интерфейса Человеческий мозг – великолепное устройство распознавания обра зов. Оно извлекает смысл из плотных потоков зрительной информа 338 Глава 14. Визуальный дизайн интерфейсов ции, обрушивающихся на нас буквально отовсюду. Наш мозг справля ется с этим шквалом входных данных, выявляя визуальные законо мерности и создавая для наблюдаемых нами объектов систему приори тетов. В конечном итоге это позволяет нам осознанно воспринимать видимый мир. Именно способность зрительной системы человеческого мозга к сборке частей визуального поля в образы на основании визу альных якорей (подсказок) позволяет нам обрабатывать зрительную информацию столь быстро и эффективно. Представьте, что вам вдруг пришлось бы вручную вычислять траекторию полета бейсбольного мя ча, чтобы предсказать, где он упадет. Наши глаза и мозг вместе делают это за доли секунды, не требуя от нас сознательных усилий. Процесс создания визуального дизайна интерфейса должен опираться на наши природные способности к обработке визуальной информации, чтобы обеспечить передачу пользователям информации и отражение воз можностей и функций программы.

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

При создании графических интерфейсов следует:

Использовать визуальные свойства для группировки элементов и соз дания четкой иерархии;

Создавать визуальную структуру и прокладывать логический мар шрут на каждом уровне организации;

Использовать целостные, непротиворечивые и соответствующие контексту образы;

Интегрировать визуальный стиль с функциональностью осмыслен но и последовательно;

Избегать визуального «шума» и беспорядка.

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

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

–  –  –

Глядя на любой набор визуальных элементов, пользователь бессозна тельно задается вопросом: «Что здесь представляет интерес?» – и поч ти сразу же: «Какая связь между этими объектами?» Мы должны стре миться к тому, чтобы интерфейс содержал в себе ответ на оба вопроса.

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

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

Разумеется, настройку этих свойств следует выполнять осторожно. Не следует делать самый важный элемент огромным, красным и выпук лым. Часто бывает достаточно изменить лишь одно из свойств. Если обнаружится, что два элемента различной важности состязаются за внимание пользователя, «прикрутить фитиль» менее важного будет лучшим решением, чем пытаться «разжечь» более важный. Так у вас останется больше пространства для создания акцента на самых важ ных элементах. (Вот хорошая аналогия: если все слова на странице на браны жирным красным шрифтом, выделяется ли хоть одно из слов?) Создание четкой визуальной иерархии – одна из сложнейших задач в визуальном дизайне интерфейсов, ее решение требует навыков и та ланта. Качественную визуальную иерархию пользователи практиче ски не замечают – а вот ее отсутствие и проистекающая из этого пута ница сразу бросаются в глаза.

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

Пространственная группировка объясняет пользователям, каким об разом одни задачи, данные и инструменты связаны с другими, и мо жет намекать на правильную последовательность действий. Хорошая группировка посредством расположения принимает во внимание по рядок задач и подзадач и движение взгляда по экрану: слева направо для западных языков и, как правило, сверху вниз. (Более подробно этот момент мы обсудим чуть позже.) Элементы, расположенные рядом, как правило, связаны друг с дру гом. Во многих интерфейсах такая группировка реализована слишком тяжеловесно: куда не взглянешь – рамки, причем иногда рамка за ключает в себе всего один или два элемента. Часто того же эффекта бо лее грамотно можно достичь посредством расстояний. К примеру, на панели инструментов кнопки могут отделяться друг от друга четырь мя пикселами. Чтобы вычленить файловые команды («открыть», «но вый файл», «сохранить») в отдельную группу, достаточно увеличить расстояние между кнопками файловых команд и соседней группой кнопок до восьми пикселов.

Элементы, разделенные большими расстояниями, можно группиро вать посредством общих визуальных свойств, создавая шаблон, кото рый в конечном итоге приобретет самостоятельный смысл для пользо вателей. Так, использование объема для создания ощущения физиче ского ожидаемого назначения – вероятно, самый эффективный способ отделять элементы управления от данных и фоновых элементов (более подробно об ожидаемых назначениях читайте в главе 13.) Эта страте гия часто применяется в рисовании пиктограмм. В операционной сис теме Mac OS X применяются яркие цвета для пиктограмм приложе ний и тусклые – для редко используемых вспомогательных программ.

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

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

Принципы визуального дизайна интерфейса

Тест с прищуриванием Есть хороший способ убедиться, что визуальный дизайн эффективно задействует иерархию и отношения, – дизайнеры называют этот при ем тестом с прищуриванием (squint test). Закройте один глаз и посмот рите на экран прищуренным вторым глазом. Обратите внимание на то, какие элементы слишком выпирают, какие стали нечеткими, а какие объединились в группы. Эта процедура часто вскрывает не замечен ные ранее проблемы в композиции интерфейса.

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

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

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

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

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

342 Глава 14. Визуальный дизайн интерфейсов Рис. 14.1. Adobe Lightroom весьма эффективно использует выравнивание по композиционной сетке. Текст, функциональные элементы и группы элементов управления очень четко выравниваются по сетке с фиксирован ным шагом. Следует отметить, что отбивка элементов управления и под писей элементов группы вправо может помешать быстрому их прочтению

Выравнивание элементов, разнесенных по группам и панелям.

Группы элементов управления и прочие объекты на экране везде, где это возможно, должны быть привязаны всё к той же сетке.

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

Как правило, сетка делит экран на несколько крупных горизонталь ных и вертикальных областей (рис. 14.2.) Качественно спроектиро

Принципы визуального дизайна интерфейса

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

В идеальном случае сетка должна задавать и пропорции различных об ластей экрана. Такие отношения обычно выражаются дробями. Среди распространенных дробей – прославленное «золотое сечение» (обозна чаемое греческой буквой «фи» и равное примерно 1,62), которое часто встречается в природе и считается особенно приятным для человече ского глаза; величина, обратная квадратному корню из двух (пример но 1:1,41), которая является основой международного стандарта раз мера бумаги (например, листа A4); и отношение 4:3 – пропорция сто рон большинства компьютерных дисплеев.

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

Идеальная реализация золотого сечения никак не улучшит читае мость экрана, на котором объекты свалены в кучу.

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

Решения по поводу композиции должны быть в определенном смысле бескомпромиссными: «почти квадрат» ни на что не годится; «почти один к двум» – тоже. Если композиция на экране близка к простой дробной его части – половине, трети или одной пятой – скорректируй те композицию таким образом, чтобы она занимала ровно половину, треть или одну пятую часть экрана. Используйте точные, четкие, ярко выраженные пропорции.

Использование сетки в визуальном дизайне интерфейсов дает ряд пре имуществ:

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

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

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

Создание логического маршрута Композиция не должна не только в точности следовать сетке, но и структурировать эффективный логический маршрут через интер фейс для пользователей, принимая во внимание тот факт, что (в слу Принципы визуального дизайна интерфейса чае западных языков) взгляд движется сверху вниз и слева направо (рис. 14.3).

Хороший логический маршрут Неудобный логический маршрут Движение взгляда и маршрут Все разбросано по экрану в интерфейсе совпадают Рис. 14.3. Движение взгляда по интерфейсу должно прокладывать логический маршрут, позволяющий пользователям эффективно и успешно решать задачи и достигать целей Симметрия и баланс Симметрия – полезное средство организации интерфейса с точки зре ния достижения визуального равновесия. Несимметричные интерфей сы обычно выглядят так, словно вот вот завалятся на один бок. Опыт ные дизайнеры способны достигать асимметричного равновесия, управляя визуальным весом отдельных элементов, подобно тому, как можно достичь равновесия качелей доски, если посадить на противо положные концы детей различного веса. В контексте пользовательско го интерфейса асимметричный дизайн трудно получить из за высокой стоимости экранного пространства. Тест с прищуриванием позволяет проверить сбалансированность интерфейса.

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

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

346 Глава 14. Визуальный дизайн интерфейсов Рис. 14.4. Диагональная симметрия внутри диалогового окна Список (Bullets and Numbering) приложения Microsoft Word. Ось симметрии проходит из нижнего левого угла в верхний правый Рис. 14.5. Вертикальная симметрия в палитре инструментов Macromedia Fireworks Принципы визуального дизайна интерфейса Используйте целостные, непротиворечивые и соответствующие контексту образы Применение пиктограмм и других наглядных элементов способно по мочь пользователю разобраться в интерфейсе или, наоборот, вызвать раздражение, запутать или даже оскорбить, если пиктограммы выбра ны неудачно. Очень важно, чтобы дизайнеры понимали, какое посла ние должна программа передать пользователю и какое послание он рассчитывает получить. Хорошее понимание персонажей и их мен тальных моделей, как правило, дает прочный фундамент для тексто вого и визуального языков интерфейса. Играют роль и культурные ас пекты. Дизайнеры должны отдавать себе отчет в том, что цвет в раз личных культурах имеет различные значения (в Китае красный цвет не считается предупреждающим), равно как и жесты (большой палец, поднятый вверх, считается крайне оскорбительным жестом в Тур ции), и символы (восьмиугольник предписывает остановку в США, но мало в каких еще странах). Кроме того, следует знать цветовые коды, принятые в разных областях человеческой деятельности. Например, в больницах желтый цвет обозначает радиацию, а красный, как пра вило, используется в ситуациях, угрожающих жизни. На терминале фондового рынка красный – сигнал продавать. Прежде чем вы возьме тесь за дело, убедитесь, что понимаете визуальный язык, принятый в сфере деятельности и культурном окружении ваших пользователей.

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

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

Дизайн и рисование пиктограмм – совершенно самостоятельная об ласть. Создание понятных изображений при низком разрешении тре бует значительного времени и практики – лучше делегировать эту за дачу опытным дизайнерам. Пиктограммы – сложная тема в плане вос приятия, так что мы здесь подчеркнем лишь несколько важных клю чевых моментов. Тех читателей, кто хочет больше узнать о пригодных 348 Глава 14. Визуальный дизайн интерфейсов к использованию пиктограммах, мы настойчиво отсылаем к книге Уильяма Хортона (William Horton) «The Icon Book». Примеры в этой книге, возможно, покажутся вам устаревшими, но основные принци пы по прежнему актуальны.

Функциональные пиктограммы Разработка пиктограмм, представляющих функции или операции, выполняемые над объектами, – занятие нелегкое, но увлекательное.

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

В случае очевидных и конкретных функций придерживайтесь следую щих правил:

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

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

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

Создавайте простые пиктограммы; избегайте лишних деталей.

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

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

Принципы визуального дизайна интерфейса

–  –  –

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

Визуализация пиктограмм и символов По мере того как графические возможности цветных дисплеев расши ряются, растет и искушение представлять пиктограммы и символы все более детально, достигая почти фотореализма. Однако эта тенденция, в конечном счете, не отвечает целям пользователя, особенно в бизнес приложениях. Пиктограммы должны оставаться простыми и схема тичными, с минимумом цветов и теней, и сохранять свои скромные размеры. В Windows Vista и Mac OS X были предприняты шаги в на правлении более подробного представления пиктограмм. Хотя такие пиктограммы выглядят впечатляюще, они незаслуженно привлекают к себе внимание, а при малом размере отображаются плохо – то есть либо занимают избыточно много дорогостоящего места на экране, ли бо неразборчивы. Кроме того, они вынуждают разработчика пренебре гать визуальной связностью элементов в интерфейсе, поскольку очень немногие функции (в основном те, что относятся к аппаратной части) могут быть адекватно представлены конкретными фотореалистичны ми изображениями. Фотографические пиктограммы подобны тексту, набранному только заглавными буквами; различия между ними не четкие, и в них легко запутаться. Пользователям легче всего разли чать пиктограммы по форме, однако в случае Mac OS X контуры всех пиктограмм одинаково размытые. Интерфейс Mac OS X переполнен фотореализмом, отвлекающим пользователей и не работающим на их благо (рис. 14.6).

Визуализация поведения Вместо того чтобы описывать результаты работы функций в интерфей се исключительно словами (или, что еще хуже, не давать никаких описаний), показывайте пользователю, какими будут эти результа ты. Для этой цели применяйте визуальные элементы. Не следует пу тать этот прием с использованием пиктограмм на элементах управле ния, представляющих ожидаемые назначения. В дополнение к тексту, описывающему параметр или состояние, поместите картинку или диа грамму, описывающую поведение. Хотя визуализация, как правило, 350 Глава 14. Визуальный дизайн интерфейсов Рис. 14.6. Фотореалистичные пиктограммы в Mac OS X. Подобный уровень детализации лишь отвлекает внимание от функциональных и информацион ных элементов. Кроме того, если в некоторых случаях детализация знакомых пользователю объектов оправданна, какой смысл в детализированных изображениях незнакомых предметов или абстрактных понятий (таких, как компьютерная сеть)? Сколько пользователей видели «голый» жесткий диск (крайний справа)? В конечном счете, пользователю приходится ориентироваться по подписям, чтобы разобраться в пиктограммах, которые нужны ему не очень часто требует дополнительного места на экране, ее способность ясно переда вать смысл стоит потраченных на это пикселов. Компания Microsoft сделала это открытие несколько лет назад, и с тех пор диалоговые окна (в частности, в Microsoft Word) изобилуют визуальными элементами, дополняющими текстовые описания элементов управления. Photo shop и другие графические приложения уже давно показывают поль зователю результаты операций в виде миниатюр.

Функцию и поведение доносите до пользователей визу ально.

Диалоговое окно Предварительный просмотр в Microsoft Word (рис. 14.7) показывает, как будет выглядеть напечатанный документ с учетом ус тановленного размера бумаги и полей. Многие пользователи плохо представляют, как выглядит левое поле размером 1,2 дюйма, а Предва рительный просмотр наглядно показывает им это. Компания Microsoft могла пойти еще дальше и организовать непосредственный ввод в этом диалоговом окне. Тогда пользователи могли бы перетаскивать грани цу левого поля и наблюдать, как меняется числовое значение в соот ветствующем счетчике. Связанное с таким элементом управления чи словое поле ввода не утрачивает своей важности, его нельзя полностью заменить визуальным элементом. Поле ввода показывает точные зна чения параметров, а визуальный элемент демонстрирует окончатель ный внешний вид страницы.

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

Принципы визуального дизайна интерфейса

Рис. 14.7. Функция предварительного просмотра в Microsoft Word наглядно демонстрирует визуальное выражение функций приложения. Эта функция не требует, чтобы пользователь пытался представить, как будет выгля деть поле в 1,2 дюйма, но при этом позволяет легко понять, к каким резуль татам приводит то или иное значение элементами. Вы же не хотите, чтобы интерфейс выглядел так, словно кто то в спешке замазал его слоем краски? Необходимо убедиться, что функциональные аспекты графического интерфейса программы нахо дятся в полной гармонии с общим визуальным стилем бренда вашей продукции. Поведение программы – часть бренда, и опыт взаимодей ствия пользователя с продуктом должен отражать баланс формы, со держания и поведения.

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

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

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

В самом простом смысле слова бренд есть сумма всех взаимодействий людей с конкретной компанией. Поскольку взаимодействие все чаще происходит по каналам, основанным на современных технологиях, неудивительно, что усилия фирм, направленные на создание «брендо вых» интерфейсов, велики, как никогда. Если цель состоит в постоян ном и позитивном взаимодействии с потребителем, то вербальные, ви зуальные и бихевиоральные (поведенческие) послания бренда должны быть согласованными и непротиворечивыми. Например, если потре битель пытается узнать цены на DSL услуги в своем районе и обнару живает, что на веб сайте телефонной компании нет полезной информа ции (даже после значительных усилий по ее поиску), он уходит в пол ной уверенности, что и сама компания – заведение грубое и неприят ное. От этого не спасет никакой в мире дизайн. То же верно и для других каналов: если человек не получает нужных ему ответов, то не имеет значения, что компьютерный голос звучит дружелюбно, систе ма принимает голосовой ввод, а представитель службы поддержки за вершает беседу наилучшими пожеланиями.

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

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

Принципы визуального дизайна интерфейса

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

Похожие работы:

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

«Владимир Петрович Морозов Искусство и наука общения: невербальная коммуникация Oт редактора Предлагаемая читателям книга-это второе, исправленное и дополненное издание ранее опубликованной монографии автора «Невербальная коммуникация в системе речевого общения. Психофизиологические и психоакустические основы.»-М.: Изд. ИПРАН, 1998. Автор монографии профессор В.П. Морозов хорошо известен в кругах исследователей речи как авторитетнейший специалист по невербальным и в особенности по...»

«Роман Ингарден ИССЛЕДОВАНИЯ ПО ЭСТЕТИКЕ Перевод с польского А. Ермилова и Б. Федорова Издательство Иностранной литературы, Москва 1962 ОГЛАВЛЕНИЕ: Предисловие . 5 [пропущено при оцифровке] Двухмерность структуры литературного произведения. 2 Схематичность литературного произведения. 40 Литературное произведение и его конкретизация. 72 О различном понимании правдивости («истинности») в произведении искусства. 92 О различном познавании литературного произведения. 114 Эстетическое переживание...»

«Александр Федоров «За» и «против»: Кино и школа В данном научно-популярном издании анализируется практический опыт многолетней работы школьного кинофакультатива. Это расширенный вариант (с дополнениями 2002 года) книги «За» и «против», опубликованной в Московском издательстве ВБПК в 1987 году. Автор – д.п.н., профессор, Президент Ассоциации кинообразования и медиапедагогики России, действительный член Российской Академии кинематографических искусств и наук Александр Викторович Федоров. 1. Перед...»

«АСТРАХАНСКИЙ ВЕСТНИК ЭКОЛОГИЧЕСКОГО ОБРАЗОВАНИЯ № 2 (32) 2015. с. 74-89 УДК 639.212.053.7:639.271.2 (262.81) ЗНАЧЕНИЕ ЕСТЕСТВЕННОГО НЕРЕСТА И ИСКУССТВЕННОГО ОСЕТРОВОДСТВА В ФОРМИРОВАНИИ ЗАПАСОВ ОСЕТРОВЫХ КАСПИЙСКОГО МОРЯ Раиса Павловна Ходоревская Федеральное государственное бюджетное научное учреждение «Каспийский научноисследовательский институт рыбного хозяйства» [email protected] Осетровые заводы, нерестилища, нерестовые миграции, белуга, русский осетр, севрюга, соотношение естественного и...»

«Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования «Челябинская государственная академия культуры и искусств» МУЗЕЙНЫЙ ВЕСТНИК Выпуск 18 Челябинск УДК 069 ББК 79.1 М89 Редакционная коллегия: Алешко Е. Н., Гревцева Г. Я., Лушникова А. В., Овчинникова Н. В., Перчик Л. С., Терехов А. Н. Музейный вестник / ФГБОУ ВПО «Челябинская государственная академия культуры и искусств»; сост. Н. В. Овчинникова. – Челябинск, 2015. – Вып. 18. – 184 с., цв. вкл....»

«ОГЛАВЛЕНИЕ ВВЕДЕНИЕ.......... 5 КЛАПАН ВЫДОХА КАК ФУНКЦИОНАЛЬНЫЙ ЭЛЕМЕНТ 1. АППАРАТА ИСКУССТВЕННОЙ ВЕНТИЛЯЦИИ ЛЕГКИХ. 11 Классификация аппаратов ИВЛ 1.1....... 11 Общая схема строения аппаратов ИВЛ 1.2...... 14 Анализ видов конструктивного исполнения клапана выдоха 1.3.. 15 Общие требования к клапану выдоха на основе анализа его 1.4. функционального назначения...... 19 Функция сохранения спонтанной дыхательной активности 1.4.1. пациента......... 19...»

«S. Garanina Sergei Mikhailovich Prokudin-Gorsky СЕРГЕЙ МИХАЙЛОВИЧ SERGEI MIKHAILOVICH ПРОКУДИН-ГОРСКИЙ PROKUDIN-GORSKY Светлана Гаранина Svetlana Garanina Профессор кафедры книговедения Professor, Department of Book Sciences, Московского государственного Moscow State University университета культуры и искусств1 of Culture and the Arts С.М.Прокудин-Горский. S. M. Prokudin-Gorsky. Студийный портрет. Лондон. Studio portrait. London. 1910-е или 1920-е годы. Из семейного архива. 1910s or 1920s. From...»

«Оглавление 1. Божественной души безбрежная свобода (вступление).2 2. Венец певца, венец терновый (страницы жизни и творческого пути)...5 2.1. Глазами современников..9 2.2. Поэт-воин..10 2.3. Настанет час кровавый, и я паду.(трагическая дуэль).11 3. Созвучье слов живых..12 3.1. Лирика..14 3.1.1. «Бородино»..17 3.2. Поэмы..17 3.3. Проза..18 3.3.1. Роман «Герой нашего времени».19 4. Лермонтовские мотивы в творчестве писателей.22 5. Лермонтовский вечер (сценарии, разработки).23 6. Музыкальная...»

«Перечень бесплатного контента № Бесплатные коллекции Доступ к коллекции География Издательство Лань ЭБС Издательства Лань. Доступ к коллекции Искусствоведение Издательство Лань ЭБС Издательства Лань. Доступ к коллекции Право. Юридические науки Издательство Лань ЭБС Издательства Лань. Доступ к коллекции Психология. Педагогика Издательство Лань ЭБС Издательства Лань. Доступ к коллекции Социально-гуманитарные науки Издательство Лань ЭБС Издательства Лань. Доступ к коллекции Языкознание и...»

«Д. Дж. Шварц Искусство мыслить масштабно The Magic of Thinking Big Издательство: Попурри, 2007 г. Мягкая обложка, 304 стр. ISBN 978-985-15-0037-2, 0-671-64678Тираж: 6000 экз. LdGray Формат: 84x108/ От издателя Книга Искусство мыслить масштабно помогла миллионам людей сделать свою жизнь лучше. Ее автор, доктор наук Дэвид Шварц, один из наиболее известных специалистов в области мотивации, поможет вам лучше работать, лучше руководить, зарабатывать больше денег и что важнее всего почувствовать себя...»

«Муниципальное учреждение дополнительного образования «Детская школа искусств №3» Люберецкого района Московской области САМООБСЛЕДОВАНИЕ по направлению деятельности за 2014 год В соответствии с Федеральным Законом «Об образовании в Российской Федерации» (ред. от 23.07.2013).ч.1 ст. 29. ч.2 ст. 30, порядком проведения самообследования образовательной организацией, утвержденной приказом Минобрнауки РФ от 14.06.2013 № 462, приказом Минобрнауки РФ от 10.12.2014г. №1324, МУ ДО «Детская школа искусств...»

«ПУБЛИЧНЫЙ ДОКЛАД МБДОУ № 79 Раздел I. Общие характеристики учреждения 1. Тип, вид, статус: Муниципальное бюджетное дошкольное образовательное учреждение детский сад общеразвивающего вида с приоритетным осуществлением деятельности по одному из направлений развития детей № 79 2. Лицензия на образовательную деятельность Серия РО № 042931 Регистрационный номер № 2339 от 26 марта 2012 г. Срок действия: бессрочно 3. Местонахождение, удобство транспортного расположения Юридический адрес: 426063 УР...»

«Аннотация Данная выпускная работа посвящена оптимизации зоны покрытия цифровым телерадиовещанием в г. Актау. В выпускной работе рассмотрены следующие темы: описание стандартов цифрового телевидения (DVB, ATSC и ISDB), описание одночастотной сети и выбор оборудования для построения телевизионной сети.Выполнены следующие расчеты: расчет напряженности поля аналитическим методом; расчет напряженности поля по кривым распространениям; расчет зоны Френеля; исследование радиуса зоны покрытия;...»

«Министерство культуры Российской Федерации Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования «Челябинская государственная академия культуры и искусств» ОТЧЕТ о самообследовании федерального государственного бюджетного образовательного учреждения высшего профессионального образования «Челябинская государственная академия культуры и искусств» (по состоянию на 1 апреля 2015 г.) Челябинск 2015 Содержание 1. Общие сведения об образовательной...»

«Чарльз Уильям Моррис Основания теории знаков Nemo autem vereri debet ne characterum contemplatio nos a rebus abducat, imo contra ad intima rerum ducet. Gottfried Leibniz (Никто не должен бояться, что наблюдение над знаками уведет нас от вещей: напротив, оно приводит нас к сущности вещей. - Готфрид Лейбниц (лат.)) I. ВВЕДЕНИЕ. СЕМИОТИКА И НАУКА Люди - это высшие из живых существ, использующие знаки. Разумеется, не только люди, но и животные реагируют на некоторые вещи как на знаки чего-то...»

«ISSN 1997-4558 ПЕДАГОГИКА ИСКУССТВА http://www.art-education.ru/AE-magazine № 4, 2014 ВОСПРИЯТИЕ ПРОИЗВЕДЕНИЙ ИЗОБРАЗИТЕЛЬНОГО ИСКУССТВА И МУЗЫКИ В ДУХОВНОМ РАЗВИТИИ ДЕТЕЙ В УСЛОВИЯХ МУЗЕЯ CULTURAL DEVELOPMENT OF CHILDREN THROUGH PERCEPTION OF PIECES OF FINE ARTS AND MUSIC IN CONDITIONS OF MUSEUM СТОЛЯРОВ БOРИС АНДРЕЕВИЧ STOLYAROV BORIS АNDREEVICH доктор педагогических наук, профессор, заведующий отделом «Российский центр музейной педагогики и детского творчества» ФГБУК «Государственного...»

«МИНОБРНАУКИ РОССИИ Федеральное государственное автономное образовательное учреждение высшего образования «Южный федеральный университет» Академия архитектуры и искусств Кафедра Истории архитектуры, искусства и архитектурной реставрации Есоян Нино Самвеловна АРХИТЕКТУРА ГОРГИППИИ МАГИСТЕРСКАЯ ДИССЕРТАЦИЯ по направлению 07.04.01 (270100) Архитектура Научный руководитель – доц. Бучка Александр Михайлович Рецензент – доц. к.арх. Карпова Мария Александровна Ростов-на-Дону – 2015 Работа выполнена на...»

««Будущее открывает перед нами самые грандиозные перспективы. Ибо пробил уже час начала великого циклического возвращения к мистическому мышлению. Со всех сторон нас окружают воды океана универсальной науки – науки вечной жизни, таящие в себе забытые затонувшие сокровища ушедших поколений». Е.П. Блаватская Е.П. БЛАВАТСКАЯ ПРАКТИКУМ ОККУЛЬТНОГО ОБУЧЕНИЯ _ Составитель Е. А. Логаева Перевод с английского: В. С. Зуева, В. И. Мызников, Т.И.Перебайлова, Т. О. Сухорукова, Ю. А. Хатунцев, Примечания: Б....»

«C O L L O Q U I A | | ISSN 1822-3737 ЕВГЕНИЙ ДОБРЕНКО Социалистический реализм и реальный социализм (Советские эстетика и критика и производство реальности) Аннотация: Советское искусство не есть искусство «правды» (как оно само себя позиционировало) или «лжи» (как оно описывалось в советологии, эмигрантском и диссидентском дискурсах). Оно находится за пределами верификации и выполняет функции не «отражения действительности», но дереализации жизни для последующего ее преображения и замены. Оно...»

2016 www.сайт - «Бесплатная электронная библиотека - Книги, издания, публикации»

Материалы этого сайта размещены для ознакомления, все права принадлежат их авторам.
Если Вы не согласны с тем, что Ваш материал размещён на этом сайте, пожалуйста, напишите нам , мы в течении 1-2 рабочих дней удалим его.

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

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

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

Шаблоны проектирования не являются рецептами или готовыми решениями. В своей книге "Designing Interfaces" – объемистом и полезном собрании шаблонов проектирования взаимодействия – Дженифер Тидвелл (Jenifer Tidwell) предостерегает нас: "[Шаблоны] – это не готовые к употреблению компоненты; каждая реализация шаблона немного отличается от всех других" [ 3.1 ] .

Типы шаблонов проектирования взаимодействия

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

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

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

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

Рис. 3.1.

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

Однако все не так просто. Этот шаблон в чистом виде, безусловно, удобен в случае относительно большого экрана (монитор или планшет), однако на мобильном телефоне он малоприменим. Решением проблемы является отказ от единого экрана: выделив каждому разделу собственную экранную сущность и организовав связь между ними, можно получить высокофункциональное приложение ( рис. 3.3).

Визуальный дизайн интерфейсов

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

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

Изобразительное искусство, визуальный дизайн интерфейсов и прочие дисциплины дизайна

Художники и визуальные дизайнеры работают с одними и теми же изобразительными средствами, однако их деятельность служит различным целям. Цель художника – создать объект, взгляд на который вызывает эстетический отклик. Изобразительное искусство – способ самовыражения художника. Художник не связан почти никакими ограничениями. Чем необычнее и своеобразнее продукт его усилий, тем выше он ценится.

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

Графический дизайн и пользовательские интерфейсы

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

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

Визуальный информационный дизайн

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

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

Строительные блоки визуального дизайна интерфейсов

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

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

Форма

Форма – главный признак сущности объекта для человека. Мы узнаем объекты по контурам. Если мы увидим на картинке синий ананас, мы его сразу опознаем, потому что мы помним его форму. И лишь потом мы удивимся странному цвету. При этом различение форм требует большей концентрации внимания, чем анализ цвета или размера. Поэтому форма – не лучшее свойство для создания контраста, если требуется привлечь внимание пользователя.

Размер

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

Цвет

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

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

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

Яркость

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

Направление

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

Текстура

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

Расположение

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