Дизайн приложений для Windows Phone без ножа

    Не секрет, что создание дизайна приложения под Windows Phone или Windows 8 занимает гораздо меньше времени, чем под iOS или Android. И дело тут не только в специфике дизайна. Главным фактором экономии времени является налаженный алгоритм взаимодействия дизайнера с разработчиком. Инструмент, который соединяет дизайн и код — Blend, входящий в пакете Visual Studio.

    image

    Как это работает?
    Как правило дизайнеры создают макеты либо в Adobe Photoshop, либо в Adobe Illustrator. При создании макетов в этих программах можно следовать нескольким правилам, которые позволят разработчику эффективно обработать макет в Blend.


    1. Все объекты должны быть нарисованы “путями” (path). Если импортируете объекты из иллюстратора в фотошоп, всегда вставляйте объекты через «Shape Layer».

    image

    Таким образом, макет PSD будет содержать три вида объектов:
    1. Текстовые блоки
    2. Объекты path
    3. Растровые объекты


    image

    2. Если к слою применены какие либо эффекты, их нужно обязательно растрировать (правой кнопкой на слой / Rasterize Layer Style).

    image image

    В противном случае при конвертации в Blend все примененные эффекты — пропадут.

    3. Старайтесь использовать родные шрифты Segoe. Либо, в качестве альтернативы, системные шрифты Windows. Использовать уникальные шрифты не возбраняется, но в таких случаях необходима более плотная работа с разработчиком, чтобы все отображалось корректно.

    4. Аккуратно группируйте файлы в папки, все названия слоев и папок лучше набирать латиницей. Это элементарное правило позволит легко понимать разработчика, когда он начнет объяснять вам, в каком месте вашего файла что-то не в порядке.

    5. Не используйте «tab» и многочисленные пробелы для отбивки при форматировании текстовых блоков. Вообще старайтесь избегать всяческих костылей.

    Это далеко не весь список правил, а лишь тот перечень, с которым столкнулись наши дизайнеры, работая над проектами для Windows Phonе и Windows 8.

    Теперь о магии


    Для чего все эти правила и зачем их соблюдать? В первую очередь это позволяет дизайнеру забыть о такой «болезненной» операции, как нарезка, разметка (redline). Остаются, конечно, и мелочи, такие как иконки для аппбара (в ближайшее время и это может измениться), иконки приложения, нарезка сплешей.

    Экран дизайнера:

    image

    image

    Экран разработчика:

    image

    В итоге получается идентичное отображение макетов.

    Для разработчика эти файлы так же большой подарок. Все стили, заливки, размеры шрифтов, отступы, все то, что так не любят разработчики, все это уже преобразовано Блендом в код, остается только перенести этот код в проект.

    image

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

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

    Информацией поделился дизайнер e-Legion — Владимир Морочковский (http://morochkovsky.ru/).
    e-Legion
    120.24
    Лидер мобильной разработки в России
    Share post

    Comments 21

      +2
      Вот бы для android такое же :))) Вообще конечно супер, всегда приятно избавиться от рутины.
        +2
        Надеюсь код на выходе не такой, как например в визуальном редакторе Dreamweaver'а
          +4
          Код конечно неюзабельный.
          Приходится импортировать и вытаскивать все значимые вещи.
            +1
            В итоге получается все как обычно, руками вынимать и фильтровать тот мусор что генерит визуальный редактор, в этом свете заявление:
            Не секрет, что создание дизайна приложения под Windows Phone или Windows 8 занимает гораздо меньше времени, чем под iOS или Android.

            может и верно, но скорее всего экономия где-то в другом месте.
              0
              Могу ошибаться, но вроде как android и iOS не умеют импортировать макеты psd в нативные контролы.
              «Вытаскивать значимые вещи» это не совсем фильтровать руками, это просто причесывание к нашему code style и более логичная компоновка. Те же самые path мы импортируем 1 к 1.
            +1
            Так а с таким сценарием наоборот следует избегать затрагивать код. От дизайнера требуется открыть общий солюшен, где девелоперы набросали рыбу разметки. Далее он должен с сохранением биндингов переделать разметку, темплейты и прочие дизайновые вещи.
            Потому и важно следовать паттерну MVVM, чтоб можно было легко делать дизайн минуя код.
              0
              Пробовал как то такой подход + делать дизайн в бленде с нуля.
              Код получается просто отвратительный, с кучей мусора. Нужно потратить не мало времени, что бы привести все в порядок. Не говоря уже о анимации.
              Хотя если не заморачиваться так сильно, то получается быстрее и проще, чем руками в студии.
                0
                Если речь идет о XAML (кодом в таких проектах принято называть C#), то работа в Blend с нуля дает чистую, логичную и очень экономную разметку. И это не идеал, как написано в статье, а норма.
                Необходимые условия: знание xaml, понимание разных типов панелей лейаутов, широкое применение принципов наследования и каскадирования.
                  0
                  Ну у меня достаточно опыта утверждать обратное.
                  «дает чистую, логичную и очень экономную разметку»
                  Для «Hello, world», да. Попробуйте написать что то отличное от него и рсс ридера. Я уж не говорю о том, что бы сделать свой кастумный контрол. Ну например листбокс с пушем. Или текст бокс с вотермарком и кликабельной иконкой. Не о какой чистоте и логичности там и речи нет.
                  Может в новом бленде что то и поменялось, но очень сильно сомневаюсь.
                    +4
                    — Никаких проблем. Я — дизайнер WPF и отвечаю за 33 стандартных контрола и всю графику, которую делаю в Blend, без иллюстратора и фотошопа.
                    Если нужем кастомный контрол, девелоперы напишут в VS, а я в Blend'e придам ему любой вид, какой понадобится.
                    Не помню, чтоб я когда-нибудь делал текст бокс с вотермарком, но глянул в сети и ничего сложного не нашел: stackoverflow.com/questions/5593649/help-text-in-wpf-textbox-that-disppears-after-first-input-watermark-the-xaml
                    Кликабельная иконка — вещь чрезвычайно простая, я помещаю иконки в прозрачные кнопки, чтобы навешивать анимацию на триггеры.
              +2
              Импорт векторных объектов в бленд не очень хорошая идея, так как это плохо сказывается на производительности приложения. Конечно пара векторных квадратов не повлияют особо, но что то более сложное значительно ухудшит производительность, поэтому дешевле (в плане ресурсов) использовать растр и перед переносом просто растрировать всю необходимую графику.

              И еще хочу отметить, что такой способ «отказа от нарезки» подойдет больше для прототипирования и небольших проектов. Все же с серьезными и большими приложениями удобнее иметь библиотеку ресурсов и нарезать ее отдельно.
                0
                В статье показан как раз большой проект, спортс.ру для Windows Phone.
                удобнее иметь библиотеку ресурсов

                Этот подход не отменяет ресурсы стили и другие удобные вещи, если я конечно правильно понял вас.
                Те же цвета выносятся в ресурсы двумя кликами.
                0
                К сожалению не все до конца так радужно. Да, во многом это очень сильно упрощает работу дизайнеру и программисту для понимания, но когда в приложении сложные механизмы UI (анимации, поведения, обновления и тп.) то вот просто взять и импортировать PSD файл и тут же его использовать не получится.

                И как уже сказали, path сильно влияет на производительность, поэтому даже в MSDN советуют использовать картинки, ко всему прочему советуют jpg, а к png использовать только при необходимости (например прозрачность).
                  +1
                  «И как уже сказали, path сильно влияет на производительность, поэтому даже в MSDN советуют использовать картинки»
                  На MSDN в статье по улучшению производительности советуют включать растровое кэширование. Ну и, конечно, иконки растровые вместо векторных. В этом плане можно с Expression Designer поработать.

                  «К сожалению не все до конца так радужно. Да, во многом это очень сильно упрощает работу дизайнеру и программисту для понимания, но когда в приложении сложные механизмы UI (анимации, поведения, обновления и тп.)»
                  Если несложно, то приведите конкретный пример. Я интуитивно и по опыту подозреваю (почти уверен), что Вы правы, но все же хочется разобраться на конкретном примере. Может есть обходной путь.
                    +1
                    Пример, это когда у дизайнера очень интересная и клевая идея контрола, который не является нативным для системы. (особенно часто это появляется, когда портируют приложение с iOS к примеру на Windows Phone и поведение на экранах должно быть одинаковым либо сильно приближенным)

                    Или давайте на том же примере, что показан выше, в том месте где «статистика» есть выбор по какому столбцу сортировать. И к примеру, необходимо, при выборе определенного столбца белую стрелку снизу указывающую на сортируемый столбец перемещать с использованием анимации (в 0,5 сек) при этом сами элементы внутри списка также с анимацией должны сортироваться.

                    Если хотите подскажу реальный пример в одном приложении. Обращайтесь в личку, чтобы не сочли за рекламу:)
                      0
                      Я примерно понял. Я бы попытался отнаследоваться от некоего контрола, вынуть наружу DependencyProperty с темплейтом кастомного маркера и анимации для нее, выдал бы дизайнеру инструкции по пользованию контролом и переопределению темплейтов и анимаций. Но вообще да — полет фантазии дизайнера трудно обуздать и сложно поддерживать.
                      +1
                      Вот еще пришло в голову. При импорте все слои импортируются как Canvas. но это далеко не всегда разумно, поэтому приходится в последствии вручную переделывать на Grid или StackPanel.
                      +1
                      И как уже сказали, path сильно влияет на производительность

                      Дольше грузится, причем только на wp7. А потом path кэшируется и на fps влияет не существенно.
                      Я всегда оставляю все в векторе, ибо это оптимизация не стоит того. Зато 1 сборка приложения на все устройства без возни с растром.
                        +1
                        Не возиться с растром — конечно подкупает в такие моменты. Особенно с поддержкой разных разрешений.
                      –1
                      Судя по заголовку подумал что здесь описание работы с блендом при создании приложения для винфон, а здесь огромная статья о том как перекинуть файлы из фотошопа в бленд. Хотя бы заголовок более корректный сделайте…
                        +1
                        А как обстоит дело при разработке продуктов для iOS? Если можно ссылку или поясните, а то толком ничего не нахожу на эту тему, а вы видимо в курсе, судя по «не секрет, что...».

                        Only users with full accounts can post comments. Log in, please.