Для создания лучших шоколадных пирожных потребуется как UX, так и UI. Я серьезно. Для начала, вам потребуется рецепт, ингредиенты, кухонная посуда и духовка. Затем: смешиваем, выпекаем, нарезаем, раскладываем по тарелкам, подаем и едим.
Но что из этого UX, а что UI? Процесс изготовления – это UX, а процесс раскладывания по тарелкам и подачи к столу — UI.
А как насчет поедания? Это UX; кроме случаев, когда это не UX. Получит ли потребитель другой опыт, если пирожные будут поданы сразу со сковородки или красиво разложены на тарелке? Я бы сказал, да, последнее было бы предпочтительнее.
В этой статье я поделюсь с вами пятью отличиями между UX и UI дизайном. Будем надеяться, что к ее окончанию, вы будете иметь о них лучшее представление. Сразу скажу, что, хотя вы и заметите отличия – некоторые из них будут очень похожи друг на друга.
С этой оговоркой, давайте взглянем на некоторые различия между ними.
UX – это не UI
UX дизайн, или дизайн пользовательского опыта, это процесс, с помощью которого определяется необходимость. Затем рисуется грубый прототип, который позже подтверждается (или нет) путем тестирования. Когда подтверждается и бизнес-модель, и предложение ценности — продукт готов.
Об UI, или дизайне пользовательского интерфейса можно думать так:
Дизайн пользовательского интерфейса = Визуальный дизайн + Дизайн взаимодействия.
Визуальный дизайн – это то, как сайт выглядит, его личность, если угодно; бренд. Дизайн взаимодействия – это то, как люди взаимодействуют с вашим сайтом. Когда кто-то нажимает кнопку, изменяется ли она таким образом, чтобы дать понять, что она нажата?
И хотя и UX, и UI дизайнеры создают взаимодействия, UX дизайнеров можно считать архитекторами макровзаимодействий, а UI дизайнеров – создателями микровзаимодействий, занимающихся деталями.
По словам дизайнера Ника Бабича:
«Лучшие продукты хорошо справляются с двумя вещами: функциями и деталями. Функции – это то, что привлекает людей к вашему продукту. Детали – это то, что их удерживает».
UX дизайнер, скорее будет разрабатывать потоки пользователей, шаги, которые пользователь предпримет, чтобы, например, подписаться на рассылку. Каким шагам они будут следовать и как они поймут, что всё удалось?
Затем проект переходит UI дизайнеру. UI дизайнер усовершенствует эти взаимодействия добавляя цвет и подчеркивая оригинальный дизайн, давая им подсказки, и показывая направление к новостной рассылке.
UI делает интерфейсы красивыми
Полезный продукт удовлетворяет потребность, с которой еще не сталкивался рынок. Процесс исследования UX дизайнера включает в себя конкурентный анализ, разработку персон, а затем создание минимально жизнеспособного продукта; продукта, который будет ценным для вашей целевой аудитории. Это подтверждается путем тестирования на протяжении всего жизненного цикла продукта.
После того, как потоки пользователей и ваерфрэймы запрототипированы и протестированы, процесс переходит к UI дизайнеру – его задачей будет заставить всё это красиво выглядеть. Это включает в себя выбор цветовой схемы и оформления, которое будет и красивым, и простым в использовании. Тем не менее, выбор цвета, оформление и взаимодействия основываются не на личных предпочтениях дизайнера, а на четко сформулированных причинах, специфических для персон, разработанных UX дизайнерами. С их помощью UI дизайнеры реализуют визуальную иерархию, которая послужит для пользователей проводником, объясняющими им что и когда делать, чтобы достичь своей цели.
Хорошо продуманная иерархия будет выделять одну главную цель на странице давая пользователям понять, где на сайте они находятся, и что они могут сделать в любой данный момент времени. Иерархия справится с этим при помощи конвенций и шаблонов, уже знакомых пользователям. Эти шаблоны будут подсказывать пользователям направление.
UX помогает пользователям достигать целей
UI создает эмоциональные связи
Люди приходят на ваш сайт, чтобы что-то сделать. Возможно кто-то ищет собачку для маленькой квартиры.
UX сторона вещей может смотреть на людей, как на любителей собак и пытаться понять, что для них важно. Что они ценят, или что им нужно при поиске помощи в выборе своего пушистого друга? Чтобы понять это, они начинают работу. Они задают вопросы, наблюдают за людьми, опрашивают их, могут сделать прототипы и несколько партизанских тестирований, чтобы посмотреть, смогут ли они им помочь.
После того, как вы настроили основное юзабилити, согласно Аарону Уолтеру, автору книги «Дизайн для эмоций», лояльность ваших пользователей будет зависеть от личности вашего интерфейса. Яркий дизайн может привлечь к вашему сайту людей, они даже могут задержаться, если там можно что-то сделать. И когда образуется личная связь – они на крючке. Заставляет ли ваш интерфейс их смеяться? Цепляет ли он их? Насколько он дерзкий? Аарон говорит: «Люди простят ваши недостатки, последуют за вами, и будут петь вам дифирамбы, если вы наградите их положительными эмоциями.» Вот здесь вступает UI дизайнер.
Сначала создается UX дизайн
Потом (иногда) создается дизайн UI
Как UX и UI дизайнеры работают вместе на протяжении процесса проектирования?
Как правило, UX дизайн и исследование являются первыми шагами при решении вопроса создания продукта или приложения. UX дизайнеры проводят большую часть исследований, которые позволяют подтвердить или опровергнуть первоначальные идеи продукта и направить его развитие.
После того, как прототип был несколько раз протестирован, и уже почти готов, вступает UI дизайнер и начинает работать над визуальным дизайном и микровзаимодействиями.
Однако этот путь не всегда линеен, и зависит от многих факторов. Например:
- Кто занимается UX и UI?
- Один и тот же человек, или кто-то другой, и другая команда?
UX используется во всех продуктах, интерфейсах и услугах
UI относится только к интерфейсам
Дизайн пользовательского опыта – это обширная сфера, и с каждым днем она становится все более популярной. В настоящее время, не только компании, использующие веб, но и многие другие, разрабатывающие продукты или предоставляющие услуги начинают улавливать ценность понимания своих пользователей и подтверждения гипотез, до начала процесса создания.
Дизайн пользовательских интерфейсов предназначен для пользовательских интерфейсов. Это не означает, что он ограничен графическим пользовательским интерфейсом компьютеров, планшетов, и мобильных устройств. В наши дни интерфейсы можно встретить во многих других продуктах, таких, как часы, стиральные машины, приборные панели в автомобилях, торговых автоматах, и многом другом.
Недавно я читал о приложении на iPhone, которое разблокирует дверь вашего автомобиля. Оказывается, этот набор взаимодействий занимает гораздо больше шагов, чем просто использование ключа, для открывания двери. Разрабатываем ли мы для интерфейса, или опыта, мы должны позаботиться о том, чтобы наши пользователи оставались в самом сердце этого процесса.
Выводы
Почти невозможно отделить UX от UI или UI от UX.
Но если попытаться, то можно заключить, что:
- UX дизайн помогает пользователям выполнять задачи в среде различных платформ и услуг.
- UI дизайн создает привлекательные и эстетичные интерфейсы, которые соединяются с людьми.
Перевод статьи Дона Склехта
- Перевод
Вчера я слушал подкаст и обратил внимание, как кто-то задавал вопрос и по ходу дела сказал: «Старый фанат, впервые звоню». По какой-то причине это заставило меня подумать о Medium. Я читаю тут статьи давным-давно, но никогда не вставлял свои два цента. Сегодня тот день, когда это изменится.
Для начала я решил написать о чём-то, что мне близко, о визуальном дизайне (он же графический дизайн), более конкретно об основных принципах, использование которых пришло с опытом, и которые я считаю наиважнейшими для хорошего выполнения моей работы.
Не хочу раздувать статью, поэтому буду краток по каждому принципу. Тем, которые заслуживают более подробного изложения, я могу посвятить полноценную статью в будущем.
Итак, готовы? Всё начинается с…
#1 Точка, линия и форма
Это основные строительные блоки любого дизайна, не важно чего. С ними вы можете создать всё что угодно, от простых иконок до очень сложных иллюстраций, всё сделано сочетанием этих простых элементов.В геометрии точка - это комбинация координат x и y, добавьте ось z - и вы в трёхмерном пространстве, но ограничимся двумя измерениями в этой статье.
Точка > линия > форма
Если соедините две точки, то получите линию. Линия, состоящая из необъятности точек, немного похожа на гроздь атомов, которые формируют молекулы, а они, в свою очередь, формируют все объекты вокруг вас. Затем, если добавить третью точку и соединить их, вы получите форму, в данном случае треугольник, но как упоминалось ранее, с помощью этих базовых элементов вы можете получить практически всё, что хотите.
Но для ваших глаз эти формы не существуют, на самом деле, пока не добавите к ним кое-что…
#2 Цвет
Видимый цветовой спектр
Человеческий глаз может видеть более 10 миллионов различных цветов от красного до фиолетового, и с детства все мы учимся присваивать определённые ценности или значения определённым цветам.
Например, представьте огни светофора. Это просто цвета, но мы усваиваем, что красный обозначает стоп, зелёный значит идти, жёлтый означает ступить на рельсы, потому что вы можете сделать это, пока не включился красный. Это показывает, что мы предпринимаем очень разные действия просто в зависимости от цвета, иногда даже не осознавая это.
По моему мнению, это происходит просто потому что мы обучились этим вещам, а не потому что у цвета есть присущие значения от природы. Это подтверждается тем, что эти значения изменяются в зависимости от культуры, где и когда вы выросли.
Всё это значит, что вы можете добавить значение, цель и тон, просто выбрав правильный цвет, нужно только убедиться в том, что вы очень хорошо понимаете, для кого вы проектируете.
Теперь, когда вы можете увидеть свой треугольник, как насчёт сделать его более интересным…
#3 Типографика
От треугольника к букве А
Это большое дело, и я считаю одним из самых важных и сложных для дизайнера реализовать всё правильно. Дело не только в том, что ты пишешь, но в том, как ты преподносишь это. Типографика - это то, как будут выглядеть твои слова.
С правильным шрифтом вы можете взять банальный текст и сделать его мощным. Но это не легко. Что легко - так это полностью сдуть мощное заявление, просто выбрав неправильный шрифт. Типографика, как и цвет, позволяет определить тон.
Большинство шрифтов спроектированы для определённых целей использования, вам просто нужно выучить их и использовать в своих целях. Некоторые шрифты хороши для больших блоков текста, другие для заголовков. Некоторые исключительно функциональные и суперчистые, а другие просто созданы смешными или для иронического использования (вы понимаете, о чём я).
Можно выбрать из тысяч разных шрифтов, но до тех пор, пока вам не понадобится нечто вычурное или вы будете создавать нечто очень специфическое, я бы порекомендовал всегда придерживаться классики. Однако, если чувствуете храбрость, то можете даже спроектировать свой собственный шрифт, хотя при грамотном исполнении я считаю это одной из самых сложных вещей для дизайнера. Но если думаете, что готовы для одной задачи, которую не сможете забыть, то это…
#4 Пространство
Способ, которым вы уравновешиваете пространство, поможет или испортит дизайн, что особенно актуально в типографике.Нужно рассмотреть, как каждый элемент/буква соотносится с другими, дать им в точности столько пространства для дыхания, сколько нужно. Его обычно называют негативным пространством (позитивное пространство - это сами буквы).
Настройка негативного пространства между символами (он же кернинг)
Вы должны принять негативное пространство как часть своего дизайна и так же использовать его. Пространство может быть мощным средством и поможет зрителю пробраться через дизайн. Оно также может быть местом для отдыха глаз.
Но используйте его мудро, слишком много пространства - и ваш дизайн будет выглядеть незавершённым, слишком мало пространства - и ваш дизайн будет казаться слишком захламлённым.
Если научитесь находить правильное соотношение между позитивным и негативным пространством, то сможете создавать…
#5 Баланс, ритм и контраст
Это когда вы начинаете превращать кучу простых элементов в нечто интересное и привлекательное. Грамотно сбалансируйте все элементы вашего дизайна, учитывая их визуальную высоту. Большой чёрный квадрат в правом верхнем углу утопит дизайн в ту сторону. Компенсируйте этот вес или передвиньте квадрат в другое место.
Настройка визуального веса слов для создания ритма и контраста
Способ, которым вы раскладываете элементы на странице, критически важен, потому что более тяжёлые элементы помогут создать контраст и ритм, и глаз вашего зрителя пройдётся по дизайну изящно и без особых усилий.
Кое-что может помочь вашему ритму и балансу, и с этим тоже можно поиграться…
#6 Масштаб
Делаем следующий шаг, настраивая масштаб слов
Масштаб поможет создать не только ритм, контраст и баланс, но ещё и иерархию. Обычно не все элементы вашего дизайна должны иметь одинаковую важность, и один из лучших способов сообщить это - размер.
Теперь, это должно служить определённой цели. Не поддавайтесь на подход «сделай мой логотип больше» и забудьте о пространстве, которое я упоминал ранее.
Например, взять газетную страницу. Что самое большое на странице?
Заголовки, они обычно короткие. Почему? Так вы можете быстро пробежать глазами страницу и увидеть, если ли что интересное почитать. Затем у нас есть подзаголовки, которые с меньшим шрифтом, но дают больше информации о статье, и в конце концов есть сама статья с минимальным размером шрифта, но самый удобочитаемый большой фрагмент текста.
Итак, мы говорим о том, что размер должен выполнять определённую функцию, и никогда не забывайте о человеке, который будет потреблять ваш дизайн. В случае с газетой пришло время навести некоторый порядок с…
#7 Сетка и выравнивания
Это как то странное удовлетворение, когда вы играете в тетрис и складываете последнюю линию, которая исчезает с экрана.
Создание определённой связи между элементами, чтобы они выглядели более сбалансированно и приятно
Предполагается, что они невидимы, но вы их увидите, если откроете книгу или газету. Так или иначе, но (независимо от того, что вы дизайните) привязка к сетке структурирует ваш дизайн и сделает его более приятным и лёгким в усвоении.
Даже если вы намеренно делаете хаотический дизайн, должен быть порядок в этом хаосе.
Выравнивание особенно важно для текста, есть несколько способов выровнять его, но в моём обычае выравнивать по левому краю. Разумеется, всегда важно, что и для кого вы создаёте, но обычно люди читают слева направо и сверху вниз, так что текст по центру или справа намного труднее прочитать.
#8 Фрейминг
Это ключевая концепция в фотографии, но она также применима и в визуальном дизайне.Где бы вы ни использовали картинку, иллюстрацию или что-то ещё, создайте правильный фрейминг - и увидите разницу.
Рефрейминг композиции, чтобы добавить интерес и дополнительный элемент
Попробуйте направить взгляд на то, что важно, масштабируйте/кадрируйте изображения, чтобы ваш объект выделялся или усиливал ваше сообщение. Здесь самое важное - история, и как правильно её рассказать.
После всего этого, если вам кажется, что нечто интересное пропущено, то можете поиграться с…
#9 Текстуры и паттерны
Тестируем текстуру с шумом
Лично я рассматриваю текстуры и паттерны как аксессуары, вы не обязаны использовать и можете прожить без них, но иногда они могут почти одним фактом своего применения сделать ваш дизайн или добавить ту колечку интереса, которой ему не хватало.
Текстуры сегодня не такие модные, какими были когда-то, но с ними вы можете добавить новое измерение своему дизайну, сделав его более трёхмерным и осязаемым.
Текстуры не обязательно должны быть в самой композиции, если вам что-то надо напечатать, выберите правильную бумагу, добавьте штуки вроде фаски, тиснения или УФ-лакировки - и ваш дизайн может превратиться из банального в нечто прекрасное. Но выберите одно, не сходите с ума со специальной отделкой.
Паттерны всегда имеют дело с повторами и могут почти считаться текстурами, в зависимости от того, как вы используете их. Я считаю, что их можно использовать, в основном, для внедрения ритма и динамизма в плоский дизайн, а также как способ компенсировать избыток негативного пространства.
Последнее, но не менее важное, и в реальности что я считаю чашей святого Грааля в визуальном дизайне, это…
#10 Визуальная концепция
Это идея за вашим дизайном. Что вы имеете в виду и каков скрытый смысл за этим поверхностным изображением.
Лампа идей… клише, я знаю:)
Это то, что отличает великолепный дизайн от чего-то, что вы можете скачать из стока.
Создавайте дизайн с мыслью, с целью, и всегда держите идею, которая всё объединяет. Внимательно выберите шрифты для этой цели, думайте, как каждая крошечная часть вашего дизайна следует этой базовой концепции. Согласованность - самое важное.
Если ваша концепция сильна, то вы сможете защитить её и продать идею клиенту/боссу или кому вы её будете показывать.
Также грамотно продуманный дизайн проживёт годы. Модные хипстерские штучки - это классно и круто, как усы и клетчатые рубашки, но у них есть срок годности. Я действительно думаю, что хороший дизайн НЕ следует трендам, а создаёт их.
Вот теперь у вас есть они, «мои» 10 принципов для создания хорошего дизайна. Даже хотя я считаю #10 самым важным, вам следует уделить внимание всем остальным принципам и убедиться, что вы достигли совершенства в своём искусстве. У вас может быть хорошая идея, но я думаю, что вы также должны знать, как её реализовать (или знать того, кто может это сделать вместо вас).
Говорят, что нельзя судить книгу по обложке, но большинство людей в реальности так и делают. Если содержание книги недостаточно хорошо отображено на обложке, то это определённо повлияет на успех.
Ладно! Это всё.
В качестве заключения должен упомянуть: Есть, конечно, другие вещи, которые я учитываю в проекте/дизайне, вроде понимания аудитории и того, чего мы хотим добиться с его помощью, однако я не включал их в список принципов, потому что я считаю эти «ограничения» важной частью определения визуальной концепции. Идея может быть великолепной, но если она не отвечает требованиям проекта, то рано или поздно провалится.
Надеюсь, вы найдёте этот список полезным, даже если вы всё это раньше знали. Я действительно использую этот набор принципов так же интенсивно, как ручки Штедлер, и для меня было интересным упражнением деконструировать мои дизайны в своего рода «строительные блоки».
Не стесняйтесь оставлять свои отзывы, я всегда открыт для здоровой дискуссии.
Спасибо за чтение!
«Визуальный дизайн интерфейсов Сколько бы сил вы ни вложили в исследование пользователей и созда ние модели поведения продукта, способствующей достижению их це лей, силы эти будут...»
-- [ Страница 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 рабочих дней удалим его.
В веб-дизайне очень важно, чтобы пользователь не чувствовал себя не комфортно - это как смотреть на раковину, полную грязной посуды. Если ваш дизайн визуально неуравновешен, то сайт будет выглядеть неорганизованным, а это может заставить пользователей чувствовать себя неудобно. Напротив, ваш дизайн должен быть привлекательным и позволять посетителям расслабиться, оглядеться вокруг, и самый лучший способ достичь такого эффекта – визуальный баланс. Визуальный баланс – это, в основном, баланс элементов дизайна, их расположение - словно жонглирование элементами вашего дизайна.
Когда мы представляем себе баланс, то проще всего его сравнить с понятием веса. Физический вес и вес элементов дизайна на самом деле очень похожи - физический объект может быть маленьким, но очень тяжелым, независимо от массы, так же, как визуальный элемент дизайна может быть очень небольшим, но очень привлекающим внимание. Тяжесть физического объекта можно сравнить с визуальной яркостью элементов дизайна, и каждый элемент взаимодействует с другими элементами дизайна так же, как и физические объекты.
Почему сбалансированные сайты выглядят хорошо
Мы подсознательно любим баланс. Любовь к устойчивым конструкциям заложена в нас на подсознательном уровне, дисбаланс, напротив, вызывает чувство отторжения.
Таким образом, визуальный баланс – залог успешного дизайна. Это та дополнительная «искра», которую одни сайты имеют, а другие – нет.В качестве дополнительного преимущества, сбалансированный дизайн хорошо сочетается с функциональностью.
Есть несколько различных факторов, которые влияют на работу с элементами дизайна. Как вы балансируете двумя или более элементами по отношению друг к другу, и как вы представляете визуальные свойства элементов - это тип баланса и свойства баланса.
Типы баланса
Есть несколько различных методов создания баланса. Вы можете использовать эти различные методы, чтобы организовать и упорядочить элементы, чтобы создать хорошо сбалансированное впечатление, что позволит пользователям чувствовать себя комфортно. Рассмотрим пять основных способов достижения баланса
Горизонтальный баланс
Вертикальный Баланс
Радиальный Баланс
Симметричный баланс
Асимметричный баланс
Отличный способ визуально упорядочить элементы - сбалансировать их по осям - горизонтальной или вертикальной. Горизонтальный баланс - вы располагаете элементы слева и справа от друга – как на детских качелях. Вертикальный баланс - вы развешиваете элементы сверху вниз по центральной оси.
Вместо того, чтобы сбалансировать композиционные элементы по центральным осям, вы можете также сбалансировать элементы вокруг центра - радиальный баланса. В принципе, вы можете разместить элементы вокруг центральной оси, или же наподобие солнечных лучей.
Еще один вид баланса, который, как правило, сочетается с горизонтальным, вертикальным и радиальным балансом - симметричный и асимметричный баланс. Симметричный баланс - когда обе стороны композиции являются зеркальным отображением друг друга - как будто складывается лист бумаги пополам. Симметрия - это очень формальный, строгий баланс, он комфортный для глаз, и широко используется в дизайне зданий или макетах. Он также становиться все более популярным, потому что его легче воспроизвести в любом размере.
Асимметрия, вероятно, самая распространенная форма баланса. По сути, это противоположность симметричному балансу, в котором элементы сбалансированы по отношению друг к другу. Асимметрия является гораздо более интересным способом, чем симметрия, поскольку симметрии, как правило, не хватает визуальной иерархии, тогда как асимметричные макеты, как правило, имеют высокую визуальную иерархию. Асимметрия не означает, однако, что баланса нет вообще, это просто означает, что элементы не позиционируются по отношению друг к другу.
Как узнать, какой из видов баланса было бы правильно сейчас использовать? Если в общем, то симметрия обычно проще воспринимается. Вот поэтому она чаще встречается в дизайне.
Так что если ваша цель - передать стабильность и сильную организационную структуру компании. С другой стороны, если вы хотите передать хрупкость того, что считается безопасным, попробуйте усилить эффект асимметрией. Асимметрия добавить искру в визуально безопасный дизайн.
Для симметрии лучше всего используйте контент примерно одинаковых частей, рассредоточенные по макету
В асимметрии лучше всего привлекать внимание к какой-то одно определённой точке, выводя взгляд зрителя из равновесия
Свойства баланса
Каждый объект в любой композиции имеет свои собственные особенности, а также особенности взаимодействия с другим объектами. Основные особенности в балансе: размер, цвет, форма, величина и положение. Каждое из этих свойств может использоваться по отдельности, чтобы создать симметричный баланс, а сочетание этих свойств необходимо, чтобы создать равновесие в асимметричной композиции – изменение одного элемента будет влиять на другие, и т.д.
Большой пустой объект имеет легкий визуальный вес и поэтому он может быть сбалансирован с меньшим, но более насыщенным объектом. Например, блог с областью содержания и боковая панель – область содержимого, как правило, больше, чем боковая панель. Вы могли бы уравновесить их, добавив больше пустого пространства в области содержания и заполнив боковую панель чем-то визуально более тяжелым. Если вы хотите достичь симметричного баланс в вашем дизайне, то вам нужно убедиться, что элементы имеют одинаковый размер, независимо от визуального веса.
Цвет объекта в композиции может изменить визуальную тяжесть элементов. Более темные цвета визуально тяжелее, чем мягкие светлые цвета - красный визуально тяжелее, чем желтый, поскольку он привлекает больше внимания. Если вы пытаетесь сбалансировать темный элемент с другим или несколькими светлыми элементами, то можете попробовать поиграть с другими свойствами баланса, или изменить цвет фона окружающих элементов.
Форма элементов может резко изменить баланс композиции. Волнистые или зубчатые формы визуально интереснее и, следовательно, тяжелее, чем формы с очень простыми, прямыми линиями. Не пытайтесь уравновесить несколько элементов со сложной формой, лучше сбалансируйте сложный и простой объект.
Контраст может быть крайне важным фактором в композиционном равновесии. Чем выше контрастность объекта, тем он тяжелее, и наоборот. Существует несколько способов сбалансировать элементы с разным уровнем контраста, один из них - компенсировать низкий контраст элемента резким контрастом фона или текстуры. Вы также можете добавлять простые границы, градиенты и тени, чтобы снизить контраст элементов.
Расположение
Это важный фактор, и это свойство можно использовать, чтобы сбалансировать остальные элементами, которые отличаются по форме, цвету, весу и размеру. Как мы говорили ранее, крупный объект тяжелее, чем маленький, но их вес также зависит от того, насколько близко они расположены к центру станицы. Объекты ближе к центру весят больше, чем объекты дальше от него, так что если у вас есть, например, большой красный объект близко к центру, вы можете переместить его в сторону от центра, или переместить другие объекты в центр.
Как добавить баланс на сайт
Итак, как же сделать страницу сбалансированной? В качестве примера возьмем самый простой симметричный баланс. Пустое содержание выглядит довольно уныло, так что добавим меню. Если посмотреть на практически любой неплохой дизайн, то можно увидеть, что меню оформлено «тяжелее» текста. Вот тут и получается самый примитивный баланс - небольшой тяжелый элемент уравновешивает объемный, но лёгкий текст. Начинайте разработку макета с наброска необходимых элементов. Эти правила помогут не совершить ошибок:
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении
Большие объекты тяжелее маленьких
Тёмные объекты тяжелее светлых
Насыщенные цвета тяжелее блеклых
Чем толще граница, тем она тяжелее
Чем больше текстуры, тем тяжелее объект с ней
Кроме горизонтального вида баланса не забывайте про вертикальный и радиальный
Тёплые яркие цвета, такие, как оранжевый и красный, тяжелее, чем холодные цвета (синий, зелёный)
Правило третей
В визуальных искусствах есть такое понятие, как правило третей - это когда рабочее пространство мысленно разбивается на 9 равных частей 2-я вертикальными и 2-я горизонтальными линиями. Так вот, по этому правилу главные композиционные центры стоит располагать на пересечении этих линий.
Итак, как же разделить макет на 9 равных частей?
1. Вообразим, что всё рабочее пространство - обычный прямоугольник
2. Мысленно делим вертикальную его часть на 3 равных доли и проводим для этого 2 паралленьные линии.
3. То же самое для горизонтальной составляющей
Соблюдение правила третей задаёт больший интерес к содержимому, чем при обычном центрировании.
Примеры с пояснениями
На сайте MacAllan Ridge вы видите асимметричное расположение блоков. Однако громоздкий блок с картинкой уравнивается тяжелыми границами блока меню. Довольно распространённый приём балансировки.
9 ответов
вот мой прием, надеюсь, он помогает. /
в первую очередь позволяет прояснить дизайн и development
дизайн - это концептуальная работа, создание концепции для решения, процесс устранения вещей, которые вы думаете, чувствуете и верите, не подходят в качестве решения вашей намеченной цели.
разработка - это разработка окончательной спецификации/идеи (по крайней мере теоретически) или что-то, что имеет смысл и близко к тому, что вы ищете (хотя во многих случаях это не так) в основном преобразование вашего дизайна/идеи в рабочий конечный продукт
note , что обе вещи могут и в большинстве случаев сосуществовать бок о бок при производстве продукта
теперь, когда это неуправляемо, visual, web, ux, ui - это только подкатегории концептуального понятия, каждый из которых, хотя на основе принципа дизайна также имеет свои собственные юниверсы и их собственные вспомогательные правила и вспомогательные практики, которые применяются непосредственно к их соответствующим подкатегориям и во многих случаях может распространяться, по-видимому, из одной подкатегории в другую.
из моего понимания и того, что я узнал за эти годы,
дизайн взаимодействия (не относится к области) - концепция/понимание того, как один/отдельный взаимодействует с сущностью и как разрабатывать процесс взаимодействия этого человека с сущностью. этот объект может быть любым, что вы его выбираете, например, ваш автомобиль или ваш тостер, веб-браузер и веб-сайт, которые вы просматриваете в браузере.
визуальный дизайн (не относится к области) - концепция/понимание эстетической привлекательности и воздействия субъекта, с которым человек взаимодействует/смотрит на
веб-дизайн (для конкретной области) - концепция/понимание идеи, которая является спецификой технологии (ов), и включает в себя аспекты нескольких концепций дизайна, таких как, но не ограничиваясь: дизайн взаимодействия, визуальный дизайн, дизайн пользовательского интерфейса, дизайн пользовательского интерфейса и т.д.
(не относится к области) - концепция проектирования пользовательского интерфейса, которая, в свою очередь, включает визуальный дизайн и дизайн взаимодействия, а также ограничения в области, в которой происходит такая проектная работа.
пользовательский интерфейс (какой-то специфический для поля) - концепция проектирования интерфейса, через который пользователь может взаимодействовать с продуктом, gui в программном/веб-приложении или рулевом колесе в автомобиле
разработка пользовательского интерфейса (не относится к полю) - это процесс преобразования концепции дизайна пользовательского интерфейса в рабочий интерфейс, который создает физическое соединение между отдельными людьми и продуктом.
надеюсь, что это поможет
Дизайн пользовательского интерфейса - как пользователь думает и чувствует себя
Информационная архитектура - как организована система
Дизайн пользовательского интерфейса - как организовано содержание
Дизайн взаимодействия - как пользователь и устройство действуют и реагируют
Визуальный дизайн - как выглядит
Некоторые или все вышеперечисленные дисциплины являются частью следующих полей:
Архитектура, когда она связана со зданиями
Дизайн интерьера, когда связано с внутренними пространствами
Промышленный дизайн, связанный с осязаемыми объектами
Графический дизайн, связанный с текстом и изображениями
Дизайн приложения, связанный с цифровым вводом-выводом
Веб-дизайн, связанный с браузером
Конструкция взаимодействия - Исследовательское лицо, определяет ВЗАИМОДЕЙСТВИЕ/СООБЩЕНИЕ системы/приложения. Visual Design - Исполнитель, который иллюстрирует графику, может быть веб-носителем/печатным носителем /.etc Веб-дизайн - художник, НО только для WEB-ПРИМЕНЕНИЯ Дизайн UX - Исследовательский персонал, который понимает все и все от ПОЛЬЗОВАТЕЛЬСКОЙ СТОРОНЫ и следит за опытом HAPPY/SMILEY EXPERIENCE Дизайн пользовательского интерфейса - такой же, как веб-дизайн Разработка интерфейса - Frontend Developer - HTML, CSS, JS, JQuery, Ajax, YUI, Php, Silverlight.net.etc.etc. Любой knd интерфейсных технологий.
Позвольте мне организовать его простым/простым способом UX DESIGN ИНТЕРАКТИВНЫЙ ДИЗАЙН ИНТЕРФЕЙС ПОЛЬЗОВАТЕЛЯ /WEB/VISUAL DESIGN РАЗРАБОТКА пользовательского интерфейса
Мой ответ на этот вопрос:
Дизайн взаимодействия - представляет собой конструктивный аспект, связанный с понятием полезности. Выбор визуальных элементов не определяется эстетическими принципами, а тем, насколько полезен дизайн для посетителя сайта и насколько он упростит и оптимизирует его опыт.
Пример подхода: подходит ли круглая кнопка для нашей целевой аудитории или квадратной?
Дизайн > и дизайн пользовательского интерфейса означают эстетическое восприятие. Единственное отличие между Visual Design и UI Design заключается в том, что первый из них более всеобъемлющий, включая все: от кнопок, значков и макетов до плакатов, в то время как последний не включает в себя баннеры, ориентируясь главным образом на значки/кнопки/тематическая сторона приложения.
Дизайн UX похож на понятие "Дизайн взаимодействия", но он более "хардкор" в этом отношении, описывая логический подход в отношении удобства использования, такой как логическая архитектура веб-сайта, определяемая пользователь нуждается. Это процесс планирования, проецирования и каркаса, создания функций и обеспечения системы, а дизайн взаимодействия - еще один шаг.
В заключение, UX связан с концепцией эскизов и каркаса, UI завершает дизайн соответственно (добавление темы, веб-безопасных шрифтов и цвета палитра), а разработка пользовательского интерфейса - это процесс воссоздания дизайна при кодировании.
Вы можете узнать больше об этом в "Фонде взаимодействия": https://www.interaction-design.org/literature?ep=mb
Реальной проблемой, которую нам нужно решить, является разница между пользовательским интерфейсом, взаимодействием и UX.
Вот еще одна МИРОВАЯ ПЕРВАЯ УГЛУБЛЕННАЯ ДИСКУССИЯ о таких различиях.
(1) UI означает, что пользователь "смотрит" на систему/приложение и как система/приложение "обращается" к пользователю. Внешний вид приложения, размер, макет, цвета, шрифты, дисплей, точно так же, как освещение магазина, высота и ширина полки, ширина и длина острова и т.д.
(2) Взаимодействие означает, как пользователь "действует" на систему/приложение и как система/приложение "воздействует" на пользователя. Здесь я сильно заимствую из книги Криса Кроуфорда "Искусство интерактивного дизайна: эгоистичное и освещающее руководство по созданию успешного программного обеспечения".
Он постулирует, что хорошее взаимодействие напоминает хороший разговор, и что хороший разговор имеет три атрибута essentail, которые я объясню в приведенном ниже примере. Он говорит, что хороший интерактивный участник "слушает", "думает" и отвечает в течение разумного промежутка времени.
Человек/приложение просто слушает. Затем он не является интерактивным, например. рекордер, книга, стена
Человек/приложение просто говорит. Затем он не является интерактивным, например. радио, телевидение старого времени, старый CD-плеер времени
Человек/приложение просто разговаривает и слушает, но не думает. например некоторые автоответчики, некоторые социальные отверстия
(3) UX Учитывая тот же интерфейс и такое же взаимодействие, получим ли мы тот же UX? Могут ли они вообще меняться?
например. Скажем, есть поисковая система, которая работает так же, как Google. Но вы "чувствуете" или "подозреваете", что эта новая поисковая система слишком сильно собирает ваши личные данные.
Для меня дизайн взаимодействия касается пользовательского опыта, однако он также фокусируется на поведении и понимании потребностей аудитории. Для меня это не обязательно касается самого дизайна, а того, как используется дизайн. Что привлекает меня больше всего к дизайну взаимодействия, так это идея о том, что дизайн взаимодействия связан не только с проектированием большего количества уже существующих, но и с созданием дизайна, который в настоящее время не существует.
поделиться