インターネット製品デザイン：写真の切り抜きのヒント：「Dianjiu」で半分の労力で写真を切る

ユーザーが目にする製品インターフェースは、デザイナーが多大な労力をかけて作成したレンダリングではなく、開発者の技術によって実現された一連の個別の切り抜きです。デザイナーと開発者の架け橋として、カッティング ピクチャーは重要な役割を果たします。適切なカッティング ピクチャーと正確な配置により、レンダリングのデザインを最大限に復元できます。精巧なカッティング ピクチャーにより、半分の労力で 2 倍の結果が得られます。

私たちはよく「ドットナイン」と呼ばれる画像カットを作ります。「ドットナイン」とは何ですか？「ドットナイン」は、Androidプラットフォーム上の画像処理の特別な形式です。ファイル拡張子が「.9.png」であるため、「ドットナイン」と呼ばれます。 「Point Nine」は、Androidプラットフォーム上で複数の解像度に適応するというニーズを満たすために開発された独自の技術でもあります。ピクセルの細かさ、グラデーションテクスチャ、丸みを帯びた角など、元のサイズを維持しながら、画像を水平方向と垂直方向に自由に引き伸ばすことができ、不要な画像リソースを削減しながら、複数の解像度で完璧な表示効果を実現します。画像を切り取るための強力なツールと言えます。

「Point Nine」の制作ツールは「draw9patch」です。ここでは制作手順について詳しく説明しません。最初のヒントは、面倒な手順を減らすためにこの制作ツールを放棄することです。各画像をツールにドラッグして描画しないでください。PS + 鉛筆を使用して描画するだけです。

確かに「Point Nine」にはたくさんの知識が詰まっていますが、Androidの画像切り抜きには「Point Nine」の方法を理解するだけでなく、他にもさまざまなコツが必要です。以下では、私が仕事で絵を切り抜く際に得た経験のいくつかを皆さんと共有したいと思います。

（I）発展の観点からグラフを切る

テクノロジーがどのように実装されているかを理解することは、仲間の開発者を理解することと同じです。知識が深まれば、仕事がスムーズになります。

たとえば、下のボタンの「ドット 9」図を作成したい場合、生徒によっては次のようにするかもしれません。

高さ一定で左右に伸びた「ドットナイン」画像です。コンテンツ表示領域はボタン範囲全体です。ボタンのレンダリングから、テキストは中央に垂直に表示されます。開発者がこの「ドット 9」の画像を取得すると、コードに center 属性を記述します。この属性は、テキストをボタンの垂直中央の位置に設定します。この時点で、何か問題点に気づきましたか？まずは実装の結果を見てみましょう。

ピクセルの目を持つデザイナーは、テキストが下向きに傾いていることにすぐに気付くでしょう。次に、開発者にテキストの位置を調整するように依頼します。「テキストを n ピクセル上に移動してください。中央に配置されていません」など。これは非常によくある会話です。開発者は、レンダリングに表示される効果を実現するために、テキストの位置を微調整するコードを追加します。問題は満足のいく形で解決されましたか? いいえ。実のところ、私たちは間違っていました。

開発者の実装方法を理解した後、逆の方法を使用して、この「ドット 9」画像をさらに改良できるかどうかを検証することができます。

上図のように、デザインレンダリングの赤い領域がテキストレイアウト領域で、理想的な位置です。1 と 2 の高さは同じですが、実装レンダリングでは 3 と 4 の高さは同じです。ここで問題が発生します。9 つの点を描画したときに、投影の高さも考慮したため、テキストが視覚的に下向きに偏って表示されてしまいました。

通常の塗装方法は次のとおりです。

1. 高さを伸ばさずに、空白領域の 1 ピクセルのポイントをクリックします。

これは、私たちと開発仲間の間で合意された習慣です。ボタンの高さは引き伸ばされないこと、また引き伸ばされたとしても空白領域が引き伸ばされるため、視覚的な影響は生じないことが暗黙の了解でわかっています。

比較は図に示されています:

2. コンテンツ表示領域の高さは、テキストが視覚的に中央に配置されるように、投影領域を避ける必要があります。

「ドットナイン」画像のコンテンツ表示領域、私はこれをコンテンツレイアウト領域と呼んでいます。写真を切り取る過程で、さまざまなシーンが見つかります。常に、望む結果を考えてください。この領域を慎重に処理することで、写真に載せるコンテンツをより適切にレイアウトできます。このようにして、開発者はいくつかの単純なプロパティを設定するだけで、レンダリングの正確なレイアウトを実現できます。同時に、不要な開発を減らし、コードを合理化し、製品のパフォーマンスを向上させ、少量を蓄積してユーザーに優れたエクスペリエンスをもたらします。

（II）画像を切り取るより良い方法を選択する

珍しい、またはより複雑な切断パターンに遭遇した場合、私たちはしばしば、本来の思考パターンを捨てて、より適切な切断方法を見つける必要があります。たとえば、下の図のフローティング レイヤーをカットする場合、強力なツール「Point Nine」を引き続き使用できますか?

まず、このフローティング レイヤーのいくつかの特性を分析してみましょう。まず、半透明のグラデーションには厚みと投影効果の両方があります。次に、三角形があり、その位置は固定されていません。絵を切るときに、少し回り道をして、自分の持ち前の思考力で浮遊層を2つに分け、下の四角を「ポイントナイン」にして、上の三角形を別々に切り、つなぎ合わせて実現しました。これは、変更される部分を取り出してカプセル化し、他の部分が影響を受けないようにする、開発者のアトミック分割設計パターンに沿ったものです。そこで開発者はすぐにそれを実装しましたが、結果は満足のいくものではありませんでした。実際には、投影効果により、上部と下部の間に重なりが生じ、接合部に明らかな線が現れるはずです。

では、どうすればいいのでしょうか? さらに考えた結果、デザイナーは最終的に、より適切な絵の切り取り方法を見つけました。

左右の部分は2つの「ポイントナイン」画像に分割されており、接続の効果を確保し、三角形の位置を柔軟に制御できます。どのように絵を描くかを考える際には、それが実現可能かどうかを技術系の同僚とコミュニケーションを取り、実装にかかるコストを測定することも必要です。最終的に、実現された効果が設計レンダリングとまったく同じであることに満足しています。

（III）リソースのサイズを可能な限り縮小する

画像をカットするときは、製品のインストール パッケージをスリム化するために、リソースのサイズをできるだけ小さくするようにしてください。

1. 「ドットナイン」画像を 1 ピクセル拡大しても 10 ピクセル拡大しても効果に違いはありません。そのため、画像のサイズを小さくしてみてください。

（上記の例では、画像を鮮明に保つために、画像を可能な限り最小サイズに縮小していません。実際の作業では、この点にさらに注意する必要があるかもしれません。）

2. テクスチャのある背景やボタンに遭遇したとき、カッティングの原理は、テクスチャのパターンを見つけて、最小のカットを使用してタイル状に並べることです。パターンの重ね合わせの原理を想像することができます。

最初のタイプのテクスチャ背景は、入力方法のマルチメディアやさまざまな文房具のインターフェースなどであり、可能な限り小さなカットを使用してタイル状に並べます。以下のように表示されます。

これは、私たちの入力方法における便箋の切り抜きです。最小の切り抜きを使用するという原則に従い、異なるテクスチャのルールに従って最小の切り抜きに調整されます。そのため、異なるテクスチャの切り抜きサイズが異なることがわかります。

2 番目のタイプのテクスチャ ボタンは通常、次のように処理されます。

私たちの目標は、ボタンを 3 つのセクションに分割し、左右の丸い角を維持し、再利用してタイル状に並べることができる中央のテクスチャを見つけ、同時に中央のテクスチャを左右の画像とシームレスに接続できるようにすることです。このようにして、ボタンの長さを制御できるようになり、さまざまなシナリオに適用できます。

まず、テクスチャのパターンを見つけます。ここでの斜めのテクスチャは、幅 3px の画像に切り取るだけで済みます。次に、テクスチャ画像を使用して左右の丸い角を試し、丸い角に接続されたテクスチャが成功します。他の種類のテクスチャカットに遭遇したときにも、このアイデアを再利用できます。

3. 画質を適切に圧縮します。モノクロやエフェクトがあまりない場合は、png8ビットまたはインデックスモードで保存できます。

ここでは例は挙げません。

まとめ

デザイナーは設計仕様を提供した後、満足のいく結果が得られないことを心配しますが、可能な限りいくつかのカット手法を使用して、デザインがゼロ差異のプレゼンテーションを実現できるようにすることができます。同時に、開発者にとっても不要な開発負担を大幅に軽減するのに役立ち、実行速度の向上など、製品自体にも多くの明らかな利点があります。デザイナーと私たちの大切な開発者が、より親密で暗黙のパートナーになりましょう。

上記は、仕事でAndroidの画像カットについての経験です。間違いや不足がある場合は、ご指摘ください。また、画像カットに関するさらなる経験やスキルを共有していただければ幸いです。

転載の際は出典を「Baidu MUX」と明記してください

原題: インターネット製品デザイン: 写真の切り取りのコツ: 半分の労力で 2 倍の効果が得られる「ポイント ナイン」の写真の切り取り

キーワード: インターネット、インターネット製品、切り抜き画像、小さな投稿、ユーザーの手、見栄えが良い、製品業界、デザイナー、勤勉、ウェブマスター、ウェブサイト、ウェブサイトのプロモーション、金儲け