web-dev-qa-db-ja.com

マテリアルデザインのフォームの送信ボタン

マテリアルデザインの送信ボタンの説明はありません。意味で最も近いのは フローティングアクションボタン です。ボタンは画面の上部にありますが、このフォームのソリューションでは意味がわかりません。ユーザーがフォームを上->下、左->右に入力し、ボタンの論理的な場所は右下隅であるためです。

右下にマテリアルボタンと通常のボタンを備えたモバイルアプリを作成しました。 material-design-buttonenter image description here

他の要素やアイコンを見るのではなく、オレンジ色のボタンの位置だけを見てください。

A/Bテストでそれらを比較します。ボタンの位置の変更のみがあり、2番目のバージョン(右下隅のボタン付き)が勝っていました。しかし、このバージョンは少し見苦しく、画面の下部がオーバーウェイトになっています。

このボタンをどうすればよいですか?

10
Timrael

マテリアルデザインのドキュメントは非常によく書かれていますが、驚くべき省略の1つはフォームの例がないことです。そうは言っても、あなたの問題は簡単に答えられます:

送信ボタンは、マテリアルデザインの他のボタンと同じです

送信ボタンの flat、raised、floating スタイルの選択は、フォームのコンテキストによって異なります。

  • たとえば、フォームがダイアログ内にある場合、それは 慣習 であるため、フラットボタンが適切です。

  • マテリアルデザインでは、フローティングボタンを使いすぎないでください。それらは適切であり、画面上で強調する1つの非常に明確で顕著なアクションがあります。フォーム送信ボタンはほとんどの場合、他の画面上の要素(フォームフィールド)に関連付けられ、それに依存しているため、フローティングボタンを使用してフォームを送信すると、ボタンと他のフォーム要素の間の重要な関係が壊れます。

その結果、隆起したボタンまたはフラットなボタンがほとんどのフォームに適しています。ダイアログではフラットな送信ボタンを使用し、通常のフォームでは発生した送信ボタンを使用します。これは最も一般的な方法だと思います。

ここにいくつかの例があります...左側の2つは Google's Android Documentation からのマテリアルテーマです。右はdevpenからのものです マテリアルデザインチュートリアル =。

enter image description here

8
tohster