Silverlight

индекс
62,31

Sketch Flow — небольшое практическое использование

Насмотревшись разных презентаций и начитавшись интервью, решил попробовать применить Sketch Flow к небольшому новому проекту.

Для справки: Sketch Flow — это кусочек Expression Blend 3, служащий для прототипирования пользовательских интерфейсов. Про него уже немного рассказывали на хабре (1, 2). Лично мне понравилась его презентация на MIX'09 (около часа видео, английский).

Проект очень маленький — буквально сайт из десятка страниц. Но все осложняется тем, что клиент — а это наш старый, хорошо известный клиент — клиент очень требовательный. Если рисовать дизайн просто по ТЗ, то с большой вероятностью пришлось бы переделывать раза три-четыре. А тут как раз и дизайнер занят. Поэтому я решил набросать черновик интерфейса в Sketch Flow.

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

Плюсы:
  • Специальный стиль кнопок и «куролапий» шрифт сразу дает клиенту понять, что это вовсе не дизайн, и что к дизайну придираться не надо. А надо смотреть, как он хочет расположить блоки и кнопки.
  • Можно поэкспортить черновик в сильверлайт-приложение, поместить на сайт и дать ссылку клиенту.
  • Можно экспортировать все в ворд. Это оказалось даже удобнее для них.
  • Можно переключаться из экспрешшена в студию и писать там код для черновика. Довольно удобно.

Минусов пока много:
  • Редактор довольно падучий. Не случайно они его называют Sketch Flow Preview. (Почему-то я решил, что это preview)
  • Скетч для WPF и для Silverlight предлагает кардинально разные контролы. Не уверен, что это хорошо. Это понятно с точки зрения логики продукта (см. презентацию), но не очень удобно.
  • Когда я публикую черновик на веб, он как-то ужасно кэшируется. Поэтому нормально показать все это клиенту можно только один раз. Второй раз ему уже придется чистить кэш. Это большая проблема.
  • Продукт заточен под обычные интерфейсы 4:3, а не под веб-страницы. Страницы часто бывают длинны, и их нужно скроллить. А плеер для черновика этого не умеет. Он умеет только увеличивать/уменьшать, что для клиента совсем не интуитивно.
  • Экспорт в ворд тоже местами глючит.

Напоследок расскажу, как я решил вопрос скроллинга. Постольку поскольку скетч — это обычное сильверлайт-приложение, там у каждой страницы есть класс. Я просто повесился на событие OnLoad и там обернул всю страницу в еще один ScrollViewer нужного мне размера. Работает.

Единственная проблема с таким подходом — пометки, которые клиент может делать поверх наброска, не скроллируются. Так что стандартный скроллер просто необходим.
+16
24 ноября 2009, 21:46
8

комментарии (13)

+3
AndrewMayorov #
Вижу, товарищи из Минусинска пришли. Есть конкретные замечания к тексту или просто ностальгия по родине мучает?
0
RainFall #
Улыбнули с утра :)
Странно, рсска только сейчас пришла, а комментарий написан в 22:42.
+1
youlose #
Сам не минусовал, но могу предположить:

Sketch Flow — небольшое практическое использование

Практическое использование подрузамевает какие нибудь действия и описание этих действий, а топик получился по сути — «просто обзор», «высказывание своего мнения об опыте с sketchflow»
0
AndrewMayorov #
Спасибо, в этом есть резон.
0
tearaway_Tea #
Предложил данную разработку своим продукт-менеджерам, что-бы они сами нарисовали что хотят. Вроде получилось, дальше использовать не вышло. Все таки для реального приложения, сгенерированный XAML от SketchFlow не подходит, хотя, когда вообще где либо что-то сгенерированное подходило (кроме Delphi)? =)
0
AndrewMayorov #
Свою основную функцию он выполняет неплохо: показать наброски экранов приложения и позволить перемещаться между ними, нажимая кнопки. ИМХО, в большинстве случаев этого достаточно, чтобы переложить знания из одной головы в другую. В нашем случае — из моей головы в клиентскую и обратно. А если менеджер продукта такое рисует, то он, видимо, должен донести идею программистам. Можно же вообще нарисовать на бумажке, отсканировать и в скетч-флоу это «оживить». В нем есть и сложные сценарии — переход между состояниями одного экрана, драг-дропы, связывание с данными. Но их и уже делать сложнее, надо приспособится.

Так что все зависит от точки зрения — что считать реальным использованием.
0
mac2000 #
у нас тоже самое…

одно время пользовались азурой но потом отказались в пользу визио с темой для набросков сайтов

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

*самое страшное для меня — это изменяющиеся тз в ворде

тут надо какието статьи, а еще лучше видео обучающее с пошаговым обьяснением чего и где кликать и как оно должно работать — тогда может народ начнет пользовать — хотя не факт конечно
0
XaocCPS #
>> Редактор довольно падучий. Не случайно они его называют Sketch Flow Preview.

Редактор уже давно вышел из стадии Preview и доступен в финальной версии в комплекте с Expression Blend. Попробуйте финальную версию, уверен, масса претензий отпадет.
0
AndrewMayorov #
Я вроде релиз и пробовал. Интересно, откуда у меня тогда мысль про Preview взялась? Посмотрю повнимательней.
0
sgolubev #
Ребят, я сам занимаюсь дизайном графических интерфейсов, и в большом восторге от SketchFlow!

Разработка прототипов, будь это для передачи на разработку команде программистов, или для презентации руководству, с помощью SketchFlow в Expression Blend проходит в быстром темпе, без ограничений в функциональности блягодаря .NET «за кулисами», и очень несложно: www.microsoft.com/expression/products/SketchFlow_OverView.aspx

Имея опыт дизайна и разработки Java GUI на UNIX/Linux, iPhone app на Mac, лично для меня среда разработки .NET на данный момент остаётся самой удобной. Visual Studio и Expression Blend (SketchFlow).

А какой ваш любимый инструмент для создания прототипов?
0
eisernWolf #
Под iPhone: giveabrief.com/
0
sgolubev #
Интересно. Спасибо.
0
pavlov_eugene #
мне открыли глаза =)

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