Данный текст является вольным переводом на русский язык статьи “Minimizing your designer footprint”.
С появлением более мощных веб-платформ, стало возможным создание больших возможностей и замысловатого дизайна. Но при создании таких приложений стоит принимать во внимание и мощность компьютера пользователя, который увидит ваш дизайн, а также скорость интернет соединения.
Эта проблема для веб-дизайна не нова. Всегда требуется создавать такой дизайн, который не потребует от пользователя скачивания большого количества информации для просмотра страницы – поэтому дизайнеры часто применяют gif-изображения или повторяющийся фон со спрайтами, которые хранят всю графику в одном месте.
Эти принципы также верны и для Silverlight-приложений, но с появлением многих элементов, которые раньше было трудно или совсем невозможно достичь, дизайнеры должны заботиться о таких вещах еще сильнее. Как и на всех сайтах, уменьшение времени загрузки страниц крайне важно для удержания внимания пользователя. Также нужно держать в голове и то, что ваше приложение не должно сильно нагружать компьютер, на котором оно будет выполняться.
Есть достаточное количество способов минимизировать “дизайнерский след” внутри Silverlight-приложения. Предлагаемый список, конечно же, не является полным, поэтому большая просьба – оставляйте свои комментарии с советами по тому, как сделать красивый и легкий дизайн.
Для реализации своих задумок дизайнеры располагают большим количеством отличных инструментов и способов для работы с ними визуально. Главное выбор, который приходится сделать – использовать ли объекты векторной графики, созданные с помощью XAML или же применить в своих работах растровые изображения, такие как JPG и PNG. В большинстве случаев, вы будете использовать оба типа – как векторную графику, так и растровую для достижения лучшего вида, но все же есть несколько советов для выбора оптимального варианта.
Векторные изображения применяются для форм и обектов, созданных с помощью путей из серий точек и вычислений. Лучшее свойство векторных форм – масштабироваться до любых размеров без потери качества. Это очень подходит для создания стилей и изображений, не требующих фотореалистичности. После создания формы, дизайнер может использовать инструмент “direct selection” для манипулирования и настройки отдельных точек для уточнения формы.
Минус векторов заключается в том, что они отрисовываются в момент запуска. Более сложные векторные изображения требуют использования большего количества путей и точек. Все это может сильно сказаться на количестве ресурсов процессора и памяти для запуска приложения на машине пользователя.
Является лучшим выбором для графики высокой сложности, к тому же, использование альфа-канала позволит Вам создавать потрясающие эффекты.
PNG предпочтительно использовать для графики, генерируемой компьютером, такой как иконки и изображения с прозрачными областями.
Стоит также не забывать, что, используя растровые изображения, Вы теряете возможность масштабировать изображение без потери качества. Растр означает то, что изображение привязано к пикселям – никаких вычислений для создания изображения в момент запуска не производится, что не позволяет перерисовывать изображение в другой размер. Эта проблема решается созданием нескольких изображений разного разрешения, но это приводит к увеличению размера графических файлов.
Если качество изображения установлено на 100%, то тогда PNG-файлы отлично подходят для использования в качестве изображений и линий с текстом, создаваемых компьютером (это не значит, что не стоит использовать линии и текст, создаваемые с помощью Silverlight). Также, PNG является хорошим выбором и тогда, когда нужно добавить тени прямо в изображение, используя альфа-канал и не использовать графические эффекты, о которых я расскажу немного позже.
Формат JPG обычно применяется при использовании фотографий или рендеров с фотореалистичностью. Способность создавать насыщенные изображения, такие как фотографии, с минимальным размером – довольно весомый аргумент. Однако, JPG довольно тяжело использовать для текста и линий, к тому же отсутствие альфа-канала может может привести к дополнительным трудностям с качеством изображений и добавлением их в проект.
Не доступен в Silverlight “из коробки”.
Silverlight 3 позволяет использовать графические эффекты, которые позволяют использовать объекты в момент запуска для создания теней, размытости и многих других эффектов.
Они выглядят очень отлично, но нагрузка, которая выпадает на процессор и оперативную память может привести ваши великие замыслы к краху. Каждый раз, когда объект с графическим эффектом перерисовывается (перемещается или использует анимацию), эффект должен вычисляться заново.
Графические эффекты должны использоваться как можно меньше, а лучше – вообще избежать их использования, если это возможно. Если же эти эффекты очень важны для реализации вашей задумки, постарайтесь свести количество анимации к минимуму. Лучше всегда “вшивать” эффекты в PNG-изображения. Стоит отметить, что только тени и размытость доступны “из коробки”.
В больших приложениях повторное использование стилей помогает дизайнерам избежать раздувания XAML-кода, а также оставить размер файла и время его загрузки на низком уровне, к тому же значительно облегчить последующее обслуживание приложения. Ресурсные словари – отличный способ для удержания информации о стилях и кистях в одном месте, что позволяет Вам применять эти стили ко множеству контролов вашего приложения, оставляя при этом XAML чистым и легкочитаемым.
Это только несколько способов для Вас, как дизайнера, помогающих оградить ваши работы от негативных последствий, при их создании. Буду рад услышать ваши подсказки и советы по поводу того, как создавать проекты, работающие гладко и, в то же время, предлагающие широкие возможности.
Спасибо за прочтение.
Введение
С появлением более мощных веб-платформ, стало возможным создание больших возможностей и замысловатого дизайна. Но при создании таких приложений стоит принимать во внимание и мощность компьютера пользователя, который увидит ваш дизайн, а также скорость интернет соединения.
Эта проблема для веб-дизайна не нова. Всегда требуется создавать такой дизайн, который не потребует от пользователя скачивания большого количества информации для просмотра страницы – поэтому дизайнеры часто применяют gif-изображения или повторяющийся фон со спрайтами, которые хранят всю графику в одном месте.
Эти принципы также верны и для Silverlight-приложений, но с появлением многих элементов, которые раньше было трудно или совсем невозможно достичь, дизайнеры должны заботиться о таких вещах еще сильнее. Как и на всех сайтах, уменьшение времени загрузки страниц крайне важно для удержания внимания пользователя. Также нужно держать в голове и то, что ваше приложение не должно сильно нагружать компьютер, на котором оно будет выполняться.
Выбор правильного подхода
Есть достаточное количество способов минимизировать “дизайнерский след” внутри Silverlight-приложения. Предлагаемый список, конечно же, не является полным, поэтому большая просьба – оставляйте свои комментарии с советами по тому, как сделать красивый и легкий дизайн.
Xaml против Растра
Для реализации своих задумок дизайнеры располагают большим количеством отличных инструментов и способов для работы с ними визуально. Главное выбор, который приходится сделать – использовать ли объекты векторной графики, созданные с помощью XAML или же применить в своих работах растровые изображения, такие как JPG и PNG. В большинстве случаев, вы будете использовать оба типа – как векторную графику, так и растровую для достижения лучшего вида, но все же есть несколько советов для выбора оптимального варианта.
| Формат графики | За | Против | Стоит применять для… |
| Векторная | Масштабируется без потери качества | Увеличивает размер файла; отрисовывается при запуске (страдает время загрузки) | Графика, меняющаяся в размерах или доступная для просмотра при разных размерах |
| PNG | Можно использовать прозрачность (альфа-канал) | При масштабировании ухудшается качество изображения | Иконки; высоко-детализированные изображения с прозрачностью |
| JPG | Фото или фотореалистичные изображения | ||
| GIF | Не доступно | Не поддерживается в Silverlight | Не доступно |
Вектор (XAML)
Векторные изображения применяются для форм и обектов, созданных с помощью путей из серий точек и вычислений. Лучшее свойство векторных форм – масштабироваться до любых размеров без потери качества. Это очень подходит для создания стилей и изображений, не требующих фотореалистичности. После создания формы, дизайнер может использовать инструмент “direct selection” для манипулирования и настройки отдельных точек для уточнения формы.
Минус векторов заключается в том, что они отрисовываются в момент запуска. Более сложные векторные изображения требуют использования большего количества путей и точек. Все это может сильно сказаться на количестве ресурсов процессора и памяти для запуска приложения на машине пользователя.
PNG
Является лучшим выбором для графики высокой сложности, к тому же, использование альфа-канала позволит Вам создавать потрясающие эффекты.
PNG предпочтительно использовать для графики, генерируемой компьютером, такой как иконки и изображения с прозрачными областями.
Стоит также не забывать, что, используя растровые изображения, Вы теряете возможность масштабировать изображение без потери качества. Растр означает то, что изображение привязано к пикселям – никаких вычислений для создания изображения в момент запуска не производится, что не позволяет перерисовывать изображение в другой размер. Эта проблема решается созданием нескольких изображений разного разрешения, но это приводит к увеличению размера графических файлов.
Если качество изображения установлено на 100%, то тогда PNG-файлы отлично подходят для использования в качестве изображений и линий с текстом, создаваемых компьютером (это не значит, что не стоит использовать линии и текст, создаваемые с помощью Silverlight). Также, PNG является хорошим выбором и тогда, когда нужно добавить тени прямо в изображение, используя альфа-канал и не использовать графические эффекты, о которых я расскажу немного позже.
JPG
Формат JPG обычно применяется при использовании фотографий или рендеров с фотореалистичностью. Способность создавать насыщенные изображения, такие как фотографии, с минимальным размером – довольно весомый аргумент. Однако, JPG довольно тяжело использовать для текста и линий, к тому же отсутствие альфа-канала может может привести к дополнительным трудностям с качеством изображений и добавлением их в проект.
GIF
Не доступен в Silverlight “из коробки”.
Графические эффекты
Silverlight 3 позволяет использовать графические эффекты, которые позволяют использовать объекты в момент запуска для создания теней, размытости и многих других эффектов.
Они выглядят очень отлично, но нагрузка, которая выпадает на процессор и оперативную память может привести ваши великие замыслы к краху. Каждый раз, когда объект с графическим эффектом перерисовывается (перемещается или использует анимацию), эффект должен вычисляться заново.
Графические эффекты должны использоваться как можно меньше, а лучше – вообще избежать их использования, если это возможно. Если же эти эффекты очень важны для реализации вашей задумки, постарайтесь свести количество анимации к минимуму. Лучше всегда “вшивать” эффекты в PNG-изображения. Стоит отметить, что только тени и размытость доступны “из коробки”.
Повторное использование стилей
В больших приложениях повторное использование стилей помогает дизайнерам избежать раздувания XAML-кода, а также оставить размер файла и время его загрузки на низком уровне, к тому же значительно облегчить последующее обслуживание приложения. Ресурсные словари – отличный способ для удержания информации о стилях и кистях в одном месте, что позволяет Вам применять эти стили ко множеству контролов вашего приложения, оставляя при этом XAML чистым и легкочитаемым.
Заключение
Это только несколько способов для Вас, как дизайнера, помогающих оградить ваши работы от негативных последствий, при их создании. Буду рад услышать ваши подсказки и советы по поводу того, как создавать проекты, работающие гладко и, в то же время, предлагающие широкие возможности.
Спасибо за прочтение.
