web-dev-qa-db-ja.com

マテリアルデザインのテキストフィールドを使用して長いラベルをどのように扱いますか?

enter image description here

フォームをマテリアルデザインガイドラインに変換する必要がありますが、MDは狭いフォームの長いラベルを処理する方法を考慮していないと思います。私の例でわかるように、私は3組のドロップダウンを持っていますが、元の形式ではうまく表示されますが、MDで問題が発生します。これにどう対処しますか?オプション2に傾いている、またはこのフォームにMDをまったく使用していない。

6
Mopo123

Selectの各ペアには、それらをバインドする親ラベルがあることが重要です。これの副次的な利点は、完全な行幅を提供することです。実際には複数の行に折り返されても、引き続き機能し、各グループの目的を説明できます。

enter image description here

3

オプション2は明確な選択です。

フィールドラベルは、最初からデータではなく、ラベルとして読み取る必要があります。オプション1と3では、選択を行う前のラベルはデータと区別できません。さらに、混乱、不必要な学習、および不安定感を回避するために、ラベルのスタイルと場所を維持することが重要です。

UI/UXデザイナーは、Googleのマテリアルガイドラインの多くの弱点を認識すると、ユーザーがガイドラインに精通していること、およびAndroid税関を考慮に入れる1つの要素として税関を考慮に入れることを可能にする効果的なデザインを自由に作成できます。その他のユーザビリティの考慮事項。

また、データを太字にし、ラベルを通常の重みにすることも検討してください。これにより、データが強調表示され、データのスキャンが容易になります。常に適切であるとは限りませんが、多くの場合それが適切であると思います。

2
Alan Coughlin

オプションの情報をグループ化し、迷惑な赤いアスタリスクを避けたほうがよいでしょう。ただし、選択ごとに「(オプション)」を繰り返す必要があるのはなぜですか。必須フィールドの後の単一の見出しの下にそれらをオプションとしてグループ化し、長いラベルの認知負荷と長さを減らします。

enter image description here

1
Eric Stoltz

ラベルはプレースホルダーと同じではありません。マテリアルデザインのフォームの例をご覧ください。ラベルのフォントサイズが小さくなり、1行に収めるのが簡単になります。

確かに、プレースホルダーは通常マテリアルデザインで同じであり、アニメーションでは、ユーザーがフィールドに入力したときにラベルとして表示されます。あなたの場合、レスポンシブなフォームを用意し、デザインラインに従うことがより重要であるため、例外を設けることができると思います。

フォントサイズが入力とラベルでどのように異なるかを以下に示します。

enter image description here

1
Madalina Taina

1stおよびrdオプションに関する懸念は

1)オプションを選択すると(またはフィールドにテキストを入力すると)、このフィールドの内容を示すラベルはありません。

2)入力フィールドにラベルがないため、フィールドに関する検証(必須のインジケーター*など)を表示する機会が失われます。

したがって、指定した3つのオプションのうち、2nd 1つが最良のオプションのようです。

0
gurvinder372

古いMDフォームと比較した新しいMDフォームは、VHSビデオテープと比較してBlu-rayのようなものだと思います。

新しいフォームが揺れるので、間違いなくそれにこだわると思います!

オプション3のほうがいいと思うのは、オプション2よりも大きなラベルを付けた場合、将来はどうなるでしょうか。

フォーム/ラベルの応答性を確認しましたか?

0
deemyBoy