company_banner

Прототипирование в Expression Blend + SketchFlow. Часть 1. Немного истории

http://electricbeach.org/?p=332
  • Перевод

Введение


Этой статьей я хочу начать цикл статей, посвященных созданию прототипов с помощью Expression Blend и SketchFlow. Мы постепенно пройдемся от базовых концепций и понимания, как работает SketchFlow, до отдельных нюансов вроде настройки и брендирования проигрывателя прототипов. Местами, я буду включать переводы статей других авторов.

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


А начнем мы со статьи Christian Schormann об истории SketchFlow.

SketchFlow: Немного истории


SketchFlow, инструмент динамичного прототипирования для Expression Blend, наконец официально вышел (от переводчика: статья писалась к выходу Expression Blend 3)! Вы можете скачать триальную версию здесь.

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

Давайте начнем с детских фотографий:


Это прототип, который я написал несколько лет назад на Windows Forms, задолго до появления Avalon/WPF. Даже на этой ранней картинке, хорошо заметен большой редактор карты, названный «Storyboard editor». Серые стрелки отображают навигацию, а красные связи композицию.

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


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

Другая фотография показывает проигрыватель в его самые первые дни:


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



~~~

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

~~~

В один прекрасный день, когда SketchFlow встретился с Blend в первый раз (в наш офис в Миннесоте пришел Bob Pappas):


Это была любовь с первого взгляда, и с тех пор вещи начали очень быстро развиваться, взращиваемые потрясающими командами Blend и SketchFlow в Редмонде и Минессоте. Вот как выглядел плеер в тот период:


Немного спустя мы можем обнаружить фотографии вроде этой:


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


И наконец, мы пришли ко дню выпуска из школы:


Сейчас Expression Blend + SketchFlow доступен для загрузки в составе Expression Studio. (От переводчика: Expression Studio также доступна в рамках подписок MSDN, MSDNAA, программ DreamSpark и BizSpark.)

Для нас безусловно будет большой честью, если вы попробуете его в работе. Команды Blend и SketchFlow с нетерпением ждут ваших первых (а также вторых и третьих) впечатлений.
Microsoft 355,16
Microsoft — мировой лидер в области ПО и ИТ-услуг
Поделиться публикацией
Комментарии 26
  • +1
    Классная штука блин, адоптирую.
    • 0
      Кхе кхе, то есть удочеряю.
    • 0
      Прекрасный инструмент, есть ли подобный open source под линух?
      • 0
        а сколько он стоит?
          • 0
            Вот получше ссылка на softkey
            • 0
              интересно, его без кучи лишнего можно купить?
              или есть подобные программы с таким же удобством?
              • +2
                Нет, Expression Blend + SketchFlow продается только в составе Expression Studio 4 Ultimate.
                Но если вы занимаетесь созданием своего стартапа, то для вас открыта программа BizSpark ;)
                • 0
                  Это ужасно… Так привыкаешь к удобным микрософтовским инструментам, что приходится делать стартап за стартапом…

                  Когда с нас будут $100 брать?
        • 0
          не знаю почему, но работа с юзерконтролами как то не пошла.
          сейчас делаю прототип в студии, как то мне проще,

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

          для себя применение вижу не в полном прототипировании,
          а как в слайд шоу тыц сюда вот другая страница/окно.
          • 0
            Я правильно понимаю, что вы хотите по нажати на кнопки что-то показывать в текущем окне, а не делать переход на другие?
            • 0
              Как я понимаю суть — как развернуть содержимое табов, находящиеся в окне. В видео они есть, но как с ними работать не понятно.
              • 0
                именно так
                • 0
                  Это можно делать с помощью поведений (Behaviours) — на кнопку вешается триггер при нажатии изменить свойство (например, видимость) другого объекта. См. expression.microsoft.com/ru-ru/ee426895(en-us).aspx
                  • 0
                    Такое возможно сделать?

                    вот пример окна:

                    -----------------------------------------------------------------------
                    |         UserControl ( Menu With Buttons )                            |
                    ---------------------------------------------------------------------- |
                    | |--------------------------DockPanel-------------------------------| |
                    | |  When Clicking On Button In Menu Loading Here                    | |
                    | |  Right UserControl and Unloading Other                           | |
                    | |  Usercontrols Here                                               | |
                    | |------------------------------------------------------------------| |
                    -----------------------------------------------------------------------|

                    • 0
                      Если без кода, то самый простой вариант — разместить в данном месте оба контрола. А на клик повесить два поведения (ChangePropertyAction): первое прячет (Visibility=Collapsed) второй контрол, второе показывает (Visibility=Visible) первый.

                      Аналогично можно сделать через смену состояний.

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

            • 0
              А можно ли экспортировать этот стиль «Sketch» в свои проекты (сайты, программы)? Нарушу права разработчкив?
              • 0
                Насколько я знаю, ограничений на использование Sketch-стиля контролов в ваших приложениях нет, только будет ли это удобно конечным пользователям?
              • 0
                Под Mac есть что-то подобное? Впечатлило до глубины ушей.
                • +1
                  Подобного не видел, можно попробовать через виртуализацию. А так, например, у Axure есть версия под Mac (http://axure.com/cs/blogs/axure/archive/2010/04/06/Axure-RP-for-Mac.aspx).
                  • +2
                    сейчас пользую Axure, и могу сказать что очень уж сыроват он еще
                  • 0
                    Adobe Catalyst, и куча веб-тулов для прототипирования, например мне нравится www.hotgloo.com/
                    • 0
                      А вот здесь можно скачать trial Expression Studio 3 Ultimate
                      • 0
                        Не подскажете, что с ним сейчас? А то что-то на сайте Майкрософта ничего не понятно.
                        • 0
                          Expression Blend стал частью пакета VS (Blend for Visual Studio).

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

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