Ласкаво просимо до dev.net.ua Увійти | Приєднатися | Допомога

Helen

designer for developers

Новини

Полезные ссылки

Что такое DataStore?

В 4-ой версии Expression Blend появилось такое нововведение как DataStore. Постараюсь рассказать что это за зверь.

Задумывался DataStore как промежуточное хранилище данных, которое можно использовать при построении прототипов Silverlight и WPF приложений.

1

Где это использовать?

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

Как это использовать?

  1. Создадим прототип Silverlight приложения.
  2. Сделаем небольшую формочку логина.

    2
  3. Повесим на кнопку OK поведение SetDataStoreValueAction, которое можно найти в библиотеке Assets. Его функция будет заключаться в записывании данных в промежуточное хранилище с поля логин.

    3
  4. Настраиваем записываемое свойство у поведения:
    В Common Properties выбираем для него новое значение:

    4

    Создаем имя для свойства, которое будем хранить в хранилище:

    5 
  5. В тех же Common Properties нашего поведения задаем значение для только что созданного свойства, воспользовавшись пунктом Element Property Binding из Advanced options:

     6 

    Свяжем его с свойством Text элемента login:

    7 
    В появившемся окошке выбираем Text:

    8

  6. На закладке Data можем убедиться, что хранилище создано и данные туда записываются:

    9
  7. Создаем новый экран, на котором будем использовать наше значение логина:

    10
  8. Создаем на втором экране два текстовых блока, заключаем их в StackPanel. Одно поле можно назвать Welcome, а второе UserName:

    11
  9. Для свойства Text поля UserName привяжем соответствующее значение из DataStore:
    Из панели Data с помощью Drag&Drop перетащим поле UserLogin на поле UserName

    12

  10. Небольшое отступление: сделаем переход на второй экран по нажатию на кнопку на первом экране:

    13
  11. Запускаем и тестируем приложение:
    Вводим имя пользователя, нажимаем ОК – происходит переход на новый экран и мы видим в качестве приветствия свое имя!
    • 14

    • 15

Вот такое интересное применение новой возможности.

Новый формат образцов данных

В Expression Blend 4 появился новый формат для строковых образцов данных – Colors.  Если создать новое свойство и выбрать Type = String, то в поле Format для выбора доступна опция Colors.

1

Его можно использовать в разных целях, в том числе и для заполнения фона объектов. 

Приведу небольшой пример. Допустим у нас есть коллекция элементов, для которых задано два поля – Price и Color.  Перетащим поле Price из созданной коллекции на рабочую область документа в режиме списка (List Mode).

2

Теперь сделаем так, что фон каждого значения будет случайно заполняться каким-то цветом.
Зайдем в режим редактирования шаблона элемента ItemTemplate и выберем StackPanel.

3

В свойствах StackPanel выбираем установку цвета для Background. Раскрыв Advanced options редактора, сделаем привязку данных.

4

Выбираем Color из доступного списка.

5

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

6

Expression Encoder – первый взгляд

Вчера не могла удержаться, чтоб не поставить новую Expression Studio 4 Ultimate. Кроме заслуженного Blend-a также немного порадовал Expression Encoder 4. Команда этого продукта не анонсировала глобальных изменений к выходу новой версии, но, тем не менее, решили сделать ряд улучшений. Это можно заметить, начиная с стартового экрана и постепенно двигаясь к завершению проекта.

1

Welcome-screen

Стараясь максимально упростить процесс создания проекта, предлагается на выбор 3 опции:

  • Transcoding Project
  • Silverlight Project
  • Live Broadcasting Project

Если нужно просто перекодировать видео, без применения Silverlight-шаблона для проигрывания - выбираем первый пункт.
Бросаем в проект парочку видео.

Media Content

Под закладкой Media Content появился переключатель отображения Thumbnail View / Detail View:

2

Можно выбрать первое для наглядного отображения видео в проекте.

Language

Идем на закладку Encode. Там появилась опция раскрытия advanced properties, через которую можно, например, задать язык:


4

Security

Двигаемся дальше. Переходим на закладку Output. На ней появился отдельный новый пункт Security. Вспоминаем, что Silverlight совместим с технологией Digital Rights Management (DRM), которая позволяет защищать видеоресурсы от несанкционированного копирования. Более подробно ознакомиться с этим нам предлагают по ссылке, указанной на этой вкладке.

5

Encode process

Нажимаем заветную кнопку Encode и видим приятный визуальный индикатор, показывающий процесс кодирования. После него в папке проекта можно просмотреть видео.

3

Что ж, быстрое первое знакомство с 4-ой версией оставило положительные впечатления :)

Expression Studio 4 Ultimate

Уже доступна 60-дневная trial-версия Expression Studio 4 Ultimate! В состав пакета входит:

studio4-ultimate

  • Expression Web + SuperPreview
  • Expression Blend
  • SketchFlow
  • Expression Encoder Pro
  • Expression Design
  •  

    Владельцы Expression Studio 3 могут обновить пакет до версии Expression Studio 4 Ultimate совершенно бесплатно. Аналогично те, у кого был пакет Expression Web 3 обновляют до  Expression Studio 4 Web Professional (Expression Web + SuperPreview, Expression Encoder и Expression Design)

    Device panel

    В Expression Blend 4 для тестирования приложений под Windows Phone 7 в горизонтальном или вертикальном положении телефона  - доступна специальная панель, которая называется Device panel. Найти ее Вы можете через  меню Windows.

    1 

    Эта маленькая панель содержит всего две кнопки – переключение горизонтальной и вертикальной развертки. Тем нем менее это позволит Вам протестировать приложение без запуска эмулятора и сделать “резиновую” компоновку элементов.

    2 3

    Supported orientation

    И еще одна особенность на заметку. Давайте посмотрим, что нам доступно при выборе в панели Objects & Timeline элемента верхнего уровня PhoneApplicationPage:

    4

    На запрос “orientation” в панели Properties выбрасывает закладку Miscellaneous, где есть возможность установить для вашего приложение поддерживаемые развертки. Если необходима поддержка двух режимов – нужно выбрать PortraitOrLandscape:

    5

    То же самое для конкретной страницы можно сделать через запись в code-behind файле, прописав 
    SupportedOrientations = SupportedPageOrientation.PortraitOrLandscape;

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

    Sketch effects in Expression Design

    Есть несколько путей создания прототипов приложений с помощью SketchFlow. Одни рисуют на бумаге, затем сканируют/фотографируют, импортируют графику в Expression Design/Adobe Photoshop, обрабатывают ее, затем импортируют в Blend отдельные кусочки, создают анимацию и т.д. Способ красивый, креативный и с wow-эффектом, но долгий.  Другие сразу в Blend делают прототип функциональности, используя стандартные скетчевые элементы управление и образцы данных, встроенные в Blend. Во втором случае прототип получается сделать гораздо быстрее, но используемые объекты-изображения в нем выходят совсем не “скетчи”.

    Почему бы тогда не сделать как-то промежуточный вариант? У меня давно возникла идея вместо прорисовки на бумаге отдельных картинок – брать фотографии и иллюстрации и накладывать на них скетчевые эффекты в графическом редакторе. Такие эффекты можно заготовить один раз – и потом применять к набору тематических фотографий. Будь то авто, мебель или люди.

    Для примера приведу ряд изображений, который я преобразовала в Expression Design для демо-прототипа на ReMIX10.  

    Было:

    2 

    Стало:

    1


    В результате картинки в приложении-прототипе выглядят уже в стиле “скетчи”:

    3

    Понравившиеся эффекты можно скопировать на новое изображение с помощью инструмента Attribute Dropper dropper  :
    – захватив свойства на одном объекте и перетащив их на другой.

    Больше всего меня привлекли комбинации эффектов – Poster Edges + Note Paper  и  CrossHatch + Note Paper. Надеюсь вам они тоже пригодятся. 
    Прилагаю эффекты в файле Expression Design.

    Shapes в Expression Blend

    Продолжаем тему интересных нововведений в Expression Blend 4 RC. Давайте посмотрим, что изменилось на закладке Assets? А видим мы новый блок под названием Shapes. Сюда поместили самые распространенные формы, которые могут Вам понадобиться при проектировании интерфейсов. Тут и стрелочки, и коннекторы, и различные многоугольники. А особенно меня порадовали облака-сообщения (Callout).

    1

    Выглядит все это после добавления на рабочую поверхность так:
    2

    Microsoft.Expression.Drawing.dll

    Все новые объекты, кроме стандартных прямоугольника и эллипса, используют Microsoft.Expression.Drawing.dll.

    И, например, звездочка в xaml представлена так:
    <ed:RegularPolygon Fill="#FFF4F4F5" Height="59" InnerRadius="0.47211" PointCount="5" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" Width="79" … />

    Редактирование свойств

    Для каждого объекта через закладку Appearance панели Properties есть возможность подредактировать доступные свойства. Так, нашу пятиконечную звезду мы можем превратить в восьмиконечную и поменять внутренний радиус.

    3

    А у коннектора –поменять тип и наличие стрелочек на концах.
    5 

    Эффекты

    Отдельным пунктом хочется выделить возможность добавления эффекта  - GeometryEffect. Выбор небольшой – отсутствие эффекта и Sketch. При выборе последнего, элементы приобретают стиль карандашного наброска, что позволяет использовать полученные элементы в приложениях-прототипах.

    4

    Анимация

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

    6

    6a

    BizSparkCamp: HOLs

    Відвідайте лабораторні роботи програми BizsparkCamp, під час яких ви зможете  не лише дізнатися як проектувати  та вбудовувати функціонал Windows 7 у ваші власні розробки, але й матимете можливість зробити це самостійно. Додайте вашим власним розробкам нових можливостей: сенсорний мультитач дисплей, стрічка,  розширення панелі задач, використання зовнішніх пристроїв (датчики освітленості, робота з gps, wifi та акселерометрами), та інші функції.

    Лабораторні роботи проводяться із використанням нових DELL SX2210

    SONY DSC

    Час

    Тема

    9:00 – 9:20

    Побудова програм із сенсорним інтерфейсом

    9:20 – 10:50

    Лабораторна робота на тему «Сенсорні інтерфейси».

    10:50 – 11:10

    Перерва

    11:10 – 11:30

    Використання стрічки (Scenic Ribbon) у власних програмах

    11:30 – 13:00

    Лабораторна робота на тему  «Використання стрічки»

    13:00 – 14:00

    Обід

    14:00 – 14:20

    Інтеграція з панеллю задач Windows 7

    14:20 – 15:50

    Лабораторна робота на тему « Інтеграція».

    15:50 – 16:10

    Перерва

    16:10 – 16:30

    Використання зовнішніх пристроїв

    16:30 – 18:00

    Лабораторна робота на тему «Робота із зовнішніми пристроями».

    Зареєструватися можна за адресою

    https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032453800&culture=uk-ua

    ReMIX10

    remix_real 

    Недавно в Москве проходила третья ежегодная веб-конференция  - ReMIX 2010.  В этом году также практиковалась подготовка онлайн-докладов, которые разместили на http://www.techdays.ru/ReMIX10.  Мне и Сергею Лутаю удалось подготовить несколько докладов, связанные с разработкой Silverlight-приложений:

    Прототипирование Silverlight-приложений с помощью Expression SketchFlow: часть 2.
    Этот доклад является продолжением для пользователей, знакомых с SketchFlow. В нем я решила рассказать о полезных особенностях  прототипирования. Тут есть личный опыт и наработки, а также обзор новых возможностей, которые уже присутствуют в текущей версии Expression Blend 4 RC.

    Введение в Windows Phone 7
    Сергей сделал обзор возможностей платформы Windows Phone 7 и рассказал о создании Silverlight и XNA приложений для Windows Phone 7.

    Архитектура платформы Windows Phone 7
    Обзор основных компонентов Windows Phone 7. Описание модели приложений, возможностей устройства, местоположение, сенсоры и другие возможности системы

    Производительность Silverlight приложений на платформе Windows Phone 7
    Oсновные отличия работы Silverlight приложений на платформе Windows Phone 7 и рабочем столе. Отличия использовании GPU.

    Создание Silverlight приложений для Windows Phone 7 в Visual Studio 2010 и Expression Blend 4
    Не смотря на то, что мы живем в разных городах, мы сделали парный доклад. Сергей представил разработку Silverlight приложений для платфомы Windows Phone 7 используя Visual Studio 2010, а я рассказала об использовании Expression Blend для разработки дизайна Silverlight-приложений, работающих под Windows Phone 7.

    Смотрите полный обзор докладов. Сергей Пугачев, Сергей Звездин, Константин Кичинский, а также много других замечательных людей сделали свои доклады. В этом году гвоздем программы явно выступает Windows Phone 7 :)

    Удачного просмотра!

    Sketch Mockups

    Иногда стоит заглянуть на закладку Samples. Где-где, а тут всегда полно замечательных примеров, на которых стоит поучиться. Вот и в Blend 4 RC добавили несколько интересных проектов, один из которых посвящен Sketch-заготовкам для ваших прототипов. Называется данный проект MockupDemonstration. И если вы еще не успели на него посмотреть – то искренне советую.

    1

    Проект использует библиотеку заготовок элементов управления. Тут есть:

    • Windows Explorer
    • Windows Desktop
    • Windows Application
    • Web browser
    • Media Player
    • Блок логина
    • Выпадающее меню
    • Диалоговые окна с одной, двумя и тремя кнопками
    • Различные иконки
    • Курсоры
    • и многое другое

    3

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

    Для Silverlight:

    Из папки с примером
    Documents > Expression > Blend 4 > Samples > MockupDemonstration > MockupDemonstration > Libraries > Silverlight > Debug
    скопировать библиотеку Microsoft.Expression.Prototyping.MockupsSL.dll и прилагающуюся папку Design

    в папку 
    Program Files(x86) > Microsoft Expression > Blend 4 > Libraries > Silverlight > 4.0 >

    И для WPF:

    Из папки 
    Documents > Expression > Blend 4 > Samples > MockupDemonstration > MockupDemonstration > Libraries > .NETFramework > Debug
    скопировать библиотеку Microsoft.Expression.Prototyping.MockupsSL.dll и прилагающуюся папку Design

    в папку 
    Program Files(x86) > Microsoft Expression > Blend 4 > Libraries > .NETFramework > 4.0 >

    После перезагрузки Blend для новых проектов SketchFlow у вас в разделе Assets > SketchFlow появится раздел Mockups. Его элементы имеют зеленые скетчевые иконки.

    4

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

    2

     

    Каждая заготовка состоит из различных контент-блоков, и  содержимое достаточно гибко модифицируется.  На примере диалоговых окон мы видим, что существует блок настройки окна, где можно выбрать иконку для сообщения, скрыть или показать отдельных кнопки. А если развернуть Advanced properties, то можно найти дополнительные элементы и отобразить их.

    6

    Сразу хочу сказать что кнопки окна работающие – на них можно “навесить” поведения для обработки введенной информации, активизации состояний экрана и др.

    5

    В итоге имеем отличный  набор заготовок, расширяющий наши возможности прототипирования.

    Новости от Microsoft Expression Blend [обновлено]

    Опубликовали обновление Microsoft Expression Blend® Add-in Preview for Windows® Phone и Microsoft Expression Blend® Software Development Kit (SDK) Preview 2 for Windows Phone для работы с Microsoft Expression Blend 4 RC, который тоже немного изменили (проведен ряд улучшений в плане стабильности приложения).

    Для работы с вышеперечисленными обновлениями необходимо сделать следующее:

    Если у вас стоит Blend 4 Beta:

    • Деинсталлировать Blend 4 Beta Phone Tools
    • Деинсталлировать Blend 4 Beta
    • Деинсталлировать Windows Developer Tools CTP (MIX10 версия)

    Если у вас Blend 4 RC (версия 4.0.20408.0):

    • Деинсталлировать Blend 4 RC
    • Деинсталлировать Windows Developer Tools CTP (MIX10 версия)

    После этого необходимо установить:

    Еще раз повторю: обратите внимание на то, что текущая версия Expression Blend RC (4.0.20421.0 от 30 апреля) отличается от той, что шла вместе с Silverlight 4 RTM (4.0.20408.0 от 15 апреля)

    Welcome to the dark side, Visual Studio 2010!

    Если Вы любите работать на “темной стороне”  - то Вам сюда :) Сегодня появилась интересная тема для среды Visual Studio 2010 – а именно в темном стиле линейки Expression Studio.

    vs2010

    Для желающих воспользоваться ей необходимо всего лишь установить Visual Studio Color Theme Editor и через него импортировать новую тему Expression. По желанию - есть исходный вариант автора, но есть и немного модифицированный мною (изменены цвета для CommandBar и некоторые границы блоков). Пока что остаются с белым фоном часть панелей, но в общем смотрится очень неплохо.

    Также через Visual Studio Color Theme Editor доступны: стандартная тема, Windows Aero, Windows Classic, Windows XP Blue, Windows XP Olive, Windows XP Silver, Autumn, Emerald и Silver. Кроме того, Вы можете всегда подредактировать цвета существующих тем или создать свою с нуля.  

    Кириллица и sketch-шрифт

    Не знаю, заметили вы или нет, но в Expression Blend 4 RC появилось одно исправление, сделанное специально для нас с вами :) А именно, для SketchFlow приложений появилась поддержка кириллицы для ввода текста шрифтом Buxton Sketch!

    Смотрите сами: в Expression Blend 3 при попытке в Sketch-элементах ввести русские буквы  - шрифт менялся до неузнаваемости (см. Заголовок).  В реальности была возможность либо делать англоязычные прототипы, либо менять Buxton Sketch на что-то другое.

    blend3

     

    А в Expression Blend 4 RC элементы выглядят так:

    blend4

    Ура!! Как минимум шрифтом Buxton Sketch мы можем пользоваться при создании прототипов. Надеемся, что в следующей версии будет сделано исправление и для второго шрифта – SketchFlow Print.

     

    P.S. Ну и кто теперь скажет, что команда Expression Team не прислушивается к нашим пользователям? :)

    Особенности национальной… разработки дизайна Silverlight/WPF приложений в Adobe Photoshop

    В перерывах конференции «Visual Studio 2010: создание приложений будущего» обсуждались различные темы из жизни разработчиков. Один из коллег поднял вопрос о проблеме разработки дизайна Silverlight/WPF приложений.  Первый ответ в виде шутки напрашивался сам собой: “Кесарю – кесарево, а Design для дизайна”. Но следующий вопрос заключался в том, почему некоторые дизайнеры рисуют Silverlight/WPF дизайн в Expression Design, а некоторые продолжают это делать в Adobe Photoshop/Illustrator и что с этим делать ?!

    d_and_p

    На первый взгляд может показаться, что проблемы-то и нет, ведь в Expression Design/Blend есть замечательный инструмент импорта файлов Adobe Photoshop/Illustrator и каждый рисует в том, в чем ему удобно, а в Blend-е импортирует полученное. Я не очень люблю делать обзоры типа “A” vs “B”, тем более продуктов из разной весовой и ценовой категории. И считаю, что каждый человек сам волен выбирать продукты для разработки  - на основе здравого смысла (!), поставленной задачи, анализа преимуществ/недостатков, привычек/заморочек, цены и т.д.

    Так вот, давайте поставим определенную цель: разработка дизайна для Silverlight/WPF приложений (!). И исходя из этого, мы уже можем провести некоторый анализ и сравнение инструментов для данной задачи. Ведь всегда есть свои особенности:

    1. Слаженность и скорость работы родственных продуктов
    2. Мощность набора инструментов продукта
    3. Качество XAML-кода
    4. Векторизация и перенос свойств элементов интерфейса
    5. Поддержка эффектов
    6. Обновление изменений в деталях элементов интерфейса
    7. Использование ресурсов

    Что ж, давайте попробуем разобрать по полочкам все пункты про дизайн Silverlight/WPF приложений. Для примера создадим в обоих редакторах (были взяты Adobe Photoshop СS3 Trial и Expression Design 3 Trial) файл, с размером холста 800 на 600 пикселей и разрешение 96 пикселей на дюйм. Возьмем и добавим не сильно сложные по дизайну кнопки: скругленный фон с небольшой тенью, и белый текст на нем. Я постаралась чтоб они выглядели приблизительно идентично в обоих редакторах (хотя с тенью пришлось помучаться из-за разных типов параметров).

    0p 0d

    И приведу снимок панели Layers в обоих редакторах:

    2p 2d

    1. Слаженность и скорость работы родственных продуктов.

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

    Поэтому связка Expression Design + Expression Blend  эффективнее чем Adobe Photoshop + Expression Blend. Почему?

    Буфер обмена и прямое копирование.

    Допустим я еще не хочу экспортировать целый файл с дизайном. Я спокойно могу выделить элемент в Expression Design и скопировать его через буфер обмена в Expression Blend.

    • И это будет векторный элемент.  Если я попытаюсь сделать это из Adobe Photoshop, в лучшем случае у меня вставится изображение в формате png, а в худшем – ничего.
    • Если объекту было дано имя, то при копировании из Expression Design – в Blend будет вставлен именованный объект. При копировании с Photoshop – объект без имени.
    • В Expression Design я всегда могу настроить копирование через буфер обмена и выбрать необходимые параметры для Silverlight/WPF:

      1
    • Из Expression Design можно копировать через буфер обмена сгруппированный набор объектов. Из Photoshop я это делать не могу.

    Занимаемые ресурсы. 

    Системные требования к редакторам вы можете посмотреть сами на сайтах производителей. А вот занимаемые ресурсы (примечание автора: специальная оптимизация продуктов не проводилась), а именно вкладка Memory в Task Manager-e после получаса синхронной работы по созданию идентичных кнопок выглядит так: Photoshop – 134 Mb, Design – 102 Mb. Соответственно файл с одной кнопкой в Photoshop-e весит 199 кб, в Design – 24 кб. Что будет далее – можете поэкспериментировать.

    Работа через импорт-экспорт.

    Теперь попробуем пойти другим путем – правильно импортируем Photoshop-файл в Blend, выбрав только группу с элементами кнопки, а из Expression Design – экспортируем в XAML тоже только кнопку, добавляем файл в проект, а потом копируем из него необходимую группу (хотя результат тот же что и через буфер обмена).

    Настройки экспорта из Expression Design:
     button_design

    Настройки импорта Photoshop-файла в Blend 4 RC для проекта WPF-приложения:
    button_photoshop

    Что получаем в Blend 4 RC:
    3d 

    после Adobe Photoshop: Canvas –> Canvas –> (Image (+Effect) +Textblock ) 
    и Expression Design: Viewbox –> Canvas –> (Path (+Effect) + Textblock )

    В общем уже на этом этапе виден результат.

    Плюсы после Photoshop-a:

    • Текст как текстовый блок, правильного размера, шрифта, без трансформаций
    • Эффект тени в виде DropShadowEffect
    • Именованность объектов соблюдена для папки и для объектов (там где была задана)

    Минусы:

    • Лишняя компоновка верхнего уровня - Canvas с размерами холста 800 на 600
    • После Photoshop-а фон кнопки стал в виде PNG-картинки в отдельной папке
    • Для текстового блока указаны лишние параметры, которые можно было бы опустить:
      IsHyphenationEnabled="True" LineStackingStrategy="BlockLineHeight" LineHeight="14" TextAlignment="Left".

    Плюсы после Design-a:

    • Компоновка верхнего уровня – Viewbox c размерами 85 на 45 (в общем-то вполне ожидаемый результат и более удобный)
    • Эффект тени в виде DropShadowEffect
    • Именованность объектов соблюдена для папки и для объектов (там где была задана)

    Минусы:

    • Текст как текстовый блок, но применено преобразование с помощью MatrixTransform (зачем - для меня это до сих пор загадка) и размер не тот.

     

    2. Мощность набора инструментов продукта

    Оба редактора имеют обширный набор инструментов для прорисовки элементов интерфейса. Начиная от простых линий и обычных форм и заканчивая масками и контурами отсечения (Clipping Path).

    Общие рекомендации могут быть одними:

    • чем проще элементы вы используете – тем легче вам потом будет
    • избегайте режимов наложения в обоих редакторах (Blend Mode) – они не поддерживаются в XAML
    • именуйте объекты
    • объединяйте объекты в группы по смыслу

    3. Качество XAML-кода

    в п. 1 мы визуально рассмотрели что получается после Photoshop-a и Design-a. Дело даже не в кол-ве кода, а в типе выходных элементов и в простоте их оптимизации и дополнительной настройке. А это необходимо делать в любом случае.

    Давайте сделаем промежуточные заключения.

    Выводы после Photoshop-a:

    • необходимо преобразовать Canvas в что-то более подходящее по типу компоновки и изменить его размеры
    • почистить “лишние” параметры текстового блока
    • Для масштабируемости кнопки необходимо что-то сделать с картинкой. Этот пункт самый проблемный.

    Выводы после Design-a:

    • очищать трансформацию текста (делается в один клик на peg-e) и выставлять правильный размер шрифта для текста
    • Для растяжения кнопки только в горизонтальном направлении (в зависимости от контента) тоже придеться преобразовывать векторный контур в что-то более подходящее (Border, например). Так как прямоугольник с скругленными углами не преобразовывается автоматом в Border с скругленными углами.

    4. Векторизация и перенос свойств элементов интерфейса

    В плане векторизации (а это основная идея интерфейсов для Silverlight/WPF приложений) Expression Design выигрывает однозначно:

    • нарисованные контуры получаются векторными и масштабируемыми
    • Можно спокойно использовать Stroke в качестве мощного декоративного оформления. И это будет перенесено в XAML. В Photoshop это достаточно проблемно.

    Применять в Expression Design можно, но осторожно и осознанно:

    • SuperScript и SubScript – на XAML-выходе к тексту просто будет применено преобразование с помощью MatrixTransform
    • Контуры отсечения (Clipping Path). Будет использован Canvas с выставленным свойством Clip, но увеличится кол-во вложенных элементов компоновки

    А вот чего не стоит делать в Photoshop-e:

    • Не используйте Smart objects, они не будут векторизированы
    • Не накладывайте Layer Mask в Photoshop-е. Они не будут импортированы как вектор (а только как PNG-картинки). В Blend-e можно потом сделать действительно векторную маску прозрачности
    • Не делайте Clipping Mask на объекты. Это проигнорируется при импорте. Лучше потом воспользоваться в Blend-e контурами отсечения (Clipping Path)
    • Не используйте для текста SuperScript и SubScript – это не будет применено
    • Градиенты? Их ВЕКТОРНЫЙ экспорт-импорт для меня до сих пор остается загадкой. Если кто нашел способ – поделитесь для полноты картины.

    Не стоит использовать для текста (если только он потом не будет растеризирован) ни в Photoshop, ни в Design:

    • Leading
    • Tracking
    • Horizontal scale
    • Baseline offset
    • Alignment

    Использование форм.

    Отдельным пунктом для Photoshop-a хочу выделить использование форм. А именно – почему же все эти стандартные прямоугольники, эллипсы импортируются в Blend в виде картинок, а не векторных контуров? Ответ кроется в панели под названием options bar. Например, когда мы выбираем Rounded Rectangle tool для рисования (или любую другую форму) - то в этой панели появляется набор свойств для данного элемента

    param

    И мы видим что есть три режима для создания формы:

    • Shape Layers
    • Paths
    • Fill Pixels

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

    4p

    Но давайте теперь посмотрим на панель Layers:

    5p

    Если выбран последний пункт Fill Pixels – то у вас будет нарисован растровый элемент, и в Blend-e в итоге вы получите PNG-картинку. Если же выбран первый пункт Shape Layers – то форма создается в виде векторной маски (думаю это не проблема – эффект тени как мы видим тоже к ней применяется).

    И теперь откроем окошко импорта в Blend-e:
    5b

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

    6b

    5. Поддержка эффектов

    Я думаю многие дизайнеры любят применять к слоям эффекты в виде стилей. Это очень быстро, удобно и всегда можно отменить или подправить результат. Но есть пару замечаний как всегда:

    Photoshop. Если ваш дизайнер в Photoshop применил ряд эффектов в виде стилей для слоя, то при импорте часть из них будет проигнорировано, а именно ВСЕ кроме тени (да-да, и Stroke тоже):

    7b

    Выход есть всегда, но он понравится не всем. Нужно еще в Photoshop-e соединить в один два слоя: со стилем и пустой. Тогда хотя бы в виде картинки в Blend-e вы получите нужный результат.

    Design. Практически та же ситуация. Можно указать в окошке экспорта для Live effects – пункт Convert to XAML effects. И DropShadow будет перенесен.

    8b

    НО в рекомендациях по экспорту от Expression Design сказано, что ЛУЧШЕ выбирать опцию растеризации. А причины следующие:

    • WPF поддерживает эффекты Drop shadow, Gaussian blur, но часто использовать их не рекомендуется по причине снижения производительности.
    • В Silverlight также есть возможность использовать DropShadowEffect и BlurEffect, но злоупотреблять тоже не стоит.

    В общем вывод в отношении эффектов в обоих редакторах такой: лучше не злоупотреблять.

    6. Обновление изменений в деталях элементов интерфейса

    Если так случилось, что вы уже работаете над рабочей версией интерфейса вашего приложения в Blend-e и в то-же время продолжаете вносить изменения в макет дизайна, то периодически вам придеться заниматься обновлением частей XAML-кода и изображений. В итоге заново импортировать части элементов из Photoshop-a или заниматься Copy-Paste из Design-a.

    Плюс для макетов Photoshop:

    • импортер из Blend-a запоминает “видимость/невидимость” объектов. т.е. если вы в первый раз указали не импортировать какие-то объекты, то в следующий раз это состояние будет таким же.
      9b

    Плюс для макетов Design:

    • есть замечательный инструмент Slice, с помощью которого можно настроить тип экспортируемого элемента и выделить “входящие” в него элементы.  Приведу в качестве примера скриншот, на котором понятно что к чему:
      10b

    7. Использование ресурсов

    Ну и последний пункт, который больше идет в плюс Design-у, в связке Photoshop+Blend такой возможности нет. Это использование ресурсов для WPF-приложений.

    История из жизни: необходимо было доработать набор иконок для одного симпатичного WPF-приложения. В Expression Design я разместила каждую иконку в отдельной группе с отдельным именем.

    11_design

    При экспорте есть возможность выбрать для всего документа формат - XAML WPF Resource Dictionary и сгруппировать по объектам - Group by Objects

     icons

    В итоге у меня выходит красивый XAML-файл ресурсов с векторными иконками. При изменении деталей дизайна иконок я просто его заново экспортирую и перезаписываю в проекте без каких-либо дополнительных манипуляций в Blend-e. Имена групп остаются те же для ресурсов, а иконки автоматически обновляются там, где они используются.

    Выводы

    Что ж, мы прояснили кое-какие моменты дизайна приложений в разных редакторах, а также их плюсы и минусы. Что использовать – выбор за вами. Главное - сделать его правильно на основе анализа всех “ЗА” и “ПРОТИВ”. Надеюсь, что для убеждения дизайнеров вам теперь не пригодится инструмент для повышения эффективности решения проблем  :)

    Ну и последнее пожелание дизайнерам: делайте качественный дизайн и качественный XAML. Подумайте о ваших друзьях-разработчиках, ведь вам с ними работать над общими проектами.

    Буду рада услышать аргументы, замечания и комментарии.

    Приглашаем на BizsparkCamp Ukraine

    Print 12 апреля 2010 года состоится конференция для программы BizSparkCamp. Эта программа призвана помочь стартапам в использовании последних технологий компании Microsoft  при создании собственных решений. В течении конференции будет представлено данную программу и продемонстрировано технологии Microsoft, которые могут быть интересны для стартапов.

    Участники конференции смогут познакомиться с средствами создания насыщенных приложений для Windows с применением таких возможностей как multi-touch, ribbon, расширение панели задач,  использование внешних устройств (работа с gps, wifi и акселерометрами), и т.д.

    Кроме этого можно будет познакомиться с средствами быстрого прототипирования приложений в Expression Blend и механизмами взаимодействия дизайнера и разработчика, последней версией Visual Studio 2010, а также облачными технологиями от Microsoft – Windows Azure и SQL Azure.

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

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

     

    Программа конференции:

    Время

    Доклад

    9:30 – 10:00

    Регистрация

    10:00 -10:15

    Вступительное слово
    Обзор программы BizSparkCamp
    Александр Орехов. Директор по технологической политике, Майкрософт Украина

    10:15 – 11:30

    Разработка современных Windows-приложений.
    Презентация методов создания приложений с использованием Multi-touch, WPF 4.0, Silverlight 4 и новых возможностей Windows 7
    Александр Манжула, Центр Инноваций Майкрософт

    11:30 – 11:45

    Перерыв, кофе

    11:45 – 13:00

    Быстрое прототипирование приложений. Взаимодействие дизайнера и разработчика.
    Презентация возможностей Expression Blend SketchFlow, механизмов взаимодействия разработчика (Visual Studio) и дизайнера (Expression Studio) при построении насыщенных приложений.
    Алена Косинская, Центр Инноваций Майкрософт, MVP

    13:00 – 13:15

    Перерыв, кофе

    13:15 – 14:15

    Ускорение разработки с использованием Visual Studio 2010.
    Обзор Visual Studio 2010 и Team Foundation Server 2010
    Константин Косинский, Центр Инноваций Майкрософт, MVP

    14:15 – 14:30

    Перерыв, кофе

    14:30 – 15:30

    Облачные технологии от Microsoft.
    Презентация Windows Azure и SQL Azure.
    Константин Косинский, Центр Инноваций Майкрософт, MVP

    Всем желающим зарегистрироваться можно тут.