web-dev-qa-db-ja.com

ボタンの幅を固定するか、テキストに比例しますか?

UIのベストプラクティスは何ですか?固定幅で同様のボタンをすべて作成するには、テキストの長さに関係なく(条件付き)フィット)または幅をテキストに比例させ、同じように追加しますパディング?

enter image description here

更新:

最小幅と柔軟な幅を提案するマテリアルデザインガイドラインの この例 も確認してください。

enter image description here

ダイアログボタンボタンの高さ:36 dpボタンの上余白:24 dpボタンのパディング:8 dpボタンの配置:LTRスクリプトの右端ボタンの幅:ボタンのテキストの長さによって異なります

enter image description here

これは一般的なルールですか?

17
Madalina Taina

私の意見では、ボタンが上下に重なっている場合は、幅を短くするために幅を短くしてみてください。あなたの例では、それは緑のオプションですが、「購読」ボタンのパディングが少なくなります。

ボタンが水平の場合、同じ幅にする必要はありません。

enter image description here

9
Alvaro

固定幅は画面の視覚的なバランスを与えるため、より良いオプションだと思います。強調するために異なるサイズが使用されることもあります。たとえば、同じレベルのボタンが大きいサイズのボタンがより注目されている可能性があります。

4
Dhiraj Pandagre

この問題について何度も調査を行った後、同じ幅のボタンがユーザーに何らかの影響を与えたり、決定に影響を与えたり、アクセシビリティを向上させたりするのに十分な理由はありませんでした。代わりに、推奨される高さを示唆する Material Design Guidance からの推奨を無視しないでください。

障害を持つユーザーが使いやすいようにするには、ボタンの高さを36 dpにし、タッチ可能なターゲットの高さを最低48 dpにします。」

enter image description here

3
Madalina Taina

マテリアルデザインガイドラインに記載されているボタンの一般的な最小幅であるMadalinaは重要です。これにより、非常に短いラベルであってもすべてのボタンをクリックまたはタップすることが合理的に簡単になります。といった OK。 「 フィッツの法則 」と考えてください。

同じ幅のボタンは見た目が美的に見栄えが良いかもしれませんが、使用の使いやすさの利点を示す研究はまだ見ていませんそれら。

0
JochenW

私が会社のために作成した設計システムでは、両方のタイプを組み合わせました。固定サイズのボタンは、モーダルウィンドウおよびポップアップでより適切に使用されます。それはユーザーにとってより美的で通常のことであり、「デザインパターン」のように振る舞います。 2つまたはボタンのグループがある場合は、どこでも固定サイズになります。この場合、幅は可能な限り長いテキストラベルによって計算されます。他のすべての場合では、パディング付きのボタンを使用します。 16px + TextLabel + 16px。

ボタンの幅を固定すると、インターフェースに一貫した側面が与えられます。ただし、ラベルが長くなる可能性のある他のボタンを処理できないリスクがあります。このため、固定されたガイドラインとの互換性がなくなります。

サイズ、色、パディングを操作することで、常に1つの特定のボタンを強調できます。

0
asiegf