Средство визуального проектирования для создания графического интерфейса

14 популярных программ для создания анимации, прототипирования и дизайна интерфейсов

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

Статья подскажет для чего хорош каждый инструмент и сориентирует по плюсам и минусам. Среди инструментов: Principle, InVision Studio, Figma и другие.

Figma свежий инструмент. Она идеальна даже для командной работы в реальном времени. Figma работает шустро и прямо в браузере. Есть также и desktop-приложение, но оно работает только при подключении интернета.

Ещё больше статей о дизайне, а также полезные сервисы можно найти на ux-journal.ru

Figma построена на технологиях electronjs, а значит вы сможете дизайнить на любой платформе: Windows, Mac, ChromeOS и даже Linux. А еще приятный бонус, ваши дизайны сохраняются моментально в облаке, а значит вся работа всегда в сохранности и готова к демонстрации клиентам.

  • Работайте и штурмите одновременно всей командой дизайнеров в многопользовательском режиме;
  • Доставайте инструмент где угодно: Windows, Linux, ChromeOS и Mac;
  • В коробке шикарный Pen tool;Подходит для ui-дизайна мобильных приложений, просто установите на свой гаджет: Figma Mirror;
  • Инструменты для передачи дизайнов в разработку;Если у вас проект в .sketch просто откройте его в Figma;Figma – бесплатный редактор (Freemium);
  • [Обновление] Теперь и с арсеналом плагиновАнимации уступают в эффектности и плавности Principle и InVision Studio;

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

  • Работает только на Mac;
  • Огромный выбор плагинов (Anima, Craft, Materialи др.);
  • Наработанная база бесплатных ресурсов, среди которых: ui-киты, библиотеки, шаблоны и т.д.;
  • Прекрасен в паре с Principle и Invision Studio;Уступает Figma в решении задачи командноого штурма, так как не не поддерживает совместное редактирование в многопользовательском режиме;
  • Некоторые дизайнеры жалуются на Mirroring sketch artboards, когда требуется отладить дизайны прямо на мобильном гаджете;

InVision Studio – бомбический продукт для дизайна интерактивных систем (ux/ui), а возможности InVision Cloud просто отпад. Если вам нужно сделать продвинутые анимации или разработать адаптивную дизайн-систему и передать все это дело в разработку, то этот инструмент вам просто не заменим. Очень профессиональный и технологичный инструмент.

  • Заточена для Windows и Mac OS;
  • В InVision Studio прекрасный timeline и в нем потрясающе приятно вытачивать как UI, так и UX с учетом всех тонкостей поведения продукта;
  • Студия ускоряет дизайн адаптивных лейаутов, так как заточена на этот процесс и приятные нюансы с адаптацией берет на себя;
  • Расширятся возможностями Invision Cloud (сбор обратной связи, тестирование прототипов на мобильных гаджетах, менеджер дизайн-систем);
  • InVision Studio бесплатный продукт, а в комплексе с InVision Cloud позволяет проверить все возможности системы на одном комплексном проекте;
  • Прототипы с огромным количеством анимаций могут притормаживать;
  • Позволяет создавать приятные мягкие анимации и эффекты перехода;

Adobe XD призван сделать ваш процесс прототипирования просто реактивным. Для этого здесь всегда под рукой инструменты клонирования (repeat grids), поэтому набросать макет или оперативно наполнить списки контентом – здесь как на раз два. Если вы уже использовали плагин Craft для Sketch, то считайте, что это здесь уже в доступно из коробки.

Подходы и инструменты для разработки пользовательского интерфейса

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

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

Задача с точки зрения UI-дизайна

Отправная точка — это не только определение задачи, которую надо решить, но и её понимание с точки зрения ваших клиентов.

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

31 июля в 12:00, Онлайн, Беcплатно

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

Разработайте собственный алгоритм подхода к дизайну

Сформируйте простой порядок действий для разработки UI-дизайна вашего приложения. Вот некоторые рекомендованные шаги:

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

Диаграмма пользовательских маршрутов

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

Как пользователи могут попасть в нужный им раздел? Можно ли на диаграмме потоков визуализировать все возможные маршруты пользователей по приложению?

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

Для удобства можно использовать различные готовые инструментарии, например, шаблоны блок-схем Miro, Milanote и Whimsical. Можно легко формировать маршруты с помощью трёх стандартных фигур:

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

Здесь проиллюстрирована диаграмма маршрутов пользователя на этапе предварительного дизайна. Исследовать другие распространённые маршруты и фильтровать широкий спектр скриншотов из iOS, Android и веб-приложений можно на Page Flows.

Изучение дизайнерских шаблонов и стилей

Планирование облегчает реализацию, поэтому всегда делите задачи на более мелкие части.

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

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

Отличным источником информации будет UI Patterns. Это прекрасный ресурс, чтобы ознакомиться с наиболее часто используемыми шаблонами проектирования и способами их применения.

Если вы не определились с тем, какие компоненты вам понадобится включить в приложение, можете посетить дополнительные сайты вроде Behance и Dribbble. Там вы найдёте замечательные идеи, потому что многое является концептуальным, а не готовым продуктом.

Вот ещё несколько отличных ресурсов:

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

Создание каркасов

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

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

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

Также обязательно ознакомьтесь с Balsamiq, Whimsical и OmniGraffle. Эти компоненты предварительной сборки помогут в работе со структурой вашего приложения.

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

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

Создание макетов приложения

Как только иерархия установлена и структура каждого экрана определена, вы можете перейти к программному обеспечению, например, Figma или Sketch, для разработки своего продукта. Figma — облачный инструмент для UI-дизайна. Идеально подходит для реализации каркасов на этом этапе процесса.

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

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

Проектирование графического интерфейса пользователя

Введение

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

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

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

Общие принципы

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

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

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

Чаще всего, пользователи в интерфейсе сначала ищут сущность(существительное), а затем действие(глагол) к ней. Следуйте правилу «существительное -> глагол». Например, шрифт -> изменить.

Чем быстрее человек увидит результат — тем лучше. Пример — «живой» поиск, когда варианты, в процессе набора поискового запроса. Основной принцип: программа должна взаимодействовать с пользователем на основе наименьшей значимой единицы ввода.

Используйте квазирежимы. Например, ввод заглавных букв с зажатой клавишей shift — это квазирежим. С включенным capslock — режим. Основное отличие в том, что человек может забыть в каком режиме он находится, а в квазирежиме(с зажатой доп. клавишей) это сделать гораздо сложнее.

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

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

Какие ЭИ создать?

    Разработка интерфейса обычно начинается с определения задачи или набора задач, для которых продукт предназначен

Читайте также  Проводка в полу под стяжкой

Простое должно оставаться простым. Не усложняйте интерфейсы. Постоянно думайте о том, как сделать интерфейс проще и понятнее.

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

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

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

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

Какой должен быть дизайн ЭИ?

На самом деле, дизайн ЭИ — тема отдельной статьи. Тут нужно учитывать все: начиная от цвета, формы, пропорций, заканчивая когнитивной психологией. Однако, несколько принципов все же стоит отметить:

    Цвет. Цвета делятся на теплые(желтый, оранжевый, красный), холодные(синий, зеленый), нейтральные(серый). Обычно для ЭИ используют теплые цвета. Это как раз связано с психологией восприятия. Стоит отметить, что мнение о цвете — очень субъективно и может меняться даже от настроения пользователя.

Форма. В большинстве случаев — прямоугольник со скругленными углами. Или круг. Полностью прямоугольные ЭИ, лично мне нравятся меньше. Возможно из-за своей «остроты». Опять же, форма как и цвет достаточно субъективна.

Основные ЭИ(часто используемые) должны быть выделены. Например размером или цветом.

Иконки в программе должны быть очевидными. Если нет — подписывайте. Ведь, по сути дела, вместо того чтобы объяснять, пиктограммы зачастую сами требуют для себя объяснений.

Старайтесь не делать слишком маленькие элементы — по ним очень трудно попасть.

Как правильно расположить ЭИ на экране?

555px, это ширина блока с контентом. Теперь от 900 отнимаем 555 и получаем 345px. Это ширина меньшей части:

Перед расположением, ЭИ следует упорядочить(сгруппировать) по значимости. Т.е. определить, какие наиболее важны, а какие — менее.

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

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

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

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

  • Делайте отступы между ЭИ равными или кратными друг-другу.
  • Как ЭИ должны себя вести?

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

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

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

    Такой переключатель напрямую отражает состояние ЭИ

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

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

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

    ЭИ должны отвечать. Если пользователь произвел клик, то ЭИ должен как-то отозваться, чтобы человек понял, что клик произошел.

    В заключении

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

    Урок 2. Графический интерфейс проекта и программный код

    Урок из серии «Программирование на Visual Basic.NET для школьников»

    Продолжим изучать систему программирования Visual Basic.NET 2003.

    На предыдущем уроке мы настроили среду разработки Visual Studio.NET на язык программирвания Visual Basic.

    В этом уроке мы познакомимся с основными инструментами среды разработки Visual Studio.NET и с основными этапами создания проектов.

    Чтобы познакомится с инструментами среды разработки, запустим среду программирования и создадим новый проект.

    1. Создание проекта
    2. Визуальное проектирование интерфейса пользователя
    3. Программный код проекта
    4. Этапы создания проекта на Visual Basic.NET

    Создание проекта

    1. Для запуска среды программирования Visual Studio.Net выполните команду:
      Пуск – Все программы – Microsoft Visual Basic.NET – Microsoft Visual Studio.NET 2003.

    Загрузится Начальная страница Visual Studio.

    На вкладке Проекты, в нижней её части, есть две кнопки, которые предоставляют возможность открыть существующий проект или создать новый.
    Нажмите кнопку Создать проект. Появиться диалоговое окно Создать проект. На левой стороне представлены Типы проектов, на правой показаны так называемые Шаблоны, которые относятся к выбранному типу проекта.

    Для того, чтобы создать приложение Windows:

    • В списке Типы проектов выберите тип Проекты Visual Basic.
    • В окне Шаблоны выберите шаблон Приложение для Windows.
    • В текстовом поле Имя введите имя проекта
    • В поле Расположение укажите путь для хранения файлов проекта. Чтобы выбрать папку на диске, можно нажать кнопку Обзор.
    • Нажмите ОК.
  • Откроется новый созданный проект и на экране отобразится пустая графическая форма Windows (обычно имеющая название Form1), на основе которой вы будите создавать интерфейс для пользователя вашего приложения. Вы видите все основные инструменты среды разработки Visual Studio:
    • Окно формы. Окно будущего приложения.
    • Область элементов. Содержит элементы управления, которые можно использовать для создания интерфейса пользователя.
    • Обозреватель решений. Содержит файлы проекта.
    • Окно Свойства. Отображает свойства текущего объекта
  • Теперь у нас есть все необходимые инструменты и можно приступить к визуальному проектированию графического интерфейса пользователя.

    Визуальное проектирование интерфейса пользователя

    После создания проекта открылась наша первая форма.

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

    Вы можете изменить размеры представленной формы и другие её свойства.

    Свойства формы отображаются в окне Свойства в правой части среды разработки. Эти свойства разделены на группы и их довольно много. Некоторые свойства имеют свои подсвойства. Например, свойство Font (Шрифт) имеет подсвойства: Name, Size и др.

    Изменением этих свойств мы можем полностью видоизменить данную форму. Например, изменением свойства BackColor мы можем изменить цвет фона этой формы.

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

    В названии содержится слово Visual, которое подсказывает способ, при помощи которого создается графический интерфейс.

    Это делается визуально, то есть на глаз..

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

    Если Область элементов не видна, то её можно вывести на экран, выполнив команду Вид — Область элементов.

    Давайте установим на Форме, например, Кнопку (Button).

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

    Появиться серая рамка — это контуры будущей кнопки. Доведите курсор мыши до нужного размера объекта и опустите кнопку мыши. На форме появиться выбранный вами элемент управления с маркерами изменения размера.

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

    Например, элемент управления Button станет объектом Button1 (кнопкой) и будет иметь свойства, которые ему предписаны по умолчанию.

    Значения свойств элементов управления можно настраивать (изменить) после их размещения на форме.

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

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

    Для удаления элемента управления достаточно его выделить и нажать клавишу Delete.

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

    Программный код проекта

    Давайте посмотрим, какой код Visual Basic автоматически создал для нашей Формы.

    Для этого в окне Обозреватель решений нажмите кнопку Посмотреть код. В центральном окне отобразится код, появиться новая вкладка Form1.vb.

    Теперь с помощью вкладок Form1.vb[Design] и Form1.vb можно будет перемещаться с Формы в соответствующий код, и обратно.

    За пиктограммой со знаком «+» скрывается свертываемый блок кода, который называется «Код, автоматически созданный конструктором форм Windows».

    Этот блок кода находится между командами #Region и #End Region.

    Читайте также  Провод для внутренней проводки в деревянном доме

    Во время визуального проектирования Формы, ввода в неё элементов с панели Область элементов, файл Form.vb будет автоматически дополняться.

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

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

    Этапы создания проекта на Visual Basic.NET

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

    1. Создать новый проект.
    2. Создать графический интерфейс пользователя c помощью элементов управления из Области элементов Visual Studio.
    3. Настроить свойства этих элементов управления.
    4. Написать программный код, который определит, что будет делать ваша программа.

    В этом уроке мы познакомились с основными инструментами разработки в среде Visual Studio и с основными этапами создания проектов.

    В следующем уроке мы создадим наш первый проект.

    Разработка пользовательского интерфейса: зачем её заказывать

    Что такое UI

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

    Интерфейс — общая граница между двумя функциональными объектами, требования к которой определяются стандартом; совокупность средств, методов и правил взаимодействия (управления, контроля ) между элементами системы (источник: wikipedia.org).

    Это точное, но скучноватое определение.

    А вот иными словами, но интереснее: пользовательский интерфейс (UI) — это «способ, которым вы выполняете задачу с помощью продукта, а именно совершаемые вами действия и то, что вы получаете в ответ» (источник: Джеф Раскин, «Интерфейс. Новые направления в проектировании компьютерных систем»).

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

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

    Зачем нужен UI-дизайн

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

    Лифт удобен. Он позволяет добраться до верхних этажей с минимумом временных и физических затрат. Но какой от него был бы толк, если бы мы не могли легко его открыть, выбрать этаж и при необходимости остановиться раньше времени? Всё перечисленное осуществимо, но каким путём? Позволит ли рычажное управление сделать пассажиру необходимые действия или разумнее будет использовать кнопочное управление? Тут и появляется важный момент: какой интерфейс управления лифтом выбрать.

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

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

    Разработка UI-интерфейсов

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

    Грань между UX (User Experience) и UI (User Interface) очень тонка, но если разобраться, то становится ясно, что UX помогает понять пользователя. В больше психологического аспекта, нежели технологического. UX изучает пользователя: как пользователь живёт, что он думает, как и что делает и что его окружает. Перед дизайнером ставится задача — помочь обычному человеку легко разобраться с вашим программным продуктом и получить при этом удовлетворение от работы с ним.

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

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

    Концепция

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

    Создание мокапа

    Этот этап позволяет быстро понять видение клиента и внести уйму изменений до начала разработки интерфейса пользователя. Мы намечаем расположение кнопок, форм и других нужных элементов, а уже потом подбираем цветовую палитру, шрифты, изображения, преобразуя всё это в удобный и красивый макет. То есть начинаем с варфрейма (план расположения элементов на странице), а заканчиваем созданием из этого плана красивой картинки. В случае разработки приложений под Android и iOS труд дизайнера облегчается гайдлайнами — правилами оформления и расположения элементов интерфейса, регламентом UX/UI, который был создан непосредственно экспертами по дизайну из Google и Apple.

    User Flow Diagram (карта экранов)

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

    Утверждение структуры

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

    Выбор стиля UI

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

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

    Согласование стиля

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

    Интерактивный прототип интерфейса

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

    Для более наглядной демонстрации работы приложения инвесторам и потенциальным пользователям можно заняться разработкой интерактивного прототипа. Хотя стоит отметить, что это не обязательный этап, так как мокап+user flow diagram вполне себе является прототипом, описывающим будущий продукт с точки зрения UX. Однако интерактивный прототип даст более полное представление и о возможностях приложения, и об объеме работ по их реализации.

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

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

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

    Утверждение результата

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

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

    Вывод

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

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

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

    Проектирование интерфейса пользователя уменьшает время проектирования и упрощает взаимодействие пользователя с продуктом. Хорошо разработанный UI = благодарный пользователь = счастливый вы.

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

    “Проектирование — это гораздо больше, чем просто компоновка, организация и даже редактирование; проектировать — значит придавать ценность и смысл, вносить ясность, упрощать и пояснять, преобразовывать, придавать лоск, привлекать внимание, убеждать и даже, возможно, развлекать” — Пол Рэнд

    Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.

    Главная задача — ясность

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

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

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

    Ключевое назначение интерфейсов — взаимодействие

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

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

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

    Читайте также  Обзор паяльной станции lukey 868

    Удержать внимание любой ценой

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

    Не нужно замусоривать боковую панель приложения отвлекающими картинками … помните о ключевом назначении интерфейса.

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

    Дайте пользователям ощущение контроля

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

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

    Прямое управление — лучший вариант

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

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

    Стремитесь к прямому управлению … спроектируйте максимально естественный интерфейс, словно его не касалась рука человека.

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

    Один экран — одно основное действие

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

    Экраны, в которых заложено два или более основных действий, быстро сбивают с толку.

    Так же как в основе любой статьи должен лежать один сильный тезис, в основе любого экрана в нашем дизайне должно лежать одно сильное действие — смысл его существования.

    Пусть второстепенные действия выглядят как второстепенные

    Когда в основе экрана лежит одно основное действие, вы также можете добавить несколько второстепенных действий — но они должны выглядеть как второстепенные!

    Смысл существования вашей статьи не в том, чтобы люди могли поделиться ею в Твиттере… смысл в том, чтобы люди ее прочли и поняли.

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

    Подскажите логичный следующий шаг

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

    Внешний вид соответствует поведению

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

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

    Вопрос согласованности

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

    А вот если элементы работают одинаково, то и выглядеть должны одинаково.

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

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

    Сильная визуальная иерархия работает лучше всего

    Сильная визуальная иерархия — это когда пользователю понятно, в каком порядке следует рассматривать визуальные элементы на экране.

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

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

    Толковая организация снижает когнитивную нагрузку

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

    Организация элементов в дизайне — это иллюстрация их взаимосвязей. Благодаря этому люди смогут проще и быстрее понять ваш интерфейс.

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

    Используйте цвет для расстановки акцентов — но не как главную отличительную черту

    Цвета физических объектов могут меняться в зависимости от освещения. Дерево при дневном цвете и дерево на закате воспринимается совершенно по-разному.

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

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

    Поэтапное раскрытие информации

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

    Не стоит пускаться в лишние подробности или стараться рассказать все и сразу.

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

    Органично встройте помощь в интерфейс

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

    Решающий момент: пустое состояние

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

    Пустое состояние — это не просто пустой экран … на этом этапе важно направить пользователя, подсказать, как использовать дизайн максимально эффективно.

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

    Отличный дизайн невидим

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

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

    Примените в работе все направления дизайна

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

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

    Даже если дисциплина на первый взгляд не имеет отношения к дизайну — какие-то принципы могут “выстрелить” … что полезного мы можем привнести в дизайн из издательского или переплётного дела, программирования или скейтбординга, карате или тушения пожаров?

    Интерфейсы существуют, чтобы ими пользовались

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

    Если вам понравилась статья и перевод, дайте нам знать — нажмите 👏 (можно “хлопать” несколько раз!)

    А если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.

    Мобильное приложение «Заметки о психике» | Mental Notes

    Подкидывает идеи, как привлечь, удержать и направить внимание пользователя.

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