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

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

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

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

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

1. На вкладке Файл выберем Создать . В разделе Категории шаблонов выберем категорию Программы и базы данных.

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

2. Из набора элементов Диалоговые окна перетащим на страницу фигуру Форма диалога .

3. Перетащим фигуру Кнопка диалогового окна из набора элементов Диалоговые окна и приклеим ее к точке соединения в верхнем правом углу Формы диалога .

При сбросе фигуры Кнопка диалогового окна на страницу автоматически открывается диалоговое окно Данные фигуры .

4. В диалоговом окне Данные фигуры щелкнем на кнопке Ок , чтобы принять значения по умолчанию в списке Тип .

5. Перетащим другую фигуру Кнопка диалогового окна в контейнер Форма диалогового окна и приклеим ее к левому краю предыдущей кнопки. В открывшемся диалоговом окне Д анные фигуры в списке Тип выберем Развернуть и щелкнем на кнопке ОК .

6. Перетащим еще одну фигуру Кнопка диалогового окна в контейнер Форма диалога и приклеим ее к левому краю предыдущей кнопки. В открывшемся диалоговом окне Данные фигуры в списке выберем Свернуть и щелкнем на кнопке Ок .

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

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

8. С помощью маркеров изменения размера или окна Размер и положение изменим ширину фигуры панели до 75 мм и высоту до 30 мм.

9. Перетащим фигуру Панель на фигуру Форма диалога и разместим ее внизу по центру.

10. Перетащим фигуру Элемент верхней вкладки из набора элементов Диалоговые окна и разместим ее на границе с верхним левым углом контейнера Панель .

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

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

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

12. Наведем указатель мыши сразу слева от фигуры списка Столбец 1 и между первой и второй подписями Текст

13. Щелкнем 2 раза на синем треугольнике вставки, чтобы добавить в список еще 2 элемента.

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