Создание Эпических приложений (перевод)

Для начала, меня зовут Клинт Руткас (Clint Rutkas) и я один из капитанов конкурса Windows Phone 7. Также я член команды http://channel9.msdn.com и веду блог http://coding4fun.com. Я создал несколько клевых роботов и сейчас разрабатываю открытые приложения и инструменты для Windows Phone 7.
clip_image001
Мой самый главный совет командам: работайте над UX. Когда я создаю приложение, над чем я работаю в первую очередь?
  1. Что будет “сердцем” моего приложения?
  2. Как пользователь будет с ним взаимодействовать?
  3. Какие данные нужно хранить?
  4. Как может выглядеть интерфейс?
  5. Как я могу предоставить отклик пользователю?
Что будет “сердцем” моего приложения?
Это звучит излишним, но если вы создаете приложения для выполнения задачи, оно должно быть лучшим в выполнении этой единственной задачи. Добавление фич – хорошо, но если приложение не выполняет основную задачу, тем ли оно занимается? Простой пример это секундомер. Если ваше приложение не может должным образом отмерять время, другие функции, такие как количество кругов, не имеют значения, пока ваша главная функция не работает правильно.
Как пользователь будет с ним взаимодействовать?
Вас просят создать приложение для очень маленького устройства, с удивительно большим стилусом. Мышь очень точна и с легкостью наводится на мелкие цели. Маленькие емкостные экраны и ваш палец не могут сделать это с той же легкостью, им нужен другой UX. Поэтому элементам нужно пространство вокруг. Почему я об этом говорю?
Скорее всего, вы разрабатываете, используя эмулятор на экране монитора и мышь. И я так делаю. Я запускаю мой эмулятор WP7 размером с тетрадный лист, но я так же могу загрузить приложение на реальное устройство для тестирования. Если  у вас нет устройства, простым решением будет настроить эмулятор на 50-66% масштаб, в зависимости от размеров монитора. Я выяснил что на моем 15” ноутбуке с разрешением 1920х1200 хорошо подходит масштаб 66%. Вам даже не нужен компьютер для того чтоб разработать интерфейс. Вы можете создать макет интерфейса на листе, или с помощью ручки и бумаги создать что-то, что можно оценить и опробовать.
Какие данные я буду хранить?
Почему хранение данных это важно? Ну, способы хранения данных для WP7, веба или десктопа различны. Так же отличаются способы доступа к этим данным.
Так как я капитан WP7, давайте рассмотрим, как WP7 хранит данные. Вы можете сохранить файл в изолированном хранилище, в состоянии приложения(PhoneApplicationService State) или изолированном хранилище настроек. У каждого подхода есть свои за и против, и используются они по-разному. Когда приложение запускается, вам могут понадобиться данные, которые вы захоронили(tombstoning).
Если ваше приложение захоранивается и использует небольшое количество данных (меньше 4мб), вы можете быстро сохранить их в состояние. Но если данные тяжелые, такие как динамически загружаемые и обрабатываемые изображения, придется использовать изолированное хранилище. Вы можете использовать Настройки или файл и загружать/сохранять их.
Но помните, загрузка и сохранение данных требуют времени.
Как будет выглядеть интерфейс?
Со всеми это случалось: все зависло, вы как сумасшедший кликайте по кнопкам не уверенный, что они нажимаются. Это может происходить по ряду причин. Обычно, если вы выполняете задачу, которая отнимает время от потока интерфейса. То про что мы говорили, это может быть вызвано загрузкой или сохранением больших порций данных. Хорошо, что у .NET есть несколько способов исправить положение.
Простейший способ использовать ThreadPool или BackgroundWorker  что бы работать в фоне. Есть два способа использовать ThreadPool: или использую функцию, или делегат из ниже следующего кода с Coding4Fun. Пример с делегатом так же показывает, как вернуться назад к потоку интерфейса с помощью Dispatcher!
Функция:
private void ResizeAndShowImage()
{
// Fast and simple resize by using UIElement rendering
if (ViewPort == null)
return;
ShowImage(App.Image);
ViewPort.UpdateLayout();
App.ResizedImage = new WriteableBitmap(ViewPort, null);
// reduce mem footprint
ShowImage(App.ResizedImage);
// save image to storage on background thread
ThreadPool.QueueUserWorkItem(SaveImageData);
}
private static void SaveImageData(object data)
{
App.SaveImageData();
}
Делегат:
ThreadPool.QueueUserWorkItem(e =>
{
if (controlIsVisible)
{
_preprocessImage = _effect.ProcessAllExcept(filter, _resizedBaseEffectsImage, _imgWidth, _imgHeight);
}
UpdateEffect(controlIsVisible ? filter : PolaroidEffect.PolaroidEffectFilters.All);
// make controls visible on UI thread
Dispatcher.BeginInvoke(() => ToggleVisibility(controls));
});
Как я предоставлю отклик пользователю?
Этот абзац похож на тот, что выше. Задумайтесь о том, что произойдет, если пользователь нажмет на кнопку или как-то по-другому провзаимодействует с программой. Знают ли они, что что-то произошло? В WP7 есть эффект наклона, который вы можете видеть а домашнем экране телефона. Вы так же можете, если хотите, включить этот эффект. Ссылка тут http://bit.ly/g2Co0I.
С другой стороны, простая, но быстрая видимая реакция, говорящая, что произошло какое-то действие, тоже полезна. Возвращаясь к прототипу секундомера, если пользователь жмет “Старт” и отсчет начинается через 2 секунды, это может заставить его нажать на кнопку еще несколько раз!
Ухты, очень содержательно!
Я надеюсь, что я дал вам много пищи для размышления. Технологии это круто, и я сам гик, но помните, что ваше приложение будут использовать простые люди.
Есть множество ресурсов, которые могут помочь в разработке. Если вам нужны элементы управления, ищите на http://silverlight.codeplex.com или http://coding4fun.codeplex.com.
Не бойтесь спрашивать и пробовать что-то новое. На Coding4Fun есть множество законченных приложений, все они с открытыми исходными кодами и могут быть хорошим примером, как создавать прототипы.
Вот приложения из Coding4Fun расположенные в порядке возрастания сложности:
How Much is this Meeting Costing Us?:
http://meetingcost.codeplex.com/
Currency Converter:
http://currency.codeplex.com/
USB Missile Launcher:
http://wp7usbcannon.codeplex.com/
Реклама

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

%d такие блоггеры, как: