company_banner

Прототипирование в Expression Blend + SketchFlow. Часть 3. Работа с контролами

    Продолжаем разбираться с прототипированием с помощью SketchFlow. В предыдущих сериях:

    Сегодня мы рассмотрим работу с контролами, а начнем с примитивов.

    Примитивы


    Прежде всего, помимо того, что вы можете импортировать готовые картинки, какие-то примитивы для разметки компоновки вы можете рисовать непосредственно в Expression Blend (помомо прямоугольников, линий и овалов, есть кривые, звездочки, стрелочки, треугольники, callout`ы и ряд других примитивов):


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



    Эти же опции, а также размер ячейки сетки можно настроить через меню Tools ⇒ Options ⇒ Artboard



    Дополнительно в вашем распоряжении направляющие (для Grid Layout), которые также можно использовать для упорядочивания объектов:



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



    Двигаемся дальше к реальным контролам ;)

    Контролы


    С точки зрения прототипирования, тот факт, что SketchFlow базируется на Expression Blend, который в свою очередь разрабатывался для дизайна приложений под Silverlight и Windows, дает большое преимущество: у вас уже есть библиотека готовых контролов и механизм для создания новых, а также возможности по стилизации и layout`ы для группировки объектов.

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

    Получить доступ к готовым контролам можно через панель Assets двумя способами:
    1. Фиксированную вкладку (если ее нет, можно добавить через меню Window)



    2. Выпадающую панель


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

    Для добавления контрола на экран достаточно его перетащить в рабочую область или выделить нужный контрол в Assets и “нарисовать” его в рабочей области. Пример контролов приведен ниже (это не все доступные готовые контролы!):



    Из такой коллекции легко можно собрать что-нибудь полезное, например, форму логина:



    Стили и скетчевые стили


    По умолчанию, все контролы имеют стандартный для Silverlight стиль (как на картинках выше), вместе с тем для SketchFlow-проектов доступен также специальный скетчевый (рисованный стиль).

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

    Скетчевые контролы имеют суффикс “–Sketch”. Скетчевый стиль также можно применить ко многим обычным контролам через контекстное меню Edit Template (или Edit Style) ⇒ Apply Resource ⇒ *-Sketch. К примеру, приведенная выше форма в скетчевом оформлении будет выглядеть следующим образом:



    Скетчевый стиль также доступен для примитивов (см. Shapes ⇒ SketchShapes в библиотеке контролов Assets). Вместе со SketchFlow поставляются специальные шрифты Buxton Sketch, в том числе с кириллицей.



    Макеты (Mockups)


    Помимо обычных контролов в SketchFlow можно добавить специальные макеты (Mockups). Если среди примеров, поставляемых вместе с Expression Blend открыть MockupDemonstration, можно посмотреть их в деле.

    Чтобы добавлять мокапы в любой проект на SketchFlow, нужно подключить соответствующую библиотеку при старте. Это, пожалуй, единственная достаточно хитрая вещь, которую нужно проделать, чтобы добиться результата :)

    Вам нужна библиотека Microsoft.Expression.Prototyping.MockupsSL.dll и сопутствующая папка Design. Их можно найти в папке с примерами, например, вот тут

    C:\Program Files\Microsoft Expression\Blend 4\Samples\en\MockupDemonstration.zip\MockupDemonstration\Libraries\Silverlight\Debug или, если примеры распакованы отдельно, что-то вроде Documents\Expression\Blend 4\Samples\MockupDemonstration\MockupDemonstration\Libraries\Silverlight\Debug (и аналогично для WPF – нужна версия для .NetFramework).

    Далее их нужно разместить вот сюда: C:\Program Files\Microsoft Expression\Blend 4\Libraries\Silverlight\v4.0\

    После этого в библиотеке контролов Assets вам будут доступны мокапы (соответствующие объекты заканчиваются на “Mockup”), они имеют зеленые иконки:



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



    Собственные контолы (User Control)


    Помимо готовы контролов, вы также можете создавать свои собственные для повторного использования. Для этого достаточно выбрать группую объектов и из контекстного меню нажать Make into User Control… Либо просто добавить в проект новый User Control.

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



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



    Теперь его легко можно использовать:



    Аналогично можно сделать собственный контрол для формы поиска



    который далее можно легко вставлять в различные интерфейсы. Причем за счет использования Grid в качестве Layout размеры поля поиска также можно менять:



    Элементы интерфейсов


    Наконец, в заключение данной статьи хочу привести еще один способ достаточно быстро получить нужные компоненты интерфейса. Да, мы снова говорим про импорт. Если вы разрабатываете приложение специфичной направленности, например, приложения для Windows Phone, iPhone, Android или приложение для Facebook, становится разумным использовать компоненты интерфейса из соответствующих ui guidelines. Как правило, они легко доступны в PSD, а дальше остается только импортировать:



    Далее можно разнести нужные компоненты по отдельным контролам, либо использовать Copy-Paste:



    В следующей серии мы рассмотрим списки и работу с образцами данных. А пока тестируйте свои идеи на прототипах и участвуйте в конкурсе прототипов на SketchFlow.


    Microsoft
    380,00
    Microsoft — мировой лидер в области ПО и ИТ-услуг
    Поделиться публикацией

    Комментарии 29

      +1
      Я стал недавно пользоваться Blend и SketchFlow просто чтобы сделать набросок для дизайнера сайта.
      Просто накидываю элементов, размещаю, сохраняю в jpg и отсылаю. Очень быстро, удобно и наглядно.

      Раньше пользовался Axure — в разы неудобнее.
        0
        Ну Axure — это вообще извращение. Как можно в уродливом инструменте делать удобные интерфейсы я не понимаю. Меня Axure отталкивает сразу просто одним своим видом.
          0
          А зачем в jpg? Там ведь можно в живую показать, плюс можно заметки оставлять…
            0
            У дизайнера нет Blend
              +1
              чтобы посмотреть прототип Blend не нужен
                0
                Да? Ну привыкли мы так:) Спасибо. Буду иметь в виду.
              0
              я так понимаю что автор поста не занимается детальным прототипированием и ему хватает статичных растровых эскизов
            +1
            Пробовал я проектировать в этом инструменте, есть, конечно, интересные моменты, но в целом слишком сложно. Да, куча возможностей, но сам интерфейс программы и управление элементами пока очень далеко от совершенства. На данный момент лучше Visio или InDesign. На крайний случай Fireworks.
              +1
              Поддерживаю Indesign. Потрясающая для прототипирования интерфейсов программа, где, располагая нормальной библиотекой форм и контролов, а также функционалом Indesign, — можно творить чудеса. Крайне удобно и быстро.
              +2
              Очень здорово. Кто-нибудь может подсказать альтернативу этой программы на мак?
                0
                Omni Graffle? (+киты, например как тут)
                0
                Некоторые вещи очень раздражают. Причем они не проявляются, пока не начинаешь пользоваться.

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

                С зажатым CTRL не копируется.

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

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

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

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

                И неизвестно, допилят ли «юзабилити» разработчики, и как быстро сделают это.

                — Да, и не нашел пока способа быстро сменить скин для всех элементов. Чтобы из скетчи-стайла сделать прототип высокого уровня.
                  0
                  См. ниже.
                  0
                  Если создается не текстовое поле, можно, например, нажать V, чтобы сменить в Toolbox создание нового объекта на выделение. Для текстового поля — esc, v. Возможно это по началу не слишком удобно: здесь последний выбранный контрол добавляется на панель инструментов.

                  Копировать объекты можно с зажатым Alt, Ctrl используется для выделения.

                  Прилипание к объектам также есть, по-моему, оно должно быть по умолчанию включено, через опции можно также настроить.

                  Для контролов можно в свойствах через панель Miscelleneous сбросить стиль (зеленая точка, reser).
                    0
                    Да в этом я уже разобрался, но это все равно неудобно. Когда в большинстве программ копирование идет с CTRL, ломать пользовательские стереотипы, заставлять человека корежиться и вырабатывать вторую привычку (здесь копируем с CTRL, а там с ALT) — это ну крайне неразумно.

                    > Если создается не текстовое поле, можно, например, нажать V,

                    Опять же, жуть. Зачем? Сравните:

                    а) Перетянул с панельки контрол — изменил размеры.
                    б) Перетянул с панельки контрол — нажал клавишу — изменил размеры.

                    В той же Axure конкретно этот крайне часто повторяющийся момент сделан ну намного удобнее. И копирование с CTRL.

                    > Возможно это по началу не слишком удобно

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

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

                    Сравните:

                    а) Навел — потянул за маркер.
                    б) Навел — кликнул — навел уже на маркер — потянул за маркер.

                    В Microsoft кто-нибудь занимается такими вещами?

                    > Для контролов можно в свойствах через панель Miscelleneous сбросить стиль (зеленая точка, reser).

                    Сбросил — и как обратно? Сброс — не полноценное переключение скинов.
                      0
                      В идеале было бы полностью скопировать раскладку и поведение адобовских продуктов.
                        0
                        Я думаю, дополнительное удобство со временем придет, сейчас это только практически 1-2я версия инструмента.

                        (Команда разработки как раз расширяется специалистами ux design)
                        0
                        Полноценного переключения скинов туда-сюда одной кнопочкой, к сожалению, нет.

                        Тем не менее для каждого контрола можно отдельно устанавливать стиль. Они все хранятся во вкладке ресурсы. Оттуда нужные стили можно переносить мышкой прямо на контролы. Либо назначить через контекстное меню (Edit template (или style)).
                      0
                      Совсем не порадовали аннотации. Я надеялся, что можно будет расставлять коллауты и маркеры, а также иметь быстрый способ одной кнопкой скрыть-показать их.

                      Оказались какие-то стремные записки.
                        0
                        Аннотации при демонстрации прототипа? Или при разработке?
                          0
                          В основном я использую статические прототипы. Потому, что подписывать будут бумагу, ТЗ, а в нем — статика.

                          При разработке я расставляю маркеры и коллауты. При демонстрации они скрыты. При создании документа они видны.

                          Выглядят примерно так:


                          В Axure это приходится расставлять вручную и объединять в группу. До слоев как в «Фотошопе» они не додумались, а на многочисленные запросы им, видимо, плевать.

                          В этих маркерах, коллаутах и т.п. — ссылки на пункты ТЗ, номера требований, пояснения для разработчиков.

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

                            Как вариант: используйте состояния (States) для добавления комментариев. У вас будет базовое состояние без комментариев (комментарии скрыты) и состояние с комментариями. При проигрывании прототипа между ними можно явно переключаться и оба войдут в генерируемую документацию.

                              0
                              Это костыль какой-то получается. Совсем не нужно оба состояния в документации. Зато нужно иметь возможность во время разработки «скрывать слой» с комментариями, чтобы они под рукой не путались.

                              Все-таки, видно, что Expression Blend изначально делался не для прототипирования и не для проектировщиков :-(

                              Я вот когда проектирую что-то, изучаю действия пользователей, бизнес-процессы и т.п.

                                0
                                А что мешает размещать тогда комментарии в отдельном слое и просто скрывать его?
                                  0
                                  Видимо, интерфейс Экспрешн Бленда, который ну никак не обозначает наличие слоев.
                                    0
                                    Да, пардон, стормозил :) Отдельных слоев как, например, в Photoshop тут нет. Это следствие наследства окружающей среды, которая изначально действительно задумывалась для дизайна интерфейса под Silverlgiht и WPF, а в XAML нет параллельных слоев, есть дерево объектов.

                                    Есть layout`ы — grid, canvas и т.д. Можно сделать отдельный grid под комментарии и целиком его скрывать/показывать.
                                      0
                                      Ежели в Microsoft задумали делать инструмент для проектировщиков, может, они привлекут к процессу проектировщиков? :)))

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

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

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

                                      Есть какие-то прогнозы по поводу того, принимается ли фидбек и как быстро он может быть воплощен?
                                        0
                                        Я же говорю, как раз начали привлекать именно специалистов по UX Design и прототипированию ;)

                                        Фидбек можно писать
                                        — Форум по Expression Blend + Design social.expression.microsoft.com/forums/en-US/blend/threads/
                                        — Christian Schormann electricbeach.org
                                        — Блог Expression Blend&Design blogs.msdn.com/b/expression/

                                        На счет скорости воплощения — не думаю, что очень быстро. То есть в соответствии со сроками разработки следующей версии. (4я вышла в июне, 5ю в этом году можно не ожидать).
                                          0
                                          Очень жаль, что долго будет :(

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

                      Самое читаемое