В чем разница между дизайном взаимодействия, визуальным дизайном, веб-дизайном, дизайном UX, дизайном пользовательского интерфейса, разработкой пользовательского интерфейса? Лучшие UI UX дизайн инструменты для дизайнера интерфейсов Иерархия баланс в визуа.

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

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

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

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

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

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

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

Перевод

Вчера я слушал подкаст и обратил внимание, как кто-то задавал вопрос и по ходу дела сказал: «Старый фанат, впервые звоню». По какой-то причине это заставило меня подумать о Medium. Я читаю тут статьи давным-давно, но никогда не вставлял свои два цента. Сегодня тот день, когда это изменится.

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

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

Итак, готовы? Всё начинается с…

#1 Точка, линия и форма

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

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

Точка > линия > форма

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

Но для ваших глаз эти формы не существуют, на самом деле, пока не добавите к ним кое-что…

#2 Цвет

Видимый цветовой спектр

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

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

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

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

Теперь, когда вы можете увидеть свой треугольник, как насчёт сделать его более интересным…

#3 Типографика

От треугольника к букве А

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

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

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

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

#4 Пространство

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

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

Настройка негативного пространства между символами (он же кернинг)

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

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

Если научитесь находить правильное соотношение между позитивным и негативным пространством, то сможете создавать…

#5 Баланс, ритм и контраст

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

Настройка визуального веса слов для создания ритма и контраста

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

Кое-что может помочь вашему ритму и балансу, и с этим тоже можно поиграться…

#6 Масштаб

Делаем следующий шаг, настраивая масштаб слов

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

Теперь, это должно служить определённой цели. Не поддавайтесь на подход «сделай мой логотип больше» и забудьте о пространстве, которое я упоминал ранее.

Например, взять газетную страницу. Что самое большое на странице?

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

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

#7 Сетка и выравнивания

Это как то странное удовлетворение, когда вы играете в тетрис и складываете последнюю линию, которая исчезает с экрана.

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

Предполагается, что они невидимы, но вы их увидите, если откроете книгу или газету. Так или иначе, но (независимо от того, что вы дизайните) привязка к сетке структурирует ваш дизайн и сделает его более приятным и лёгким в усвоении.

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

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

#8 Фрейминг

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

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

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

Попробуйте направить взгляд на то, что важно, масштабируйте/кадрируйте изображения, чтобы ваш объект выделялся или усиливал ваше сообщение. Здесь самое важное - история, и как правильно её рассказать.

После всего этого, если вам кажется, что нечто интересное пропущено, то можете поиграться с…

#9 Текстуры и паттерны

Тестируем текстуру с шумом

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

Текстуры сегодня не такие модные, какими были когда-то, но с ними вы можете добавить новое измерение своему дизайну, сделав его более трёхмерным и осязаемым.

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

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

Последнее, но не менее важное, и в реальности что я считаю чашей святого Грааля в визуальном дизайне, это…

#10 Визуальная концепция

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

Лампа идей… клише, я знаю:)

Это то, что отличает великолепный дизайн от чего-то, что вы можете скачать из стока.

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

Если ваша концепция сильна, то вы сможете защитить её и продать идею клиенту/боссу или кому вы её будете показывать.

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

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

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

Ладно! Это всё.

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

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

Не стесняйтесь оставлять свои отзывы, я всегда открыт для здоровой дискуссии.

Спасибо за чтение!

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. Но вы "чувствуете" или "подозреваете", что эта новая поисковая система слишком сильно собирает ваши личные данные.

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

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

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

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

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

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

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

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

Рис. 3.4.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Рис. 3.5.

Сетка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Рис. 3.1.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Форма

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

Размер

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

Цвет

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

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

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

Яркость

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

Направление

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

Текстура

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

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

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