ボタン内のアイコンのサイズ
テキスト付き/なしのボタン内のアイコンに使用する正しいサイズまたは相対サイズはありますか？
私はこれが何度も使用されているのを見てきましたが、適切なアイコンサイズを選択するための情報源は見つかりませんでした。
- アイコンはテキストと同じサイズにする必要がありますか？
- ユーザーが書いたものに集中できるように、それを小さくすべきですか？
- より直感的になり、テキストを読む必要性をなくし、テキストを補足情報としてのみ使用する場合は、さらに大きくする必要がありますか？
または、ボタン内のアイコンを使用するべきでしょうか？ Webまたはアプリで使用するこれらの仕様について話していることを覚えておいてください。
私が何かを見つけることができた唯一の情報源はGoogle Material Specsでしたが、それは中身よりもボタンのガイドラインについてです。
FABガイドラインでは、24dpアイコンですが、アイコンだけなので、これは別のユースケースです。
同じことがtabsにも当てはまりますが、ユースケースが異なります。
ボタンの用途はさまざまで、ステータスを示すこともできます。次に例を示します。
- 編集フォームを保存する
- 円形のアニメーションアイコンで現在の進捗状況を示します
- 一部のアクションをキャンセル
- CTAボタン
- その他...
現在、Googleのガイドラインに従って24dp（または24px）、これは方法ですか？または、フォントサイズを選択するときに考慮すべき他のことはありますか？
編集：コメントで示唆されているように、質問はあまり具体的ではないので、現在取り組んでいるこの問題に直面しているプロジェクトに当てはめるようにします。たとえば、カートにアイテムを追加する、カートからアイテムを削除する、チェックアウト、支払い方法、ウィッシュリスト、お気に入りなど、特定のアクションを実行するためのさまざまなボタンがたくさんあります。
製品の種類（食品および/または関連）と初期の調査により、次の2つの点が非常に明確になりました。
- ユーザーのほぼ100％が自宅からWeb /アプリにアクセスします。
- 70％強がタブレットやコンピュータからのアクセスを好むため、より大きな画面に集中できます。
これらのボタンはすべて、テキストとアイコンの組み合わせです。例については、下の画像を参照してください。
これらのボタンは、単独または製品カード内で使用されます。
アイコンは、アクションや機能の視覚的なメタファーとしてすぐに認識できるものです。ユーザーが意味に慣れると、テキストを読むよりも（適切な）シンボルをデコードするほうが速くなります。
その他の利点には、スペースの節約が含まれます。一部の関数は、特に特定の言語では、書き出したときに非常に冗長になる可能性があります。 （その点について、言語がロゴグラムで表現されている市場、たとえばマンダリン向けに設計している場合、ユーザーがそれらの文字を二重の役割を果たしていると見なしているかどうかを調査したいと思います。ただし、そのことについては無知です）。
ガイドラインに関する限り、マテリアル仕様など、言及されたOPなどの特定のものがある場合があります。一般に：
- 常にテキストによる代替または補足を提供します。アイコンの下のテキスト、ツールチップ、HTML要素のタイトル属性（INPUTタグで使用される画像のaltを除く）。これは視覚障害者にとって特に重要です。また、アプリやサイトをあまり使用しないユーザーにとっては、
- コレクション内のアイコンを一定のサイズに保つ
- シンプルなデザインが簡単で、使い慣れたアイコンの方が優れています
- パディングはアイコンを空間的に区別するのに十分でなければならず、目には心地よく見え、指に十分な大きさの別のターゲットを提供します。私は、ほとんどの場合、アイコンのサイズと同じ合計パディングを見つけました。 24px幅のアイコンは、両側に12pxがあります。
ここには正解も不正解もないと思います。 Googleマテリアルガイドラインは優れた詳細なものですが、それは非常に「Googleの」設計原則であり、必ずしも翻訳されているとは限りません。
たとえば、オプションを区別するための主要な方法としてアイコンを使用している場合は、それらを比較的大きく、おそらくテキストより大きくする必要があります。ここでは、iOSの下部のメニューバーが良い例です。
フォントサイズと比較すると、アイコンは比較的大きいです。 Facebookのユーザーは一般に常用ユーザーであるため、アイコンの意味を理解し、テキストはそれほど重要ではありません。新しいユーザーとして、はい、テキストを比較的簡単に読むことができますが、アイコンは主要なナビゲーションツールです。
テキスト対アイコンの古典的な例には、ハンバーガーメニューもあります。アイコンだけを使用するのか、テキスト付きのアイコンを使用するのか、およびどのようにラベルを付けるのかについて、多くのテストが行われています。 これは1つだけです 。結果-それは異なります。結果は状況によって異なるようです。
解決策は次の1つに帰着すると思います。
ユーザーはすでにアプリ/ウェブサイトに精通していますか？ほとんどがリピーターですか？もしそうなら、彼らはおそらくアイコンの意味を前もって「学習」し、アイコンをテキストよりも大きくすることができます（潜在的に）。
確かに他の要素が働いています。パディングなどについて話しているときは、ウェブサイトのスタイルガイドが役立つと思います。あなたがウェブサイトのフォントがすべて非常に小さく、使用するアイコンが大きい場合、それは本当にバランスを混乱させる可能性があります。
お役に立てば幸いです。