翻訳者から

こんにちは。 この翻訳を行っているのは、最近AndroidでShapeを扱うようになったため、 material.ioを探し回ることに決め、そこで使用法のヒントのコレクションを見つけたからです。 それは興味深く、有用で、有益なように思えたので、モバイルアプリケーション開発者のロシアのセグメントと共有することにしました。

インターフェイス要素に異なるフォームを使用すると、アプリケーションがより面白くなり、さらに深刻になるため、このトピックは非常に重要であると思われます。

ユーザーが通常のインターフェイス要素の非標準の実装（もちろん当然のことながら）を見ると、これが目を引きます。 さらに、無意識のうちに、そのようなアプリケーションのユーザーは、開発者がエディターにコンポーネントを投げるだけでなく、創造性を持ってアプローチし、独自の何かを思いついたことを理解します。

あなたが読んだものから利益を得て、おそらくあなたのアプリケーションの品質を改善できることを願っています。

目次

はじめに

• 要素の形状
• 要素間の関係
• フォームを変更する必要性

フォームの階層

• 階層開発
• 要素の関係

表現手段としての形

• 状態表示
• ブランド認知

動きのある形状

• 申込み
• フォームの動的な変更
• コンテンツ表示

はじめに

マテリアルデザインスタイルのGUI要素には、さまざまな形式があります。 カスタム形式の要素はユーザーの注意を引き、製品の表現力を高め、使用感を向上させます。

---

要素の形状

既定では、材料設計では、すべての要素は角が丸い長方形（4dp）です。 それらの形状は、次のパラメーターを調整することで変更できます。

• 角の丸みの度合い
• 角度

したがって、要素の形状をわずかに変更するか、完全に異なるものにすることができます。



材料設計要素の標準形式のカスタマイズ。

---

申込み

強調

フォームの独自の特性により、フォームが画面上で目立つようになるため、さまざまな部分にユーザーの注意を集中させることができます。



丸いボタンと丸い底部パネルのこの組み合わせは、画面上のどこにでもある通常の長方形要素の背景に対して際立っています。

アイテムの識別

フォームを使用すると、ユーザーは意味によってインターフェイス要素を識別し、目的を推測できます。



これらのインサートの目的は、形状によって推測できます。

状態表示

フォームを使用して、要素の状態変化を表示できます。 フォームを使用して状態の変更を表示する場合、状態の変更を表示するたびに同じフォームを使用します。



要素の形状が部分的に変化して、選択範囲が表示されます。

ブランディング

ブランドに視覚的なスタイルを認識させるには、フォームを他のカスタマイズ方法（色など）と組み合わせて使用​​します。 アプリケーション全体でフォームに小さなコンテキスト変更を加えると、使用感が向上します。



アプリケーションで要素の形式を適切に使用すると、その使用の印象が改善されます。

---

フォームの表示

変更されたフォームは、その輪郭が背景と対比される場合に特にはっきりと見えます。 デフォルトでは、マテリアルデザインはシャドウイングを使用して、形状の輪郭を強調します。 形状を強調する他の方法（色や透明度など）は、影と組み合わせて使用​​できます。

方法 ボタンの塗りつぶしの色は背景と対比され、ボタンの形状が目立つようになります。	やってはいけない方法 ボタンの半透明の背景とその色は、形状の可視性を損ないます。

---

要素間の関係

フォームを使用して、インターフェイスコンポーネント間の依存関係を反映できます。 テキストまたはアイコンは、要素の形状がどちらの考え方を明確に示している場合にのみ、意味的な負荷を増やすのに役立ちます。


方法
ドロップダウンメニューには、ナビゲーションを指す矢印のような尖った角度があります
2つのコンポーネント間の接続を示すパネル。


やってはいけない方法
あいまいな表現が作成されると思われる場合は、フォームの使用を拒否してください。 キャンセルボタンは前のステージに戻ることを意味しますが、その形状は「進む」矢印と同様に、ボタンがユーザーを次のステージに連れて行くという誤った印象を与えます。

---

フォームを変更する必要性

コンポーネントの形状は、ユーザーエクスペリエンスに影響します。 形状変更の必要性の程度は、次の要因に依存します。

• コンポーネントが他のコンポーネントにどれだけ依存しているか
• コンポーネントは人間工学的要件に限定されていますか

やってはいけない方法
コンポーネントを完全に認識できないフォームを使用しないでください。


やってはいけない方法
ユーザーの操作を妨げるフォームを使用しないでください。 このボタンのクリック領域が小さすぎます。


やってはいけない方法
コンポーネントを完全に認識できないフォームを使用しないでください。 これらのボタンは、上のインセットと同じ形をしています。 このため、あるコンポーネントと別のコンポーネントを区別するのが難しくなります。

---

フォームの階層

フォームは、インターフェイスの重要な要素に注意を引き、コンポーネント間の関係を表示できます。

---

階層開発

ユニークな形

独自の形状を持つコンポーネントは、他の要素、周囲のコンテンツ、およびインターフェース全体で際立っています。 フォームはそれらの重要性を強調し、ユーザーの注意を引き付けます。


方法
コンポーネントの形状を周囲と対比させます。 このボタンの丸い形は、長方形の要素の背景に対して目立つようになっていますが、黒は白の背景と対照的です。


やってはいけない方法
同じ形状の要素は、他のものと区別するのがより困難です。 このボタンは、同じ形状の要素の中にあるため、気づきにくいです。

---

要素の関係

フォームを使用して要素を接続する

要素の形状は、ユーザーがどのように関連しているかを理解するのに役立ちます。

同じ要素

要素の同一の形式は、相互接続性と一般的な意味を示します。

関連アイテム

要素の一方が他方を補完しているが、その正確なコピーではない場合、この関係は形式で表現できます。 たとえば、形状の鋭い角は、関連する要素を指す矢印を表す場合があります。

無関係な要素

図を使用して、要素が互いに接続されていないことを強調し、個別に機能させることもできます。

方法 白い要素の丸い角は、紫色と関連付けられていないことを強調しています。	方法 ここでは、右下隅のボタンの形は、背後のアイテムに関連付けられていないことを示しています。

方法
カードの形状とサイズは、これらの要素が同じグループに属していることを示しています。


やってはいけない方法
要素が他の要素に関連付けられていない限り、ポインティングフォームを使用しないでください。 ここで、ダイアログボックスには背後のカードを指す形状があり、接続されているように見えます。

---

表現手段としての形

フォームはアイテムの状態を表示し、ブランドを認識できるようにします。

状態表示

フォームは、選択、データ処理結果など、さまざまな要素の状態を表示できます。

要素の相互作用

フォームを使用して要素の対話性を表示するには、ユーザーが要素を操作したときにフォームの変更を使用します。 たとえば、要素の形状を変更して、ユーザーにタッチした後にその選択を表示するか、アイコンで選択要素をマークします。

双方向性の欠如

要素がインタラクティブでない場合は、ユーザーがこの要素を操作できるとは思わないように、フォームを選択する必要があります。


方法
フォームの変更は、ユーザーの特定のアクション、または別の明白な理由に明確に関連する必要があります。 ここでは、要素の形状がスワイプ後に右に変化し、対応するインジケーターが要素の隅に表示されます。

やってはいけない方法 要素の状態を表示したい場合は、小さすぎる形式のインジケーターでこれを行わないでください。	やってはいけない方法 ただし、サイズを大きくしすぎないでください。 特大のインジケータ形状を使用します。

きちんと
場合によっては、要素の形式によってあいまいさが生じる可能性があります-この形式は状態を反映したものですか、それとも開発者の単なるチップですか？ ここでは、カードの曲がった角がそのようなあいまいさを作り出しています。 曲がった角が、カードが強調表示されているか、お気に入りに追加されていることを示しているかどうかは、ユーザーにはわかりにくい場合があります。 このあいまいさは、次のいずれかの方法で解決できます。

• カードの隅の変更を特定のユーザーアクションにバインドし、強調表示またはお気に入りに追加する
• 一般的に曲げシミュレーションを削除しますが、チップとして使用する場合は角の丸みを残します

方法 1つの状態を表示するには、1つのフォームを使用します。 ここの丸い角は、カードの選択を示しています。	きちんと さまざまなフォームを使用して1つの状態を表示するため、ユーザーが認識しにくくなります。

---

ブランド認知

フォームを使用したブランドスタイルの形成

フォームを他のカスタマイズオプション（たとえば、色やフォント）と組み合わせて使用​​して、ブランドの視覚的なスタイルを作成します。 繰り返しフォームを使用すると、ブランドをユニークで認識しやすくなります。 アプリケーションは、異なるコンポーネントに対して同様のフォームを持つフォームのセットを使用することもできます。 セット内の図形のスタイルは、ブランドのスタイルと一致する必要があります。

スタイル作成

フォームスタイルを作成するときは、次のことを避けてください。

• 双方向性のためのドイツ語
• あいまいな形式
• 使用困難

異なるスタイルを混在させると、フォームを製品やブランドに関連付けることが難しくなります。

使用の乱用

ブランドチップとして考えられていたフォームの使用頻度が高すぎると、そのような認識の程度が低下する可能性があります。


方法
フォームの賢明な使用は、製品の視覚的なスタイルを形作るのに役立ちます。 このアプリケーションは、そのロゴに基づいたフォームを使用します 。


方法
このアプリケーションは、ロゴの形に似たフォームを使用します。

きちんと 1つのフォームを頻繁に使用すると、認識に悪影響を及ぼします。	やってはいけない方法 アプリケーションのフォームセットの一部ではないフォームを使用しないでください。

---

動きのある形状

フォームは、コンテンツまたはユーザーアクションの変更の結果として変更される場合があります。

申込み

フォームの変更は、フォーム内のコンテンツの変更、状態の変更、またはユーザーアクションに応じて発生するイベントです。 たとえば、デバイスを水平位置に置くと、インターフェイス要素のサイズが変化し、形状が変化する可能性があります。

フォームを変更して、アプリケーションの視覚的なスタイルを維持したり、新しいオブジェクトのセットへの追加を反映したりすることもできます（ ノートトランスレーター：カードをシートに追加するなど ）。

フォームの動的な変更の主な理由：

• アイテムが画面に収まらない
• 妨げられた人間工学
• 要素の意味を変更する
• アプリケーションスタイルの不一致
• スナップ/別の要素に関連付ける

方法 インターフェイスの他の変更に応じて、フォームが変更される場合があります。 ボタンの切り抜きが下部パネルに動的に表示されます。	方法 アイテムには状態の変化が反映される場合があります。 このアプリケーションでは、角の丸みを維持しながら、カードを選択すると形状が動的に拡大します。

---

フォームの動的な変更

フォームを変更する

要素のサイズが変わると、その形状も変わります。 彼女は、画面上の現在の位置を維持できますが、同時に伸縮します。

---

寸法

方法
フォームは、変更時に元のサイズと位置を保持できます。 部品「B」は部品「A」に対して元のサイズと位置を保持し、部品「C」は引き伸ばされます。


方法
要素は、形状を維持するためにサイズ変更できます。 部分「A」の高さは、傾斜角を維持するために要素の幅に比例して変化します。

---

伸縮

フォームは、コンポーネントのサイズ変更に応じて伸縮できます。 変換では、元の形状の比率を維持する必要があります。


方法
この要素が伸びても、その独特の丸い角が元の寸法を保持するため、その形状は認識可能なままです。


やってはいけない方法
カットまたはストレッチ中に要素を変形させないでください。 この図の角は元の寸法を保持しませんが、ベースに比例して伸びます。

---

サイズ変更

反りを避けるために、フォームのサイズを変更するときは、フォームのアスペクト比を維持します。


方法
角の丸みの半径は、フォームのサイズに対する初期比率に従ってサイズを変更します。

---

別の形式への変換

形状は完全に異なるものに変更できます。


きちんと
形状をまったく同じに変更しますが、異なるパラメーターを使用すると、変換プロセス中にスムーズに見えます。 形状を元の形状と異なる形状に変更すると、変換プロセス中に奇妙に見えるか、とんでもないように見える場合があります。

---

コンテンツ表示

コンテンツの可視性

要素に含まれるすべてのコンテンツは、フォームを変更する場合でも、トリミングせずにユーザーに表示される必要があります。

方法 要素の形状は、コンテンツの変更に応じてサイズを変更する必要がありますが、元の認識は維持されます。	やってはいけない方法 フォームをコンテンツから分離しないでください。 このアプリケーションのパネル形式は、パネル自体とは別にボタンの誤った認識を作成します。

---

デフォルトのフォーム

デフォルトでは、マテリアルデザインスタイルのコンポーネントは長方形です。 彼らは他の何かに、そしてその逆に変換することができます。 たとえば、丸いボタンは長方形のメニューになり、反対の方向になります。

長方形の形状は、コンテンツをスクロールするための最大のスペースを提供し、画面上の他の形状と混合します。 その結果、要素はそのコンテンツに注意を払います。

標準フォームを使用して、ツールチップ（たとえば、展開アイコンと折りたたみアイコン）を追加して、変更方法を示すことができます。


方法
丸いボタンは長方形のメニューに変わり、コンテンツに最大のスペースを与えます。


やってはいけない方法
表示するコンテンツに適した展開可能な要素の形式を選択します。 この丸いメニューは、ボタンの形状を保持するため、コンテンツの認識を妨げます。


方法
リストを表示するための最大スペースは、丸い角を標準の直角に変換することで実現されます。

注意スパン

長方形の形状は他の長方形の形状と結合し、焦点を合わせることができます。


方法
ドロップダウンリストがアクティブな場合、最上層のシェイプは角の丸みを取り除き、他のシェイプの選択を減らし、ユーザーがフィルター設定に注意を集中できるようにします。

---

---

翻訳者の結論

まあ、それがすべてです。 おそらく、いくつかの瞬間が数回繰り返されていることに気づいたでしょう。これは事実です。 また、オリジナルにあるいくつかの非常に明白な繰り返しを削除しましたが、可能な限りソーステキストに従うようにしました。

このアプリケーションの使用経験をさらに向上させる方法について考えはありますか？ コメントであなたがそれについてどう思うかを読んでうれしいです！