web-dev-qa-db-ja.com

プレーンテキストのようにマテリアルデザインのフラットボタンを描画する理由はありますか?

MD仕様では、2種類のボタンがリストされています。

  1. フラットボタン
  2. 隆起ボタン

フラットボタンは通常、黒いテキストで表示され、クリックできない単純なテキストのように見えます(誰かにとって)。

それは悪いデザインパターンではありませんか?ボタンは常に単純なテキストから目立つ必要はありませんか?

enter image description here

8
Fez Vrasta

これは、例のコンテキストでは悪いデザインパターンです。テキストだけがスペースに浮かんでいるだけです。しかし、コンテキストでは、それはおそらく完全に有効なデザインパターンです。コントロールには独自のアフォーダンス(またはその欠如)がありますが、配置されたコンテキストに基づいてアフォーダンスも獲得(または喪失)します。

これが、パターンが使用される実際のページのコンテキストと比較して、パターンライブラリを構築することが課題である理由です。

6
DA01

それらは非常に悪いUXであり、マテリアルデザイン全体に反対する主な理由です。特定の質問に答え、なぜそうするのか:

浮き上がったボタンは、別のシートに置かれている材料のように動作します。ボタンを押すと、ボタンを押して色を塗ります。

素材にはフラットボタンがプリントされています。彼らは持ち上げませんが、プレスで色で塗りつぶします。

ボタンのテキストは、大文字が使用されている言語ではすべて大文字にする必要があります。大文字がない言語の場合は、フラットボタンに色付きのテキストを使用して、通常のテキストと区別できるようにすることを検討してください。

基本的に、まるでコンピューターが紙であるかのように、紙のコンセプトにこだわっています。さらに、隆起したボタンはさらに悪くなります。押した後のボタンの奥行きが深まり、これまでのほとんどのユーザビリティ調査と衝突します。

これはすべて言われていますが、リンクが黒である必要があることは正しくありません。画像はモノクロの例ですが、ボタンの色については、 マテリアルデザインの色のセクション に関連付ける必要があります。さらに、画像を撮った同じページから:

enter image description hereenter image description hereenter image description here

(などなど)

最後に、マテリアルデザインはガイドラインのセットであり、ある種の制限的な法律ではないことを思い出してください。たとえば、私はマテリアルデザインA LOTを使用しているため、スクリプトとスタイルシートの特定のマテリアルデザインセットを作成しました。私たちが行うことの1つは、マテリアルデザインの推奨事項とは正反対のボタンを使用することです。そして、それを追跡してテストしたところ、Googleの発言に関係なく、彼らが推奨するものよりもはるかにうまく機能しました。

要するに、グーグルが彼らがすることをする理由がある。それはあなたがそれに従わなければならないという意味ではありません

1
Devin

実際には、これらのボタンは一般的に目立ちます。これらは通常、対照的な色で表示され、すべて標準のテキストではなくすべて大文字で表示され、段落テキストとは別の場所に配置されています。 (これらのボタンは段落のコンテキストでは使用しません。)

この種のボタンの出現の背後にある理論は、ゲシュタルトの心理学から来ています。すべての文字を大文字にすると、長方形のような形になり、各文字の下と上が揃います。スタイルが異なり、コンテンツとは別に配置されていることは、それが異なる種類の要素であることを示しています。インタラクティブ性の色のヒント。

これは、これらの原則を使用する唯一の要素ではありません。リンクは、これらの種類の微妙なヒントに古くから依存しています。また、マテリアルデザインのテキストフィールドを見ると、線とラベル(またはヒントテキスト)を使用して、空のボックスに似た形で塗りつぶされていることがわかります。

0
Tin Man