Файл: Варианты построения интерфейса программ: особенности и эволюция. Общее понятие об интерфейсе.pdf

Moqups — интерактивное приложение на HTML5, позволяющее разрабатывать векторные прототипы.

Сервис разработан 6 увлеченными программистами из Румынии, бесплатен и не требует регистрации.

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

Fluid UI — средство разработки прототипов для  iOS- , Android- и  Windows приложений

Fluid UI — онлайн средство для прототипирования мобильных приложений. Может быть использован как для создания простых макетов, так и сложных высококачественных макетов и прототипов. Сервис содержит библиотеки с элементами интерфейсов для iOS, Android и Windows 8 приложений.

Аккаунт для одного проекта с ограничением в 10 экранов доступен бесплатно. Платные планы начинаются с $29 в месяц.

Wireframe.cc — минималистичный бесплатный онлайн-сервис для прототипирования

Wireframe.cc отличается от других инструментов прототипирования чрезвычайно простым интерфейсом без огромного количества наворотов. Когда вы заходите на сайт сервиса wireframe.cc, вы сразу же можете начать рисовать, перетаскивая элементы мышью по рабочей области. Чтобы сохранить макет достаточно нажать кнопку «Save», после чего сервис сгенерирует уникальный URL, которым вы сможете поделиться с другими людьми или добавить его в закладки. [8]

Wireframe.cc на данный момент бесплатен, премиум-версия с доп. функциями ожидается в ближайшее время.

Axure RP

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

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

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

Axure — это десктопное ПО, доступное для Mac OS X и Windows.

Balsamiq Mockups — инструмент для быстрого прототипирования на основе Flash

Balsamiq Mockups — чуть ли не самый известный инструмент для прототипирования.

Продуктом, выпущенным в 2008 году силами одного программиста, в настоящее время пользуются десятки тысяч клиентов. Команда сервиса выросла до 11 штатных сотрудников.

---

Balsamiq Mockups стремится передать опыт рисования макетов на бумаге, поэтому прототипы выглядят не так формально, как в других программах.

Вы можете использовать Balsamiq Mockups непосредственно в браузере (потребуется Flash) или загрузить в качестве приложения Adobe AIR. Однопользовательская лицензия стоит $79.

Pencil — инструмент для прототипирования с открытым кодом

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

Вы также можете скачать пользовательские коллекции элементов из раздела Download на сайте Pencil. Инструмент доступен как автономная версия для Linux, Windows и Mac OS X. Также может быть использован в качестве расширения Firefox.

UXToolbox — инструмент для прототипирования под Windows

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

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

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

UXToolbox работает с Windows XP и с более поздними версиями и стоит £159 (около $240) за копию.

Mockups.me — инструмент для создания пользовательских интерфейсов

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

Стоимость десктопной версии Mockups.me — $49, версия для планшета доступна за $19,99, а цены за веб-версию начинается от $99 за год.

Live Wires — приложение для создания прототипов под iPad

Live Wires поможет вам протестировать и создать прототипы непосредственно на iPad. Приложение может быть использовано для создания интерактивных прототипов  приложений для iPhone и iPad.

Live Wires включает в себя большую коллекцию легко настраиваемых элементов упрвления.

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

---

Live Wires сейчас доступен по специальной начальной цене в $9,99.

HotGloo

Мой любимый инструмент для прототипирования. Ему посвящена отдельная статья.

Резюме

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

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

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

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

Проблемы создания соразмерной, гармоничной композиции в полиграфическом дизайне пытались решить еще в 20 - е годы XX века такие известные типографы и дизайнеры, как:

Эль Лисицкий, Вальтер Дексель, Ян Чихольд, Тео Бальмер, Макс Билл[4]. В 1961 году соотечественник Билла Йозеф Мюллер - Брокман впервые ввел в употребление термин модульный подхода к дизайну и опубликовал 28 примеров модульных сеток. В результате всех этих поисков в графическом дизайне появилась модульная сетка [4].

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

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

---

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

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

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

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

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

Можно выделить 4 вида модульных сеток (рис. 1):

а) блочная;

б) колоночная;

в) модульная;

г) иерархическая [1; 3; 5].

Выбор вида модульной сетки в каждом случае зависит от сложности дизайна и требований к его гибкости, сетка с более маленьким шагом – более гибкая. Модульную сетку можно построить на начальном этапе проектирования макета и создавать дизайн на её основе, либо можно уже готовый макет выровнять по сетке [4].

Область применения модульной сетки в веб - дизайне безгранична. Уже сейчас модульные сетки используют при проектировании интерфейса сайта от простого сайта визитки, до корпоративного портала или международного новостного агентства. Так, например, на всех сайтах BBC используется одна универсальная сетка (рис. 2), которая является компонентом, недавно введенного в эксплуатацию, гайдлайна BBC «Global Experience Language».

Как применить модульную сетку в своем проекте? Существуют универсальные

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

Bootstrap;

---

Foundation;

Skeleton;

960grid.

В заключении стоит отметить, что модульная сетка это очень гибкий инструмент,

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

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

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

ЗАКЛЮЧЕНИЕ

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

Специалисты выделяют два вида:

Логический тип интерфейса. Комплекс установленных алгоритмов и договоров по обмену данными между элементами.

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

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

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

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

---