Прототипирование Twitter-клиента. Процесс

Ранее мы в трех частях (первая, вторая и третья) рассмотрели, как с помощью Expression Blend + SketchFlow разработать прототип твиттер-клиента.

 

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

Этапы

В целом весь процесс разработки можно разбить на три этапа:

1. Проработка потоков приложения. Здесь мы не думаем о визуальной составляющей, но отвечаем себе на следующие вопросы. Какие функции с точки зрения пользователя реализует приложение? Какие у него основные состояния? Как они связаны между собой? Какие компоненты можно выделить?

2. Наполнение визуальным содержанием. Здесь мы переходим к визуальной состовляющей. Что увидит пользователь? С чем он может взаимодействовать?

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

1. Создание SketchFlow Map

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

Далее начинаем думать над тем, какие у нас должны быть компоненты. Где нужно вставить меню, формы логина и редактирования? Какое сдержание (контент) должно быть на экранах и откуда оно поступает.

Переходим к анализу связей как между компонентами, так и между экранами.

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

2. Наполнение содержанием

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

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

3. Добавление интерактивности

На последнем этапе мы наводим небольшой лоск: прописываем анимации, добавляем компонентам визуальные состояния и указываем, какое состояние должно быть на каком из экранов. Если нужно, добавляем дополнительные поведения.

 

Ревизия и коррекция по-прежнему в фоне.

 

p.s. Кстати, если вы что-то прототипируете в Expression Blend + SketchFlow, расскажите нам о своем опыте. Нам это очень интересно ;)