Анализ методов построения пользовательских интерфейсов

Размещено на http://www.allbest.ru/

СОДЕРЖАНИЕ

Введение

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

Раздел 1.1 Методы и подходы к созданию пользовательских интерфейсов

1.1 Методы создания пользовательских интерфейсов

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

Раздел 1.3 Команда разработчиков

Раздел 1.4 Этапы работы над пользовательским интерфейсом

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

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

1.5.2 Руководящие принципы

Раздел 1.6 Основные элементы графического интерфейса

Глава 2 Microsoft Expression Blend - инструмент создания пользовательских интерфейсов

Раздел 2.1 Пакет инструментов Expression Studio

2.1.1 Expression Web

2.1.2 Expression Encoder

2.1.3 Expression Design

2.1.4 DeepZoom Composer

2.1.5 Microsoft Expression Media

2.1.6 Expression Blend

Раздел 2.2 Интегрированная среда разработки Expression Blend

Раздел 2.3 Работа в Microsoft Expression Blend

2.3.1 Интерфейс Blend

2.3.2 Инструменты рисования

2.3.3 Работа с текстом

2.3.4 Библиотека интерфейсных элементов

Раздел 2.4 Создание интерфейсов в Expression Blend

2.4.1 Стили и шаблоны

2.4.2 Создание пользовательских интерфейсных элементов

Раздел 2.5 Сравнительный анализ Expression Blend

2.5.1 Blend и классические способы создания прототипов интерфейсов

Заключение

Введение

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

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

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

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

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

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

Так что же такое пользовательский интерфейс? Главным образом это способы взаимодействия пользователя с системой. Дизайн, в свою очередь, призван облегчить пользование программным средством.

Раздел 1.1 Методы и подходы к созданию пользовательских интерфейсов

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

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

1.1 Методы создания пользовательских интерфейсов

Можно рассматривать два совершенно разных метода создания интерфейсов.

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

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

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

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

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

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



Рис. 1 - Основные потоки взаимодействия при классическом подходе проектирования пользовательского интерфейса.

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

Однако данный подход плохо работает для современных Ajax приложений и особенно для RIA. В настоящий момент происходит стремительное слияние настольных (GUI) и веб-приложений.

Использование специализированных языков описания интерфейса и сред разработки.

Возникло решение позволяющее отделить внешний вид пользовательского интерфейса от бизнес-логики программы. Решение основано на специальных языках описания интерфейса - XAML от Microsoft, MXML от Adobe, ZUL от Mozilla и так далее. В этих текстовых языках описывается внешний вид элементов (в векторном формате) так, что интерфейс можно создавать в любом редакторе.

В языке XAML можно задавать не только расположение элементов на экранной форме (в векторном виде), но и все трансформации, которые с ними происходят.

Для редактирования XAML лучше всего применять специальные пакеты такие как, например, Microsoft Expression Blend (Blend). Редактирование внутри него происходит в наглядной, визуальной форме, то есть проектировщик может создавать элементы, перемещать их по экрану и описывать поведение.

Рисунок 2 - Основные потоки взаимодействия при использование специализированных языков описания интерфейса и сред разработки.

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

Проектировщик создает прототип.

Дизайнер получает код XAML, и прямо в среде Blend или ином XAML редакторе (например, в Microsoft Expression Design) создает совершенно новый файл XAML, содержащий объекты интерфейса в конечном оформлении.

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

Разработчик получает от проектировщика код XAML привязывает бизнес-логику и связывает все трансформации (кусочки взаимодействия).

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

Общие подходы к построению пользовательских интерфейсов

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

Рассмотрим основные подходы к построению «удобного и правильного» GUI.

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

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

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

Рис. 3 - Диаграмма работы пользовательского интерфейса.

Следующим подходом к построению пользовательских интерфейсов является концепция User-Centered Design - дизайн вокруг пользователя.

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

В контексте данного подхода используют несколько понятий, относящихся к проектировке графического интерфейса:

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

Experience/ experimental design - подход к разработке дизайна, учитывающий потребности, опыт, особенности восприятия, знания и навыки человека или группы людей.

В цифровой среде говорят о user experience design - подвиде experience/ experimental design, отвечающем за разработку цифровых продуктов и систем на принципах user-centered design.

C user experience design тесно связаны следующие дисциплины:

information architecture - информационная архитектура одна из дисциплин проектирования пользовательских интерфейсов, представляющая совокупность методов и приемов структурирования и организации информации.

interaction design - изучение и разработка поведенческих моделей пользовательской системы;

usability engineering или user interface design - дизайн пользовательских интерфейсов;

visual/graphic design - разработка визуальной/графической составляющей продукта.

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

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

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

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

Впервые представил список принципов проектирования Хансен:

1) Знать пользователя.

2) Сократить запоминание.

3) Оптимизировать операции.

4) Устранить ошибки.

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

1) Контроль пользователем интерфейса.

2) Уменьшение загрузки памяти пользователя.

3) Последовательность пользовательского интерфейса.

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

Важность соблюдения принципов

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

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

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

Раздел 1.3 Команда разработчиков

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

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

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

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

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

информационный архитектор - часто работает в паре с UI-дизайнером, чтобы создать пользовательский интерфейс.

UI-дизайнер - дизайнер пользовательских интерфейсов - дизайнер, занимающийся проектированием пользовательских интерфейсов.

front-end разработчик - специалист, разрабатывающий набор прототипов информационных систем под руководством UI-дизайнера. Ему, как правило, необходимы навыки в HTML, DHTML, XTML, CSS, Macromedia Flash, ActionScript, системах управления контентом, а также кросс-браузерной верстке.

бизнес-аналитик.

специалист по функциональному тестированию ПО.

если нужно, иллюстратор, 3D -моделлер, флэш - дизайнер и т.п.

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

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

Раздел 1.4 Этапы работы над пользовательским интерфейсом

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

Этап 1. Сбор функциональных требований

Данный этап разработки подразумевает под собой сбор, систематизацию и анализ требований к системе. Также анализируются и систематизируются возможные пользовательские системы (персонажи, актеры). Сбор и анализ требований выполняет бизнес - аналитик.

Этап 2. Информационная архитектура

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

Этап 3. Юзабилити - тестирование

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

Этап 4. Графический дизайн пользовательского интерфейса

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

На данном этапе может понадобиться помощь смежных специалистов: иллюстратора (художника), 3D-моделлера и других.

Этап 5. Прототипирование пользовательского интерфейса

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

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

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

Правило 1: дать контроль пользователю

Принципы, которые дают пользователю контроль над системой:

1) Использовать режимы благоразумно.

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

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

3) Позволить пользователю фокусировать и переключать внимание.

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

4) Демонстрировать сообщения, которые помогут ему в работе.

Необходимо во всем интерфейсе использовать понятные для пользователя термины.

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

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

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

6) Обеспечить соответствующие пути и выходы.

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

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

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

8) Сделать пользовательский интерфейс более понятным ("прозрачным").

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

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

9) Дать пользователю возможность настраивать интерфейс по своему вкусу.

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

10) Разрешить пользователю напрямую манипулировать объектами интерфейса.

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

11) Позволить пользователю думать, что он контролирует ситуацию.

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

Правило 2: уменьшить нагрузку на пользователя

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

Принципы, позволяющие снизить нагрузку на память пользователя:

1) Не загружать кратковременную память.

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

2) Полагаться на распознавание, а не на повторение.

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

3) Представить визуальные заставки.

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

4) Предусмотреть установки по умолчанию, команды «Отменить» и «Повторить».

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

5) Предусмотреть "быстрые" пути.

Необходимо предусмотреть ускорители для работы с программой.

6) Активировать синтаксис действий с объектами.

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

7) Использовать метафоры из реального мира.

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

8) Применять раскрытие и объяснение понятий и действий.

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

9) Увеличить визуальную ясность.

Использовать навыки компьютерной графики для представления информации.

Правило 3: сделать интерфейс совместимым

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

Принципы создания совместимости интерфейса:

1) Проектирование последовательного интерфейса.

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

2) Общая совместимость всех программ.

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

3) Улучшение интерфейса и последовательности.

Проектировщики программ должны быть осведомлены в применении полученных навыков и осторожны при введении новых.

4) Сохранение результатов взаимодействия.

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

5) Эстетическая привлекательность и цельность.

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

6) Поощрение изучения.

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

1.5.2 Руководящие принципы

Для чего нужны руководящие принципы

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

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

Руководящие принципы создания интерфейса позволять пользователю применять к интерфейсу свое знание реального мира.

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

Нормативы

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

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

Развитие существующих руководящих принципов проектирования интерфейса

Многие программные продукты созданы для работы на разных платформах под управлением различных операционных систем, поэтому очень сложно разрабатывать интерфейс, удовлетворяющий все платформы или работающий на каждой из платформ. В таких случаях используется «Дополнение» -- подборка индустриальных руководств по проектированию -- было разработано Беллкором. Оно содержит описание и руководящие принципы для основных компаний и операционных систем, как IBM CUA, OSF, Microsoft Windows и др.

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

Применение руководящих принципов

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

Руководящие принципы по разработке интерфейса на макро- и микроуровне

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

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

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

Раздел 1.6 Основные элементы графического интерфейса

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

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

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

3) Меню. Меню представляет собой список команд и функций программы.

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

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

6) Каретка - это небольшая битовая матрица, которая является отметкой фокуса ввода с клавиатуры.

7) Блок диалога - это стандартный способ приема программой ввода от пользователя.

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

9) Виджет - заготовка части пользовательского интерфейса с параметром к окну.

10) Управляющие кнопки - для выполнения действий, написанных на кнопке.

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

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

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

14) Регулятор - для установки параметров от минимального до максимального, с помощью движка.

Глава 2 Microsoft Expression Blend - инструмент создания пользовательских интерфейсов

Раздел 2.1 Пакет инструментов Expression Studio

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

2.1.1 Expression Web

Этот инструмент для Веб-разработки обеспечивает возможность использовать HTML, DHTML, CSS и другие стандартные Веб-технологии для проектирования, построения и управления Веб-приложениями. Он занимает достойное место в ряду таких пакетов, как Adobe Dreamweaver и Visual Studio .NET.

Рисунок 4 - Пакет Microsoft Expression Web

2.1.2 Expression Encoder

Это приложение разработано для обеспечения возможности управления кодированием мультимедиа ресурсов. Также может использоваться для комплектации мультимедиа Silverlight-медиаплеером в виде соответствующего кода.

2.1.3 Expression Design

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

Рисунок 5 - Дизайн сайта в редакторе Microsoft Expression Design

2.1.4 DeepZoom Composer

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

2.1.5 Microsoft Expression Media

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



Рисунок 6 - Импортированные изображения в Microsoft Expression Media

2.1.6 Expression Blend

Этот инструмент обеспечивает возможность визуально создавать пользовательский интерфейс на базе XAML для настольных приложений на WPF или Веб-приложений на Silverlight.

Microsoft Expression Studio дополняет традиционные средства разработки, такие как Visual Studio, для создания приложений Silverlight. Visual Studio непосредственно работает с языком разметки XAML (но не визуально, а в текстовом режиме) и с кодом приложения code-behind на языке, например, C#.NET.

Раздел 2.2 Интегрированная среда разработки Expression Blend

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

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

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

Программа совмещает в себе особенности веб- настольных приложений. Использует интерактивный WYSIWYG-редактор для дизайна интерфейсов, основанных на XAML приложениях, для Windows Presentation Foundation и приложений Silverlight. Благодаря этому, с помощью одного инструмента можно объединить все необходимые элементы дизайна для Веб, включая видео, векторную графику, текст, анимацию, изображения, а также элементы управления.

Expression Blend предлагает гибкую интегрированную среду разработки (Integrated development environment, IDE), которая позволяет максимально увеличить количество информации, выводимой на экран. При этом пользователь может без труда понимать, что происходит.

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

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

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

3) Прямой импорт файлов Adobe Photoshop и Adobe Illustrator обеспечивает эффективную интеграцию с существующими рабочими средами проектировщиков.

4) Расширение и повторное использование компонентов функциональности, позволяющие наращивать пользовательский интерфейс приложений, не прибегая к дополнительному кодированию. Многофункциональные интерфейсы API позволяют разработчикам создавать триггеры, действия и режимы, используемые в их проектах Silverlight и Windows Presentation Foundation.

5) Усовершенствованная среда проектирования и разработки. В Expression Blend есть полнофункциональный редактор кода, поддерживающий C#, Visual Basic и XAML, который содержит множество нововведений, повышающих эффективность работы, включая новую панель конструирования, которая делает работу с этой средой более удобной для проектировщиков, использующих визуальные средства.

6) Поддержка сервера Visual Studio Team Foundation Server упрощает пользователям Expression Blend интеграцию с Visual Studio Team System. Усовершенствованные функции анимации и удаления, трехмерные преобразования, визуальные эффекты и улучшенный диспетчер видимых состояний предоставляют удобную среду для работы.

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

Раздел 2.3 Работа в Microsoft Expression Blend

Expression Blend представляет широкие возможности дизайнеру и разработчику, создающему собственные приложения или заказное ПО. С помощью MS EB можно создавать:

WPF Application (.exe) - клиентское приложение, построенне на WPF; данный тип проекта является приложением только для Windows.

WPF Control Library - DLL-файл, который может использоваться для элементов управления, используемых совместно приложениями WPF; данный тип проекта является приложением только для Windows.

Silverlight 1 Site - Веб-сайт, использующего элемент управления Silverlight. В этом случае создается многоплатформенное приложение.

Silverlight 2 Application - Silverlight-приложения, основанного на среде выполнения Silverlight 2. Это приложение включает среду выполнения .NET Framework. В этом случае создается многоплатформенное приложение.

Редактор может работать в трех режимах:

"Design" - поддержка визуальных средств рисования, а генерация кода осуществляется средой;

"XAML" - поддержка редактора кода;

"Split" - доступны как визуальные средства, так и редактор кода (Рисунок 7).

Рисунок 7 - Режим Split MS Expression Blend

пользовательский интерфейс expression blend

2.3.1 Интерфейс Blend

Blend имеет современный интерфейс, привычный как дизайнерам графикам, так и веб-дизайнерам.

Рабочее пространство разделено на три основные части (Рисунок 8).

Рисунок 8 - Рабочее пространство Microsoft Expression Blend: панель инструментов (слева скраю), панели Interaction и Objects and Timeline (слева), основное рабочее пространство с панелью инструментов и вкладками переключения вида Design, XAML или Split посередине и панель Results в центре снизу и панели Project, Properties, Resourses и Data справа.

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

Панель инструментов включает в себя основные инструменты создания и редактирования графики, а также специфичные для Blend инструменты и библиотеки стандартных и пользовательских элементов (System Controls, Simple Styles).

2.3.2 Инструменты рисования

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

использовать редактор кривых, инструмент выделения (Selection) и инструмент непосредственного выделения (Direct Selection), а также инструменты для построения простых геометрических форм

создавать составные векторные объекты (Compound paths);

создавать векторные объекты посредством логических операций (Combining paths)

переводить шрифт в векторный объект (Convert to Path);

кадрировать как растровое, так и векторное изображение (Clipping paths);

создавать маски прозрачности (Opacity masks).

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

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

Blend имеет стандартный редактор цветов позволяющий оперировать четырьмя цветовыми моделями: RGB, HLS, HSB и CMYK, а так же специальный инструмент для настройки градиентов (Brush transform tool) и инструменты для переноса свойств объектов (Eyedropper и Paint Bucket). Также присутствуют специальные растровые эффекты. Все фильтры работают в реальном масштабе и времени, могут применяться ко всем без исключения интерфейсным элементам, в том числе и генерируемым «на лету».

2.3.3 Работа с текстом

Blend является специализированным инструментом для построения пользовательских интерфейсов и имеет несколько типов текстовых объектов:

Текстовое поле (TextBox)

Текстовое поле с расширенными возможностями (RichTextBox)

Текстовый блок (TextBlock)

Поле пароля (PasswordBox)

Метка (Label)

Текстовый блок с расширенным содержимым и полосой прокрутки (FlowDocumentScrollViewer)

Настройки текста зависят от типа объекта и его функциональности.

2.3.4 Библиотека интерфейсных элементов

Библиотека интерфейсных элементов (Рисунок 9) содержит все типы стандартных интерфейсных элементов, специфические элементы Blend и элементы, содержащиеся в стиле SimpleStyles.

Рисунок 9 - Список интерфейсных элементов, доступных из встроенной библиотеки

Элементы подразделяются на следующие категории:

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

Интерфейсные элементы (Controls).

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

Раздел 2.4 Создание интерфейсов в Expression Blend

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

2.4.1 Стили и шаблоны

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

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

2.4.2 Создание пользовательских интерфейсных элементов

Есть два пути для создания элементов: можно «писать» элементы XAML-кодом или же можно воспользоваться Blend. Второй способ проще, нагляднее и быстрее.

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

Разметка

Разметка документа осуществляется специальными панелями (Layout Panels), которые могут включать в себя как сами панели, так и интерфейсные элементы. Доступ к панелям осуществляется на панели инструментов и поддерживает функцию Группировки (Group).

Панели разметки могут быть следующих типов:

Холст (Canvas panel)

Стыковочная панель (Dock panel), содержимое панели может пристыковываться к заданным сторонам панели

Таблица (Grid panel), содержимое находится внутри ячеек таблицы

Стопка (Stack panel), содержимое группируется в последовательном порядке по горизонтали или вертикали

Панель с возможностью скрытия содержимого (Wrap panel) - если содержимое не помещается внутри панели.

Расположение объектов, привязки и выравнивание

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



Рисунок 10 - Визуальная привязка

Для визуальной привязки используется инструмент Snap (Рисунок 10), который имеет уникальное предопределяемое свойство показывать заданный размер границы между элементами (Default margin и Default padding). Эта функция ускоряет расположение элементов в форме: достаточно просто выбросить элемент на плоскость и Blend сам покажет нужные для него отступы.

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

Выравнивание (Align) элементов происходит относительно Панели разметки (Layout Panels), в которой находятся элементы. Если элементы находятся внутри Таблицы (Grid Panel), то появляется возможность управлять поведением элементов при изменении размеров окна приложения.

Раздел 2.5 Сравнительный анализ Expression Blend

2.5.1 Blend и классические способы создания прототипов интерфейсов

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

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

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

С точки зрения проектировщика взаимодействия возникают следующие проблемы при работе с MS EB:

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

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

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

* Каким образом осуществлять глубинные изменения экранных объектов? При итеративной разработке постоянно возникает необходимость в изменении внешнего вида и поведения экранных объектов. Blend должен поддерживать рефакторинг (контроль корректности каждого изменения объектов XAML). Одно из критических требований к прототипам и к системам редактирования пользовательского интерфейса это поддержка итеративных изменений.

Заключение

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

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

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

Размещено на Allbest.ru