このテキストは、「
デザイナーのフットプリントを最小限に抑える 」という記事のロシア語への無料翻訳です。
はじめに
より強力なWebプラットフォームの出現により、優れた機能と複雑なデザインを作成できるようになりました。 しかし、そのようなアプリケーションを作成するときは、デザインを見るユーザーのコンピューターのパワーと、インターネット接続の速度を考慮する価値があります。
Webデザインのこの問題は新しいものではありません。 ページを表示するためにユーザーが大量の情報をダウンロードする必要のないデザインを常に作成する必要があります。したがって、デザイナーは多くの場合、すべてのグラフィックを1か所に保存するスプライトでgifまたは繰り返し背景を使用します。
これらの原則は、Silverlightアプリケーションにも当てはまりますが、以前は達成が困難または不可能であった多くの要素の出現により、設計者はそのようなことをさらに処理する必要があります。 すべてのサイトと同様に、ユーザーの注意を維持するには、ページの読み込み時間を短縮することが重要です。 また、アプリケーションは、それが実行されるコンピューターに大きな負荷をかけてはならないことに留意する必要があります。
適切なアプローチの選択
Silverlightアプリケーション内の「設計フットプリント」を最小限に抑えるには十分な方法があります。 もちろん、提案されたリストは完全ではないので、大きなリクエストです。美しく軽量なデザインを作成する方法についてのヒントをコメントに残してください。
Haml vsラスター
アイデアを実現するために、デザイナーは多数の優れたツールと視覚的に作業する方法を持っています。 主な選択項目は、XAMLを使用して作成されたベクターグラフィックスオブジェクトを使用するか、作業でJPGやPNGなどのビットマップを使用するかです。 ほとんどの場合、両方のタイプ（ベクトルグラフィックスとビットマップの両方）を使用して見た目を良くしますが、最適なオプションを選択するためのヒントがいくつかあります。
| グラフィックス形式 | のために | に対して | に使用する必要があります... |
| ベクトル | 品質を損なうことなく拡張可能 | ファイルサイズを増やします。 起動時にレンダリングされます（読み込み時間がかかります） | サイズ変更または異なるサイズで表示可能なグラフィックス |
| PNG | 透明度を使用できます（アルファチャネル） | スケーリングは画質を低下させます | アイコン 透明度の高い非常に詳細な画像 |
| Jpg | | | 写真または写実的な画像 |
| GIF | 利用できません | Silverlightではサポートされていません | 利用できません |
ベクター（XAML）
ベクトル画像は、一連のポイントと計算からのパスを使用して作成された形状とオブジェクトに使用されます。 ベクターシェイプの最大の特徴は、品質を損なうことなく任意のサイズに拡大縮小することです。 これは、フォトリアリズムを必要としないスタイルと画像を作成するのに非常に適しています。 フォームを作成した後、デザイナーは「直接選択」ツールを使用して個々のポイントを操作および調整し、フォームを調整できます。
ベクトルのマイナスは、起動時に描画されることです。 より複雑なベクトル画像には、より多くのパスとポイントが必要です。 これはすべて、ユーザーのマシンでアプリケーションを実行するためのプロセッサリソースとメモリの量に大きく影響します。
PNG
複雑度の高いグラフィックスに最適です。さらに、アルファチャネルを使用すると、すばらしい効果を作成できます。
PNGは、アイコンや透明な領域のある画像など、コンピューターで生成されたグラフィックスに使用するのが望ましいです。
また、ラスターイメージを使用すると、品質を損なうことなくイメージをスケーリングする機能が失われることにも注意してください。 ラスターとは、画像がピクセルに添付されることを意味します-起動時に画像を作成するための計算は実行されず、画像を異なるサイズに再描画することはできません。 この問題は、異なる解像度の複数の画像を作成することで解決されますが、これにより画像ファイルのサイズが大きくなります。
画像品質が100％に設定されている場合、PNGファイルは、コンピューターで作成されたテキストを含む画像および行として使用するのに最適です（これは、Silverlightを使用して作成された行およびテキストを使用しないことを意味しません）。 また、PNGは、アルファチャネルを使用して画像に影を直接追加する必要があり、グラフィック効果を使用しない場合でも適切な選択です。これについては後で説明します。
Jpg
通常、JPG形式は、写真を使用する場合、またはフォトリアリズムを使用してレンダリングする場合に使用されます。 写真などの豊富な画像を最小サイズで作成する機能は、かなり重要な議論です。 ただし、JPGをテキストや行に使用するのは非常に難しく、アルファチャネルがないため、画像品質とプロジェクトへの追加にさらに困難が生じる可能性があります。
GIF
すぐに使用できるSilverlightでは使用できません。
グラフィック効果
Silverlight 3では、グラフィック効果を使用して、起動時にオブジェクトを使用して影、ぼかし、およびその他の多くの効果を作成できます。
とても良いように見えますが、プロセッサとRAMにかかる負荷は、クラッシュする大きな計画を導く可能性があります。 グラフィック効果のあるオブジェクトを再描画（移動またはアニメーションを使用）するたびに、効果を再計算する必要があります。
グラフィック効果はできる限り使用しないでください。可能であれば、一般的には使用を避けることをお勧めします。 これらの効果がアイデアの実現に非常に重要な場合は、アニメーションの量を最小限に抑えてください。 常に効果をPNG画像に「縫い付ける」ことをお勧めします。 「箱から出してすぐに」利用できるのはシャドウとブラーのみであることに注意してください。
スタイルを再利用
大規模なアプリケーションでは、スタイルを再利用することで、設計者はXAMLコードの肥大化を避け、ファイルサイズと読み込み時間を低く抑え、アプリケーションのその後のメンテナンスを大幅に促進できます。 リソースディクショナリは、スタイルとブラシに関する情報を1か所に保持する優れた方法です。これにより、XAMLをクリーンで読みやすい状態に保ちながら、これらのスタイルをアプリケーションの多くのコントロールに適用できます。
おわりに
これらは、デザイナーとしてのあなたが作品を作成する際の悪影響からあなたの作品を保護するのを助けるためのほんのいくつかの方法です。 スムーズに動作し、同時に素晴らしい機会を提供するプロジェクトを作成する方法について、あなたのヒントやアドバイスを聞いてうれしいです。
読んでくれてありがとう。