Юзабилити аспекты проектирования пользовательских интерфейсов в среде Microsoft Expression Blend

Сергей Георгиевич Швецов

Член RusCHI, член Союза дизайнеров России

http://ruschi.ru, http://www.usethics.ru/

Август 2008

Продукты и технологии:

  • Microsoft Expression Studio,
  • Microsoft Expression Blend,
  • Microsoft Expression Design,
  • Microsoft Visual Studio,
  • Windows Presentation Foundation,
  • XAML.

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

Гибкость проектирования достигается использованием новой графической подсистемы WPF, впервые появившейся в составе .NET Framework 3.0. Она базируется на языке описания пользовательских интерфейсов XAML и векторной графике. В статье описываются:

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

Введение

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

Данный язык позволяет описывать внешний вид и поведение интерфейсных элементов, устанавливать их взаимодействие с различными данными и событиями. Он допускает прямое подключение к среде Common Language Runtime (CLR), что обеспечивает большую гибкость при проектировании ПО.

Функциональность, взаимодействие XAML и процедурного кода

XAML – это скриптовый язык, базирующийся на XML. Он имеет набор правил, которые устанавливают взаимодействие между объектами и классами, атрибутами и свойствами или событиями, а также пространствами имен XML и CLR. Для описания элементов, панелей, свойств текста, векторной графики и т.п. используются теги.

<Button VerticalAlignment="Top" Width="Auto" Height="Auto" Content="Button"/>

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

При создании проекта в Expression Blend каждый файл на XAML имеет сопутствующий файл на C# или VB. Взаимодействие с файлом кода на C# или VB осуществляется через обработчики событий, которые прописываются внутри тегов объектов.

<Button Content="Button" Click="ButtonClick"/>
private void ButtonClick(object sender, System.Windows.RoutedEventArgs e)
{
MessageWindow MessageWindow = new MessageWindow();
MessageWindow.ShowDialog();
}

Пример обработчика события ButtonClick на языке программирования C#.

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

Есть несколько визуальных редакторов позволяющих создавать и редактировать XAML : у Microsoft это XamlPad , Visual Studio 2005 и 2008, Expression Blend . Кроме того необходимо упомянуть Mobiform Avrora и XamlHack.

Подробно стоит остановиться на основном приложении для работы с XAML – Expression Blend, далее просто Blend.

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

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

Интерфейс Blend

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

Рабочее пространство разделено на три основные области. Панели Interaction и Objects and Timeline слева, основное рабочее пространство с панелью инструментов и вкладками переключения вида Design, XAML или Split посередине и панели Project, Properties, Resourses и Data справа, панель Results внизу. Все панели можно переводить в «плавающий» режим или убирать с экрана при помощи «горячих» клавиш. В меню Tools/Options/Workspace есть возможность настройки размеров панелей. Благодаря разработчикам, в Blend введено большое количество «горячих» клавиш, причем большинство сочетаний хорошо известны всем дизайнерам, работающим с графическими программами от Adobe.

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

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

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

Инструменты для построения и редактирования векторной графики стандартны для многих векторных редакторов и включают в себя Перо (Pen), Карандаш (Pencil), средства выделения Selection и Direct Selection, а также инструменты для построения простых геометрических форм: Прямоугольник (Rectangle), Овал (Ellipse) и Линия (Line).

Blend позволяет:

  • создавать составные векторные объекты (Compoundpath);
  • создавать векторные объекты посредством «логических» операций (вычитание, сложение и т.д.) (Combining paths);
  • переводить шрифт в векторный объект (Convert to Path);
  • кадрировать растровые и векторные изображения (Clipping paths);
  • создавать маски прозрачности (Opacity masks).

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

Далее мы остановимся подробнее на возможности раздельно задавать толщины линий образующих стороны объектов типа Граница (Border) и Прямоугольник (Rectangle) и на возможности раздельно задавать радиус скругления для всех углов в объекте Граница (Border).

Image1.jpg

<Border Height="22" BorderThickness="1,0,1,3" BorderBrush="#FFFF0000" CornerRadius="0,0,2,2" Width="100"/>

Пример построения пользовательского элемента с кодом на XAML.

Настройка внешнего вида объектов

Внешний вид объектов зависит от свойств, которые задаются как при помощи прямых настроек, так и при помощи кистей (Brushes). Список свойств включает следующие:

  • прозрачность (Opacity),
  • видимость (Visibility),
  • заливка (Fill),
  • штриховка (Stroke),
  • фон (Background),
  • передний план (Foreground),
  • граница (BorderBrush),
  • маска прозрачности (Opacity masks).

Кисти используются для задания внешнего вида объектов и могут быть следующих типов:

  • одноцветная кисть (Solid color brush),
  • линейный градиент (Linear gradient brush),
  • радиальный градиент (Radial gradient brush),
  • кисть растрового изображения (Image brush),
  • кисть векторного изображения (Drawing brush),
  • кисть визуальных эффектов (Visual brush).

Кисти можно конвертировать в ресурсы и многократно применять к различным объектам.

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

Особо бы хотелось отметить наличие в Blend специальных растровых эффектов (Bitmap effects):

  • размытие (Blur),
  • внешнее свечение (Outer glow),
  • тень (Drop shadow),
  • фаска (Bevel),
  • рельеф (Emboss).

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

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

Blend имеет несколько типов текстовых объектов:

  • текстовое поле (TextBox),
  • текстовое поле с расширенными возможностями (RichTextBox),
  • текстовый блок (TextBlock),
  • поле пароля (PasswordBox),
  • метка (Label),
  • текстовый блок с расширенным содержимым и полосой прокрутки (FlowDocumentScrollViewer).

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

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

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

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

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

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

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

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

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

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

Стили описываются содержимым, заключаемым в тег <Style> и могут включать следующие элементы:

  • кисти всех типов (Brush);
  • геометрические свойства элементов (высота, ширина, радиус скругления углов, толщина линий и т.д.);
  • специальные эффекты (BitmapEffects и Visual brush);
  • интерфейсные элементы;
  • векторные графические объекты.

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

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

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

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

При создании пользовательского интерфейсного элемента в Blend можно либо отредактировать существующий элемент, либо создать его «с нуля». Для того чтобы отредактировать элемент достаточно щелкнуть по нему правой кнопкой мыши и выбрать Edit Control Parts (Template). Появится его «начинка» и вы можете изменить внешний вид элемента (с помощью графического редактора Blend) или его поведение (редактируя переключатели событий – Event Triggers), а также задать анимацию, используя Timeline.

Разметка

Разметка документа осуществляется с помощью специальных панелей (Layout Panels), которые могут быть следующих типов:

  • Холст (Canvas panel).
  • Стыковочная панель (Dock panel). Ее содержимое может пристыковываться к заданным сторонам панели.
  • Таблица (Grid panel). Содержимое панели размещается внутри ячеек таблицы.
  • Стопка (Stack panel). Содержимое панели группируется в последовательном порядке по горизонтали или вертикали.
  • Панель с возможностью скрытия содержимого (Wrap panel). В том случае, когда содержимое не помещается внутри панели, например, при изменении ее размера, содержимое скрывается определенным образом.

Доступ к панелям разметки предоставляется с панели инструментов. Приятной неожиданностью стало появление функции Группировка (Group), наконец-то переставшей быть абстрактной сущностью!

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

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

Инструмент визуальной привязки (Snap) имеет уникальное свойство показывать заданный заранее размер границы между элементами (Default margin) и (Default padding). Эти параметры настраивается в меню Tools/Options/Artboard.

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

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

  • Auto – при изменении размеров таблицы изменяется размер заключенных в нее элементов.
  • Pixel – строка или столбец таблицы имеют фиксированное значение в пикселях.
  • Star – изменяет размеры элементов аналогично тому, как это происходит при изменении размеров в процентах в HTML.

Данные свойства устанавливаются, как на строки, так и столбцы таблицы и могут применяться в любой комбинации.

Плюсы и минусы Expression Blend

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

Плюсы:

  • Удобный минималистический интерфейс.
  • Встроенный редактор векторной графики с разнообразным инструментарием.
  • Встроенный редактор XAML с подсветкой синтаксиса.
  • Встроенный компилятор.
  • Наличие привычных для дизайнеров «горячих» клавиш.
  • Наличие уникальных инструментов и интерфейсных решений.

Минусы:

  • Программа предназначена для дизайнеров с хорошим знанием или отношением к XML-подобным языкам разметки.
  • Требует установки .NET Framework 3 или 3.5 (даже для просмотра готового проекта). Еще желательно наличие Visual Studio для редактирования C# файлов.
  • Бета-версия продукта работает медленно и неустойчиво.
  • Не все свойства могут устанавливаться из графического интерфейса Blend, поэтому зачастую требуется вмешательство в XAML-код.
  • Стандартные библиотечные элементы не всегда корректно сверстаны, и иногда придется переделать некоторые из них.
  • Справочная система недостаточно проработана.
  • Для проекта необходима разветвленная система файлов.

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

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

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

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

Что несет нам новая технология?

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

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

Список литературы

  1. XAML Overview.
  2. C. Sells and I. Griffits, Programming WPF, O'Reilly Media, Inc.; 2 edition, 2007
  3. G. Leete and M. Leete, Microsoft Expression Blend Bible, Wiley Publishing, Inc., Indianapolis, Indiana, 2007.