В чем разница между дизайном взаимодействия, визуальным дизайном, веб-дизайном, дизайном UX, дизайном пользовательского интерфейса, разработкой пользовательского интерфейса? Дизайн интерфейсов UX UI Дизайнер интерфейсов #9 Текстуры и паттерны
Вольный перевод статьи Якуба Линовски — «A Good User Interface» .
Хороший пользовательский интерфейс обладает высокими показателями конверсии и прост в использовании. Другими словами, он хорош как для бизнеса, а так и для людей, которые им пользуются. Ниже вашему вниманию предлагается ряд практических идей, которые вы можете попробовать применить.
Идея 1: Старайтесь использовать макет с одной колонкой вместо многоколоночного
Макет с одной колонкой позволяет лучше контролировать повествование. Он сможет направить ваших пользователей наиболее предсказуемым путем — сверху вниз. Многоколоночный подход допускает риск того, что пользователь может отвлечься от основной цели страницы. Направляйте людей с помощью рассказа с обязательным призывом к действию в конце.
Идея 2: Старайтесь сделать подарок, не завершайте продажу сразу
Дружественный жест, такой как сделать подарок покупателю, именно то, что нужно. Если смотреть глубже, то подарки — это еще и эффективная тактика убеждения, основанная на принципе взаимности. Как бы очевидно это не звучало, но небольшие знаки признательности окупятся сторицей.
Идея 3: Старайтесь объединять схожие функции и не дробить интерфейс
В ходе работы можно непреднамеренно создать несколько разделов и элементов, которые выполняют одну и ту же функцию. Это обычная энтропия, когда система становится беспорядочной с течением времени. Не используйте разные названия для одинаковых функций, чтобы не увеличивать информационную нагрузку на ваших клиентов. Чем больше фрагментирован пользовательский интерфейс, тем более крутой становится кривая обучения и тем сложнее клиенту вникнуть в суть того, что от него требуется. Проведите рефакторинг пользовательского интерфейса и объедините сходные функции вместе.
Идея 4: Старайтесь использовать социальное доказательство вместо того, чтобы рассказывать о себе самом
Социальное доказательство является еще одной тактикой убеждения, которая позволяет увеличить конверсию.
Рекомендации о вас и вашем предложении могут побудить пользователя к действию, Убедитесь, что данные рекомендации или мнения присутствуют.
Идея 5: Старайтесь повторить главный призыв к действию, вместо того, чтобы показывать его один раз
Повторение призыва к действию больше применимо к более длинным страницам или же используется повторение через несколько страниц. Конечно, вы не хотите, чтобы предложение показывалось 10 раз на одной странице и раздражало людей. Длинные страницы стали нормой и попытка уместить все в первый экран уже не является хорошей идеей. Нет ничего страшного в том, чтобы сделать один призыв вверху страницы, ненавязчиво напомнить в середине и закрепить в конце. Когда люди достигают конца страницы, они останавливаются подумать, что сделать дальше, и тут самое время сделать предложение или завершить сделку.
Идея 6: Старайтесь усиливать различия в стиле между кликабельными и выбранными элементами, а не размывать их
Выразительные средства, такие как цвет, глубина и контрастность, могут быть использованы в качестве надежных маркеров, отражающих фундаментальный язык навигации по интерфейсу: где я, и куда я могу перейти. Чтобы четко донести эту идею до пользователей, нужно использовать различное визуальное оформление для элементов разного назначения (ссылок, кнопок, выбранных элементов и контента), эти различия должны быть явно выражены, и следует использовать их одинаковым образом во всем интерфейсе.
На картинке приведен пример, где синий цвет выбран, чтобы отметить все, что может нажиматься, а черный для всего, что было выбрано или указывает на то, где мы. При правильном применении, людям будет гораздо легче ориентироваться среди таких подсказок. Не усложняйте жизнь пользователям — не нарушайте смысловое кодирование.
В случаях, когда показывается несколько предложений, выделенная рекомендация продукта может быть хорошей идеей, потому что некоторых людей нужно немного подтолкнуть. Есть некоторые психологические исследования, которые предполагают, что чем шире выбор, тем меньше шансов, что решение вообще будет принято и реализовано. Чтобы не допустить такой аналитический паралич, старайтесь подчеркивать и выделять одни варианты на фоне других.
Идея 8: Попробуйте отмену действия вместо запросов на подтверждения
Представьте, что вы только что нажали на действующую кнопку или ссылку. Отмена действия уважает изначальное пользовательское намерение, позволяя действию произойти сразу, с возможностью отмены. Запросы на разрешения действия, напротив, внушают пользователю, что он или она не знают, что они делают, подвергая сомнению их намерения. Действия человека чаще всего отражают его действительные намерения, и только в редких ситуациях они случайны. Неэффективность и убожество подсказок особенно очевидны, когда пользователи должны выполнять действия повторно, и подсказки будут появляться много раз, снова и снова: это плохой опыт. Попробуйте дать вашим пользователям больше возможностей контроля: отменить действие и не спрашивать подтверждения там, где это возможно.
Идея 9: Объясните, для кого предназначен продукт. Не пытайтесь адресовать сообщение всем подряд
Вы четко выделяете свою аудиторию, или обращаетесь ко всем сразу? Эта идея повышения конверсии заключается в том, чтобы ясно объяснить, для кого именно предназначен ваш продукт или сервис. Когда вы обращаетесь к аудитории, выделите определенные признаки ваших покупателей. Это выведет общение с ними на новый уровень и придаст некий оттенок эксклюзива и элитарности. Возможный риск такой стратегии заключается в том, что при объявлении каких-либо ограничений вы можете отсечь часть потенциальной аудитории. В этом случае выручит прозрачность предложения: честность вызывает доверие.
Идея 10: Говорите прямо вместо предположений
Вы можете обратиться к людям с неуверенной дрожью в голосе или можете сказать то же самое уверенно. Если вы заканчиваете каждое предложение вопросительными знаками, используете слова вроде «возможно», «было бы здорово», «вам интересно?» или «не хотите попробовать?», тогда у вас есть все возможности добавить вашему сообщению убеждение. Кто знает, быть может, иногда стоит подсказать людям следующий шаг на пути оптимизации конверсии?
Идея 11: Больше контраста вместо однородности
Чем более явно и резко выделяются призывы к действию среди остальных элементов страницы, тем лучше будет работать ваш интерфейс, тем он сильнее. Контраст основных целевых действий можно усилить с помощью множества способов. Используя насыщенность, вы можете делать некоторые элементы темнее на фоне светлых, с помощью глубины вы заставляете предметы казаться ближе на фоне остального контента, который выглядит более отдаленным (используйте тени и градиенты). Наконец, вы можете подобрать дополняющие цвета из цветового круга (например, желтый и фиолетовый) для еще большего усиления. Однако не стоит чрезмерно увлекаться: контраст между контентом и основным действием должен быть сбалансирован.
Идея 12: Покажите место происхождения продукта вместо обобщений
Информация о вас, вашем продукте или услуге позволяет выйти на более личный уровень в общении с клиентом. Хороший способ рассказать о себе - упомянуть страну, штаты или город происхождения. Если вы сможете практически применить данный совет, то отношение к вам станет более доброжелательным. Часто, упоминание о том, где был сделан продукт, является хорошим способом создать ощущение более высокого качества продукта.
Идея 13: Сокращайте количество полей, не спрашивайте слишком много
Люди по своей природе не любят трудоемкие задачи, и это в полной мере относится к заполнению полей формы. Каждое поле, которое требует ответа от пользователя, может спровоцировать его к уходу со страницы. К тому же, не все устройства позволяют быстро набирать текст, особенно трудно это делать на мобильных устройствах. Постарайтесь оставить только необходимые поля, и удалить столько полей, сколько возможно. Если необходимых полей действительно много, то заполнить их будет лучше после отправки основной формы на отдельной странице или при помощи дополнительной формы. Расширить форму несложно, но меньшее количество полей позволяют увеличить конверсию.
Идея 14: Раскройте все опции сразу
Каждое выпадающее меню, используемое вами, скрывает набор действий, на поиск которых требуется дополнительное усилие. Если эти скрытые опции являются центральными для того, чтобы пользователь совершил необходимое действие, то, возможно, стоит увеличить их приоритет на странице. Попробуйте сделать выпадающее меню для тех опций, которые очевидны и не требуют новых знаний от пользователя: в выборе даты и времени (например, календари) или географического расположения. Иногда пункты выпадающего меню могут работать в тех интерфейсах, действия которых пользователь должен совершать время от времени. Будьте осторожны, используя выпадающие списки для элементов на пути основного повествования.
Идея 15: Предлагайте последовательность вместо страниц с двойным дном
Страницы с двойным дном — убийцы конверсии. Да, все уже привыкли скроллить длинные страницы, но важно не создать у посетителей ложное ощущение того, что страница закончилась раньше, чем это произойдет на самом деле. Если страница предполагает прокрутку, задайте визуальный или смысловой ритм, который явно укажет пользователю, что дальше есть продолжение. Будьте аккуратны с большими разрывами на местах «сгиба», где может появиться граница экрана (конечно, я имею ввиду условные зоны, поскольку сложно предусмотреть все варианты для разнообразных устройств).
Идея 16: Сохраняйте фокус, не злоупотребляйте ссылками
Нет ничего сложного в том, чтобы расставить побольше ссылок в разных местах страницы в надежде удовлетворить как можно больше нужд потенциальных клиентов. Однако, когда вы создаете повествовательную страницу, предназначение которой в том, чтобы подвести пользователя к определенному целевому действию, подумайте дважды. Не забывайте, что любая ссылка перед основным целевым действием увеличивает риск ухода пользователя со страницы и отвлекает от того, что вы от него ждете. Следите за количеством ссылок и по возможности соблюдайте баланс между разводящими страницами (с немного большим количеством ссылок) с «тоннельными» страницами с меньшим количеством ссылок и большей конверсией. Чистка от ненужных ссылок наверняка увеличит шансы добраться до важной кнопки.
В итоге всё же решил не выбрасывать проделанную работу, т. к. эта статья служит своего рода чек-листом, по которому стоит пройтись перед тем, как начать разрабатывать новый интерфейс, и поглядывать в него непосредственно по ходу процесса дизайна пользовательских интерфейсов.
«Дизайн — это больше, чем просто компоновка, упорядочивание или даже редактирование. Это привнесение ценности и добавление смысла, просвещение, упрощение, разъяснение , модификация, облагораживание, преувеличение, убеждение или даже развлечение» — Пол Ренд, книга «Дизайн: форма и хаос».
- Интерфейсы созданы для обеспечения взаимодействия
Интерфейсы существуют, чтобы обеспечить взаимодействие между людьми и нашим миром. Они могут помочь прояснить, осветить, включить и показать взаимоотношения, объединяют нас, разделяют, управляют нашими ожиданиями и предоставляют доступ к услугам. Процесс проектирования интерфейса это не искусство, а сами интерфейсы не монументы. Интерфейсы выполняют некоторую работу и их эффективность может быть измерена. И, однако, они не утилитарны. Лучшие интерфейсы могут вдохновлять, пробуждать, мистифицировать и усиливать наше взаимодействие с миром. - Задача № 1 — обеспечить ясность
Ясность — это и первая и самая важная задача интерфейса. Чтобы быть эффективными, используя интерфейс, который вы создали, люди должны быть способны распознать что он собой представляет, осознать то, зачем они используют его, понять с чем интерфейс помогает взаимодействовать, предсказать, что произойдёт, когда они станут использовать его, и затем успешно взаимодействовать с ним. В то время, как при знакомстве с интерфейсом есть место некоторой загадке и отложенной выгоде от его использования, не должно быть места для путаницы. Ясность внушает доверие и помогает дальнейшему использованию. Сотня простых и понятных экранов предпочтительнее одного запутанного. - Удерживайте внимание любой ценой
Мы живём в мире, полном отвлекающих факторов. Трудно даже ненадолго погрузиться в чтение без того, чтобы что-то нас не отвлекло и не перетянуло на себя внимание. Внимание же бесценно. Не отвлекайте пользователя мусором в боковой колонке своего приложения, помните, для чего экран нужен в первую очередь. Если кто-то читает, то позвольте ему закончить прежде чем показывать рекламу (конечно, если без этого никак). Цените внимание и тогда не только ваши пользователи станут счастливее, но и вы выгодаете от этого. Когда взаимодействие является основной целью, внимание становится необходимым условием. Удерживайте его любой ценой. - Дайте пользователям контроль в их руки
Люди ощущают себя комфортно, когда они чувствуют контроль над собой и окружением. Бездумное ПО уводит их в сторону от комфорта, вовлекает в незапланированные взаимодействия, путает навигацией и непредвиденными результатами. Предоставьте пользователям контроль: показывайте системный статус, описывайте причинно-следственную связь (если вы сделаете это, получите то) и давайте им понять, что их ждёт на каждом шаге. Не переживайте, что это будет им очевидно, потому что почти всегда это совсем неочевидно. - Лучшие манипуляции — прямые
Лучший интерфейс это тот, которого нет. Например, когда мы непосредственно управляем физическим объектом в нашем мире. Но т. к. это не всегда возможно, и многие объекты не физические, а информационные, мы делаем интерфейсы, которые помогают нам взаимодействовать с ними. Легко оступиться и добавить больше, чем необходимо в интерфейс: откарамеленные кнопки, градиенты и блеск, графику, опции, настройки, окна, вложения, и другой хлам. В итоге мы манипулируем элементами интерфейса, а не тем, что на самом деле важно. Вместо этого, стремитесь к идее прямого управления. Интерфейс должен быть незаметным и распознавать самые обычные человеческие жесты. В идеале, интерфейс должен быть настолько незаметным, чтобы у пользователя сложилось впечатление, что он непосредственно управляет объектом, находящимся в его фокусе.
Добавлено: см. принцип Интерфейс — зло . - Одно основное действие на экран
Каждый экран, который мы проектируем, должен быть предназначен лишь для одного важного действия пользователя. Это упрощает обучение, использование пользователями, и облегчает доработку и поддержку разработчиками при необходимости. Экраны, в которые заложены два и более целевых действий, быстро приводят к путанице. Как статья, которая должна содержать один чёткий тезис, так и каждый экран должен предлагать одно действие, наполняющее его смыслом. - Оставьте вторичные действия на втором плане
Экраны с одним основным целевым действие могут иметь множество дополнительных действий, но они должны остаться вторичными! Ваша статья существует не для того, чтобы её можно было расшарить в твитере. Она существует, потому что люди могут прочитать и понять её. Делайте вес вторичных целевых действий визуально легче или показывайте их после того, как основное будет выполнено. - Сделайте следующий шаг естественным
Лишь немногие действия являются заключительными, так что хорошенько проработайте для каждого действия следующий шаг. Предвидьте, каким будет следующее действие и спроектируйте его заранее. Так же, как и в обычном разговоре, предложите возможность для следующего слова. Не оставляйте человека висеть в небытии только потому, что они сделали то, что вы хотели, чтобы они сделали. Дайте им сделать следующий естественный шаг который поможет дальше достигнуть их цели. - Внешний вид следует из поведения (или «функция определяет форму»)
Людям больше всего удобно с теми объектами, которые ведут себя так, как они ожидают. Другие люди, животные, вещи, программы. Когда кто-то или что-то ведёт себя в соответствии с нашими ожиданиями мы чувствуем будто у нас с ними хорошие отношения. Именно поэтому спроектированные элементы должны выглядеть соответственно своему поведению. На практике это означает, что кто-то должен быть в состоянии предсказать как элемент интерфейса себя поведёт просто взглянув на него. Если он выглядит как кнопка, то он и должен действовать как кнопка. Не заигрывайте с основами взаимодействия. Оставьте свою креативность для вопросов другого уровня. - Последовательность имеет значение
Следуя предыдущему принципу, элемент не должен выглядеть подобно другому, если только их поведение не взаимосвязано. Элементы с одинаковым поведением должны выглядеть одинаково. Так же важно для различающихся элементов выглядеть непохожими (и непоследовательными). В стремлении быть последовательными новички дизайнеры часто неявно выделяют важные различия, используя те же самые визуальные трактовки, в то время как визуальные различия являются целесообразными. - Сильная визуальная иерархия работает лучше
Сильная визуальная иерархия достигается когда на экране наблюдается чёткий порядок последовательности визуальных элементов. То есть, когда пользователи каждый раз просматривают подобные блоки в одинаковом порядке. Слабая визуальная иерархия даёт мало подсказок о том, где взгляду можно отдохнуть и, в итоге, создаёт суматоху и выглядит запутанной. Трудно поддерживать сильную визуальную иерархию, потому что визуальный вес относителен: когда всё выделено, то не выделено ничего. Если требуется добавить один визуально тяжёлый элемент на экран, то может понадобиться снизить акцент со всех элементов для сохранения иерархии. Большинство людей не замечают её, но это один из самых простых путей усилить или ослабить дизайн. - Продуманная организация снижает когнитивную нагрузку
Как сказал Джон Маеда в своей книге «Простота», продуманная организация элементов на экране может сделать большое малым. Она помогает людям проще и быстрее понять интерфейс, если вы показали взаимосвязи контента в дизайне. Группируя подобные элементы, можно показать связь элементов с помощью взаимного расположения и ориентации. С помощью продуманной организации контента вы уменьшаете когнитивную нагрузку на пользователя, которому не нужно задумываться о том, как элементы соотносятся между собой, потому что вы уже сделали это за них. Не заставляйте пользователя думать. Вместо этого помогите ему и покажите связи на экране с помощью дизайна. - Подсвечивайте, но не указывайте
Цвет физических предметов изменяется при изменении освещения. В яркий солнечный день мы видим дерево совсем не так, как на закате. Как в физическом мире где цвет относителен, в интерфейсе он так же не должен жёстко определять что-либо. Он может помочь подсветить, использоваться для акцента, но не должен быть единственным отличием элементов. Для длительного чтения используйте светлые или приглушённые цвета, оставляя яркие цвета для акцентирования. Конечно же, можно использовать яркие цвета и для фоновой заливки, только убедитесь, что это подходит вашей аудитории. - Прогрессивное раскрытие
На каждом экране покажите только то, что необходимо. Если людям необходимо сделать выбор, покажите им достаточно информации, чтобы они могли сделать его, затем погрузите их в детали уже на последующем экране. Избегайте тенденции чересчур разъяснить и вывалить всё разом. Когда возможно, отложите принятие решения на нескольких экранах последовательно раскрывая информацию по мере необходимости. Это обеспечит более ясное взаимодействие с интерфейсом. - Помогайте людям по ходу
В идеальном интерфейсе не требуется помощь, потому что интерфейс легок в изучении и удобен в использовании. В реальном же, помощь встроена и контекстна. Доступна только в нужных местах, когда необходима, и скрыта от взора всё остальное время. Предлагая идти в раздел помощи, чтобы найти ответ на вопрос, вы возлагаете ответственность на пользователей знать то, что им нужно искать, и как формулировать запрос. Вместо этого встраивайте помощь там, где она может понадобиться. Просто убедитесь, что она не стоит на пути пользователей, которые уже знают как пользоваться интерфейсом. - Решающий момент: нулевое состояние
Первый опыт использования интерфейса решающий, но при этом дизайнеры часто упускают его из виду. Для того, чтобы образом помочь пользователям освоиться, правильно будет спроектировать нулевое состояние, т. е. состояние, когда ещё ничего не происходило. Это состояние не должно быть пустым экраном. Оно должно обеспечить направление и содержать указание для быстрого начала работы. Большая часть затруднений возникает на самом первом шаге. Но как только люди понимают правила игры, у них повышаются шансы на успех. - Текущие проблемы являются наиболее важными
Люди обычно ищут решение своих актуальных проблем, а не потенциальных, тех, что возникнут в будущем. Таким образом, нужно противостоять созданию интерфейсов для гипотетических проблем. Нужно изучать текущую ситуацию и проектировать решение существующих проблем. Это может быть не так интересно, как витать в облаках и строить воздушные замки, но если люди действительно будут пользоваться вашим интерфейсом, то это принесёт больше пользы. - Отличный дизайн незаметен
Любопытное свойство отличного дизайна заключается в том, что он остаётся незаметным пользователям. Одна из причин этого в том, что если дизайн удачен, то пользователи могут сконцентрироваться на их задачах, а не интерфейсе. Когда они завершают свои задачи, они получают удовлетворение, а не рефлексируют над ситуацией. Для дизайнера это может быть жестоким открытием, т. к. мы в этом случае он получает меньше похвалы, когда дизайн оказывается действительно хорош. Но хорошие дизайнеры довольствуются тем, что их дизайном активно пользуются, и знают, что счастливые пользователи обычно молчат. - Развивайте навыки в других дизайнерских дисциплинах
Визуальный и графический дизайн, типографика, копирайтинг, информационная архитектура и визуализация — все эти дисциплины являются частью дизайна интерфейсов. Они могут быть лишь затронуты вскользь или по ним можно специализироваться. Не участвуйте в дебатах и не смотрите свысока на другие дисциплины: возьмите от всех них те аспекты, что помогут развиваться дальше в вашей работе. Попробуйте взять что-то из, казалось бы, не связанных дисциплин: издательского дела, программирования, переплёта книг, скейтбординга, пожаротушения, каратэ. - Интерфейсы существуют, чтобы их использовали
Как и в других направлениях дизайна, дизайн интерфейсов успешен тогда, когда люди используют результат вашего труда. Как в случае красивого стула, на котором невозможно комфортно сидеть, дизайн интерфейса терпит неудачу, когда люди предпочитают не пользоваться им. Таким образом, дизайн интерфейсов это и создание продукта и среды его использования. Недостаточно когда интерфейс тешит эго дизайнера — им должны пользоваться!
Дизайн интерфейсов моя основная специализация. За много лет работы я уяснил важную вещь, которую иногда приходится доносить даже до клиентов. Самое главное в дизайне интерфейсов далеко не сам дизайн. Главное это изучение и понимание того, как люди с ним взаимодействуют. Необходимо постоянно анализировать что будет работать, а что нет.
Есть отличная шутка про то, что самый лучший в мире интерфейс - женская грудь. Каждый ребенок с рождения знает как с ней взаимодействовать. Я стремлюсь к тому же.
Именно поэтому я сознательно разделяю дизайн интерфейсов на UX разработку и UI дизайн.
UX дизайн
UX дизайн можно назвать дизайном с точки зрения изначального значения слова design. Дизайн - это, прежде всего, разработка, проектирование и результат работы головой.
UX дизайн начинается с исследования и аналитики. Прежде чем что-то проектировать я изучаю компанию, её продукт, конкурентов и отрасль. Важный момент: без хорошего продукта бесполезно делать хороший дизайн.
Десктоп приложение, интерфейс АРМ, кассовый терминал, интерфейс банкомата, дизайн криптовалютной биржи - каждая разработка интерфейса должна начинаться со сбора информации. Как минимум: целевая аудитория, причины её неудовлетворённости, как продукт способен решить проблемы людей.
Мне приходилось разрабатывать интерфейсы для Smart TV и геонавигационных сервисов. Нужно очень хорошо понимать где и как будет использоваться интерфейс, и какие ограничения у платформы.
С другой стороны, это лучший способ применить навыки дизайнера и аналитика.
Прототипирование интерфейсов
Прототипы интерфейсов я делаю в Axure RP. На сегодня это стандарт отрасли проектирования UX. Параллельно изучаю Figma.
Sketch лично для меня оказался неудобен. Figma имеет прямой экспорт макетов в Zeplin. Для большинства разработчиков digital-сервисов это самый удобный вариант.
Если Sketch/Figma не принципиальны, я работаю в редакторе Xara Designer Pro X. Он способен генерировать динамические страницы на базе макетов.
Иногда показываю макеты в сервисе InVission. На нём можно показать минимальную анимацию компонентов и переходов. Такие прототипы интерфейсов дают заказчику хорошее представление о конечном продукте.
UI дизайн интерфейсов
Уделяю пристальное внимание деталям и сетке. Ровная структура и приятные мелочи бросаются в глаза и создают приятное впечатление у ваших посетителей.
В интерфейсах сложных digital-сервисов отрисовываю различные состояния для кнопок. Иногда отдельно создаю UI kit для особо больших проектов.
План работ над дизайном интерфейса
- Посмотрите мои работы, убедитесь, что они вам нравятся.
- Запрос и передача материалов.
- Предоплата 50% (в отдельных случаях 100%).
- Интервью, сбор информации и аналитика.
- Разработка черно-белых прототипов интерфейса.
- Дизайн интерфейса в цвете.
- После утверждения всех макетов - остаток суммы.
- Подготовка и передача исходников в формате *.PSD.
Что я делаю и чего не делаю
Аудит текущего ресурса
В рамках работы над редизайном проекта я сначала провожу аудит вашего ресурса. Описываю плюсы и минусы с точки зрения дизайна и UX.
Результат: документ с описанием и рекомендациями.
Исследования
Исследования - очень важная часть проекта. Перед началом любого дела, будь то строительство дома или покупка новой машины, необходимо собрать информацию, сравнить важные характеристики и убедиться в своих предположениях.
Результат: профиль целевой аудитории и описание целей посетителей.
Проектирование
Можно, конечно, строить дом без плана. Можно скачать что-нибудь из интернета. Но когда платишь немалые деньги, хочется получить что-то более индивидуальное и продуманное. Я делаю именно так: разрабатываю индивидуальную структуру страниц и блоков.
Структуру я оформляю в интерактивные черно-белые прототипы. Кстати, в отличие от чертежей того же дома, прототипами сайта уже можно пользоваться - ходить по страницам и изучать маршруты посетителей. И это также отличный способ сэкономить время, а иногда и деньги.
Результат: прототипы заказанных страниц, по которым можно походить.
Дизайн
Собственно на этом этапе делается проработка всей визуальной составляющей проекта. Разработка визуального языка. Это как комната в стиле "лофт" или кухня в стиле "прованс" - вы уже примерно понимаете какие используются элементы и как на них будут реагировать люди.
Результат: после приёмки дизайна страниц, я готовлю исходные файлы. Причём не абы как, а со знанием дела. Все слои раскладываются по папкам и подписываются. Аккуратно и эффективно. Так что ваши разработчики будут приятно удивлены.
Поддержка
В больших проектах нередко возникает необходимость доделать какие-нибудь мелочи уже после приёмки дизайна. Я закладываю небольшой запас на такие случаи.
Иногда возникает необходимость разработать дополнительные функциональные блоки. В этом случае может понадобится дополнительное время и бюджет. Это как планировали строить гараж отдельным зданием, а потом подумали, что хорошо бы из гаража зимой сразу в дом попадать.
Результат
Если у вас уже есть прототипы будущего интерфейса, я проведу экспертизу, предложу варианты улучшения и разработаю современный, удобный и красивый дизайн интерфейса. Включая иконки, визуальную часть для инсталлятора и так далее.
Если у вас есть только идея, команда программистов и бюджет, я помогу вам спроектировать и создать прототипы интерфейса. В этом случае возможны нестандартные варианты решения вашей задачи. При этом я максимально постараюсь сохранить user experience, чтобы у пользователей не возникало проблем с освоением дизайна интерфейса.
Таким образом, вы получаете комплексный продукт с четко продуманной структурой и интуитивно понятным интерфейсом.
Художники и визуальные дизайнеры работают с одними и теми же изобразительными средствами. И те, и другие должны быть искусны и опытны во всем, что касается этих средств, но их деятельность служит различным целям. Цель художника - создать объект, взгляд на который вызывает эстетический отклик. Таким образом, изобразительное искусство - способ самовыражения художника на тему, которая у него (а иногда и у общества в целом) вызывает эмоциональный или интеллектуальный интерес. Художник не связан почти никакими ограничениями. Чем необычнее и своеобразнее продукт его усилий, тем выше он ценится.
Дизайнеры, напротив, создают объекты для других людей. В то время как современные художники озабочены в основном самовыражением, дизайнеры, как отмечают Кевин Маллет и Даррел Сано в своей великолепной книге «Designing Visual Interfaces» (Mullet and Sano, 1995), «заняты поисками наиболее подходящего представления для передачи некоторой специфической информации», то есть коммуникацией. Если говорить о дизайнерах визуальных интерфейсов, то они ищут наилучшее представление, доносящее информацию о поведении программы, в проектировании которой они принимают участие. Придерживаясь целеориентированного подхода, они должны стремиться представлять поведение и информацию в понятном и полезном виде, который поддерживает маркетинговые цели организации и эмоциональные цели персонажей.
Скажем прямо, что визуальный дизайн пользовательских интерфейсов не исключает эстетических соображений, но такие соображения не должны выходить за рамки функционального каркаса. И хотя в визуальных коммуникациях всегда присутствует субъективизм, мы стремимся минимизировать влияние вкуса. Мы пришли к выводу, что четкое выражение эмоциональных целей пользователя и бизнес-целей неоценимы, даже когда речь идет о дизайне тех аспектов визуального интерфейса, которые работают на благо бренда, отвечают за опыт пользователей и обеспечивают физиологические реакции. Более подробно о физиологическом уровне когнитивной обработки мы писали в главе 5.
Изобразительное искусство, визуальный дизайн интерфейсов и пр. дисциплины 335
Графический дизайн и пользовательские интерфейсы
Графический дизайн - это дисциплина, над которой долгие годы (примерно до второй половины 80-х годов прошлого века) довлела полиграфия, поскольку дизайн в основном сводился к созданию упаковок, рекламе, форматированию документов и обустройству среды существования. Графические дизайнеры старой школы неуютно чувствуют себя, сталкиваясь с цифровыми носителями информации, поскольку не привыкли создавать графику на уровне пикселов. Молодое же поколение графических дизайнеров обучено обращению с «новым» форматом и вполне успешно применяет концепции традиционного графического дизайна к цифровой графике.
Графические дизайнеры обычно очень хорошо разбираются в визуальных аспектах и хуже представляют себе понятия, лежащие в основе поведения программного продукта и взаимодействия с ним. Талантливые графические дизайнеры, подкованные и в цифровых аспектах, преуспевают в создании информационно насыщенных, эстетически приятных, впечатляющих интерфейсов, которые мы видим в Windows XP и Mac OS X, а также визуально насыщенных интерфейсов для компьютерных игр и приложений, ориентированных на рядового потребителя. Они способны создавать красивую и адекватную внешность интерфейсов, а кроме того - привносить фирменный стиль во внешний вид и поведение программного продукта. Для таких специалистов дизайн или проектирование интерфейса есть в первую очередь тон, стиль, композиция, которые являются атрибутами бренда, во вторую очередь -прозрачность и понятность информации и лишь затем (если до этого вообще доходит дело) - передача информации о поведении посредством ожидаемого назначения (см. главу 13).
Дизайнерам визуальной части интерфейса необходимы некоторые навыки, которые присущи графическим дизайнерам, работающим в цифровом формате, но они должны помимо этого обладать также глубоким пониманием и правильным восприятием роли поведения. Их усилия в значительной степени сосредоточены на организационных аспектах проектирования и на том, как донести до пользователя особенности поведения продукта, используя визуальные якоря и ожидаемые назначения. В центре их внимания находится соответствие между визуальной структурой интерфейса с одной стороны и логической структурой пользовательской ментальной модели и поведения программы - с другой. Кроме того, их заботит вопрос о том, как сообщать пользователю о состояниях программы (скажем, как сделать состояние «доступно для изменения» отличимым от состояния «только для чтения») и что делать с когнитивными аспектами пользовательского восприятия функций (композиция элементов, визуальная иерархия, соотношение фигуры и фона и т. п.).
336 Глава 14. Визуальный дизайн интерфейсов
Визуальный информационный дизайн
Информационные дизайнеры работают не над интерактивными функциями, а над визуализацией данных, содержимого и средств навигации. В визуальном дизайне интерфейсов их наЕыки чрезвычайно важны, в особенности когда речь идет о приложениях, интенсивно работающих с данными, и некоторых веб-сайтах, где содержание перевешивает функциональность. Усилия информационного дизайнера направлены на то, чтобы представить данные в форме, способствующей их верному истолкованию. Результат здесь достигается через управление визуальной иерархией при помощи таких средств, как цвет, форма, расположение и масштаб.
Распространенными объектами информационного дизайна являются всевозможные графики, диаграммы и прочие способы отображения количественной информации. Эдвард Тафти написал несколько новаторских книг, подробно раскрывающих эту тему, включая «The Visual Display of Quantitative Information» (Tufte, 1983).
Промышленный дизайн
Любое обсуждение вопросов промдизайна выходит за рамки этой книги, однако широкое распространение интерактивных приборов и портативных устройств привело к тому, что роль промышленного дизайна в создании интерактивных продуктов растет прямо на глазах. Как и в случае с разницей в профессиональных навыках у графических дизайнеров, дизайнеров интерфейсов и информационных дизайнеров, существует разделение промдизайнеров на две категории: одни специализируются на создании красивых и полезных форм, в то время как таланты других относятся к сфере логического и эргономического представления физических элементов управления способом, который соответствует поведению пользователя и отражает поведение устройства. По мере того как все большее число устройств обзаводятся полнофункциональными дисплеями, возрастает важность сотрудничества проектировщиков взаимодействия, дизайнеров интерфейсов и промдизайнеров в вопросах создания полноценных и эффективных решений.
Строительные блоки визуального дизайна интерфейсов
По существу дизайн интерфейсов сводится к вопросу о том, как офор мить и расположить визуальные элементы таким образом, чтобы внятно отразить поведение и представить информацию. Каждый элемент визуальной композиции имеет ряд свойств, таких как форма и цвет, и сочетание этих свойств придает элементу смысл. Каждое отдельное свойство само по себе редко обладает естественным смыслом. Скорее можно сказать, что пользователь получает возможность разобраться
Строительные блоки визуального дизайна интерфейсов 337
в интерфейсе благодаря различным способам приложения этих свойств к каждому из элементов интерфейса. В тех случаях, когда два объекта обладают общими свойствами, пользователь предположит, что эти объекты связаны или похожи. Когда пользователи видят, что свойства отличаются, они предполагают, что объекты не связаны. Наиболее контрастные объекты сильнее привлекают наше внимание. Задолго до того, как ребенок начинает понимать речь и говорить, он проявляет способность различать объекты, контрастирующие визуально. Детская передача «Улица Сезам» полагается на эту человеческую способность, предлагая детям выбирать объект, не похожий на другие или не входящий в группу. Визуальный дизайн интерфейсов создает смыслы схожим образом, что на практике дает гораздо лучший результат, чем просто слова.
Создавая пользовательский интерфейс, проанализируйте перечисленные ниже визуальные свойства каждого элемента или группы элементов. Чтобы создать полезный и привлекательный пользовательский интерфейс, следует тщательно поработать с каждым из этих свойств.
Какую форму имеет объект? Он круглый, квадратный или похож на амебу? Форма - главный признак сущности объекта для человека. Мы узнаем объекты по контурам; силуэт ананаса, текстурированного синим мехом, все равно позволяет нам понять, что это ананас. При этом различение форм требует большей концентрация внимания, чем анализ цвета или размера. Поэтому форма - не лучшее свойство для создания контраста, если требуется привлечь внимание пользователя. Слабость формы как фактора в распознавании объектов становится очевидна, если взглянуть на Dock 1 операционной системы Mac OS X -здесь можно по ошибке вызвать iTunes вместо iDVD или iWeb вместо iPhoto. Пиктограммы имеют различную форму, но обладают сходными размерами, цветами и текстурой.
Насколько велик или мал объект относительно других объектов на экране? Более крупные элементы привлекают больше внимания, особенно если они значительно превосходят размерами окружающие элементы. Размер является переменной упорядоченной и поддающейся количественному определению, то есть люди автоматически упорядочивают объекты по размеру и склонны оценивать их по размеру; если у нас есть текст в четырех размерах, предполагается, что относительная
Специальный интерфейсный элемент операционной системы Mac OS X, который позволяет запускать программы и переключаться между ними. -Примеч. науч. ред.
333 Глава 14. Визуальный дизайн интерфейсов
важность текста растет вместе с размером и что полужирный текст более важен, чем текст с нормальным начертанием.
Таким образом, размер - полезное свойство для обозначения информационных иерархий. Достаточное расхождение в размерах обычно быстро привлекает внимание человека. Жак Бертен (Jacques Bertin) в своей классической работе «The Semiology of Graphics» (Bertin, 1983) описывает размер как диссоциативное свойство. Это означает, что если объект очень мал или очень велик, становится сложно интерпретировать другие переменные, например форму.
Яркость
Насколько темным или светлым является объект? Разумеется, понятия темного и светлого обретают смысл преимущественно в контексте яркости фона. На темном фоне темный текст почти не виден, тогда как на светлом он будет резко выделяться. Как и в случае с размером, значение яркости может быть диссоциативным; скажем, если фотография слишком темная или слишком светлая, становится невозможно разобрать, что на ней. Контрастность люди воспринимают легко и быстро, так что значение яркости может стать хорошим инструментом привлечения внимания к тем элементам, которые требуется подчеркнуть. Значение яркости - также упорядоченная переменная, например, более темные (с более низкой яркостью) цвета на карте легко интерпретируются: они обозначают большие глубины или большую плотность населения.
Цвет
Желтый, красный или оранжевый? Цветовые различия быстро привлекают внимание. В некоторых профессиональных областях цвета имеют конкретные значения, и этим можно пользоваться. Так, для бухгалтера красный цвет - отрицательные результаты, а черный - положительные; для трейдера, работающего с ценными бумагами, синий - сигнал покупать, а красный - сигнал продавать (по меньшей мере, в США это так). Цвета приобретают смыслы и благодаря социальным контекстам, в которых проходит наше взросление. Для человека с Запада, выросшего среди светофоров, красный означает «стоп», а иногда даже «опасность», тогда как в Китае красный - это цвет удачи. Белый цвет на Западе ассоциируется с чистотой и миром, а в Азии - с похоронами и смертью. При этом в отличие от размера или яркости цвет изначально не обладает свойством упорядоченности и не выражается количественно, поэтому далеко не идеален для передачи информации такого рода. Кроме того, не следует делать цвет единственным способом передачи информации, поскольку цветовая слепота встречается довольно часто.
Применяйте цвет с умом. Чтобы создать эффективную визуальную систему, позволяющую пользователю выявлять сходства и различия
объектов, используйте ограниченный набор цветов - эффект радуги перегружает восприятие пользователя и ограничивает возможности по передаче ему информации. Кроме того, в вопросах, касающихся цвета, могут возникнуть конфликты между нуждами маркетинга и задачей отражения интерфейсных идей. Чтобы отыскать компромисс в такой ситуации, вам может потребоваться талантливый визуальный дизайнер (и по совместительству дипломат).
Направление
Куда указывает объект - вверх, вниз, или вбок? Направление полезно, когда требуется передавать информацию об ориентации (вверх или вниз, вперед или назад). Помните, что восприятие направления может быть затруднено в случае некоторых форм и при малых размерах объектов, поэтому ее лучше использовать в качестве вторичного признака. Так, если требуется показать, что рынок акций пошел вниз, можно использовать направленную вниз стрелку красного цвета.
Текстура
Грубая или гладкая, однообразная или неровная? Разумеется, изображенные на экране элементы не обладают настоящей текстурой, но способны создавать ее видимость. Текстура редко бывает полезна для передачи различий или привлечения внимания, поскольку требует значительной концентрации на деталях. Кроме того, для передачи текстуры требуются значительные затраты пикселов. И тем не менее текстура может быть важной подсказкой: когда мы видим область, текстурированную резиной, то предполагаем, что следует ухватить устройство за эту область. Засечки и выпуклости на элементах пользовательского интерфейса обычно указывают, что элемент можно перетаскивать, а фаски или тени у кнопки усиливают ощущение, что ее можно нажать.
Расположение
Как располагается элемент относительно других элементов? Подобно размеру расположение - это переменная упорядоченная и выражаемая количественно, а значит, полезная для передачи иерархии. Расположив наиболее важные или наиболее востребованные элементы слева вверху, мы воспользуемся порядком восприятия элементов на экране на благо продукта. Расположение также может служить средством создания пространственных отношений между объектами на экране и объектами реального мира.
Принципы визуального дизайна интерфейса
Человеческий мозг- великолепное устройство распознавания образов. Оно извлекает смысл из плотных потоков зрительной информа-
340 Глава 14. Визуальный дизайн интерфейсов
ции, обрушивающихся на нас буквально отовсюду. Наш мозг справляется с этим шквалом входных данных, выявляя визуальные закономерности и создавая для наблюдаемых нами объектов систему приоритетов. В конечном итоге это позволяет нам осознанно воспринимать видимый мир. Именно способность зрительной системы человеческого мозга к сборке частей визуального поля в образы на основании визуальных якорей (подсказок) позволяет нам обрабатывать зрительную информацию столь быстро и эффективно. Представьте, что вам вдруг пришлось бы вручную вычислять траекторию полета бейсбольного мяча, чтобы предсказать, где он упадет. Наши глаза и мозг вместе делают это за доли секунды, не требуя от нас сознательных усилий. Процесс создания визуального дизайна интерфейса должен опираться на наши природные способности к обработке визуальной информации, чтобы обеспечить передачу пользователям информации и отражение возможностей и функций программы.
Одной главы совершенно недостаточно для полного раскрытия темы визуального дизайна интерфейсов. Однако существует ряд важных принципов, которые помогут вам создавать интерфейсы, максимально простые в восприятии и приятные для глаза. Как уже говорилось, Кевин Маллет и Даррел Сано дают превосходный и подробный анализ этих базовых принципов; мы лишь кратко обсудим некоторые из наиболее важных принципов визуального дизайна интерфейса.
При создании графических интерфейсов следует:
Использовать визуальные свойства для группировки элементов и соз
дания четкой иерархии;
Создавать визуальную структуру и прокладывать логический мар
шрут на каждом уровне организации;
Использовать целостные, непротиворечивые и соответствующие
контексту образы;
Интегрировать визуальный стиль с функциональностью осмыслен
но и последовательно;
Избегать визуального «шума» и беспорядка.
Эти принципы и некоторые другие общие закономерности, касающиеся работы с текстом и цветом в графических пользовательских интерфейсах, подробно обсуждаются в следующих разделах.
Используйте визуальные свойства для группировки элементов и создания четкой иерархии
Как правило, имеет смысл группировать логические наборы функциональных или информационных элементов посредством визуальных свойств, например цвета или пространственных характеристик. Последовательно применяя эти визуальные свойства в интерфейсе, вы можете создавать шаблонные образы, которые ваши пользователи быстро научатся распознавать. Например, в Windows XP все кнопки вы-
Принципы визуального дизайна интерфейса 341
пуклые, со скругленными углами, а текстовые поля прямоугольные, слегка вдавленные, с белым фоном и синей окантовкой. Благодаря систематическому применению этого образа невозможно перепутать кнопку и поле ввода, несмотря на некоторые сходства.
Основой визуального интерфейса являются визуальные
принцип шаблоны.
Проектирования
Глядя на любой набор визуальных элементов, пользователь бессознательно задается вопросом: «Что здесь представляет интерес?» - и почти сразу же: «Какая связь между этими объектами?» Мы должны стремиться к тому, чтобы интерфейс содержал в себе ответ на оба вопроса.
Создание иерархии
Исходя из сценариев определите, какие функциональные и информационные элементы должны восприниматься пользователями сходу, какие являются вторичными, а какие нужны лишь в исключительных ситуациях. Такое ранжирование и служит основой для визуальной иерархии.
Используйте цвет, насыщенность, контрастность, размер и положение, чтобы создать видимые различия между уровнями иерархии. Самые важные элементы должны быть более крупными, более ярких цветов, более насыщенными и более контрастными. Их следует располагать над прочими элементами или делать выступающими. Выделяемые элементы лучше всего красить в насыщенные цвета. Менее важные элементы должны быть менее насыщенными, менее контрастными, более мелкими и плоскими. Нейтральные светлые цвета уводят их на второй план.
Разумеется, настройку этих свойств следует выполнять осторожно. Не следует делать самый важный элемент огромным, красным и выпуклым. Часто бывает достаточно изменить лишь одно из свойств. Если обнаружится, что два элемента различной важности состязаются за внимание пользователя, «прикрутить фитиль» менее важного будет лучшим решением, чем пытаться «разжечь» более важный. Так у вас останется больше пространства для создания акцента на самых важных элементах. (Вот хорошая аналогия: если все слова на странице набраны жирным красным шрифтом, выделяется ли хоть одно из слов?)
Создание четкой визуальной иерархии - одна из сложнейших задач в визуальном дизайне интерфейсов, ее решение требует навыков и таланта. Качественную визуальную иерархию пользователи практически не замечают - а вот ее отсутствие и проистекающая из этого путаница сразу бросаются в глаза.
342 Глава 14. Визуальный дизайн интерфейсов
Визуализация связей
Чтобы передать связь элементов, вновь обратитесь к сценариям. Необходимо определить не только элементы со сходными функциями, но и элементы, наиболее часто используемые совместно. Совместно используемые элементы обычно следует сгруппировать в пространстве, чтобы минимизировать перемещения мыши, тогда как элементы, которые могут не использоваться вместе, но обладают сходными функциями, можно группировать визуально, даже если они не группируются в пространстве.
Пространственная группировка объясняет пользователям, каким образом одни задачи, данные и инструменты связаны с другими, и может намекать на правильную последовательность действий. Хорошая группировка посредством расположения принимает во внимание порядок задач и подзадач и движение взгляда по экрану: слева направо для западных языков и, как правило, сверху вниз. (Более подробно этот момент мы обсудим чуть позже.)
Элементы, расположенные рядом, как правило, связаны друг с другом. Во многих интерфейсах такая группировка реализована слишком тяжеловесно: куда не взглянешь- рамки, причем иногда рамка заключает в себе всего один или два элемента. Часто того же эффекта более грамотно можно достичь посредством расстояний. К примеру, на панели инструментов кнопки могут отделяться друг от друга четырьмя пикселами. Чтобы вычленить файловые команды («открыть», «новый файл», «сохранить») в отдельную группу, достаточно увеличить расстояние между кнопками файловых команд и соседней группой кнопок до восьми пикселов.
Элементы, разделенные большими расстояниями, можно группировать посредством общих визуальных свойств, создавая шаблон, который в конечном итоге приобретет самостоятельный смысл для пользователей. Так, использование объема для создания ощущения физического ожидаемого назначения - вероятно, самый эффективный способ отделять элементы управления от данных и фоновых элементов (более подробно об ожидаемых назначениях читайте в главе 13). Эта стратегия часто применяется в рисовании пиктограмм. В операционной системе Mac OS X применяются яркие цвета для пиктограмм приложений и тусклые - для редко используемых вспомогательных программ. Зеленая кнопка запуска устройства может перекликаться с похожей анимированной зеленой пиктограммой, указывающей, что устройство функционирует нормально.
Определившись с группами и визуальными особенностями этих групп, начинайте подстраивать контраст между группами - подчеркивая или, наоборот, затеняя группы сообразно их важности в текущем контексте. Подчеркивайте различия между группами, но минимизируйте различия между элементами одной группы.
Принципы визуального дизайна интерфейса 343
Тест с прищуриванием
Есть хороший способ убедиться, что визуальный дизайн эффективно задействует иерархию и отношения, - дизайнеры называют этот прием тестом с прищуриванием (squint test). Закройте один глаз и посмотрите на экран прищуренным вторым глазом. Обратите внимание на то, какие элементы слишком выпирают, какие стали нечеткими, а какие объединились в группы. Эта процедура часто вскрывает не замеченные ранее проблемы в композиции интерфейса.
Создавайте визуальную структуру и прокладывайте логический маршрут на каждом уровне организации
Интерфейсы удобно представлять себе состоящими из визуальных и интерактивных элементов, объединяемых в группы с помощью панелей, которые, в свою очередь, можно группировать в экраны, представления или страницы. Такая группировка, как было сказано выше, может проводиться посредством распределения в пространстве или при помощи общих визуальных свойств. В монопольном приложении может быть несколько уровней таких структур, так что крайне важно сохранять прозрачную визуальную структуру, чтобы пользователь мог легко переходить от одной части интерфейса к другой в соответствии со своим рабочим процессом.
В оставшейся части этого раздела мы опишем ряд важных свойств, помогающих задать четкую визуальную структуру.
Выравнивание и сетка
Выравнивание визуальных элементов - один из главных приемов, позволяющих дизайнеру представить продукт пользователям в систематизированном и упорядоченном виде. Сгруппированные элементы следует выравнивать как по горизонтали, так и по вертикали (рис. 14.1). В общем случае каждый элемент на экране следует выровнять по максимально возможному числу других элементов. Отказ от выравнивания двух элементов или двух групп элементов должен быть осознанным: это допустимо только для достижения конкретного разделяющего эффекта. В числе прочего дизайнерам следует обращать внимание на:
Выравнивание подписей. Подписи для элементов управления, рас
положенные друг над другом, должны быть выровнены по общей
границе. Если все подписи имеют примерно одинаковую длину, вы
равнивайте их по левой стороне - так пользователям будет легче их
читать, нежели при выравнивании вправо.
Выравнивание внутри группы функциональных элементов. Груп
па связанных флажков, вариантов выбора или текстовых полей
должна подчиняться выравниванию стандартной сетки.
Глава 14. Визуальный дизайн интерфейсов
Рис. 14.I.Adobe Lightroom весьма эффективно использует выравнивание по композиционной сетке. Текст, функциональные элементы и группы элементов управления очень четко выравниваются по сетке с фиксированным шагом. Следует отметить, что отбивка элементов управления и подписей элементов группы вправо может мешать быстрому их прочтению
Выравнивание элементов, разнесенных по группам и панелям.
Группы элементов управления и прочие объекты на экране везде, где это возможно, должны быть привязаны всё к той же сетке.
Сетка - один из самых мощных инструментов визуального дизайнера, стремительно набравший популярность в годы после Второй мировой войны благодаря швейцарским печатникам. Сетка обеспечивает однородность и последовательность структуры композиции, что особенно важно при проектировании интерфейса с несколькими уровнями визуальной или функциональной сложности. После того как проектировщики взаимодействия определили общую инфраструктуру приложения и элементов его пользовательского интерфейса (см. главу 7), дизайнеры интерфейса должны организовать композицию в структуру в виде сетки, которая будет должным образом подчеркивать важные элементы и структуры и оставлять жизненное пространство для менее важных элементов и элементов более низкого уровня.
Как правило, сетка делит экран на несколько крупных горизонтальных и вертикальных областей (рис. 14.2). Качественно спроектиро-
Принципы визуального дизайна интерфейса
Рис. 14.2. В этом примере композиционная сетка регламентирует размер и положение различных областей экрана веб-сайта. Она обеспечивает согласованность различных экранов, сокращая как работу дизайнера по созданию композиции, так и усилия, которые должен приложить пользователь, чтобы прочитать и понять содержимое экрана
ванная сетка задействует понятие шага, то есть минимального расстояния между элементами. К примеру, если шаг сетки составляет четыре пиксела, все расстояния между элементами и группами должны быть кратны четырем.
В идеальном случае сетка должна задавать и пропорции различных областей экрана. Такие отношения обычно выражаются дробями. Среди распространенных дробей - прославленное «золотое сечение» (обозначаемое греческой буквой «фи» и равное примерно 1,62), которое часто встречается в природе и считается особенно приятным для человеческого глаза; величина, обратная квадратному корню из двух (примерно 1:1,41), которая является основой международного стандарта размера бумаги (например, листа А4); и отношение 4:3 - пропорция сторон большинства компьютерных дисплеев.
Разумеется, следует стремиться к балансу между идеализированными геометрическими отношениями и конкретными пространственными потребностями функций и информации, представленных на экране. Идеальная реализация золотого сечения никак не улучшит читаемость экрана, на котором объекты свалены в кучу. Хорошая композиционная сетка модульна, то есть является достаточно гибкой, чтобы учесть все необходимые вариации, при этом сохранив согласованность структуры везде, где это возможно. Как и во мно-
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. Но вы "чувствуете" или "подозреваете", что эта новая поисковая система слишком сильно собирает ваши личные данные.
Для меня дизайн взаимодействия касается пользовательского опыта, однако он также фокусируется на поведении и понимании потребностей аудитории. Для меня это не обязательно касается самого дизайна, а того, как используется дизайн. Что привлекает меня больше всего к дизайну взаимодействия, так это идея о том, что дизайн взаимодействия связан не только с проектированием большего количества уже существующих, но и с созданием дизайна, который в настоящее время не существует.
поделиться
